From ffac5279a7271cacc7177db1c8d9f97e5dd38726 Mon Sep 17 00:00:00 2001 From: Lionel Landwerlin Date: Fri, 21 Dec 2012 12:08:48 +0000 Subject: [PATCH] tests: add animated box-shadow test to demo optimized painting --- tests/Makefile.am | 1 + tests/interactive/box-shadow-animated.js | 84 ++++++++++++++++++++++++ 2 files changed, 85 insertions(+) create mode 100644 tests/interactive/box-shadow-animated.js diff --git a/tests/Makefile.am b/tests/Makefile.am index e46463454..74567f486 100644 --- a/tests/Makefile.am +++ b/tests/Makefile.am @@ -8,6 +8,7 @@ TEST_JS = \ interactive/border-radius.js \ interactive/border-width.js \ interactive/box-layout.js \ + interactive/box-shadow-animated.js \ interactive/box-shadows.js \ interactive/calendar.js \ interactive/css-fonts.js \ diff --git a/tests/interactive/box-shadow-animated.js b/tests/interactive/box-shadow-animated.js new file mode 100644 index 000000000..2dc7ceae3 --- /dev/null +++ b/tests/interactive/box-shadow-animated.js @@ -0,0 +1,84 @@ +// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*- + +const Clutter = imports.gi.Clutter; +const St = imports.gi.St; +const Mainloop = imports.mainloop; +const GLib = imports.gi.GLib; +const Lang = imports.lang; + +const UI = imports.testcommon.ui; + +const DELAY = 2000; + +function resize_animated(label) { + if (label.width == 100) { + label.save_easing_state(); + label.set_easing_mode(Clutter.AnimationMode.EASE_OUT_QUAD); + label.set_easing_duration(DELAY - 50); + label.set_size(500, 500); + label.restore_easing_state(); + } else { + label.save_easing_state(); + label.set_easing_mode(Clutter.AnimationMode.EASE_OUT_QUAD); + label.set_easing_duration(DELAY - 50); + label.set_size(100, 100); + label.restore_easing_state(); + } +} + +function get_css_style(shadow_style) +{ + return 'border: 20px solid black;' + + 'border-radius: 20px;' + + 'background-color: white; ' + + 'padding: 5px;' + shadow_style; +} + +function test() { + let stage = new Clutter.Stage({ width: 1000, height: 600 }); + UI.init(stage); + + let iter = 0; + let shadowStyles = [ 'box-shadow: 3px 50px 0px 4px rgba(0,0,0,0.5);', + 'box-shadow: 3px 4px 10px 4px rgba(0,0,0,0.5);', + 'box-shadow: 0px 50px 0px 0px rgba(0,0,0,0.5);', + 'box-shadow: 100px 100px 20px 4px rgba(0,0,0,0.5);']; + let label1 = new St.Label({ style: get_css_style(shadowStyles[iter]), + text: shadowStyles[iter], + x: 20, + y: 20, + width: 100, + height: 100 + }); + stage.add_actor(label1); + let label2 = new St.Label({ style: get_css_style(shadowStyles[iter]), + text: shadowStyles[iter], + x: 500, + y: 20, + width: 100, + height: 100 + }); + stage.add_actor(label2); + + resize_animated(label1); + resize_animated(label2); + Mainloop.timeout_add(DELAY, Lang.bind(this, function() { + log(label1 + label1.get_size()); + resize_animated(label1); + resize_animated(label2); + return true; + })); + + Mainloop.timeout_add(2 * DELAY, Lang.bind(this, function() { + iter += 1; + iter %= shadowStyles.length; + label1.set_style(get_css_style(shadowStyles[iter])); + label1.set_text(shadowStyles[iter]); + label2.set_style(get_css_style(shadowStyles[iter])); + label2.set_text(shadowStyles[iter]); + return true; + })); + + UI.main(stage); +} +test();