brl/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
ce91d85bc0
gnome-shell/tests/interactive/borders.js

136 lines
6.5 KiB
JavaScript
Raw Normal View History

Add support for colored borders Use BigRectangle to draw the border and background if there's a border width or border radius and no border image. (Only uniform borders are supported for now with some deviations from the CSS model noted in the comments.) The background color and image parameters are removed from StWidget's draw_background() method since they were not used for StButton (the only current user) and the encapsulation break that they presented caused some minor problems. Add a test case for borders, and also use borders to style the buttons in the 'inline-style' test case. https://bugzilla.gnome.org/show_bug.cgi?id=595993
2009-09-20 16:21:47 -04:00
/* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */
const Clutter = imports.gi.Clutter;
const St = imports.gi.St;
const UI = imports.testcommon.ui;
UI.init();
let stage = Clutter.Stage.get_default();
[tests/borders.js] Shrink stage size to 640x480 to fit on netbook screen. Make the area scrollable. Add a few more tests.
2010-01-15 18:32:48 -05:00
stage.width = 640;
stage.height = 480;
Add support for colored borders Use BigRectangle to draw the border and background if there's a border width or border radius and no border image. (Only uniform borders are supported for now with some deviations from the CSS model noted in the comments.) The background color and image parameters are removed from StWidget's draw_background() method since they were not used for StButton (the only current user) and the encapsulation break that they presented caused some minor problems. Add a test case for borders, and also use borders to style the buttons in the 'inline-style' test case. https://bugzilla.gnome.org/show_bug.cgi?id=595993
2009-09-20 16:21:47 -04:00
tests: Fix scrolling in border.js and border-radius.js In both tests the scrolled actor's width was fixed to the stage width, so that the scroll bars ended up outside the visible area. Fix by adding an outer container with a fixed width and expanding the scroll view to fill the available area.
2010-12-09 07:20:09 -05:00
let vbox = new St.BoxLayout({ width: stage.width,
Add support for colored borders Use BigRectangle to draw the border and background if there's a border width or border radius and no border image. (Only uniform borders are supported for now with some deviations from the CSS model noted in the comments.) The background color and image parameters are removed from StWidget's draw_background() method since they were not used for StButton (the only current user) and the encapsulation break that they presented caused some minor problems. Add a test case for borders, and also use borders to style the buttons in the 'inline-style' test case. https://bugzilla.gnome.org/show_bug.cgi?id=595993
2009-09-20 16:21:47 -04:00
height: stage.height,
tests: Fix scrolling in border.js and border-radius.js In both tests the scrolled actor's width was fixed to the stage width, so that the scroll bars ended up outside the visible area. Fix by adding an outer container with a fixed width and expanding the scroll view to fill the available area.
2010-12-09 07:20:09 -05:00
style: 'background: #ffee88;' });
stage.add_actor(vbox);
[tests/borders.js] Shrink stage size to 640x480 to fit on netbook screen. Make the area scrollable. Add a few more tests.
2010-01-15 18:32:48 -05:00
let scroll = new St.ScrollView();
tests: Fix scrolling in border.js and border-radius.js In both tests the scrolled actor's width was fixed to the stage width, so that the scroll bars ended up outside the visible area. Fix by adding an outer container with a fixed width and expanding the scroll view to fill the available area.
2010-12-09 07:20:09 -05:00
vbox.add(scroll, { expand: true });
let box = new St.BoxLayout({ vertical: true,
style: 'padding: 10px;'
+ 'spacing: 20px;' });
scroll.add_actor(box);
box.add(new St.Label({ text: "Hello World",
style: 'border: 1px solid black; '
+ 'padding: 5px;' }));
Add support for colored borders Use BigRectangle to draw the border and background if there's a border width or border radius and no border image. (Only uniform borders are supported for now with some deviations from the CSS model noted in the comments.) The background color and image parameters are removed from StWidget's draw_background() method since they were not used for StButton (the only current user) and the encapsulation break that they presented caused some minor problems. Add a test case for borders, and also use borders to style the buttons in the 'inline-style' test case. https://bugzilla.gnome.org/show_bug.cgi?id=595993
2009-09-20 16:21:47 -04:00
tests: Fix scrolling in border.js and border-radius.js In both tests the scrolled actor's width was fixed to the stage width, so that the scroll bars ended up outside the visible area. Fix by adding an outer container with a fixed width and expanding the scroll view to fill the available area.
2010-12-09 07:20:09 -05:00
box.add(new St.Label({ text: "Hello Round World",
style: 'border: 3px solid green; '
+ 'border-radius: 8px; '
+ 'padding: 5px;' }));
Add support for colored borders Use BigRectangle to draw the border and background if there's a border width or border radius and no border image. (Only uniform borders are supported for now with some deviations from the CSS model noted in the comments.) The background color and image parameters are removed from StWidget's draw_background() method since they were not used for StButton (the only current user) and the encapsulation break that they presented caused some minor problems. Add a test case for borders, and also use borders to style the buttons in the 'inline-style' test case. https://bugzilla.gnome.org/show_bug.cgi?id=595993
2009-09-20 16:21:47 -04:00
tests: Fix scrolling in border.js and border-radius.js In both tests the scrolled actor's width was fixed to the stage width, so that the scroll bars ended up outside the visible area. Fix by adding an outer container with a fixed width and expanding the scroll view to fill the available area.
2010-12-09 07:20:09 -05:00
box.add(new St.Label({ text: "Hello Background",
style: 'border: 3px solid green; '
+ 'border-radius: 8px; '
+ 'background: white; '
+ 'padding: 5px;' }));
Add support for colored borders Use BigRectangle to draw the border and background if there's a border width or border radius and no border image. (Only uniform borders are supported for now with some deviations from the CSS model noted in the comments.) The background color and image parameters are removed from StWidget's draw_background() method since they were not used for StButton (the only current user) and the encapsulation break that they presented caused some minor problems. Add a test case for borders, and also use borders to style the buttons in the 'inline-style' test case. https://bugzilla.gnome.org/show_bug.cgi?id=595993
2009-09-20 16:21:47 -04:00
tests: Fix scrolling in border.js and border-radius.js In both tests the scrolled actor's width was fixed to the stage width, so that the scroll bars ended up outside the visible area. Fix by adding an outer container with a fixed width and expanding the scroll view to fill the available area.
2010-12-09 07:20:09 -05:00
box.add(new St.Label({ text: "Hello Translucent Black Border",
style: 'border: 3px solid rgba(0, 0, 0, 0.4); '
+ 'background: white; ' }));
Add support for colored borders Use BigRectangle to draw the border and background if there's a border width or border radius and no border image. (Only uniform borders are supported for now with some deviations from the CSS model noted in the comments.) The background color and image parameters are removed from StWidget's draw_background() method since they were not used for StButton (the only current user) and the encapsulation break that they presented caused some minor problems. Add a test case for borders, and also use borders to style the buttons in the 'inline-style' test case. https://bugzilla.gnome.org/show_bug.cgi?id=595993
2009-09-20 16:21:47 -04:00
tests: Fix scrolling in border.js and border-radius.js In both tests the scrolled actor's width was fixed to the stage width, so that the scroll bars ended up outside the visible area. Fix by adding an outer container with a fixed width and expanding the scroll view to fill the available area.
2010-12-09 07:20:09 -05:00
box.add(new St.Label({ text: "Hello Translucent Background",
style: 'background: rgba(255, 255, 255, 0.3);' }));
[tests/borders.js] Shrink stage size to 640x480 to fit on netbook screen. Make the area scrollable. Add a few more tests.
2010-01-15 18:32:48 -05:00
tests: Fix scrolling in border.js and border-radius.js In both tests the scrolled actor's width was fixed to the stage width, so that the scroll bars ended up outside the visible area. Fix by adding an outer container with a fixed width and expanding the scroll view to fill the available area.
2010-12-09 07:20:09 -05:00
box.add(new St.Label({ text: "Border, Padding, Content: 20px" }));
Add support for colored borders Use BigRectangle to draw the border and background if there's a border width or border radius and no border image. (Only uniform borders are supported for now with some deviations from the CSS model noted in the comments.) The background color and image parameters are removed from StWidget's draw_background() method since they were not used for StButton (the only current user) and the encapsulation break that they presented caused some minor problems. Add a test case for borders, and also use borders to style the buttons in the 'inline-style' test case. https://bugzilla.gnome.org/show_bug.cgi?id=595993
2009-09-20 16:21:47 -04:00
let b1 = new St.BoxLayout({ vertical: true,
style: 'border: 20px solid black; '
+ 'background: white; '
+ 'padding: 20px;' });
tests: Fix scrolling in border.js and border-radius.js In both tests the scrolled actor's width was fixed to the stage width, so that the scroll bars ended up outside the visible area. Fix by adding an outer container with a fixed width and expanding the scroll view to fill the available area.
2010-12-09 07:20:09 -05:00
box.add(b1);
Add support for colored borders Use BigRectangle to draw the border and background if there's a border width or border radius and no border image. (Only uniform borders are supported for now with some deviations from the CSS model noted in the comments.) The background color and image parameters are removed from StWidget's draw_background() method since they were not used for StButton (the only current user) and the encapsulation break that they presented caused some minor problems. Add a test case for borders, and also use borders to style the buttons in the 'inline-style' test case. https://bugzilla.gnome.org/show_bug.cgi?id=595993
2009-09-20 16:21:47 -04:00
b1.add(new St.BoxLayout({ width: 20, height: 20,
style: 'background: black' }));
tests: Fix scrolling in border.js and border-radius.js In both tests the scrolled actor's width was fixed to the stage width, so that the scroll bars ended up outside the visible area. Fix by adding an outer container with a fixed width and expanding the scroll view to fill the available area.
2010-12-09 07:20:09 -05:00
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;' }));
Match CSS for background extents The CSS specification says that the background extends to the edge of the border (settable in CSS3 with border-clip), make BigRectangle match this by computing an "effective border color" as 'border OVER background'. (If we don't want this behavior - e.g., to be able to use the transparent borders as margins, then alternatively transparent border handling would have to be fixed in st-widget.c, since prior to this transparent and translucent borders were handled differently.) https://bugzilla.gnome.org/show_bug.cgi?id=595993
2009-09-20 18:03:18 -04:00
tests: Fix scrolling in border.js and border-radius.js In both tests the scrolled actor's width was fixed to the stage width, so that the scroll bars ended up outside the visible area. Fix by adding an outer container with a fixed width and expanding the scroll view to fill the available area.
2010-12-09 07:20:09 -05:00
box.add(new St.Label({ text: "Transparent border",
style: 'border: 20px solid transparent; '
+ 'background: white; '
+ 'padding: 10px;' }));
Add support for colored borders Use BigRectangle to draw the border and background if there's a border width or border radius and no border image. (Only uniform borders are supported for now with some deviations from the CSS model noted in the comments.) The background color and image parameters are removed from StWidget's draw_background() method since they were not used for StButton (the only current user) and the encapsulation break that they presented caused some minor problems. Add a test case for borders, and also use borders to style the buttons in the 'inline-style' test case. https://bugzilla.gnome.org/show_bug.cgi?id=595993
2009-09-20 16:21:47 -04:00
tests: Fix scrolling in border.js and border-radius.js In both tests the scrolled actor's width was fixed to the stage width, so that the scroll bars ended up outside the visible area. Fix by adding an outer container with a fixed width and expanding the scroll view to fill the available area.
2010-12-09 07:20:09 -05:00
box.add(new St.Label({ text: "Border Image",
style_class: "border-image",
style: "padding: 10px;" }));
Add support for colored borders Use BigRectangle to draw the border and background if there's a border width or border radius and no border image. (Only uniform borders are supported for now with some deviations from the CSS model noted in the comments.) The background color and image parameters are removed from StWidget's draw_background() method since they were not used for StButton (the only current user) and the encapsulation break that they presented caused some minor problems. Add a test case for borders, and also use borders to style the buttons in the 'inline-style' test case. https://bugzilla.gnome.org/show_bug.cgi?id=595993
2009-09-20 16:21:47 -04:00
tests: showcase borders with non-solid backgrounds This commit adds a few more examples to borders.js that render borders with various combinations of gradients, background images, shadows, and border-images. https://bugzilla.gnome.org/show_bug.cgi?id=636976
2011-01-05 10:08:50 -05:00
box.add(new St.Label({ text: "Border Image with Gradient",
style_class: 'border-image-with-background-gradient',
style: "padding: 10px;"
+ 'background-gradient-direction: vertical;' }));
box.add(new St.Label({ text: "Rounded, framed, shadowed gradients" }));
let framedGradients = new St.BoxLayout({ vertical: false,
style: 'padding: 10px; spacing: 12px;' });
box.add(framedGradients);
function addGradientCase(direction, borderWidth, borderRadius, extra) {
let gradientBox = new St.BoxLayout({ style_class: 'background-gradient',
style: 'border: ' + borderWidth + 'px solid #8b8b8b;'
+ 'border-radius: ' + borderRadius + 'px;'
+ 'background-gradient-direction: ' + direction + ';'
+ 'width: 32px;'
+ 'height: 32px;'
+ extra });
framedGradients.add(gradientBox, { x_fill: false, y_fill: false } );
}
StThemeNode: Split -st-shadow into three attributes Currently, "-st-shadow" can mean one of three very different things: 1) shadow based on alpha of the background image 2) shadow the "border box" of the node 3) shadow applied to the content of a StIcon It isn't well defined which of the above 3 cases -st-shadow will mean for any given node, however. This commit splits the property into three different properties, "box-shadow", "-st-background-image-shadow", and "icon-shadow" to make it all very explicit. https://bugzilla.gnome.org/show_bug.cgi?id=636976
2011-01-13 18:27:24 -05:00
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);');
tests: showcase borders with non-solid backgrounds This commit adds a few more examples to borders.js that render borders with various combinations of gradients, background images, shadows, and border-images. https://bugzilla.gnome.org/show_bug.cgi?id=636976
2011-01-05 10:08:50 -05:00
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');
StThemeNode: Split -st-shadow into three attributes Currently, "-st-shadow" can mean one of three very different things: 1) shadow based on alpha of the background image 2) shadow the "border box" of the node 3) shadow applied to the content of a StIcon It isn't well defined which of the above 3 cases -st-shadow will mean for any given node, however. This commit splits the property into three different properties, "box-shadow", "-st-background-image-shadow", and "icon-shadow" to make it all very explicit. https://bugzilla.gnome.org/show_bug.cgi?id=636976
2011-01-13 18:27:24 -05:00
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);');
tests: showcase borders with non-solid backgrounds This commit adds a few more examples to borders.js that render borders with various combinations of gradients, background images, shadows, and border-images. https://bugzilla.gnome.org/show_bug.cgi?id=636976
2011-01-05 10:08:50 -05:00
addBackgroundImageCase (0, 5, 32, 32, 'background-position: 2px 5px');
Add support for colored borders Use BigRectangle to draw the border and background if there's a border width or border radius and no border image. (Only uniform borders are supported for now with some deviations from the CSS model noted in the comments.) The background color and image parameters are removed from StWidget's draw_background() method since they were not used for StButton (the only current user) and the encapsulation break that they presented caused some minor problems. Add a test case for borders, and also use borders to style the buttons in the 'inline-style' test case. https://bugzilla.gnome.org/show_bug.cgi?id=595993
2009-09-20 16:21:47 -04:00
stage.show();
Clutter.main();
stage.destroy();
Reference in New Issue Copy Permalink