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

tests: Run each test in a function

Browse Source 
As the global object of a context is rooted, if we want the GC to act
on these objects we need to take them out of the globals.

https://bugzilla.gnome.org/show_bug.cgi?id=678737
This commit is contained in:
Jasper St. Pierre 2012-06-24 15:11:41 -04:00
parent 0d82ce5210
commit c7196a519f
16 changed files with 794 additions and 769 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,96 +6,97 @@ const St = imports.gi.St;
const UI = imports.testcommon.ui; const UI = imports.testcommon.ui;
let stage = new Clutter.Stage({ user_resizable: true, width: 1024, height: 768 }); function test() {
UI.init(stage); let stage = new Clutter.Stage({ user_resizable: true, width: 1024, height: 768 });
UI.init(stage);
let vbox = new St.BoxLayout({ style: 'background: #ffee88;' }); let vbox = new St.BoxLayout({ style: 'background: #ffee88;' });
vbox.add_constraint(new Clutter.BindConstraint({ source: stage, vbox.add_constraint(new Clutter.BindConstraint({ source: stage,
coordinate: Clutter.BindCoordinate.SIZE })); coordinate: Clutter.BindCoordinate.SIZE }));
stage.add_actor(vbox); stage.add_actor(vbox);
let scroll = new St.ScrollView(); let scroll = new St.ScrollView();
vbox.add(scroll, { expand: true }); vbox.add(scroll, { expand: true });
let vbox = new St.BoxLayout({ vertical: true, let vbox = new St.BoxLayout({ vertical: true,
style: 'padding: 10px;' style: 'padding: 10px;'
+ 'spacing: 20px;' }); + 'spacing: 20px;' });
scroll.add_actor(vbox); scroll.add_actor(vbox);
let tbox = null; let tbox = null;
function addTestCase(image, size, backgroundSize, useCairo) { function addTestCase(image, size, backgroundSize, useCairo) {
// Using a border in CSS forces cairo rendering. // Using a border in CSS forces cairo rendering.
// To get a border using cogl, we paint a border using // To get a border using cogl, we paint a border using
// paint signal hacks. // paint signal hacks.
let obin = new St.Bin(); let obin = new St.Bin();
if (useCairo) if (useCairo)
obin.style = 'border: 3px solid green;'; obin.style = 'border: 3px solid green;';
else else
obin.connect_after('paint', function(actor) { obin.connect_after('paint', function(actor) {
Cogl.set_source_color4f(0, 1, 0, 1); Cogl.set_source_color4f(0, 1, 0, 1);
let geom = actor.get_allocation_geometry(); let geom = actor.get_allocation_geometry();
let width = 3; let width = 3;
// clockwise order // clockwise order
Cogl.rectangle(0, 0, geom.width, width); Cogl.rectangle(0, 0, geom.width, width);
Cogl.rectangle(geom.width - width, width, Cogl.rectangle(geom.width - width, width,
geom.width, geom.height); geom.width, geom.height);
Cogl.rectangle(0, geom.height, Cogl.rectangle(0, geom.height,
geom.width - width, geom.height - width); geom.width - width, geom.height - width);
Cogl.rectangle(0, geom.height - width, Cogl.rectangle(0, geom.height - width,
width, width); width, width);
}); });
tbox.add(obin); tbox.add(obin);
let [width, height] = size; let [width, height] = size;
let bin = new St.Bin({ style_class: 'background-image-' + image, let bin = new St.Bin({ style_class: 'background-image-' + image,
width: width, width: width,
height: height, height: height,
style: 'border: 1px solid transparent;' style: 'border: 1px solid transparent;'
+ 'background-size: ' + backgroundSize + ';', + 'background-size: ' + backgroundSize + ';',
x_fill: true, x_fill: true,
y_fill: true y_fill: true
}); });
obin.set_child(bin); obin.set_child(bin);
bin.set_child(new St.Label({ text: backgroundSize + (useCairo ? ' (cairo)' : ' (cogl)'), bin.set_child(new St.Label({ text: backgroundSize + (useCairo ? ' (cairo)' : ' (cogl)'),
style: 'font-size: 15px;' style: 'font-size: 15px;'
+ 'text-align: center;' + 'text-align: center;'
})); }));
}
function addTestLine(image, size, useCairo) {
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 each (let s in backgroundSizes)
addTestCase(image, size, s, false);
for each (let s in backgroundSizes)
addTestCase(image, size, s, true);
}
function addTestImage(image) {
const containerSizes = [[100, 100], [200, 200], [250, 250], [100, 250], [250, 100]];
for each (let size in containerSizes)
addTestLine(image, size);
}
addTestImage ('200-200');
addTestImage ('200-100');
addTestImage ('100-200');
UI.main(stage);
} }
test();
function addTestLine(image, size, useCairo) {
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 each (let s in backgroundSizes)
addTestCase(image, size, s, false);
for each (let s in backgroundSizes)
addTestCase(image, size, s, true);
}
function addTestImage(image) {
const containerSizes = [[100, 100], [200, 200], [250, 250], [100, 250], [250, 100]];
for each (let size in containerSizes)
addTestLine(image, size);
}
addTestImage ('200-200');
addTestImage ('200-100');
addTestImage ('100-200');
stage.show();
Clutter.main();
stage.destroy();

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

@ -5,57 +5,58 @@ const St = imports.gi.St;
const UI = imports.testcommon.ui; const UI = imports.testcommon.ui;
let stage = new Clutter.Stage({ width: 640, height: 480 }); function test() {
UI.init(stage); let stage = new Clutter.Stage({ width: 640, height: 480 });
UI.init(stage);
let vbox = new St.BoxLayout({ width: stage.width, let vbox = new St.BoxLayout({ width: stage.width,
height: stage.height, height: stage.height,
style: 'background: #ffee88;' }); style: 'background: #ffee88;' });
stage.add_actor(vbox); stage.add_actor(vbox);
let scroll = new St.ScrollView(); let scroll = new St.ScrollView();
vbox.add(scroll, { expand: true }); vbox.add(scroll, { expand: true });
let box = new St.BoxLayout({ vertical: true, let box = new St.BoxLayout({ vertical: true,
style: 'padding: 10px;' style: 'padding: 10px;'
+ 'spacing: 20px;' }); + 'spacing: 20px;' });
scroll.add_actor(box); scroll.add_actor(box);
function addTestCase(radii, useGradient) { function addTestCase(radii, useGradient) {
let background; let background;
if (useGradient) if (useGradient)
background = 'background-gradient-direction: vertical;' background = 'background-gradient-direction: vertical;'
+ 'background-gradient-start: white;' + 'background-gradient-start: white;'
+ 'background-gradient-end: gray;'; + 'background-gradient-end: gray;';
else else
background = 'background: white;'; background = 'background: white;';
box.add(new St.Label({ text: "border-radius: " + radii + ";", box.add(new St.Label({ text: "border-radius: " + radii + ";",
style: 'border: 1px solid black; ' style: 'border: 1px solid black; '
+ 'border-radius: ' + radii + ';' + 'border-radius: ' + radii + ';'
+ 'padding: 5px;' + background }), + 'padding: 5px;' + background }),
{ x_fill: false }); { 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();
// 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);
stage.show();
Clutter.main();
stage.destroy();

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

@ -5,54 +5,55 @@ const St = imports.gi.St;
const UI = imports.testcommon.ui; const UI = imports.testcommon.ui;
let stage = new Clutter.Stage({ width: 640, height: 480 }); function test() {
UI.init(stage); let stage = new Clutter.Stage({ width: 640, height: 480 });
UI.init(stage);
let vbox = new St.BoxLayout({ width: stage.width, let vbox = new St.BoxLayout({ width: stage.width,
height: stage.height, height: stage.height,
style: 'padding: 10px; background: #ffee88;' style: 'padding: 10px; background: #ffee88;'
}); });
stage.add_actor(vbox); stage.add_actor(vbox);
let scroll = new St.ScrollView(); let scroll = new St.ScrollView();
vbox.add(scroll, { expand: true }); vbox.add(scroll, { expand: true });
let box = new St.BoxLayout({ vertical: true, let box = new St.BoxLayout({ vertical: true,
style: 'spacing: 20px;' }); style: 'spacing: 20px;' });
scroll.add_actor(box); scroll.add_actor(box);
function addTestCase(borders, useGradient) { function addTestCase(borders, useGradient) {
let background; let background;
if (useGradient) if (useGradient)
background = 'background-gradient-direction: vertical;' background = 'background-gradient-direction: vertical;'
+ 'background-gradient-start: white;' + 'background-gradient-start: white;'
+ 'background-gradient-end: gray;'; + 'background-gradient-end: gray;';
else else
background = 'background: white;'; background = 'background: white;';
let border_style = "border-top: " + borders[St.Side.TOP] + " solid black;\n" + let border_style = "border-top: " + borders[St.Side.TOP] + " solid black;\n" +
"border-right: " + borders[St.Side.RIGHT] + " solid black;\n" + "border-right: " + borders[St.Side.RIGHT] + " solid black;\n" +
"border-bottom: " + borders[St.Side.BOTTOM] + " solid black;\n" + "border-bottom: " + borders[St.Side.BOTTOM] + " solid black;\n" +
"border-left: " + borders[St.Side.LEFT] + " solid black;"; "border-left: " + borders[St.Side.LEFT] + " solid black;";
box.add(new St.Label({ text: border_style, box.add(new St.Label({ text: border_style,
style: border_style style: border_style
+ 'border-radius: 0px 5px 15px 25px;' + 'border-radius: 0px 5px 15px 25px;'
+ 'padding: 5px;' + background }), + 'padding: 5px;' + background }),
{ x_fill: false }); { 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();
// 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);
stage.show();
Clutter.main();
stage.destroy();

212
tests/interactive/borders.js
View File

@ -5,129 +5,131 @@ const St = imports.gi.St;
const UI = imports.testcommon.ui; const UI = imports.testcommon.ui;
let stage = new Clutter.Stage({ width: 640, height: 480 }); function test() {
UI.init(stage); let stage = new Clutter.Stage({ width: 640, height: 480 });
UI.init(stage);
let vbox = new St.BoxLayout({ width: stage.width, let vbox = new St.BoxLayout({ width: stage.width,
height: stage.height, height: stage.height,
style: 'background: #ffee88;' }); style: 'background: #ffee88;' });
stage.add_actor(vbox); stage.add_actor(vbox);
let scroll = new St.ScrollView(); let scroll = new St.ScrollView();
vbox.add(scroll, { expand: true }); vbox.add(scroll, { expand: true });
let box = new St.BoxLayout({ vertical: true, let box = new St.BoxLayout({ vertical: true,
style: 'padding: 10px;' style: 'padding: 10px;'
+ 'spacing: 20px;' }); + 'spacing: 20px;' });
scroll.add_actor(box); scroll.add_actor(box);
box.add(new St.Label({ text: "Hello World", box.add(new St.Label({ text: "Hello World",
style: 'border: 1px solid black; ' style: 'border: 1px solid black; '
+ 'padding: 5px;' })); + 'padding: 5px;' }));
box.add(new St.Label({ text: "Hello Round World", box.add(new St.Label({ text: "Hello Round World",
style: 'border: 3px solid green; ' style: 'border: 3px solid green; '
+ 'border-radius: 8px; ' + 'border-radius: 8px; '
+ 'padding: 5px;' })); + 'padding: 5px;' }));
box.add(new St.Label({ text: "Hello Background", box.add(new St.Label({ text: "Hello Background",
style: 'border: 3px solid green; ' style: 'border: 3px solid green; '
+ 'border-radius: 8px; ' + 'border-radius: 8px; '
+ 'background: white; ' + 'background: white; '
+ 'padding: 5px;' })); + 'padding: 5px;' }));
box.add(new St.Label({ text: "Hello Translucent Black Border", box.add(new St.Label({ text: "Hello Translucent Black Border",
style: 'border: 3px solid rgba(0, 0, 0, 0.4); ' style: 'border: 3px solid rgba(0, 0, 0, 0.4); '
+ 'background: white; ' })); + 'background: white; ' }));
box.add(new St.Label({ text: "Hello Translucent Background", box.add(new St.Label({ text: "Hello Translucent Background",
style: 'background: rgba(255, 255, 255, 0.3);' })); style: 'background: rgba(255, 255, 255, 0.3);' }));
box.add(new St.Label({ text: "Border, Padding, Content: 20px" })); box.add(new St.Label({ text: "Border, Padding, Content: 20px" }));
let b1 = new St.BoxLayout({ vertical: true, let b1 = new St.BoxLayout({ vertical: true,
style: 'border: 20px solid black; ' style: 'border: 20px solid black; '
+ 'background: white; ' + 'background: white; '
+ 'padding: 20px;' }); + 'padding: 20px;' });
box.add(b1); box.add(b1);
b1.add(new St.BoxLayout({ width: 20, height: 20, b1.add(new St.BoxLayout({ width: 20, height: 20,
style: 'background: black' })); style: 'background: black' }));
box.add(new St.Label({ text: "Translucent big blue border, with rounding", box.add(new St.Label({ text: "Translucent big blue border, with rounding",
style: 'border: 20px solid rgba(0, 0, 255, 0.2); ' style: 'border: 20px solid rgba(0, 0, 255, 0.2); '
+ 'border-radius: 10px; ' + 'border-radius: 10px; '
+ 'background: white; ' + 'background: white; '
+ 'padding: 10px;' })); + 'padding: 10px;' }));
box.add(new St.Label({ text: "Transparent border", box.add(new St.Label({ text: "Transparent border",
style: 'border: 20px solid transparent; ' style: 'border: 20px solid transparent; '
+ 'background: white; ' + 'background: white; '
+ 'padding: 10px;' })); + 'padding: 10px;' }));
box.add(new St.Label({ text: "Border Image", box.add(new St.Label({ text: "Border Image",
style_class: "border-image", style_class: "border-image",
style: "padding: 10px;" })); style: "padding: 10px;" }));
box.add(new St.Label({ text: "Border Image with Gradient", box.add(new St.Label({ text: "Border Image with Gradient",
style_class: 'border-image-with-background-gradient', style_class: 'border-image-with-background-gradient',
style: "padding: 10px;" style: "padding: 10px;"
+ 'background-gradient-direction: vertical;' })); + 'background-gradient-direction: vertical;' }));
box.add(new St.Label({ text: "Rounded, framed, shadowed gradients" })); box.add(new St.Label({ text: "Rounded, framed, shadowed gradients" }));
let framedGradients = new St.BoxLayout({ vertical: false, let framedGradients = new St.BoxLayout({ vertical: false,
style: 'padding: 10px; spacing: 12px;' }); style: 'padding: 10px; spacing: 12px;' });
box.add(framedGradients); box.add(framedGradients);
function addGradientCase(direction, borderWidth, borderRadius, extra) { function addGradientCase(direction, borderWidth, borderRadius, extra) {
let gradientBox = new St.BoxLayout({ style_class: 'background-gradient', let gradientBox = new St.BoxLayout({ style_class: 'background-gradient',
style: 'border: ' + borderWidth + 'px solid #8b0000;' style: 'border: ' + borderWidth + 'px solid #8b0000;'
+ 'border-radius: ' + borderRadius + 'px;' >>>>>>> 2aff593... tests: Run each test in a function
+ '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;' + 'border-radius: ' + borderRadius + 'px;'
+ 'width: ' + width + 'px;' + 'background-gradient-direction: ' + direction + ';'
+ 'height: ' + height + 'px;' + 'width: 32px;'
+ 'height: 32px;'
+ extra }); + extra });
framedImages.add(imageBox, { x_fill: false, y_fill: false } ); 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();
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');
stage.show();
Clutter.main();
stage.destroy();

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

@ -5,88 +5,87 @@ const St = imports.gi.St;
const UI = imports.testcommon.ui; const UI = imports.testcommon.ui;
let stage = new Clutter.Stage(); function test() {
UI.init(stage); let stage = new Clutter.Stage();
UI.init(stage);
let vbox = new St.BoxLayout({ vertical: true, let vbox = new St.BoxLayout({ vertical: true,
width: stage.width, width: stage.width,
height: stage.height, height: stage.height,
style: 'padding: 10px;' style: 'padding: 10px;'
+ 'spacing: 10px;' }); + 'spacing: 10px;' });
stage.add_actor(vbox); stage.add_actor(vbox);
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////
let colored_boxes = new St.BoxLayout({ vertical: true, let colored_boxes = new St.BoxLayout({ vertical: true,
width: 200, width: 200,
height: 200, height: 200,
style: 'border: 2px solid black;' }); style: 'border: 2px solid black;' });
vbox.add(colored_boxes, { x_fill: false, vbox.add(colored_boxes, { x_fill: false,
x_align: St.Align.MIDDLE }); x_align: St.Align.MIDDLE });
let b2 = new St.BoxLayout({ style: 'border: 2px solid #666666' }); let b2 = new St.BoxLayout({ style: 'border: 2px solid #666666' });
colored_boxes.add(b2, { expand: true }); colored_boxes.add(b2, { expand: true });
b2.add(new St.Label({ text: "Expand", b2.add(new St.Label({ text: "Expand",
style: 'border: 1px solid #aaaaaa; ' style: 'border: 1px solid #aaaaaa; '
+ 'background: #ffeecc' }), + 'background: #ffeecc' }),
{ expand: true }); { expand: true });
b2.add(new St.Label({ text: "Expand\nNo Fill", b2.add(new St.Label({ text: "Expand\nNo Fill",
style: 'border: 1px solid #aaaaaa; ' style: 'border: 1px solid #aaaaaa; '
+ 'background: #ccffaa' }), + 'background: #ccffaa' }),
{ expand: true, { expand: true,
x_fill: false, x_fill: false,
x_align: St.Align.MIDDLE, x_align: St.Align.MIDDLE,
y_fill: false, y_fill: false,
y_align: St.Align.MIDDLE }); y_align: St.Align.MIDDLE });
colored_boxes.add(new St.Label({ text: "Default", colored_boxes.add(new St.Label({ text: "Default",
style: 'border: 1px solid #aaaaaa; ' style: 'border: 1px solid #aaaaaa; '
+ 'background: #cceeff' })); + 'background: #cceeff' }));
b2.add(new St.Label({ x: 50, b2.add(new St.Label({ x: 50,
y: 50, y: 50,
text: "Fixed", text: "Fixed",
style: 'border: 1px solid #aaaaaa;' style: 'border: 1px solid #aaaaaa;'
+ 'background: #ffffcc' })); + 'background: #ffffcc' }));
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////
function createCollapsableBox(width) { function createCollapsableBox(width) {
let b = new St.BoxLayout({ width: width, let b = new St.BoxLayout({ width: width,
style: 'border: 1px solid black;' style: 'border: 1px solid black;'
+ 'font: 13px Sans;' }); + 'font: 13px Sans;' });
b.add(new St.Label({ text: "Very Very Very Long", b.add(new St.Label({ text: "Very Very Very Long",
style: 'background: #ffaacc;' style: 'background: #ffaacc;'
+ 'padding: 5px; ' + 'padding: 5px; '
+ 'border: 1px solid #666666;' }), + 'border: 1px solid #666666;' }),
{ expand: true }); { expand: true });
b.add(new St.Label({ text: "Very Very Long", b.add(new St.Label({ text: "Very Very Long",
style: 'background: #ffeecc; ' style: 'background: #ffeecc; '
+ 'padding: 5px; ' + 'padding: 5px; '
+ 'border: 1px solid #666666;' }), + 'border: 1px solid #666666;' }),
{ expand: true }); { expand: true });
b.add(new St.Label({ text: "Very Long", b.add(new St.Label({ text: "Very Long",
style: 'background: #ccffaa; ' style: 'background: #ccffaa; '
+ 'padding: 5px; ' + 'padding: 5px; '
+ 'border: 1px solid #666666;' }), + 'border: 1px solid #666666;' }),
{ expand: true }); { expand: true });
b.add(new St.Label({ text: "Short", b.add(new St.Label({ text: "Short",
style: 'background: #cceeff; ' style: 'background: #cceeff; '
+ 'padding: 5px; ' + 'padding: 5px; '
+ 'border: 1px solid #666666;' }), + 'border: 1px solid #666666;' }),
{ expand: true }); { expand: true });
return b; 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);
} }
for (let width = 200; width <= 500; width += 60 ) {
vbox.add(createCollapsableBox (width),
{ x_fill: false,
x_align: St.Align.MIDDLE });
}
////////////////////////////////////////////////////////////////////////////////
stage.show();
Clutter.main();

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

@ -5,52 +5,53 @@ const St = imports.gi.St;
const UI = imports.testcommon.ui; const UI = imports.testcommon.ui;
let stage = new Clutter.Stage({ width: 640, height: 480 }); function test() {
UI.init(stage); let stage = new Clutter.Stage({ width: 640, height: 480 });
UI.init(stage);
let vbox = new St.BoxLayout({ width: stage.width, let vbox = new St.BoxLayout({ width: stage.width,
height: stage.height, height: stage.height,
style: 'background: #ffee88;' }); style: 'background: #ffee88;' });
stage.add_actor(vbox); stage.add_actor(vbox);
let scroll = new St.ScrollView(); let scroll = new St.ScrollView();
vbox.add(scroll, { expand: true }); vbox.add(scroll, { expand: true });
let box = new St.BoxLayout({ vertical: true, let box = new St.BoxLayout({ vertical: true,
style: 'padding: 10px;' style: 'padding: 10px;'
+ 'spacing: 20px;' }); + 'spacing: 20px;' });
scroll.add_actor(box); scroll.add_actor(box);
function addTestCase(inset, offsetX, offsetY, blur, spread) { function addTestCase(inset, offsetX, offsetY, blur, spread) {
let shadowStyle = 'box-shadow: ' + (inset ? 'inset ' : '') + let shadowStyle = 'box-shadow: ' + (inset ? 'inset ' : '') +
offsetX + 'px ' + offsetY + 'px ' + blur + 'px ' + offsetX + 'px ' + offsetY + 'px ' + blur + 'px ' +
(spread > 0 ? (' ' + spread + 'px ') : '') + (spread > 0 ? (' ' + spread + 'px ') : '') +
'rgba(0,0,0,0.5);'; 'rgba(0,0,0,0.5);';
let label = new St.Label({ style: 'border: 4px solid black;' + let label = new St.Label({ style: 'border: 4px solid black;' +
'border-radius: 5px;' + 'border-radius: 5px;' +
'background-color: white; ' + 'background-color: white; ' +
'padding: 5px;' + 'padding: 5px;' +
shadowStyle, shadowStyle,
text: shadowStyle }); text: shadowStyle });
box.add(label, { x_fill: false, y_fill: false } ); 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();
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);
stage.show();
Clutter.main();
stage.destroy();

31
tests/interactive/calendar.js
View File

@ -7,21 +7,22 @@ const St = imports.gi.St;
const Calendar = imports.ui.calendar; const Calendar = imports.ui.calendar;
const UI = imports.testcommon.ui; const UI = imports.testcommon.ui;
let stage = new Clutter.Stage({ width: 400, height: 400 }); function test() {
UI.init(stage); let stage = new Clutter.Stage({ width: 400, height: 400 });
UI.init(stage);
let vbox = new St.BoxLayout({ vertical: true, let vbox = new St.BoxLayout({ vertical: true,
width: stage.width, width: stage.width,
height: stage.height, height: stage.height,
style: 'padding: 10px; spacing: 10px; font: 15px sans-serif;' }); style: 'padding: 10px; spacing: 10px; font: 15px sans-serif;' });
stage.add_actor(vbox); stage.add_actor(vbox);
let calendar = new Calendar.Calendar(); let calendar = new Calendar.Calendar();
vbox.add(calendar.actor, vbox.add(calendar.actor,
{ expand: true, { expand: true,
x_fill: false, x_align: St.Align.MIDDLE, x_fill: false, x_align: St.Align.MIDDLE,
y_fill: false, y_align: St.Align.START }); y_fill: false, y_align: St.Align.START });
stage.show(); UI.main(stage);
Clutter.main(); }
stage.destroy(); test();

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

@ -5,35 +5,37 @@ const St = imports.gi.St;
const UI = imports.testcommon.ui; const UI = imports.testcommon.ui;
let stage = new Clutter.Stage(); function test() {
UI.init(stage); let stage = new Clutter.Stage();
UI.init(stage);
let b = new St.BoxLayout({ vertical: true, let b = new St.BoxLayout({ vertical: true,
width: stage.width, width: stage.width,
height: stage.height }); height: stage.height });
stage.add_actor(b); stage.add_actor(b);
let t; let t;
t = new St.Label({ "text": "Bold", style_class: "bold" }); t = new St.Label({ "text": "Bold", style_class: "bold" });
b.add(t); b.add(t);
t = new St.Label({ "text": "Monospace", style_class: "monospace" }); t = new St.Label({ "text": "Monospace", style_class: "monospace" });
b.add(t); b.add(t);
t = new St.Label({ "text": "Italic", style_class: "italic" }); t = new St.Label({ "text": "Italic", style_class: "italic" });
b.add(t); b.add(t);
t = new St.Label({ "text": "Bold Italic", style_class: "bold italic" }); t = new St.Label({ "text": "Bold Italic", style_class: "bold italic" });
b.add(t); b.add(t);
t = new St.Label({ "text": "Big Italic", style_class: "big italic" }); t = new St.Label({ "text": "Big Italic", style_class: "big italic" });
b.add(t); b.add(t);
t = new St.Label({ "text": "Big Bold", style_class: "big bold" }); t = new St.Label({ "text": "Big Bold", style_class: "big bold" });
b.add(t); b.add(t);
let b2 = new St.BoxLayout({ vertical: true, style_class: "monospace" }); let b2 = new St.BoxLayout({ vertical: true, style_class: "monospace" });
b.add(b2); b.add(b2);
t = new St.Label({ "text": "Big Monospace", style_class: "big" }); t = new St.Label({ "text": "Big Monospace", style_class: "big" });
b2.add(t); b2.add(t);
t = new St.Label({ "text": "Italic Monospace", style_class: "italic" }); t = new St.Label({ "text": "Italic Monospace", style_class: "italic" });
b2.add(t); b2.add(t);
stage.show(); UI.main(stage);
Clutter.main(); }
test();

31
tests/interactive/entry.js
View File

@ -7,21 +7,22 @@ const St = imports.gi.St;
const Calendar = imports.ui.calendar; const Calendar = imports.ui.calendar;
const UI = imports.testcommon.ui; const UI = imports.testcommon.ui;
let stage = new Clutter.Stage({ width: 400, height: 400 }); function test() {
UI.init(stage); let stage = new Clutter.Stage({ width: 400, height: 400 });
UI.init(stage);
let vbox = new St.BoxLayout({ vertical: true, let vbox = new St.BoxLayout({ vertical: true,
width: stage.width, width: stage.width,
height: stage.height, height: stage.height,
style: 'padding: 10px; spacing: 10px; font: 15px sans-serif;' }); style: 'padding: 10px; spacing: 10px; font: 15px sans-serif;' });
stage.add_actor(vbox); stage.add_actor(vbox);
let entry = new St.Entry({ style: 'border: 1px solid black;' }); let entry = new St.Entry({ style: 'border: 1px solid black;' });
vbox.add(entry, vbox.add(entry,
{ expand: true, { expand: true,
y_fill: false, y_align: St.Align.MIDDLE }); y_fill: false, y_align: St.Align.MIDDLE });
entry.grab_key_focus(); entry.grab_key_focus();
stage.show(); UI.main(stage);
Clutter.main(); }
stage.destroy(); test();

142
tests/interactive/icons.js
View File

@ -5,81 +5,83 @@ const St = imports.gi.St;
const UI = imports.testcommon.ui; const UI = imports.testcommon.ui;
let stage = new Clutter.Stage(); function test() {
UI.init(stage); let stage = new Clutter.Stage();
UI.init(stage);
let b = new St.BoxLayout({ vertical: true, let b = new St.BoxLayout({ vertical: true,
width: stage.width, width: stage.width,
height: stage.height }); height: stage.height });
stage.add_actor(b); stage.add_actor(b);
function addTest(label, icon_props) { function addTest(label, icon_props) {
if (b.get_children().length > 0) if (b.get_children().length > 0)
b.add (new St.BoxLayout({ style: 'background: #cccccc; border: 10px transparent white; height: 1px; ' })); b.add (new St.BoxLayout({ style: 'background: #cccccc; border: 10px transparent white; height: 1px; ' }));
let hb = new St.BoxLayout({ vertical: false, let hb = new St.BoxLayout({ vertical: false,
style: 'spacing: 10px;' }); style: 'spacing: 10px;' });
hb.add(new St.Label({ text: label }), { y_fill: false }); hb.add(new St.Label({ text: label }), { y_fill: false });
hb.add(new St.Icon(icon_props)); hb.add(new St.Icon(icon_props));
b.add(hb); b.add(hb);
}
addTest("Symbolic",
{ icon_name: 'battery-full',
icon_type: St.IconType.SYMBOLIC,
icon_size: 48 });
addTest("Full color",
{ icon_name: 'battery-full',
icon_type: St.IconType.FULLCOLOR,
icon_size: 48 });
addTest("Default size",
{ icon_name: 'battery-full',
icon_type: St.IconType.SYMBOLIC });
addTest("Size set by property",
{ icon_name: 'battery-full',
icon_type: St.IconType.SYMBOLIC,
icon_size: 32 });
addTest("Size set by style",
{ icon_name: 'battery-full',
icon_type: St.IconType.SYMBOLIC,
style: 'icon-size: 1em;' });
addTest("16px icon in 48px icon widget",
{ icon_name: 'battery-full',
icon_type: St.IconType.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 each (let iconName in icons) {
hb.add(new St.Icon({ icon_name: iconName,
icon_type: St.IconType.SYMBOLIC,
icon_size: 48 }));
} }
b.add(hb); addTest("Symbolic",
{ icon_name: 'battery-full',
icon_type: St.IconType.SYMBOLIC,
icon_size: 48 });
addTest("Full color",
{ icon_name: 'battery-full',
icon_type: St.IconType.FULLCOLOR,
icon_size: 48 });
addTest("Default size",
{ icon_name: 'battery-full',
icon_type: St.IconType.SYMBOLIC });
addTest("Size set by property",
{ icon_name: 'battery-full',
icon_type: St.IconType.SYMBOLIC,
icon_size: 32 });
addTest("Size set by style",
{ icon_name: 'battery-full',
icon_type: St.IconType.SYMBOLIC,
style: 'icon-size: 1em;' });
addTest("16px icon in 48px icon widget",
{ icon_name: 'battery-full',
icon_type: St.IconType.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 each (let iconName in icons) {
hb.add(new St.Icon({ icon_name: iconName,
icon_type: St.IconType.SYMBOLIC,
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',
'battery-full',
'battery-good',
'battery-low',
'battery-caution' ];
let volumeIcons = ['audio-volume-high',
'audio-volume-medium',
'audio-volume-low',
'audio-volume-muted' ];
iconRow(batteryIcons, normalCss);
iconRow(batteryIcons, reversedCss);
iconRow(volumeIcons, normalCss);
iconRow(volumeIcons, reversedCss);
UI.main(stage);
} }
test();
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',
'battery-full',
'battery-good',
'battery-low',
'battery-caution' ];
let volumeIcons = ['audio-volume-high',
'audio-volume-medium',
'audio-volume-low',
'audio-volume-muted' ];
iconRow(batteryIcons, normalCss);
iconRow(batteryIcons, reversedCss);
iconRow(volumeIcons, normalCss);
iconRow(volumeIcons, reversedCss);
stage.show();
Clutter.main();

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

@ -5,43 +5,43 @@ const St = imports.gi.St;
const UI = imports.testcommon.ui; const UI = imports.testcommon.ui;
let stage = new Clutter.Stage(); function test() {
UI.init(stage); let stage = new Clutter.Stage();
UI.init(stage);
let vbox = new St.BoxLayout({ vertical: true, let vbox = new St.BoxLayout({ vertical: true,
width: stage.width, width: stage.width,
height: stage.height }); height: stage.height });
stage.add_actor(vbox); stage.add_actor(vbox);
let hbox = new St.BoxLayout({ style: 'spacing: 12px;' }); let hbox = new St.BoxLayout({ style: 'spacing: 12px;' });
vbox.add(hbox); vbox.add(hbox);
let text = new St.Label({ text: "Styled Text" }); let text = new St.Label({ text: "Styled Text" });
vbox.add (text); vbox.add (text);
let size = 24; let size = 24;
function update_size() { function update_size() {
text.style = 'font-size: ' + size + 'pt'; 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', function() {
size /= 1.2;
update_size ();
});
button = new St.Button ({ label: 'Bigger', style_class: 'push-button' });
hbox.add (button);
button.connect('clicked', function() {
size *= 1.2;
update_size ();
});
UI.main(stage);
} }
update_size(); test();
let button;
button = new St.Button ({ label: 'Smaller', style_class: 'push-button' });
hbox.add (button);
button.connect('clicked', function() {
size /= 1.2;
update_size ();
});
button = new St.Button ({ label: 'Bigger', style_class: 'push-button' });
hbox.add (button);
button.connect('clicked', function() {
size *= 1.2;
update_size ();
});
stage.show();
Clutter.main();
stage.destroy();

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

@ -251,138 +251,139 @@ SizingIllustrator.prototype = {
/****************************************************************************/ /****************************************************************************/
let stage = new Clutter.Stage({ width: 600, height: 600 }); function test() {
UI.init(stage); let stage = new Clutter.Stage({ width: 600, height: 600 });
UI.init(stage);
let mainBox = new St.BoxLayout({ width: stage.width, let mainBox = new St.BoxLayout({ width: stage.width,
height: stage.height, height: stage.height,
vertical: true, vertical: true,
style: 'padding: 10px;' style: 'padding: 10px;'
+ 'spacing: 5px;' + 'spacing: 5px;'
+ 'font: 16px sans-serif;' + 'font: 16px sans-serif;'
+ 'background: black;' + 'background: black;'
+ 'color: white;' }); + 'color: white;' });
stage.add_actor(mainBox); 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.'; 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 }); let docsLabel = new St.Label({ text: DOCS });
docsLabel.clutter_text.line_wrap = true; docsLabel.clutter_text.line_wrap = true;
mainBox.add(docsLabel); mainBox.add(docsLabel);
let bin = new St.Bin({ x_fill: true, y_fill: true, style: 'border: 2px solid #666666;' }); 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 }); mainBox.add(bin, { x_fill: true, y_fill: true, expand: true });
let illustrator = new SizingIllustrator(); let illustrator = new SizingIllustrator();
bin.add_actor(illustrator.actor); bin.add_actor(illustrator.actor);
let scrollView = new St.ScrollView(); let scrollView = new St.ScrollView();
illustrator.add(scrollView); illustrator.add(scrollView);
let box = new St.BoxLayout({ vertical: true }); let box = new St.BoxLayout({ vertical: true });
scrollView.add_actor(box); scrollView.add_actor(box);
let flowedBoxes = new FlowedBoxes(); let flowedBoxes = new FlowedBoxes();
box.add(flowedBoxes.actor, { expand: false, x_fill: true, y_fill: true }); box.add(flowedBoxes.actor, { expand: false, x_fill: true, y_fill: true });
let policyBox = new St.BoxLayout({ vertical: false }); let policyBox = new St.BoxLayout({ vertical: false });
mainBox.add(policyBox); mainBox.add(policyBox);
policyBox.add(new St.Label({ text: 'Horizontal Policy: ' })); policyBox.add(new St.Label({ text: 'Horizontal Policy: ' }));
let hpolicy = new St.Button({ label: 'AUTOMATIC', style: 'text-decoration: underline; color: #4444ff;' }); let hpolicy = new St.Button({ label: 'AUTOMATIC', style: 'text-decoration: underline; color: #4444ff;' });
policyBox.add(hpolicy); policyBox.add(hpolicy);
let spacer = new St.Bin(); let spacer = new St.Bin();
policyBox.add(spacer, { expand: true }); policyBox.add(spacer, { expand: true });
policyBox.add(new St.Label({ text: 'Vertical Policy: '})); policyBox.add(new St.Label({ text: 'Vertical Policy: '}));
let vpolicy = new St.Button({ label: 'AUTOMATIC', style: 'text-decoration: underline; color: #4444ff;' }); let vpolicy = new St.Button({ label: 'AUTOMATIC', style: 'text-decoration: underline; color: #4444ff;' });
policyBox.add(vpolicy); policyBox.add(vpolicy);
function togglePolicy(button) { function togglePolicy(button) {
switch(button.label) { switch(button.label) {
case 'AUTOMATIC': case 'AUTOMATIC':
button.label = 'ALWAYS'; button.label = 'ALWAYS';
break; break;
case 'ALWAYS': case 'ALWAYS':
button.label = 'NEVER'; button.label = 'NEVER';
break; break;
case 'NEVER': case 'NEVER':
button.label = 'AUTOMATIC'; button.label = 'AUTOMATIC';
break; break;
}
scrollView.set_policy(Gtk.PolicyType[hpolicy.label], Gtk.PolicyType[vpolicy.label]);
} }
scrollView.set_policy(Gtk.PolicyType[hpolicy.label], Gtk.PolicyType[vpolicy.label]);
}
hpolicy.connect('clicked', function() { togglePolicy(hpolicy); }); hpolicy.connect('clicked', function() { togglePolicy(hpolicy); });
vpolicy.connect('clicked', function() { togglePolicy(vpolicy); }); vpolicy.connect('clicked', function() { togglePolicy(vpolicy); });
let fadeBox = new St.BoxLayout({ vertical: false }); let fadeBox = new St.BoxLayout({ vertical: false });
mainBox.add(fadeBox); mainBox.add(fadeBox);
spacer = new St.Bin(); spacer = new St.Bin();
fadeBox.add(spacer, { expand: true }); fadeBox.add(spacer, { expand: true });
fadeBox.add(new St.Label({ text: 'Padding: '})); fadeBox.add(new St.Label({ text: 'Padding: '}));
let paddingButton = new St.Button({ label: 'No', style: 'text-decoration: underline; color: #4444ff;padding-right:3px;' }); let paddingButton = new St.Button({ label: 'No', style: 'text-decoration: underline; color: #4444ff;padding-right:3px;' });
fadeBox.add(paddingButton); fadeBox.add(paddingButton);
fadeBox.add(new St.Label({ text: 'Borders: '})); fadeBox.add(new St.Label({ text: 'Borders: '}));
let borderButton = new St.Button({ label: 'No', style: 'text-decoration: underline; color: #4444ff;padding-right:3px;' }); let borderButton = new St.Button({ label: 'No', style: 'text-decoration: underline; color: #4444ff;padding-right:3px;' });
fadeBox.add(borderButton); fadeBox.add(borderButton);
fadeBox.add(new St.Label({ text: 'Vertical Fade: '})); fadeBox.add(new St.Label({ text: 'Vertical Fade: '}));
let vfade = new St.Button({ label: 'No', style: 'text-decoration: underline; color: #4444ff;' }); let vfade = new St.Button({ label: 'No', style: 'text-decoration: underline; color: #4444ff;' });
fadeBox.add(vfade); fadeBox.add(vfade);
function togglePadding(button) { function togglePadding(button) {
switch(button.label) { switch(button.label) {
case 'No': case 'No':
button.label = 'Yes'; button.label = 'Yes';
break; break;
case 'Yes': case 'Yes':
button.label = 'No'; button.label = 'No';
break; break;
}
if (scrollView.style == null)
scrollView.style = (button.label == 'Yes' ? 'padding: 10px;' : 'padding: 0;');
else
scrollView.style += (button.label == 'Yes' ? 'padding: 10px;' : 'padding: 0;');
} }
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', function() { togglePadding(paddingButton); }); paddingButton.connect('clicked', function() { togglePadding(paddingButton); });
function toggleBorders(button) { function toggleBorders(button) {
switch(button.label) { switch(button.label) {
case 'No': case 'No':
button.label = 'Yes'; button.label = 'Yes';
break; break;
case 'Yes': case 'Yes':
button.label = 'No'; button.label = 'No';
break; 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;');
} }
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', function() { toggleBorders(borderButton); }); borderButton.connect('clicked', function() { toggleBorders(borderButton); });
function toggleFade(button) { function toggleFade(button) {
switch(button.label) { switch(button.label) {
case 'No': case 'No':
button.label = 'Yes'; button.label = 'Yes';
break; break;
case 'Yes': case 'Yes':
button.label = 'No'; button.label = 'No';
break; break;
}
scrollView.set_style_class_name(button.label == 'Yes' ? 'vfade' : '');
} }
scrollView.set_style_class_name(button.label == 'Yes' ? 'vfade' : '');
vfade.connect('clicked', function() { toggleFade(vfade); });
UI.main(stage);
} }
test();
vfade.connect('clicked', function() { toggleFade(vfade); });
stage.show();
Clutter.main();
stage.destroy();

73
tests/interactive/scrolling.js
View File

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

92
tests/interactive/table.js
View File

@ -5,51 +5,53 @@ const St = imports.gi.St;
const UI = imports.testcommon.ui; const UI = imports.testcommon.ui;
let stage = new Clutter.Stage({ width: 600, height: 600 }); function test() {
UI.init(stage); let stage = new Clutter.Stage({ width: 600, height: 600 });
UI.init(stage);
let vbox = new St.BoxLayout({ vertical: true, let vbox = new St.BoxLayout({ vertical: true,
width: stage.width, width: stage.width,
height: stage.height, height: stage.height,
style: 'padding: 10px; ' style: 'padding: 10px; '
+ 'spacing: 10px;' + 'spacing: 10px;'
+ 'font: 15px sans-serif;' }); + 'font: 15px sans-serif;' });
stage.add_actor(vbox); stage.add_actor(vbox);
function L(text, color) { function L(text, color) {
return new St.Label({ text: text, return new St.Label({ text: text,
style: "background: " + color + ";" style: "background: " + color + ";"
+ "border: 1px solid rgba(0,0,0,0.5);" + "border: 1px solid rgba(0,0,0,0.5);"
+ "padding: 1em;" }); + "padding: 1em;" });
}
////////////////////////////////////////////////////////////////////////////////
let table = new St.Table({ style: "border: 10px solid #888888;"
+ "padding: 10px;"
+ "spacing-rows: 5px;"
+ "spacing-columns: 15px;" });
vbox.add(table, { expand: true });
table.add(L("1", "#ff0000"),
{ row: 0, col: 0, col_span: 3 });
table.add(L("2", "#00ff00"),
{ row: 1, col: 0, row_span: 2 });
table.add(L("3", "#0000ff"),
{ row: 1, col: 1,
x_expand: 0 });
table.add(L("4", "#ffff00"),
{ row: 1, col: 2,
y_expand: 0, y_fill: 0
});
table.add(L("5", "#ff00ff"),
{ row: 2, col: 1, x_expand: 0 });
table.add(L("6", "#00ffff"),
{ row: 2, col: 2,
x_expand: 0, x_fill: 0, x_align: St.Align.END,
y_expand: 0, y_fill: 0, y_align: St.Align.END });
////////////////////////////////////////////////////////////////////////////////
UI.main(stage);
} }
test();
////////////////////////////////////////////////////////////////////////////////
let table = new St.Table({ style: "border: 10px solid #888888;"
+ "padding: 10px;"
+ "spacing-rows: 5px;"
+ "spacing-columns: 15px;" });
vbox.add(table, { expand: true });
table.add(L("1", "#ff0000"),
{ row: 0, col: 0, col_span: 3 });
table.add(L("2", "#00ff00"),
{ row: 1, col: 0, row_span: 2 });
table.add(L("3", "#0000ff"),
{ row: 1, col: 1,
x_expand: 0 });
table.add(L("4", "#ffff00"),
{ row: 1, col: 2,
y_expand: 0, y_fill: 0
});
table.add(L("5", "#ff00ff"),
{ row: 2, col: 1, x_expand: 0 });
table.add(L("6", "#00ffff"),
{ row: 2, col: 2,
x_expand: 0, x_fill: 0, x_align: St.Align.END,
y_expand: 0, y_fill: 0, y_align: St.Align.END });
////////////////////////////////////////////////////////////////////////////////
stage.show();
Clutter.main();

48
tests/interactive/transitions.js
View File

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

8
tests/testcommon/ui.js
View File

@ -13,3 +13,11 @@ function init(stage) {
let theme = new St.Theme({ application_stylesheet: stylesheetPath }); let theme = new St.Theme({ application_stylesheet: stylesheetPath });
context.set_theme(theme); context.set_theme(theme);
} }
function main(stage) {
stage.show();
stage.connect('destroy', function() {
Clutter.main_quit();
});
Clutter.main();
}