From 412c50b9398eddec248bd8c0a01cc329544e809d Mon Sep 17 00:00:00 2001 From: Ray Strode Date: Wed, 5 Jan 2011 10:08:50 -0500 Subject: [PATCH] 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 --- tests/Makefile.am | 1 + tests/interactive/borders.js | 59 ++++++++++++++++++++++++++++++++ tests/testcommon/face-plain.png | Bin 0 -> 4298 bytes tests/testcommon/test.css | 17 +++++++++ 4 files changed, 77 insertions(+) create mode 100644 tests/testcommon/face-plain.png diff --git a/tests/Makefile.am b/tests/Makefile.am index 9fb38a294..5958ffb11 100644 --- a/tests/Makefile.am +++ b/tests/Makefile.am @@ -15,6 +15,7 @@ TEST_JS = \ interactive/scroll-view-sizing.js \ interactive/table.js \ testcommon/border-image.png \ + testcommon/face-plain.png \ testcommon/ui.js \ unit/format.js EXTRA_DIST += $(TEST_JS) diff --git a/tests/interactive/borders.js b/tests/interactive/borders.js index 7c5cda13a..5c97ea105 100644 --- a/tests/interactive/borders.js +++ b/tests/interactive/borders.js @@ -71,6 +71,65 @@ box.add(new St.Label({ text: "Border Image", style_class: "border-image", style: "padding: 10px;" })); +box.add(new St.Label({ text: "Border Image with Gradient", + style_class: 'border-image-with-background-gradient', + style: "padding: 10px;" + + 'background-gradient-direction: vertical;' })); + +box.add(new St.Label({ text: "Rounded, framed, shadowed gradients" })); + +let framedGradients = new St.BoxLayout({ vertical: false, + style: 'padding: 10px; spacing: 12px;' }); +box.add(framedGradients); + +function addGradientCase(direction, borderWidth, borderRadius, extra) { + let gradientBox = new St.BoxLayout({ style_class: 'background-gradient', + style: 'border: ' + borderWidth + 'px solid #8b8b8b;' + + '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, '-st-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);'); +addGradientCase ('horizontal', 2, 5, '-st-shadow: 0px 2px 0px 0px rgba(0,255,0,0.5);'); +addGradientCase ('horizontal', 5, 2, '-st-shadow: 2px 0px 0px 0px rgba(0,0,255,0.5);'); +addGradientCase ('horizontal', 5, 20, '-st-shadow: 0px 0px 4px 0px rgba(255,0,0,0.5);'); +addGradientCase ('vertical', 0, 5, '-st-shadow: 0px 0px 0px 4px rgba(0,0,0,0.5);'); +addGradientCase ('vertical', 2, 5, '-st-shadow: 0px 0px 4px 4px rgba(0,0,0,0.5);'); +addGradientCase ('vertical', 5, 2, '-st-shadow: -2px -2px 6px 0px rgba(0,0,0,0.5);'); +addGradientCase ('vertical', 5, 20, '-st-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-shadow: 1px 1px 4px 0px rgba(0,0,0,0.5); background-color: rgba(0,0,0,0)'); +addBackgroundImageCase (0, 5, 32, 32, '-st-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);'); +addBackgroundImageCase (2, 5, 32, 32, '-st-shadow: 0px 2px 0px 0px rgba(0,255,0,0.5);'); +addBackgroundImageCase (5, 2, 32, 32, '-st-shadow: 2px 0px 0px 0px rgba(0,0,255,0.5);'); +addBackgroundImageCase (5, 20, 32, 32, '-st-shadow: 0px 0px 4px 0px rgba(255,0,0,0.5);'); +addBackgroundImageCase (0, 5, 48, 48, '-st-shadow: 0px 0px 0px 4px rgba(0,0,0,0.5);'); +addBackgroundImageCase (5, 5, 48, 48, '-st-shadow: 0px 0px 4px 4px rgba(0,0,0,0.5);'); +addBackgroundImageCase (0, 5, 64, 64, '-st-shadow: -2px -2px 6px 0px rgba(0,0,0,0.5);'); +addBackgroundImageCase (5, 5, 64, 64, '-st-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(); diff --git a/tests/testcommon/face-plain.png b/tests/testcommon/face-plain.png new file mode 100644 index 0000000000000000000000000000000000000000..962d70f1bae824b12c0db60e099bdf99be9ec378 GIT binary patch literal 4298 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 literal 0 HcmV?d00001 diff --git a/tests/testcommon/test.css b/tests/testcommon/test.css index d1005eeb3..34611118b 100644 --- a/tests/testcommon/test.css +++ b/tests/testcommon/test.css @@ -37,6 +37,23 @@ stage { border-image: url('border-image.png') 16; } +.background-gradient { + background-gradient-start: #88ff88; + background-gradient-end: #8888ff; +} + +.border-image-with-background-gradient { + border: 15px black solid; + border-image: url('border-image.png') 16; + background-gradient-start: #88ff88; + background-gradient-end: #8888ff; +} + +.background-image { + background-image: url('face-plain.png'); + background-color: white; +} + .push-button { background: #eeddbb; border: 1px solid black;