diff --git a/tests/interactive/transitions.js b/tests/interactive/transitions.js new file mode 100644 index 000000000..7c8e0d30b --- /dev/null +++ b/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(); diff --git a/tests/testcommon/test.css b/tests/testcommon/test.css index 793399541..5e60254c3 100644 --- a/tests/testcommon/test.css +++ b/tests/testcommon/test.css @@ -71,4 +71,25 @@ stage { .vfade { -st-fade-offset: 68px; -} \ No newline at end of file +} + +#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; +}