From c7196a519f3fcc02b3c8056dc27ea8a4f7942b24 Mon Sep 17 00:00:00 2001 From: "Jasper St. Pierre" Date: Sun, 24 Jun 2012 15:11:41 -0400 Subject: [PATCH] tests: Run each test in a function 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 --- tests/interactive/background-size.js | 165 +++++++++--------- tests/interactive/border-radius.js | 97 +++++------ tests/interactive/border-width.js | 91 +++++----- tests/interactive/borders.js | 212 +++++++++++------------ tests/interactive/box-layout.js | 147 ++++++++-------- tests/interactive/box-shadows.js | 87 +++++----- tests/interactive/calendar.js | 31 ++-- tests/interactive/css-fonts.js | 56 ++++--- tests/interactive/entry.js | 31 ++-- tests/interactive/icons.js | 142 ++++++++-------- tests/interactive/inline-style.js | 70 ++++---- tests/interactive/scroll-view-sizing.js | 213 ++++++++++++------------ tests/interactive/scrolling.js | 73 ++++---- tests/interactive/table.js | 92 +++++----- tests/interactive/transitions.js | 48 +++--- tests/testcommon/ui.js | 8 + 16 files changed, 794 insertions(+), 769 deletions(-) diff --git a/tests/interactive/background-size.js b/tests/interactive/background-size.js index 72112fa91..f803260b1 100644 --- a/tests/interactive/background-size.js +++ b/tests/interactive/background-size.js @@ -6,96 +6,97 @@ const St = imports.gi.St; const UI = imports.testcommon.ui; -let stage = new Clutter.Stage({ user_resizable: true, width: 1024, height: 768 }); -UI.init(stage); +function test() { + let stage = new Clutter.Stage({ user_resizable: true, width: 1024, height: 768 }); + 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 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 }); + let scroll = new St.ScrollView(); + vbox.add(scroll, { expand: true }); -let vbox = new St.BoxLayout({ vertical: true, - style: 'padding: 10px;' - + 'spacing: 20px;' }); -scroll.add_actor(vbox); + let vbox = new St.BoxLayout({ vertical: true, + style: 'padding: 10px;' + + 'spacing: 20px;' }); + scroll.add_actor(vbox); -let tbox = null; + let tbox = null; -function addTestCase(image, size, backgroundSize, useCairo) { - // Using a border in CSS forces cairo rendering. - // To get a border using cogl, we paint a border using - // paint signal hacks. + function addTestCase(image, size, backgroundSize, useCairo) { + // Using a border in CSS forces cairo rendering. + // To get a border using cogl, we paint a border using + // paint signal hacks. - let obin = new St.Bin(); - if (useCairo) - obin.style = 'border: 3px solid green;'; - else - obin.connect_after('paint', function(actor) { - Cogl.set_source_color4f(0, 1, 0, 1); + let obin = new St.Bin(); + if (useCairo) + obin.style = 'border: 3px solid green;'; + else + obin.connect_after('paint', function(actor) { + Cogl.set_source_color4f(0, 1, 0, 1); - let geom = actor.get_allocation_geometry(); - let width = 3; + let geom = actor.get_allocation_geometry(); + let width = 3; - // clockwise order - Cogl.rectangle(0, 0, geom.width, width); - Cogl.rectangle(geom.width - width, width, - geom.width, geom.height); - Cogl.rectangle(0, geom.height, - geom.width - width, geom.height - width); - Cogl.rectangle(0, geom.height - width, - width, width); - }); - tbox.add(obin); + // clockwise order + Cogl.rectangle(0, 0, geom.width, width); + Cogl.rectangle(geom.width - width, width, + geom.width, geom.height); + Cogl.rectangle(0, geom.height, + geom.width - width, geom.height - width); + Cogl.rectangle(0, geom.height - width, + width, width); + }); + tbox.add(obin); - let [width, height] = size; - let bin = new St.Bin({ style_class: 'background-image-' + image, - width: width, - height: height, - style: 'border: 1px solid transparent;' - + 'background-size: ' + backgroundSize + ';', - x_fill: true, - y_fill: true - }); - obin.set_child(bin); + let [width, height] = size; + let bin = new St.Bin({ style_class: 'background-image-' + image, + width: width, + height: height, + style: '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;' - })); + bin.set_child(new St.Label({ text: backgroundSize + (useCairo ? ' (cairo)' : ' (cogl)'), + style: 'font-size: 15px;' + + '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); } - -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(); +test(); diff --git a/tests/interactive/border-radius.js b/tests/interactive/border-radius.js index 1cd3d04cb..865c512bf 100644 --- a/tests/interactive/border-radius.js +++ b/tests/interactive/border-radius.js @@ -5,57 +5,58 @@ const St = imports.gi.St; const UI = imports.testcommon.ui; -let stage = new Clutter.Stage({ width: 640, height: 480 }); -UI.init(stage); +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 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 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); + 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;'; + 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 }); + 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); } - -// 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(); +test(); diff --git a/tests/interactive/border-width.js b/tests/interactive/border-width.js index e575a2f40..4ac118c94 100644 --- a/tests/interactive/border-width.js +++ b/tests/interactive/border-width.js @@ -5,54 +5,55 @@ const St = imports.gi.St; const UI = imports.testcommon.ui; -let stage = new Clutter.Stage({ width: 640, height: 480 }); -UI.init(stage); +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 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 scroll = new St.ScrollView(); + vbox.add(scroll, { expand: true }); -let box = new St.BoxLayout({ vertical: true, - style: 'spacing: 20px;' }); -scroll.add_actor(box); + 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;'; + 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 }); + 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); } - -// 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(); +test(); diff --git a/tests/interactive/borders.js b/tests/interactive/borders.js index 88825ed22..0e27058c5 100644 --- a/tests/interactive/borders.js +++ b/tests/interactive/borders.js @@ -5,129 +5,131 @@ const St = imports.gi.St; const UI = imports.testcommon.ui; -let stage = new Clutter.Stage({ width: 640, height: 480 }); -UI.init(stage); +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 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 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); + 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 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 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 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 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: "Hello Translucent Background", + 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, - style: 'border: 20px solid black; ' - + 'background: white; ' - + 'padding: 20px;' }); -box.add(b1); + 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' })); + 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: "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: "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", + 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: "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" })); + 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); + 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;' + function addGradientCase(direction, borderWidth, borderRadius, extra) { + let gradientBox = new St.BoxLayout({ style_class: 'background-gradient', + style: 'border: ' + borderWidth + 'px solid #8b0000;' +>>>>>>> 2aff593... tests: Run each test in a function + 'border-radius: ' + borderRadius + 'px;' - + 'width: ' + width + 'px;' - + 'height: ' + height + 'px;' + + 'background-gradient-direction: ' + direction + ';' + + 'width: 32px;' + + 'height: 32px;' + 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); } - -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(); +test(); diff --git a/tests/interactive/box-layout.js b/tests/interactive/box-layout.js index 9e9b21123..09ce8c70e 100644 --- a/tests/interactive/box-layout.js +++ b/tests/interactive/box-layout.js @@ -5,88 +5,87 @@ const St = imports.gi.St; const UI = imports.testcommon.ui; -let stage = new Clutter.Stage(); -UI.init(stage); +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 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 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 }); + 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 }); + 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' })); + colored_boxes.add(new St.Label({ text: "Default", + style: 'border: 1px solid #aaaaaa; ' + + 'background: #cceeff' })); -b2.add(new St.Label({ x: 50, - y: 50, - text: "Fixed", - style: 'border: 1px solid #aaaaaa;' - + 'background: #ffffcc' })); + b2.add(new St.Label({ x: 50, + y: 50, + text: "Fixed", + style: 'border: 1px solid #aaaaaa;' + + 'background: #ffffcc' })); -//////////////////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////////////////// -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 }); + 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; + 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(); diff --git a/tests/interactive/box-shadows.js b/tests/interactive/box-shadows.js index 42ed685f7..e80cb1b75 100644 --- a/tests/interactive/box-shadows.js +++ b/tests/interactive/box-shadows.js @@ -5,52 +5,53 @@ const St = imports.gi.St; const UI = imports.testcommon.ui; -let stage = new Clutter.Stage({ width: 640, height: 480 }); -UI.init(stage); +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 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 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); + 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 } ); + 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); } - -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(); +test(); diff --git a/tests/interactive/calendar.js b/tests/interactive/calendar.js index a181aa891..18db19348 100644 --- a/tests/interactive/calendar.js +++ b/tests/interactive/calendar.js @@ -7,21 +7,22 @@ const St = imports.gi.St; const Calendar = imports.ui.calendar; const UI = imports.testcommon.ui; -let stage = new Clutter.Stage({ width: 400, height: 400 }); -UI.init(stage); +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); + 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); -let calendar = new Calendar.Calendar(); -vbox.add(calendar.actor, - { expand: true, - x_fill: false, x_align: St.Align.MIDDLE, - y_fill: false, y_align: St.Align.START }); + let calendar = new Calendar.Calendar(); + vbox.add(calendar.actor, + { expand: true, + x_fill: false, x_align: St.Align.MIDDLE, + y_fill: false, y_align: St.Align.START }); -stage.show(); -Clutter.main(); -stage.destroy(); + UI.main(stage); +} +test(); diff --git a/tests/interactive/css-fonts.js b/tests/interactive/css-fonts.js index d23396e5e..89af66704 100644 --- a/tests/interactive/css-fonts.js +++ b/tests/interactive/css-fonts.js @@ -5,35 +5,37 @@ const St = imports.gi.St; const UI = imports.testcommon.ui; -let stage = new Clutter.Stage(); -UI.init(stage); +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 b = new St.BoxLayout({ vertical: true, + width: stage.width, + height: stage.height }); + stage.add_actor(b); -let t; + 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); + 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); + 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); -stage.show(); -Clutter.main(); + UI.main(stage); +} +test(); diff --git a/tests/interactive/entry.js b/tests/interactive/entry.js index 852aa99c1..df93676f7 100644 --- a/tests/interactive/entry.js +++ b/tests/interactive/entry.js @@ -7,21 +7,22 @@ const St = imports.gi.St; const Calendar = imports.ui.calendar; const UI = imports.testcommon.ui; -let stage = new Clutter.Stage({ width: 400, height: 400 }); -UI.init(stage); +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); + 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); -let entry = new St.Entry({ style: 'border: 1px solid black;' }); -vbox.add(entry, - { expand: true, - y_fill: false, y_align: St.Align.MIDDLE }); -entry.grab_key_focus(); + let entry = new St.Entry({ style: 'border: 1px solid black;' }); + vbox.add(entry, + { expand: true, + y_fill: false, y_align: St.Align.MIDDLE }); + entry.grab_key_focus(); -stage.show(); -Clutter.main(); -stage.destroy(); + UI.main(stage); +} +test(); diff --git a/tests/interactive/icons.js b/tests/interactive/icons.js index f6b8d4a8e..0d074e1ce 100644 --- a/tests/interactive/icons.js +++ b/tests/interactive/icons.js @@ -5,81 +5,83 @@ const St = imports.gi.St; const UI = imports.testcommon.ui; -let stage = new Clutter.Stage(); -UI.init(stage); +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 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; ' })); + 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;' }); + 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)); + 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', - 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); } - 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); } - -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(); +test(); diff --git a/tests/interactive/inline-style.js b/tests/interactive/inline-style.js index e8e533aea..b8fe9aaff 100644 --- a/tests/interactive/inline-style.js +++ b/tests/interactive/inline-style.js @@ -5,43 +5,43 @@ const St = imports.gi.St; const UI = imports.testcommon.ui; -let stage = new Clutter.Stage(); -UI.init(stage); +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 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 hbox = new St.BoxLayout({ style: 'spacing: 12px;' }); + vbox.add(hbox); -let text = new St.Label({ text: "Styled Text" }); -vbox.add (text); + let text = new St.Label({ text: "Styled Text" }); + vbox.add (text); -let size = 24; -function update_size() { - text.style = 'font-size: ' + size + 'pt'; + 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', 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(); - -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(); - +test(); diff --git a/tests/interactive/scroll-view-sizing.js b/tests/interactive/scroll-view-sizing.js index 7ccd6d88a..14a31eed3 100644 --- a/tests/interactive/scroll-view-sizing.js +++ b/tests/interactive/scroll-view-sizing.js @@ -251,138 +251,139 @@ SizingIllustrator.prototype = { /****************************************************************************/ -let stage = new Clutter.Stage({ width: 600, height: 600 }); -UI.init(stage); +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); + 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.'; + 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 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 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.actor); + let illustrator = new SizingIllustrator(); + bin.add_actor(illustrator.actor); -let scrollView = new St.ScrollView(); -illustrator.add(scrollView); + let scrollView = new St.ScrollView(); + illustrator.add(scrollView); -let box = new St.BoxLayout({ vertical: true }); -scrollView.add_actor(box); + let box = new St.BoxLayout({ vertical: true }); + scrollView.add_actor(box); -let flowedBoxes = new FlowedBoxes(); -box.add(flowedBoxes.actor, { expand: false, x_fill: true, y_fill: true }); + let flowedBoxes = new FlowedBoxes(); + box.add(flowedBoxes.actor, { expand: false, x_fill: true, y_fill: true }); -let policyBox = new St.BoxLayout({ vertical: false }); -mainBox.add(policyBox); + 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); + 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 }); + 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); + 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 = 'AUTOMATIC'; - break; + function togglePolicy(button) { + switch(button.label) { + case 'AUTOMATIC': + button.label = 'ALWAYS'; + break; + case 'ALWAYS': + button.label = 'NEVER'; + break; + case 'NEVER': + button.label = 'AUTOMATIC'; + 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); }); -vpolicy.connect('clicked', function() { togglePolicy(vpolicy); }); + hpolicy.connect('clicked', function() { togglePolicy(hpolicy); }); + vpolicy.connect('clicked', function() { togglePolicy(vpolicy); }); -let fadeBox = new St.BoxLayout({ vertical: false }); -mainBox.add(fadeBox); + let fadeBox = new St.BoxLayout({ vertical: false }); + mainBox.add(fadeBox); -spacer = new St.Bin(); -fadeBox.add(spacer, { expand: true }); + 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: '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: '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: 'Vertical Fade: '})); + let vfade = new St.Button({ label: 'No', style: 'text-decoration: underline; color: #4444ff;' }); + fadeBox.add(vfade); -function togglePadding(button) { - switch(button.label) { - case 'No': - button.label = 'Yes'; - break; - case 'Yes': - button.label = 'No'; - break; + 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;'); } - 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) { - switch(button.label) { - case 'No': - button.label = 'Yes'; - break; - case 'Yes': - button.label = 'No'; - break; + 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;'); } - 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) { - switch(button.label) { - case 'No': - button.label = 'Yes'; - break; - case 'Yes': - button.label = 'No'; - break; + 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' : ''); } - scrollView.set_style_class_name(button.label == 'Yes' ? 'vfade' : ''); + + vfade.connect('clicked', function() { toggleFade(vfade); }); + + UI.main(stage); } - -vfade.connect('clicked', function() { toggleFade(vfade); }); - -stage.show(); -Clutter.main(); -stage.destroy(); +test(); diff --git a/tests/interactive/scrolling.js b/tests/interactive/scrolling.js index 3050f579d..1c3964607 100644 --- a/tests/interactive/scrolling.js +++ b/tests/interactive/scrolling.js @@ -6,47 +6,48 @@ const St = imports.gi.St; const UI = imports.testcommon.ui; -let stage = new Clutter.Stage(); -UI.init(stage); +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 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 toggle = new St.Button({ label: 'Horizontal Scrolling', + toggle_mode: true }); + vbox.add(toggle); -let v = new St.ScrollView(); -vbox.add(v, { expand: true }); + let v = new St.ScrollView(); + vbox.add(v, { expand: true }); -toggle.connect('notify::checked', function () { - v.set_policy(toggle.checked ? Gtk.PolicyType.AUTOMATIC - : Gtk.PolicyType.NEVER, - Gtk.PolicyType.AUTOMATIC); -}); + toggle.connect('notify::checked', function () { + v.set_policy(toggle.checked ? Gtk.PolicyType.AUTOMATIC + : Gtk.PolicyType.NEVER, + Gtk.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 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 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); + 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); } - -stage.show(); -Clutter.main(); -stage.destroy(); +test(); diff --git a/tests/interactive/table.js b/tests/interactive/table.js index b0ba36989..a18ea2b3a 100644 --- a/tests/interactive/table.js +++ b/tests/interactive/table.js @@ -5,51 +5,53 @@ const St = imports.gi.St; const UI = imports.testcommon.ui; -let stage = new Clutter.Stage({ width: 600, height: 600 }); -UI.init(stage); +function test() { + let stage = new Clutter.Stage({ width: 600, height: 600 }); + 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); + 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); -function L(text, color) { - return new St.Label({ text: text, - style: "background: " + color + ";" - + "border: 1px solid rgba(0,0,0,0.5);" - + "padding: 1em;" }); + function L(text, color) { + return new St.Label({ text: text, + style: "background: " + color + ";" + + "border: 1px solid rgba(0,0,0,0.5);" + + "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); } - -//////////////////////////////////////////////////////////////////////////////// - -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(); +test(); diff --git a/tests/interactive/transitions.js b/tests/interactive/transitions.js index ec6fc8185..6855a5f6a 100644 --- a/tests/interactive/transitions.js +++ b/tests/interactive/transitions.js @@ -5,30 +5,32 @@ const St = imports.gi.St; const UI = imports.testcommon.ui; -let stage = new Clutter.Stage(); -UI.init(stage); +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); + 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 }); + 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 }); + hbox.add(label, { x_fill: false, + y_fill: false }); + } + + //////////////////////////////////////////////////////////////////////////////// + + UI.main(stage); } - -//////////////////////////////////////////////////////////////////////////////// - -stage.show(); -Clutter.main(); +test(); diff --git a/tests/testcommon/ui.js b/tests/testcommon/ui.js index bc88db8d8..4813d76d6 100644 --- a/tests/testcommon/ui.js +++ b/tests/testcommon/ui.js @@ -13,3 +13,11 @@ function init(stage) { let theme = new St.Theme({ application_stylesheet: stylesheetPath }); context.set_theme(theme); } + +function main(stage) { + stage.show(); + stage.connect('destroy', function() { + Clutter.main_quit(); + }); + Clutter.main(); +}