isa/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tests: Remove interactive tests

Browse Source 
The tests rely on the ability to run Clutter as stand-alone app,
which hasn't been possible for quite a while now. Event handling
was broken long before that, plus tests that need a human to run
them and evaluate the result aren't that useful to begin with.

It would be neat to test our CSS rendering by setting up a stage,
capturing it and comparing it to a reference image. But writing
some code that exercises backgrounds, borders etc. is hardly the
obstacle to make that happen, and not worth carrying around dead
code.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2811>
This commit is contained in:
Florian Müllner 2023-06-22 18:10:48 +02:00 committed by Marge Bot
parent e31672cc42
commit d1784fe312
24 changed files with 0 additions and 1571 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
tests/interactive/background-repeat.js
View File

@ -1,29 +0,0 @@
// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
const UI = imports.testcommon.ui;
const Clutter = imports.gi.Clutter;
const St = imports.gi.St;
function test() {
let stage = new Clutter.Stage({ width: 640, height: 480 });
UI.init(stage);
let vbox = new St.BoxLayout({ width: stage.width,
height: stage.height,
style: 'background: #ffee88;' });
stage.add_actor(vbox);
let scroll = new St.ScrollView();
vbox.add(scroll, { expand: true });
let box = new St.BoxLayout({ vertical: true });
scroll.add_actor(box);
let contents = new St.Widget({ width: 1000, height: 1000,
style_class: 'background-image background-repeat' });
box.add_actor(contents);
UI.main(stage);
}
test();

85
tests/interactive/background-size.js
View File

@ -1,85 +0,0 @@
// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
const UI = imports.testcommon.ui;
const Cogl = imports.gi.Cogl;
const Clutter = imports.gi.Clutter;
const Meta = imports.gi.Meta;
const St = imports.gi.St;
function test() {
Meta.init();
let stage = global.backend.get_stage();
UI.init(stage);
let vbox = new St.BoxLayout({ style: 'background: #ffee88;' });
vbox.add_constraint(new Clutter.BindConstraint({ source: stage,
coordinate: Clutter.BindCoordinate.SIZE }));
stage.add_actor(vbox);
let scroll = new St.ScrollView();
vbox.add(scroll, { expand: true });
vbox = new St.BoxLayout({ vertical: true,
style: 'padding: 10px;'
+ 'spacing: 20px;' });
scroll.add_actor(vbox);
let tbox = null;
function addTestCase(image, size, backgroundSize, useCairo) {
let obin = new St.Bin({ style: 'border: 3px solid green;' });
tbox.add(obin);
let [width, height] = size;
let bin = new St.Bin({ style_class: 'background-image-' + image,
width: width,
height: height,
style: `${useCairo
? 'border: 1px solid transparent;' : ''
} background-size: ${backgroundSize};`,
x_fill: true,
y_fill: true
});
obin.set_child(bin);
bin.set_child(new St.Label({ text: backgroundSize + (useCairo ? ' (cairo)' : ' (cogl)'),
style: 'font-size: 15px;'
+ 'text-align: center;'
}));
}
function addTestLine(image, size) {
const backgroundSizes = ["auto", "contain", "cover", "200px 200px", "100px 100px", "100px 200px"];
let [width, height] = size;
vbox.add(new St.Label({ text: image + '.svg / ' + width + '×' + height,
style: 'font-size: 15px;'
+ 'text-align: center;'
}));
tbox = new St.BoxLayout({ style: 'spacing: 20px;' });
vbox.add(tbox);
for (let s of backgroundSizes)
addTestCase(image, size, s, false);
for (let s of backgroundSizes)
addTestCase(image, size, s, true);
}
function addTestImage(image) {
const containerSizes = [[100, 100], [200, 200], [250, 250], [100, 250], [250, 100]];
for (let size of containerSizes)
addTestLine(image, size);
}
addTestImage ('200-200');
addTestImage ('200-100');
addTestImage ('100-200');
UI.main(stage);
}
test();

62
tests/interactive/border-radius.js
View File

@ -1,62 +0,0 @@
// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
const UI = imports.testcommon.ui;
const Clutter = imports.gi.Clutter;
const St = imports.gi.St;
function test() {
let stage = new Clutter.Stage({ width: 640, height: 480 });
UI.init(stage);
let vbox = new St.BoxLayout({ width: stage.width,
height: stage.height,
style: 'background: #ffee88;' });
stage.add_actor(vbox);
let scroll = new St.ScrollView();
vbox.add(scroll, { expand: true });
let box = new St.BoxLayout({ vertical: true,
style: 'padding: 10px;'
+ 'spacing: 20px;' });
scroll.add_actor(box);
function addTestCase(radii, useGradient) {
let background;
if (useGradient)
background = 'background-gradient-direction: vertical;'
+ 'background-gradient-start: white;'
+ 'background-gradient-end: gray;';
else
background = 'background: white;';
box.add(new St.Label({ text: "border-radius: " + radii + ";",
style: 'border: 1px solid black; '
+ 'border-radius: ' + radii + ';'
+ 'padding: 5px;' + background }),
{ x_fill: false });
}
// uniform backgrounds
addTestCase(" 0px 5px 10px 15px", false);
addTestCase(" 5px 10px 15px 0px", false);
addTestCase("10px 15px 0px 5px", false);
addTestCase("15px 0px 5px 10px", false);
// gradient backgrounds
addTestCase(" 0px 5px 10px 15px", true);
addTestCase(" 5px 10px 15px 0px", true);
addTestCase("10px 15px 0px 5px", true);
addTestCase("15px 0px 5px 10px", true);
// border-radius reduction
// these should all take the cairo fallback,
// so don't bother testing w/ or w/out gradients.
addTestCase("200px 200px 200px 200px", false);
addTestCase("200px 200px 0px 200px", false);
addTestCase("999px 0px 999px 0px", false);
UI.main(stage);
}
test();

59
tests/interactive/border-width.js
View File

@ -1,59 +0,0 @@
// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
const UI = imports.testcommon.ui;
const Clutter = imports.gi.Clutter;
const St = imports.gi.St;
function test() {
let stage = new Clutter.Stage({ width: 640, height: 480 });
UI.init(stage);
let vbox = new St.BoxLayout({ width: stage.width,
height: stage.height,
style: 'padding: 10px; background: #ffee88;'
});
stage.add_actor(vbox);
let scroll = new St.ScrollView();
vbox.add(scroll, { expand: true });
let box = new St.BoxLayout({ vertical: true,
style: 'spacing: 20px;' });
scroll.add_actor(box);
function addTestCase(borders, useGradient) {
let background;
if (useGradient)
background = 'background-gradient-direction: vertical;'
+ 'background-gradient-start: white;'
+ 'background-gradient-end: gray;';
else
background = 'background: white;';
let border_style = "border-top: " + borders[St.Side.TOP] + " solid black;\n" +
"border-right: " + borders[St.Side.RIGHT] + " solid black;\n" +
"border-bottom: " + borders[St.Side.BOTTOM] + " solid black;\n" +
"border-left: " + borders[St.Side.LEFT] + " solid black;";
box.add(new St.Label({ text: border_style,
style: border_style
+ 'border-radius: 0px 5px 15px 25px;'
+ 'padding: 5px;' + background }),
{ x_fill: false });
}
// uniform backgrounds
addTestCase([" 0px", " 5px", "10px", "15px"], false);
addTestCase([" 5px", "10px", "15px", " 0px"], false);
addTestCase(["10px", "15px", " 0px", " 5px"], false);
addTestCase(["15px", " 0px", " 5px", "10px"], false);
// gradient backgrounds
addTestCase([" 0px", " 5px", "10px", "15px"], true);
addTestCase([" 5px", "10px", "15px", " 0px"], true);
addTestCase(["10px", "15px", " 0px", " 5px"], true);
addTestCase(["15px", " 0px", " 5px", "10px"], true);
UI.main(stage);
}
test();

134
tests/interactive/borders.js
View File

@ -1,134 +0,0 @@
// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
const UI = imports.testcommon.ui;
const Clutter = imports.gi.Clutter;
const St = imports.gi.St;
function test() {
let stage = new Clutter.Stage({ width: 640, height: 480 });
UI.init(stage);
let vbox = new St.BoxLayout({ width: stage.width,
height: stage.height,
style: 'background: #ffee88;' });
stage.add_actor(vbox);
let scroll = new St.ScrollView();
vbox.add(scroll, { expand: true });
let box = new St.BoxLayout({ vertical: true,
style: 'padding: 10px;'
+ 'spacing: 20px;' });
scroll.add_actor(box);
box.add(new St.Label({ text: "Hello World",
style: 'border: 1px solid black; '
+ 'padding: 5px;' }));
box.add(new St.Label({ text: "Hello Round World",
style: 'border: 3px solid green; '
+ 'border-radius: 8px; '
+ 'padding: 5px;' }));
box.add(new St.Label({ text: "Hello Background",
style: 'border: 3px solid green; '
+ 'border-radius: 8px; '
+ 'background: white; '
+ 'padding: 5px;' }));
box.add(new St.Label({ text: "Hello Translucent Black Border",
style: 'border: 3px solid rgba(0, 0, 0, 0.4); '
+ 'background: white; ' }));
box.add(new St.Label({ text: "Hello Translucent Background",
style: 'background: rgba(255, 255, 255, 0.3);' }));
box.add(new St.Label({ text: "Border, Padding, Content: 20px" }));
let b1 = new St.BoxLayout({ vertical: true,
style: 'border: 20px solid black; '
+ 'background: white; '
+ 'padding: 20px;' });
box.add(b1);
b1.add(new St.BoxLayout({ width: 20, height: 20,
style: 'background: black' }));
box.add(new St.Label({ text: "Translucent big blue border, with rounding",
style: 'border: 20px solid rgba(0, 0, 255, 0.2); '
+ 'border-radius: 10px; '
+ 'background: white; '
+ 'padding: 10px;' }));
box.add(new St.Label({ text: "Transparent border",
style: 'border: 20px solid transparent; '
+ 'background: white; '
+ 'padding: 10px;' }));
box.add(new St.Label({ text: "Border Image",
style_class: "border-image",
style: "padding: 10px;" }));
box.add(new St.Label({ text: "Border Image with Gradient",
style_class: 'border-image-with-background-gradient',
style: "padding: 10px;"
+ 'background-gradient-direction: vertical;' }));
box.add(new St.Label({ text: "Rounded, framed, shadowed gradients" }));
let framedGradients = new St.BoxLayout({ vertical: false,
style: 'padding: 10px; spacing: 12px;' });
box.add(framedGradients);
function addGradientCase(direction, borderWidth, borderRadius, extra) {
let gradientBox = new St.BoxLayout({ style_class: 'background-gradient',
style: 'border: ' + borderWidth + 'px solid #8b0000;'
+ 'border-radius: ' + borderRadius + 'px;'
+ 'background-gradient-direction: ' + direction + ';'
+ 'width: 32px;'
+ 'height: 32px;'
+ extra });
framedGradients.add(gradientBox, { x_fill: false, y_fill: false } );
}
addGradientCase ('horizontal', 0, 5, 'box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);');
addGradientCase ('horizontal', 2, 5, 'box-shadow: 0px 2px 0px 0px rgba(0,255,0,0.5);');
addGradientCase ('horizontal', 5, 2, 'box-shadow: 2px 0px 0px 0px rgba(0,0,255,0.5);');
addGradientCase ('horizontal', 5, 20, 'box-shadow: 0px 0px 4px 0px rgba(255,0,0,0.5);');
addGradientCase ('vertical', 0, 5, 'box-shadow: 0px 0px 0px 4px rgba(0,0,0,0.5);');
addGradientCase ('vertical', 2, 5, 'box-shadow: 0px 0px 4px 4px rgba(0,0,0,0.5);');
addGradientCase ('vertical', 5, 2, 'box-shadow: -2px -2px 6px 0px rgba(0,0,0,0.5);');
addGradientCase ('vertical', 5, 20, 'box-shadow: -2px -2px 0px 6px rgba(0,0,0,0.5);');
box.add(new St.Label({ text: "Rounded, framed, shadowed images" }));
let framedImages = new St.BoxLayout({ vertical: false,
style: 'padding: 10px; spacing: 6px;' });
box.add(framedImages);
function addBackgroundImageCase(borderWidth, borderRadius, width, height, extra) {
let imageBox = new St.BoxLayout({ style_class: 'background-image',
style: 'border: ' + borderWidth + 'px solid #8b8b8b;'
+ 'border-radius: ' + borderRadius + 'px;'
+ 'width: ' + width + 'px;'
+ 'height: ' + height + 'px;'
+ extra });
framedImages.add(imageBox, { x_fill: false, y_fill: false } );
}
addBackgroundImageCase (0, 0, 32, 32, 'background-position: 2px 5px');
addBackgroundImageCase (0, 0, 16, 16, '-st-background-image-shadow: 1px 1px 4px 0px rgba(0,0,0,0.5); background-color: rgba(0,0,0,0)');
addBackgroundImageCase (0, 5, 32, 32, '-st-background-image-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);');
addBackgroundImageCase (2, 5, 32, 32, '-st-background-image-shadow: 0px 2px 0px 0px rgba(0,255,0,0.5);');
addBackgroundImageCase (5, 2, 32, 32, '-st-background-image-shadow: 2px 0px 0px 0px rgba(0,0,255,0.5);');
addBackgroundImageCase (5, 20, 32, 32, '-st-background-image-shadow: 0px 0px 4px 0px rgba(255,0,0,0.5);');
addBackgroundImageCase (0, 5, 48, 48, '-st-background-image-shadow: 0px 0px 0px 4px rgba(0,0,0,0.5);');
addBackgroundImageCase (5, 5, 48, 48, '-st-background-image-shadow: 0px 0px 4px 4px rgba(0,0,0,0.5);');
addBackgroundImageCase (0, 5, 64, 64, '-st-background-image-shadow: -2px -2px 6px 0px rgba(0,0,0,0.5);');
addBackgroundImageCase (5, 5, 64, 64, '-st-background-image-shadow: -2px -2px 0px 6px rgba(0,0,0,0.5);');
addBackgroundImageCase (0, 5, 32, 32, 'background-position: 2px 5px');
UI.main(stage);
}
test();

86
tests/interactive/box-layout.js
View File

@ -1,86 +0,0 @@
// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
const UI = imports.testcommon.ui;
const Clutter = imports.gi.Clutter;
const St = imports.gi.St;
function test() {
let stage = new Clutter.Stage();
UI.init(stage);
let vbox = new St.BoxLayout({ vertical: true,
width: stage.width,
height: stage.height,
style: 'padding: 10px;'
+ 'spacing: 10px;' });
stage.add_actor(vbox);
////////////////////////////////////////////////////////////////////////////////
let colored_boxes = new St.BoxLayout({ vertical: true,
width: 200,
height: 200,
style: 'border: 2px solid black;' });
vbox.add(colored_boxes, { x_fill: false,
x_align: St.Align.MIDDLE });
let b2 = new St.BoxLayout({ style: 'border: 2px solid #666666' });
colored_boxes.add(b2, { expand: true });
b2.add(new St.Label({ text: "Expand",
style: 'border: 1px solid #aaaaaa; '
+ 'background: #ffeecc' }),
{ expand: true });
b2.add(new St.Label({ text: "Expand\nNo Fill",
style: 'border: 1px solid #aaaaaa; '
+ 'background: #ccffaa' }),
{ expand: true,
x_fill: false,
x_align: St.Align.MIDDLE,
y_fill: false,
y_align: St.Align.MIDDLE });
colored_boxes.add(new St.Label({ text: "Default",
style: 'border: 1px solid #aaaaaa; '
+ 'background: #cceeff' }));
////////////////////////////////////////////////////////////////////////////////
function createCollapsableBox(width) {
let b = new St.BoxLayout({ width: width,
style: 'border: 1px solid black;'
+ 'font: 13px Sans;' });
b.add(new St.Label({ text: "Very Very Very Long",
style: 'background: #ffaacc;'
+ 'padding: 5px; '
+ 'border: 1px solid #666666;' }),
{ expand: true });
b.add(new St.Label({ text: "Very Very Long",
style: 'background: #ffeecc; '
+ 'padding: 5px; '
+ 'border: 1px solid #666666;' }),
{ expand: true });
b.add(new St.Label({ text: "Very Long",
style: 'background: #ccffaa; '
+ 'padding: 5px; '
+ 'border: 1px solid #666666;' }),
{ expand: true });
b.add(new St.Label({ text: "Short",
style: 'background: #cceeff; '
+ 'padding: 5px; '
+ 'border: 1px solid #666666;' }),
{ expand: true });
return b;
}
for (let width = 200; width <= 500; width += 60 ) {
vbox.add(createCollapsableBox (width),
{ x_fill: false,
x_align: St.Align.MIDDLE });
}
UI.main(stage);
}
test();

82
tests/interactive/box-shadow-animated.js
View File

@ -1,82 +0,0 @@
// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
const UI = imports.testcommon.ui;
const Clutter = imports.gi.Clutter;
const GLib = imports.gi.GLib;
const St = imports.gi.St;
const DELAY = 2000;
function resize_animated(label) {
if (label.width == 100) {
label.save_easing_state();
label.set_easing_mode(Clutter.AnimationMode.EASE_OUT_QUAD);
label.set_easing_duration(DELAY - 50);
label.set_size(500, 500);
label.restore_easing_state();
} else {
label.save_easing_state();
label.set_easing_mode(Clutter.AnimationMode.EASE_OUT_QUAD);
label.set_easing_duration(DELAY - 50);
label.set_size(100, 100);
label.restore_easing_state();
}
}
function get_css_style(shadow_style)
{
return 'border: 20px solid black;' +
'border-radius: 20px;' +
'background-color: white; ' +
'padding: 5px;' + shadow_style;
}
function test() {
let stage = new Clutter.Stage({ width: 1000, height: 600 });
UI.init(stage);
let iter = 0;
let shadowStyles = [ 'box-shadow: 3px 50px 0px 4px rgba(0,0,0,0.5);',
'box-shadow: 3px 4px 10px 4px rgba(0,0,0,0.5);',
'box-shadow: 0px 50px 0px 0px rgba(0,0,0,0.5);',
'box-shadow: 100px 100px 20px 4px rgba(0,0,0,0.5);'];
let label1 = new St.Label({ style: get_css_style(shadowStyles[iter]),
text: shadowStyles[iter],
x: 20,
y: 20,
width: 100,
height: 100
});
stage.add_actor(label1);
let label2 = new St.Label({ style: get_css_style(shadowStyles[iter]),
text: shadowStyles[iter],
x: 500,
y: 20,
width: 100,
height: 100
});
stage.add_actor(label2);
resize_animated(label1);
resize_animated(label2);
GLib.timeout_add(GLib.PRIORITY_DEFAULT, DELAY, () => {
log(label1 + label1.get_size());
resize_animated(label1);
resize_animated(label2);
return true;
});
GLib.timeout_add(GLib.PRIORITY_DEFAULT, 2 * DELAY, () => {
iter += 1;
iter %= shadowStyles.length;
label1.set_style(get_css_style(shadowStyles[iter]));
label1.set_text(shadowStyles[iter]);
label2.set_style(get_css_style(shadowStyles[iter]));
label2.set_text(shadowStyles[iter]);
return true;
});
UI.main(stage);
}
test();

57
tests/interactive/box-shadows.js
View File

@ -1,57 +0,0 @@
// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
const UI = imports.testcommon.ui;
const Clutter = imports.gi.Clutter;
const St = imports.gi.St;
function test() {
let stage = new Clutter.Stage({ width: 640, height: 480 });
UI.init(stage);
let vbox = new St.BoxLayout({ width: stage.width,
height: stage.height,
style: 'background: #ffee88;' });
stage.add_actor(vbox);
let scroll = new St.ScrollView();
vbox.add(scroll, { expand: true });
let box = new St.BoxLayout({ vertical: true,
style: 'padding: 10px;'
+ 'spacing: 20px;' });
scroll.add_actor(box);
function addTestCase(inset, offsetX, offsetY, blur, spread) {
let shadowStyle = 'box-shadow: ' + (inset ? 'inset ' : '') +
offsetX + 'px ' + offsetY + 'px ' + blur + 'px ' +
(spread > 0 ? (' ' + spread + 'px ') : '') +
'rgba(0,0,0,0.5);';
let label = new St.Label({ style: 'border: 4px solid black;' +
'border-radius: 5px;' +
'background-color: white; ' +
'padding: 5px;' +
shadowStyle,
text: shadowStyle });
box.add(label, { x_fill: false, y_fill: false } );
}
addTestCase (false, 3, 4, 0, 0);
addTestCase (false, 3, 4, 0, 4);
addTestCase (false, 3, 4, 4, 0);
addTestCase (false, 3, 4, 4, 4);
addTestCase (false, -3, -4, 4, 0);
addTestCase (false, 0, 0, 0, 4);
addTestCase (false, 0, 0, 4, 0);
addTestCase (true, 3, 4, 0, 0);
addTestCase (true, 3, 4, 0, 4);
addTestCase (true, 3, 4, 4, 0);
addTestCase (true, 3, 4, 4, 4);
addTestCase (true, -3, -4, 4, 0);
addTestCase (true, 0, 0, 0, 4);
addTestCase (true, 0, 0, 4, 0);
UI.main(stage);
}
test();

29
tests/interactive/calendar.js
View File

@ -1,29 +0,0 @@
// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
const UI = imports.testcommon.ui;
const Clutter = imports.gi.Clutter;
const St = imports.gi.St;
function test() {
let stage = new Clutter.Stage({ width: 400, height: 400 });
UI.init(stage);
let vbox = new St.BoxLayout({ vertical: true,
width: stage.width,
height: stage.height,
style: 'padding: 10px; spacing: 10px; font: 15px sans-serif;' });
stage.add_actor(vbox);
// Calendar can only be imported after Environment.init()
const Calendar = imports.ui.calendar;
let calendar = new Calendar.Calendar();
vbox.add(calendar,
{ expand: true,
x_fill: false, x_align: St.Align.MIDDLE,
y_fill: false, y_align: St.Align.START });
calendar.setEventSource(new Calendar.EmptyEventSource());
UI.main(stage);
}
test();

41
tests/interactive/css-fonts.js
View File

@ -1,41 +0,0 @@
// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
const UI = imports.testcommon.ui;
const Clutter = imports.gi.Clutter;
const St = imports.gi.St;
function test() {
let stage = new Clutter.Stage();
UI.init(stage);
let b = new St.BoxLayout({ vertical: true,
width: stage.width,
height: stage.height });
stage.add_actor(b);
let t;
t = new St.Label({ "text": "Bold", style_class: "bold" });
b.add(t);
t = new St.Label({ "text": "Monospace", style_class: "monospace" });
b.add(t);
t = new St.Label({ "text": "Italic", style_class: "italic" });
b.add(t);
t = new St.Label({ "text": "Bold Italic", style_class: "bold italic" });
b.add(t);
t = new St.Label({ "text": "Big Italic", style_class: "big italic" });
b.add(t);
t = new St.Label({ "text": "Big Bold", style_class: "big bold" });
b.add(t);
let b2 = new St.BoxLayout({ vertical: true, style_class: "monospace" });
b.add(b2);
t = new St.Label({ "text": "Big Monospace", style_class: "big" });
b2.add(t);
t = new St.Label({ "text": "Italic Monospace", style_class: "italic" });
b2.add(t);
UI.main(stage);
}
test();

59
tests/interactive/entry.js
View File

@ -1,59 +0,0 @@
// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
const UI = imports.testcommon.ui;
const Clutter = imports.gi.Clutter;
const GLib = imports.gi.GLib;
const St = imports.gi.St;
function test() {
let stage = new Clutter.Stage({ width: 400, height: 400 });
UI.init(stage);
let vbox = new St.BoxLayout({ vertical: true,
width: stage.width,
height: stage.height,
style: 'padding: 10px; spacing: 10px; font: 32px sans-serif;' });
stage.add_actor(vbox);
let entry = new St.Entry({ style: 'border: 1px solid black; text-shadow: 0 2px red;',
text: 'Example text' });
vbox.add(entry,
{ expand: true,
y_fill: false, y_align: St.Align.MIDDLE });
entry.grab_key_focus();
let entryTextHint = new St.Entry({ style: 'border: 1px solid black; text-shadow: 0 2px red;',
hint_text: 'Hint text' });
vbox.add(entryTextHint,
{ expand: true,
y_fill: false, y_align: St.Align.MIDDLE });
let hintActor = new St.Label({ text: 'Hint actor' });
let entryHintActor = new St.Entry({ style: 'border: 1px solid black; text-shadow: 0 2px red;',
hint_actor: hintActor });
vbox.add(entryHintActor,
{ expand: true,
y_fill: false, y_align: St.Align.MIDDLE });
let hintActor2 = new St.Label({ text: 'Hint both (actor)' });
let entryHintBoth = new St.Entry({ style: 'border: 1px solid black; text-shadow: 0 2px red;',
hint_actor: hintActor2 });
let idx = 0;
GLib.timeout_add_seconds(GLib.PRIORITY_DEFAULT, 1, function() {
idx++;
if (idx % 2 == 0)
entryHintBoth.hint_actor = hintActor2;
else
entryHintBoth.hint_text = 'Hint both (text)';
return true;
});
vbox.add(entryHintBoth,
{ expand: true,
y_fill: false, y_align: St.Align.MIDDLE });
UI.main(stage);
}
test();

80
tests/interactive/icons.js
View File

@ -1,80 +0,0 @@
// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
const UI = imports.testcommon.ui;
const Clutter = imports.gi.Clutter;
const St = imports.gi.St;
function test() {
let stage = new Clutter.Stage();
UI.init(stage);
let b = new St.BoxLayout({ vertical: true,
width: stage.width,
height: stage.height });
stage.add_actor(b);
function addTest(label, icon_props) {
if (b.get_children().length > 0)
b.add (new St.BoxLayout({ style: 'background: #cccccc; border: 10px transparent white; height: 1px; ' }));
let hb = new St.BoxLayout({ vertical: false,
style: 'spacing: 10px;' });
hb.add(new St.Label({ text: label }), { y_fill: false });
hb.add(new St.Icon(icon_props));
b.add(hb);
}
addTest("Symbolic",
{ icon_name: 'battery-full-symbolic',
icon_size: 48 });
addTest("Full color",
{ icon_name: 'battery-full',
icon_size: 48 });
addTest("Default size",
{ icon_name: 'battery-full-symbolic' });
addTest("Size set by property",
{ icon_name: 'battery-full-symbolic',
icon_size: 32 });
addTest("Size set by style",
{ icon_name: 'battery-full-symbolic',
style: 'icon-size: 1em;' });
addTest("16px icon in 48px icon widget",
{ icon_name: 'battery-full-symbolic',
style: 'icon-size: 16px; width: 48px; height: 48px; border: 1px solid black;' });
function iconRow(icons, box_style) {
let hb = new St.BoxLayout({ vertical: false, style: box_style });
for (let iconName of icons) {
hb.add(new St.Icon({ icon_name: iconName,
icon_size: 48 }));
}
b.add(hb);
}
let normalCss = 'background: white; color: black; padding: 10px 10px;';
let reversedCss = 'background: black; color: white; warning-color: #ffcc00; error-color: #ff0000; padding: 10px 10px;';
let batteryIcons = ['battery-full-charging-symbolic',
'battery-full-symbolic',
'battery-good-symbolic',
'battery-low-symbolic',
'battery-caution-symbolic' ];
let volumeIcons = ['audio-volume-high-symbolic',
'audio-volume-medium-symbolic',
'audio-volume-low-symbolic',
'audio-volume-muted-symbolic' ];
iconRow(batteryIcons, normalCss);
iconRow(batteryIcons, reversedCss);
iconRow(volumeIcons, normalCss);
iconRow(volumeIcons, reversedCss);
UI.main(stage);
}
test();

47
tests/interactive/inline-style.js
View File

@ -1,47 +0,0 @@
// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
const UI = imports.testcommon.ui;
const Clutter = imports.gi.Clutter;
const St = imports.gi.St;
function test() {
let stage = new Clutter.Stage();
UI.init(stage);
let vbox = new St.BoxLayout({ vertical: true,
width: stage.width,
height: stage.height });
stage.add_actor(vbox);
let hbox = new St.BoxLayout({ style: 'spacing: 12px;' });
vbox.add(hbox);
let text = new St.Label({ text: "Styled Text" });
vbox.add (text);
let size = 24;
function update_size() {
text.style = 'font-size: ' + size + 'pt';
}
update_size();
let button;
button = new St.Button ({ label: 'Smaller', style_class: 'push-button' });
hbox.add (button);
button.connect('clicked', () => {
size /= 1.2;
update_size ();
});
button = new St.Button ({ label: 'Bigger', style_class: 'push-button' });
hbox.add (button);
button.connect('clicked', () => {
size *= 1.2;
update_size ();
});
UI.main(stage);
}
test();

398
tests/interactive/scroll-view-sizing.js
View File

@ -1,398 +0,0 @@
// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
const UI = imports.testcommon.ui;
const Clutter = imports.gi.Clutter;
const GObject = imports.gi.GObject;
const Shell = imports.gi.Shell;
const St = imports.gi.St;
// This is an interactive test of the sizing behavior of StScrollView. It
// may be interesting in the future to split out the two classes at the
// top into utility classes for testing the sizing behavior of other
// containers and actors.
/****************************************************************************/
// FlowedBoxes: This is a simple actor that demonstrates an interesting
// height-for-width behavior. A set of boxes of different sizes are line-wrapped
// horizontally with the minimum horizontal size being determined by the
// largest box. It would be easy to extend this to allow doing vertical
// wrapping instead, if you wanted to see just how badly our width-for-height
// implementation is or work on fixing it.
const BOX_HEIGHT = 20;
const BOX_WIDTHS = [
10, 40, 100, 20, 60, 30, 70, 10, 20, 200, 50, 70, 90, 20, 40,
10, 40, 100, 20, 60, 30, 70, 10, 20, 200, 50, 70, 90, 20, 40,
10, 40, 100, 20, 60, 30, 70, 10, 20, 200, 50, 70, 90, 20, 40,
10, 40, 100, 20, 60, 30, 70, 10, 20, 200, 50, 70, 90, 20, 40,
];
const SPACING = 10;
var FlowedBoxes = GObject.registerClass(
class FlowedBoxes extends St.Widget {
_init() {
super._init();
for (let i = 0; i < BOX_WIDTHS.length; i++) {
let child = new St.Bin({ width: BOX_WIDTHS[i], height: BOX_HEIGHT,
style: 'border: 1px solid #444444; background: #00aa44' });
this.add_actor(child);
}
}
vfunc_get_preferred_width(forHeight) {
let children = this.get_children();
let maxMinWidth = 0;
let totalNaturalWidth = 0;
for (let i = 0; i < children.length; i++) {
let child = children[i];
let [minWidth, naturalWidth] = child.get_preferred_width(-1);
maxMinWidth = Math.max(maxMinWidth, minWidth);
if (i != 0)
totalNaturalWidth += SPACING;
totalNaturalWidth += naturalWidth;
}
return [maxMinWidth, totalNaturalWidth];
}
_layoutChildren(forWidth, callback) {
let children = this.get_children();
let x = 0;
let y = 0;
for (let i = 0; i < children.length; i++) {
let child = children[i];
let [minWidth, naturalWidth] = child.get_preferred_width(-1);
let [minHeight, naturalHeight] = child.get_preferred_height(naturalWidth);
let x1 = x;
if (x != 0)
x1 += SPACING;
let x2 = x1 + naturalWidth;
if (x2 > forWidth) {
if (x > 0) {
x1 = 0;
y += BOX_HEIGHT + SPACING;
}
x2 = naturalWidth;
}
callback(child, x1, y, x2, y + naturalHeight);
x = x2;
}
}
vfunc_get_preferred_height(forWidth) {
let height = 0;
this._layoutChildren(forWidth,
function(child, x1, y1, x2, y2) {
height = Math.max(height, y2);
});
return [height, height];
}
vfunc_allocate(box) {
this.set_allocation(box);
this._layoutChildren(box.x2 - box.x1,
function(child, x1, y1, x2, y2) {
child.allocate(new Clutter.ActorBox({ x1: x1, y1: y1, x2: x2, y2: y2 }));
});
}
});
/****************************************************************************/
// SizingIllustrator: this is a container that allows interactively exploring
// the sizing behavior of the child. Lines are drawn to indicate the minimum
// and natural size of the child, and a drag handle allows the user to resize
// the child interactively and see how that affects it.
//
// This is currently only written for the case where the child is height-for-width
var SizingIllustrator = GObject.registerClass(
class SizingIllustrator extends St.Widget {
_init() {
super._init();
this.minWidthLine = new St.Bin({ style: 'background: red' });
this.add_actor(this.minWidthLine);
this.minHeightLine = new St.Bin({ style: 'background: red' });
this.add_actor(this.minHeightLine);
this.naturalWidthLine = new St.Bin({ style: 'background: #4444ff' });
this.add_actor(this.naturalWidthLine);
this.naturalHeightLine = new St.Bin({ style: 'background: #4444ff' });
this.add_actor(this.naturalHeightLine);
this.currentWidthLine = new St.Bin({ style: 'background: #aaaaaa' });
this.add_actor(this.currentWidthLine);
this.currentHeightLine = new St.Bin({ style: 'background: #aaaaaa' });
this.add_actor(this.currentHeightLine);
this.handle = new St.Bin({ style: 'background: yellow; border: 1px solid black;',
reactive: true });
this.handle.connect('button-press-event', this._handlePressed.bind(this));
this.handle.connect('button-release-event', this._handleReleased.bind(this));
this.handle.connect('motion-event', this._handleMotion.bind(this));
this.add_actor(this.handle);
this._inDrag = false;
this.width = 300;
this.height = 300;
}
add(child) {
this.child = child;
this.add_child(child);
this.set_child_below_sibling(child, null);
}
vfunc_get_preferred_width(forHeight) {
let children = this.get_children();
for (let i = 0; i < children.length; i++) {
let child = children[i];
let [minWidth, naturalWidth] = child.get_preferred_width(-1);
if (child == this.child) {
this.minWidth = minWidth;
this.naturalWidth = naturalWidth;
}
}
return [0, 400];
}
vfunc_get_preferred_height(forWidth) {
let children = this.get_children();
for (let i = 0; i < children.length; i++) {
let child = children[i];
if (child == this.child) {
[this.minHeight, this.naturalHeight] = child.get_preferred_height(this.width);
} else {
let [minWidth, naturalWidth] = child.get_preferred_height(naturalWidth);
}
}
return [0, 400];
}
vfunc_allocate(box) {
this.set_allocation(box);
box = this.get_theme_node().get_content_box(box);
let allocWidth = box.x2 - box.x1;
let allocHeight = box.y2 - box.y1;
function alloc(child, x1, y1, x2, y2) {
child.allocate(new Clutter.ActorBox({ x1: x1, y1: y1, x2: x2, y2: y2 }));
}
alloc(this.child, 0, 0, this.width, this.height);
alloc(this.minWidthLine, this.minWidth, 0, this.minWidth + 1, allocHeight);
alloc(this.naturalWidthLine, this.naturalWidth, 0, this.naturalWidth + 1, allocHeight);
alloc(this.currentWidthLine, this.width, 0, this.width + 1, allocHeight);
alloc(this.minHeightLine, 0, this.minHeight, allocWidth, this.minHeight + 1);
alloc(this.naturalHeightLine, 0, this.naturalHeight, allocWidth, this.naturalHeight + 1);
alloc(this.currentHeightLine, 0, this.height, allocWidth, this.height + 1);
alloc(this.handle, this.width, this.height, this.width + 10, this.height + 10);
}
_handlePressed(handle, event) {
if (event.get_button() == 1) {
this._inDrag = true;
let [handleX, handleY] = handle.get_transformed_position();
let [x, y] = event.get_coords();
this._dragX = x - handleX;
this._dragY = y - handleY;
}
}
_handleReleased(handle, event) {
if (event.get_button() == 1) {
this._inDrag = false;
}
}
_handleMotion(handle, event) {
if (this._inDrag) {
let [x, y] = event.get_coords();
let [actorX, actorY] = this.get_transformed_position();
this.width = x - this._dragX - actorX;
this.height = y - this._dragY - actorY;
this.queue_relayout();
}
}
});
/****************************************************************************/
function test() {
let stage = new Clutter.Stage({ width: 600, height: 600 });
UI.init(stage);
let mainBox = new St.BoxLayout({ width: stage.width,
height: stage.height,
vertical: true,
style: 'padding: 10px;'
+ 'spacing: 5px;'
+ 'font: 16px sans-serif;'
+ 'background: black;'
+ 'color: white;' });
stage.add_actor(mainBox);
const DOCS = 'Red lines represent minimum size, blue lines natural size. Drag yellow handle to resize ScrollView. Click on options to change.';
let docsLabel = new St.Label({ text: DOCS });
docsLabel.clutter_text.line_wrap = true;
mainBox.add(docsLabel);
let bin = new St.Bin({ x_fill: true, y_fill: true, style: 'border: 2px solid #666666;' });
mainBox.add(bin, { x_fill: true, y_fill: true, expand: true });
let illustrator = new SizingIllustrator();
bin.add_actor(illustrator);
let scrollView = new St.ScrollView();
illustrator.add(scrollView);
let box = new St.BoxLayout({ vertical: true });
scrollView.add_actor(box);
let flowedBoxes = new FlowedBoxes();
box.add(flowedBoxes, { expand: false, x_fill: true, y_fill: true });
let policyBox = new St.BoxLayout({ vertical: false });
mainBox.add(policyBox);
policyBox.add(new St.Label({ text: 'Horizontal Policy: ' }));
let hpolicy = new St.Button({ label: 'AUTOMATIC', style: 'text-decoration: underline; color: #4444ff;' });
policyBox.add(hpolicy);
let spacer = new St.Bin();
policyBox.add(spacer, { expand: true });
policyBox.add(new St.Label({ text: 'Vertical Policy: '}));
let vpolicy = new St.Button({ label: 'AUTOMATIC', style: 'text-decoration: underline; color: #4444ff;' });
policyBox.add(vpolicy);
function togglePolicy(button) {
switch(button.label) {
case 'AUTOMATIC':
button.label = 'ALWAYS';
break;
case 'ALWAYS':
button.label = 'NEVER';
break;
case 'NEVER':
button.label = 'EXTERNAL';
break;
case 'EXTERNAL':
button.label = 'AUTOMATIC';
break;
}
scrollView.set_policy(St.PolicyType[hpolicy.label], St.PolicyType[vpolicy.label]);
}
hpolicy.connect('clicked', () => { togglePolicy(hpolicy); });
vpolicy.connect('clicked', () => { togglePolicy(vpolicy); });
let fadeBox = new St.BoxLayout({ vertical: false });
mainBox.add(fadeBox);
spacer = new St.Bin();
fadeBox.add(spacer, { expand: true });
fadeBox.add(new St.Label({ text: 'Padding: '}));
let paddingButton = new St.Button({ label: 'No', style: 'text-decoration: underline; color: #4444ff;padding-right:3px;' });
fadeBox.add(paddingButton);
fadeBox.add(new St.Label({ text: 'Borders: '}));
let borderButton = new St.Button({ label: 'No', style: 'text-decoration: underline; color: #4444ff;padding-right:3px;' });
fadeBox.add(borderButton);
fadeBox.add(new St.Label({ text: 'Vertical Fade: '}));
let vfade = new St.Button({ label: 'No', style: 'text-decoration: underline; color: #4444ff;' });
fadeBox.add(vfade);
fadeBox.add(new St.Label({ text: 'Overlay scrollbars: '}));
let overlay = new St.Button({ label: 'No', style: 'text-decoration: underline; color: #4444ff;' });
fadeBox.add(overlay);
function togglePadding(button) {
switch(button.label) {
case 'No':
button.label = 'Yes';
break;
case 'Yes':
button.label = 'No';
break;
}
if (scrollView.style == null)
scrollView.style = (button.label == 'Yes' ? 'padding: 10px;' : 'padding: 0;');
else
scrollView.style += (button.label == 'Yes' ? 'padding: 10px;' : 'padding: 0;');
}
paddingButton.connect('clicked', () => { togglePadding(paddingButton); });
function toggleBorders(button) {
switch(button.label) {
case 'No':
button.label = 'Yes';
break;
case 'Yes':
button.label = 'No';
break;
}
if (scrollView.style == null)
scrollView.style = (button.label == 'Yes' ? 'border: 2px solid red;' : 'border: 0;');
else
scrollView.style += (button.label == 'Yes' ? 'border: 2px solid red;' : 'border: 0;');
}
borderButton.connect('clicked', () => { toggleBorders(borderButton); });
function toggleFade(button) {
switch(button.label) {
case 'No':
button.label = 'Yes';
break;
case 'Yes':
button.label = 'No';
break;
}
scrollView.set_style_class_name(button.label == 'Yes' ? 'vfade' : '');
}
vfade.connect('clicked', () => { toggleFade(vfade); });
toggleFade(vfade);
function toggleOverlay(button) {
switch(button.label) {
case 'No':
button.label = 'Yes';
break;
case 'Yes':
button.label = 'No';
break;
}
scrollView.overlay_scrollbars = (button.label == 'Yes');
}
overlay.connect('clicked', () => { toggleOverlay(overlay); });
UI.main(stage);
}
test();

53
tests/interactive/scrolling.js
View File

@ -1,53 +0,0 @@
// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
const UI = imports.testcommon.ui;
const Clutter = imports.gi.Clutter;
const St = imports.gi.St;
function test() {
let stage = new Clutter.Stage();
UI.init(stage);
let vbox = new St.BoxLayout({ vertical: true,
width: stage.width,
height: stage.height,
style: "padding: 10px;" });
stage.add_actor(vbox);
let toggle = new St.Button({ label: 'Horizontal Scrolling',
toggle_mode: true });
vbox.add(toggle);
let v = new St.ScrollView();
vbox.add(v, { expand: true });
toggle.connect('notify::checked', () => {
v.set_policy(toggle.checked ? St.PolicyType.AUTOMATIC
: St.PolicyType.NEVER,
St.PolicyType.AUTOMATIC);
});
let b = new St.BoxLayout({ vertical: true,
style: "border: 2px solid #880000; border-radius: 10px; padding: 0px 5px;" });
v.add_actor(b);
let cc_a = "a".charCodeAt(0);
let s = "";
for (let i = 0; i < 26 * 3; i++) {
s += String.fromCharCode(cc_a + i % 26);
let t = new St.Label({ text: s,
reactive: true });
let line = i + 1;
t.connect('button-press-event',
function() {
log("Click on line " + line);
});
b.add(t);
}
UI.main(stage);
}
test();

28
tests/interactive/test-title.js
View File

@ -1,28 +0,0 @@
#!/usr/bin/env gjs
imports.gi.versions.Gtk = '4.0';
const Gtk = imports.gi.Gtk;
function nextTitle() {
let length = Math.random() * 20;
let str = '';
for (let i = 0; i < length; i++) {
// 97 == 'a'
str += String.fromCharCode(97 + Math.random() * 26);
}
return str;
}
const application = new Gtk.Application({application_id: 'org.gnome.TestTitle'});
application.connect('activate', () => {
const win = new Gtk.Window({
application,
title: nextTitle(),
});
win.present();
setInterval(() => (win.title = nextTitle()), 5000);
});
application.run(null);

36
tests/interactive/transitions.js
View File

@ -1,36 +0,0 @@
// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
const UI = imports.testcommon.ui;
const Clutter = imports.gi.Clutter;
const St = imports.gi.St;
function test() {
let stage = new Clutter.Stage();
UI.init(stage);
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 });
}
////////////////////////////////////////////////////////////////////////////////
UI.main(stage);
}
test();

21
tests/testcommon/100-200.svg
View File

@ -1,21 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 200" width="100" height="200">
<path
d="
M 2,2 h 96 v 196 h -96 v -196
M 8,8 h 84 v 184 h -84 v -184
"
fill="white"
stroke="blue"
stroke-width="2"
stroke-linecap="square"
/>
<path
d="
M 10,10 h 20 v 20 h -20 v -20
"
fill="green"
/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 518 B

21
tests/testcommon/200-100.svg
View File

@ -1,21 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 100" width="200" height="100">
<path
d="
M 2,2 h 196 v 96 h -196 v -96
M 8,8 h 184 v 84 h -184 v -84
"
fill="white"
stroke="blue"
stroke-width="2"
stroke-linecap="square"
/>
<path
d="
M 10,10 h 20 v 20 h -20 v -20
"
fill="green"
/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 518 B

21
tests/testcommon/200-200.svg
View File

@ -1,21 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 200" width="200" height="200">
<path
d="
M 2,2 h 196 v 196 h -196 v -196
M 8,8 h 184 v 184 h -184 v -184
"
fill="white"
stroke="blue"
stroke-width="2"
stroke-linecap="square"
/>
<path
d="
M 10,10 h 20 v 20 h -20 v -20
"
fill="green"
/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 522 B

BIN
tests/testcommon/border-image.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 981 B

BIN
tests/testcommon/face-plain.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 KiB

112
tests/testcommon/test.css
View File

@ -1,112 +0,0 @@
@import url("resource:///org/gnome/shell/theme/gnome-shell.css");
stage {
font: 16pt serif;
color: black;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
.big {
font-size: 150%;
}
.monospace {
font-family: monospace;
}
.border-image {
border: 15px;
border-image: url('border-image.png') 16;
}
.background-image-200-200 {
background-image: url('200-200.svg');
}
.background-image-100-200 {
background-image: url('100-200.svg');
}
.background-image-200-100 {
background-image: url('200-100.svg');
}
.background-gradient {
background-gradient-start: rgba(127, 255, 127, .6);
background-gradient-end: rgba(127, 127, 255, .6);
}
.border-image-with-background-gradient {
border: 15px black solid;
border-image: url('border-image.png') 16;
background-gradient-start: #88ff88;
background-gradient-end: #8888ff;
}
.background-image {
background-image: url('face-plain.png');
background-color: white;
}
.background-repeat {
background-repeat: repeat;
}
.push-button {
background: #eeddbb;
border: 1px solid black;
border-radius: 8px;
padding: 5px;
}
.push-button:hover {
background: #ffeecc;
}
.push-button:active {
background: #ccbb99;
}
.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: 1s;
}
#transition-container:hover .transition-label {
background-color: blue;
border: 2px solid red;
}
#transition-container .transition-label:hover {
background-color: green;
border: 2px solid blue;
}

31
tests/testcommon/ui.js
View File

@ -1,31 +0,0 @@
// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
const Config = imports.misc.config;
imports.gi.versions = {Clutter: Config.LIBMUTTER_API_VERSION};
const Clutter = imports.gi.Clutter;
const Gio = imports.gi.Gio;
const GLib = imports.gi.GLib;
const St = imports.gi.St;
const Environment = imports.ui.environment;
function init(stage) {
Environment.init();
let themeResource = Gio.Resource.load(global.datadir + '/gnome-shell-theme.gresource');
themeResource._register();
let context = St.ThemeContext.get_for_stage(stage);
let stylesheetPath = GLib.getenv("GNOME_SHELL_TESTSDIR") + "/testcommon/test.css";
let theme = new St.Theme({ application_stylesheet: Gio.File.new_for_path(stylesheetPath) });
context.set_theme(theme);
}
function main(stage) {
stage.show();
stage.connect('destroy', () => {
Clutter.main_quit();
});
Clutter.main();
}