tests: Add transition test

https://bugzilla.gnome.org/show_bug.cgi?id=658092

tests/interactive/transitions.js

@@ -0,0 +1,34 @@
+/* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */
+
+const Clutter = imports.gi.Clutter;
+const St = imports.gi.St;
+
+const UI = imports.testcommon.ui;
+
+UI.init();
+let stage = Clutter.Stage.get_default();
+
+let hbox = new St.BoxLayout({ name: 'transition-container',
+                              reactive: true,
+                              track_hover: true,
+                              width: stage.width,
+                              height: stage.height,
+                              style: 'padding: 10px;'
+                                     + 'spacing: 10px;' });
+stage.add_actor(hbox);
+
+for (let i = 0; i < 5; i ++) {
+    let label = new St.Label({ text: (i+1).toString(),
+                               name: "label" + i,
+                               style_class: 'transition-label',
+                               reactive: true,
+                               track_hover: true });
+
+    hbox.add(label, { x_fill: false,
+                      y_fill: false });
+}
+
+////////////////////////////////////////////////////////////////////////////////
+
+stage.show();
+Clutter.main();

tests/testcommon/test.css

@@ -71,4 +71,25 @@ stage {
 
 .vfade {
     -st-fade-offset: 68px;
-}
+}
+
+#transition-container .transition-label {
+    color: white;
+    width: 1em;
+    height: 1em;
+    padding: 1em;
+    background-color: #333;
+    border: 2px solid black;
+    border-radius: 8px;
+    transition-duration: 1000; /* One second */
+}
+
+#transition-container:hover .transition-label {
+    background-color: blue;
+    border: 2px solid red;
+}
+
+#transition-container .transition-label:hover {
+    background-color: green;
+    border: 2px solid blue;
+}