+2011-09-28 Peter Beverloo <peter@chromium.org>
+
+ Don't clamp cubic-bezier timing functions between 0 and 1
+ https://bugs.webkit.org/show_bug.cgi?id=45761
+
+ Test overflow behavior of colors, lengths, svg lengths,
+ shadows and transforms (through rotations). Update the
+ timing function test to check for now valid values.
+
+ Reviewed by Dean Jackson.
+
+ * fast/css/transition-timing-function-expected.txt:
+ * fast/css/transition-timing-function.html:
+ * transitions/cubic-bezier-overflow-color-expected.txt: Added.
+ * transitions/cubic-bezier-overflow-color.html: Added.
+ * transitions/cubic-bezier-overflow-length-expected.txt: Added.
+ * transitions/cubic-bezier-overflow-length.html: Added.
+ * transitions/cubic-bezier-overflow-shadow-expected.txt: Added.
+ * transitions/cubic-bezier-overflow-shadow.html: Added.
+ * transitions/cubic-bezier-overflow-svg-length-expected.txt: Added.
+ * transitions/cubic-bezier-overflow-svg-length.html: Added.
+ * transitions/cubic-bezier-overflow-transform-expected.txt: Added.
+ * transitions/cubic-bezier-overflow-transform.html: Added.
+
2011-09-28 Ryosuke Niwa <rniwa@webkit.org>
More GTK rebaselines after r96257.
PASS: 'ease-in-out' parsed and serialized successfully.
PASS: 'cubic-bezier(0, 0, 0, 1)' parsed and serialized successfully.
PASS: 'cubic-bezier(0.1, 0.52, 0.11101, 0.9)' parsed and serialized successfully.
+PASS: 'cubic-bezier(1.5, 55, 12.3456, 1000)' parsed and serialized successfully.
+PASS: 'cubic-bezier(-1.5, -55, -12.3456, -1000)' parsed and serialized successfully.
roundTripTransitionTimingFunctionValue("ease-in-out");
roundTripTransitionTimingFunctionValue("cubic-bezier(0, 0, 0, 1)");
roundTripTransitionTimingFunctionValue("cubic-bezier(0.1, 0.52, 0.11101, 0.9)");
+ roundTripTransitionTimingFunctionValue("cubic-bezier(1.5, 55, 12.3456, 1000)");
+ roundTripTransitionTimingFunctionValue("cubic-bezier(-1.5, -55, -12.3456, -1000)");
</script>
--- /dev/null
+PASS - "background-color" property for "box1" element at 0.5s saw something close to: 220,220,220
+PASS - "background-color" property for "box1" element at 0.95s saw something close to: 207,207,207
+PASS - "background-color" property for "box2" element at 0.1s saw something close to: 45,45,45
+PASS - "background-color" property for "box2" element at 0.5s saw something close to: 106,106,106
+PASS - "background-color" property for "box2" element at 0.95s saw something close to: 204,204,204
+PASS - "background-color" property for "box3" element at 0.1s saw something close to: 0,2,11
+PASS - "background-color" property for "box3" element at 0.5s saw something close to: 0,0,0
+PASS - "background-color" property for "box4" element at 0.15s saw something close to: 255,255,255
+PASS - "background-color" property for "box4" element at 0.5s saw something close to: 166,155,140
+PASS - "background-color" property for "box4" element at 0.8s saw something close to: 17,22,28
+
--- /dev/null
+<!doctype html>
+<html>
+ <head>
+ <title>cubic-bezier value overflow: Colors</title>
+ <style>
+ .box {
+ position: relative;
+ left: 0;
+ height: 100px;
+ width: 100px;
+ margin: 10px;
+ background-color: #404040;
+ -webkit-transition: background-color 1s linear;
+ }
+ .animating > .box {
+ background-color: #C0C0C0;
+ }
+ .animating > .box.colored {
+ background-color: papayawhip;
+ }
+ </style>
+ <script src="resources/transition-test-helpers.js"></script>
+ <script>
+ const expectedValues = [
+ // [time, element-id, property, expected-value, tolerance]
+ [0.50, "box1", "background-color", [220, 220, 220], 10],
+ [0.95, "box1", "background-color", [207, 207, 207], 10],
+ [0.10, "box2", "background-color", [45, 45, 45], 15],
+ [0.50, "box2", "background-color", [106, 106, 106], 15],
+ [0.95, "box2", "background-color", [204, 204, 204], 15],
+ [0.10, "box3", "background-color", [0, 2, 11], 15],
+ [0.50, "box3", "background-color", [0, 0, 0], 0],
+ [0.15, "box4", "background-color", [255, 255, 255], 0],
+ [0.50, "box4", "background-color", [166, 155, 140], 15],
+ [0.80, "box4", "background-color", [17, 22, 28], 15],
+ ];
+
+ function setupTest() {
+ document.getElementById('container').className = 'animating';
+ }
+
+ runTransitionTest(expectedValues, setupTest, usePauseAPI);
+ </script>
+ </head>
+ <body>
+ <div id="container">
+ <div class="box" id="box1" style="-webkit-transition-timing-function: cubic-bezier(0.3, 1.5, 0.8, 1.5);"></div>
+ <div class="box" id="box2" style="-webkit-transition-timing-function: cubic-bezier(0.4, -0.8, 0.7, 1.7);"></div>
+ <div class="box colored" id="box3" style="-webkit-transition-timing-function: cubic-bezier(0.7, -2, 1, -1.5);"></div>
+ <div class="box colored" id="box4" style="-webkit-transition-timing-function: cubic-bezier(0, 4, 1, -3);"></div>
+ </div>
+ <div id="result"></div>
+ </body>
+</html>
\ No newline at end of file
--- /dev/null
+PASS - "left" property for "box1" element at 0.5s saw something close to: 488
+PASS - "left" property for "box1" element at 0.95s saw something close to: 440
+PASS - "left" property for "box2" element at 0.1s saw something close to: -55
+PASS - "left" property for "box2" element at 0.5s saw something close to: 145
+PASS - "left" property for "box2" element at 0.95s saw something close to: 432
+PASS - "left" property for "box3" element at 0.1s saw something close to: -106
+PASS - "left" property for "box3" element at 0.5s saw something close to: -441
+PASS - "left" property for "box4" element at 0.15s saw something close to: 513
+PASS - "left" property for "box4" element at 0.5s saw something close to: 200
+PASS - "left" property for "box4" element at 0.8s saw something close to: -98
+
--- /dev/null
+<!doctype html>
+<html>
+ <head>
+ <title>cubic-bezier value overflow: Lengths</title>
+ <style>
+ .box {
+ position: relative;
+ left: 0;
+ height: 100px;
+ width: 100px;
+ margin: 10px;
+ background-color: blue;
+ -webkit-transition: left 1s linear;
+ }
+ .animating > .box {
+ left: 400px;
+ }
+ </style>
+ <script src="resources/transition-test-helpers.js"></script>
+ <script>
+ const expectedValues = [
+ // [time, element-id, property, expected-value, tolerance]
+ [0.50, "box1", "left", 488, 4],
+ [0.95, "box1", "left", 440, 4],
+ [0.10, "box2", "left", -55, 4],
+ [0.50, "box2", "left", 145, 4],
+ [0.95, "box2", "left", 432, 4],
+ [0.10, "box3", "left", -106, 4],
+ [0.50, "box3", "left", -441, 4],
+ [0.15, "box4", "left", 513, 4],
+ [0.50, "box4", "left", 200, 4],
+ [0.80, "box4", "left", -98, 4],
+ ];
+
+ function setupTest() {
+ document.getElementById('container').className = 'animating';
+ }
+
+ runTransitionTest(expectedValues, setupTest, usePauseAPI);
+ </script>
+ </head>
+ <body>
+ <div id="container">
+ <div class="box" id="box1" style="-webkit-transition-timing-function: cubic-bezier(0.3, 1.5, 0.8, 1.5);"></div>
+ <div class="box" id="box2" style="-webkit-transition-timing-function: cubic-bezier(0.4, -0.8, 0.7, 1.7);"></div>
+ <div class="box" id="box3" style="-webkit-transition-timing-function: cubic-bezier(0.7, -2, 1, -1.5);"></div>
+ <div class="box" id="box4" style="-webkit-transition-timing-function: cubic-bezier(0, 4, 1, -3);"></div>
+ </div>
+ <div id="result"></div>
+ </body>
+</html>
\ No newline at end of file
--- /dev/null
+PASS - "box-shadow" property for "box1" element at 0.5s saw something close to: -7,25
+PASS - "box-shadow" property for "box1" element at 0.95s saw something close to: -6,22
+PASS - "box-shadow" property for "box2" element at 0.1s saw something close to: 7,-9
+PASS - "box-shadow" property for "box2" element at 0.5s saw something close to: 2,4
+PASS - "box-shadow" property for "box2" element at 0.95s saw something close to: -6,22
+PASS - "box-shadow" property for "box3" element at 0.1s saw something close to: 9,-16
+PASS - "box-shadow" property for "box3" element at 0.5s saw something close to: 16,-32
+PASS - "box-shadow" property for "box4" element at 0.15s saw something close to: -8,27
+PASS - "box-shadow" property for "box4" element at 0.5s saw something close to: 0,8
+PASS - "box-shadow" property for "box4" element at 0.8s saw something close to: 8,-11
+
--- /dev/null
+<!doctype html>
+<html>
+ <head>
+ <title>cubic-bezier value overflow: Shadows</title>
+ <style>
+ .box {
+ position: relative;
+ left: 0;
+ height: 100px;
+ width: 100px;
+ margin: 10px;
+ background-color: blue;
+ box-shadow: 5px -5px 5px 5px #404040;
+ -webkit-transition: box-shadow 1s linear;
+ }
+ .animating > .box {
+ box-shadow: -5px 20px 15px 15px #c0c0c0;
+ }
+ </style>
+ <script src="resources/transition-test-helpers.js"></script>
+ <script>
+ const expectedValues = [
+ // [time, element-id, property, expected-value, tolerance]
+ [0.50, "box1", "box-shadow", [-7, 25], 5],
+ [0.95, "box1", "box-shadow", [-6, 22], 5],
+ [0.10, "box2", "box-shadow", [7, -9], 5],
+ [0.50, "box2", "box-shadow", [2, 4], 5],
+ [0.95, "box2", "box-shadow", [-6, 22], 5],
+ [0.10, "box3", "box-shadow", [9, -16], 5],
+ [0.50, "box3", "box-shadow", [16, -32], 5],
+ [0.15, "box4", "box-shadow", [-8, 27], 5],
+ [0.50, "box4", "box-shadow", [0, 8], 5],
+ [0.80, "box4", "box-shadow", [8, -11], 5],
+ ];
+
+ function setupTest() {
+ document.getElementById('container').className = 'animating';
+ }
+
+ runTransitionTest(expectedValues, setupTest, usePauseAPI);
+ </script>
+ </head>
+ <body>
+ <div id="container">
+ <div class="box" id="box1" style="-webkit-transition-timing-function: cubic-bezier(0.3, 1.5, 0.8, 1.5);"></div>
+ <div class="box" id="box2" style="-webkit-transition-timing-function: cubic-bezier(0.4, -0.8, 0.7, 1.7);"></div>
+ <div class="box" id="box3" style="-webkit-transition-timing-function: cubic-bezier(0.7, -2, 1, -1.5);"></div>
+ <div class="box" id="box4" style="-webkit-transition-timing-function: cubic-bezier(0, 4, 1, -3);"></div>
+ </div>
+ <div id="result"></div>
+ </body>
+</html>
\ No newline at end of file
--- /dev/null
+PASS - "stroke-width" property for "box1" element at 0.5s saw something close to: 61
+PASS - "stroke-width" property for "box1" element at 0.95s saw something close to: 55
+PASS - "stroke-width" property for "box2" element at 0.1s saw something close to: -6
+PASS - "stroke-width" property for "box2" element at 0.5s saw something close to: 19
+PASS - "stroke-width" property for "box2" element at 0.95s saw something close to: 54
+PASS - "stroke-width" property for "box3" element at 0.1s saw something close to: -12
+PASS - "stroke-width" property for "box3" element at 0.5s saw something close to: -53
+PASS - "stroke-width" property for "box4" element at 0.15s saw something close to: 64
+PASS - "stroke-width" property for "box4" element at 0.5s saw something close to: 26
+PASS - "stroke-width" property for "box4" element at 0.8s saw something close to: -11
+
--- /dev/null
+<!doctype html>
+<html>
+ <head>
+ <title>cubic-bezier value overflow: SVG Lengths</title>
+ <style>
+ .box {
+ -webkit-transition: stroke-width 1s linear;
+ stroke-width: 1;
+ stroke: black;
+ fill: blue;
+ }
+ .animating > .box {
+ stroke-width: 50;
+ }
+ </style>
+ <script src="resources/transition-test-helpers.js"></script>
+ <script>
+ const expectedValues = [
+ // [time, element-id, property, expected-value, tolerance]
+ [0.50, "box1", "stroke-width", 61, 4],
+ [0.95, "box1", "stroke-width", 55, 4],
+ [0.10, "box2", "stroke-width", -6, 4],
+ [0.50, "box2", "stroke-width", 19, 4],
+ [0.95, "box2", "stroke-width", 54, 4],
+ [0.10, "box3", "stroke-width", -12, 4],
+ [0.50, "box3", "stroke-width", -53, 4],
+ [0.15, "box4", "stroke-width", 64, 4],
+ [0.50, "box4", "stroke-width", 26, 4],
+ [0.80, "box4", "stroke-width", -11, 4],
+ ];
+
+ function setupTest() {
+ document.getElementById('container').setAttribute('class', 'animating');
+ }
+
+ runTransitionTest(expectedValues, setupTest, usePauseAPI);
+ </script>
+ </head>
+ <body>
+ <svg id="container">
+ <rect class="box" id="box1" width="100" height="100" style="-webkit-transition-timing-function: cubic-bezier(0.3, 1.5, 0.8, 1.5);" />
+ <rect class="box" id="box2" width="100" height="100" y="110" style="-webkit-transition-timing-function: cubic-bezier(0.4, -0.8, 0.7, 1.7);" />
+ <rect class="box" id="box3" width="100" height="100" y="220" style="-webkit-transition-timing-function: cubic-bezier(0.7, -2, 1, -1.5);" />
+ <rect class="box" id="box4" width="100" height="100" y="330" style="-webkit-transition-timing-function: cubic-bezier(0, 4, 1, -3);" />
+ </svg>
+ <div id="result"></div>
+ </body>
+</html>
\ No newline at end of file
--- /dev/null
+PASS - "-webkit-transform.0" property for "box1" element at 0.5s saw something close to: -0.73135
+PASS - "-webkit-transform.0" property for "box1" element at 0.95s saw something close to: -0.98481
+PASS - "-webkit-transform.0" property for "box2" element at 0.1s saw something close to: 0.89101
+PASS - "-webkit-transform.0" property for "box2" element at 0.5s saw something close to: 0.25882
+PASS - "-webkit-transform.0" property for "box2" element at 0.95s saw something close to: -0.97437
+PASS - "-webkit-transform.0" property for "box3" element at 0.1s saw something close to: 0.37461
+PASS - "-webkit-transform.0" property for "box3" element at 0.5s saw something close to: -0.9205
+PASS - "-webkit-transform.0" property for "box4" element at 0.15s saw something close to: -0.62932
+PASS - "-webkit-transform.0" property for "box4" element at 0.5s saw something close to: 0.17365
+PASS - "-webkit-transform.0" property for "box4" element at 0.8s saw something close to: 0.66913
+
--- /dev/null
+<!doctype html>
+<html>
+ <head>
+ <title>cubic-bezier value overflow: Transforms</title>
+ <style>
+ .box {
+ position: relative;
+ left: 0;
+ height: 100px;
+ width: 100px;
+ margin: 10px;
+ background-color: blue;
+ -webkit-transition: -webkit-transform 1s linear;
+ -webkit-transform: rotate(0deg);
+ }
+ .animating > .box {
+ -webkit-transform: rotate(180deg);
+ }
+ </style>
+ <script src="resources/transition-test-helpers.js"></script>
+ <script>
+ function DegreesToRotation(angle) {
+ return roundNumber(Math.cos(angle * Math.PI / 180), 5);
+ }
+
+ const expectedValues = [
+ // [time, element-id, property, expected-value, tolerance]
+ [0.5, "box1", "-webkit-transform.0", DegreesToRotation(137), 0.3],
+ [0.95, "box1", "-webkit-transform.0", DegreesToRotation(190), 0.3],
+ [0.10, "box2", "-webkit-transform.0", DegreesToRotation(-27), 0.3],
+ [0.50, "box2", "-webkit-transform.0", DegreesToRotation(75), 0.3],
+ [0.95, "box2", "-webkit-transform.0", DegreesToRotation(193), 0.3],
+ [0.10, "box3", "-webkit-transform.0", DegreesToRotation(-68), 0.3],
+ [0.50, "box3", "-webkit-transform.0", DegreesToRotation(-203), 0.3],
+ [0.15, "box4", "-webkit-transform.0", DegreesToRotation(231), 0.3],
+ [0.50, "box4", "-webkit-transform.0", DegreesToRotation(80), 0.3],
+ [0.80, "box4", "-webkit-transform.0", DegreesToRotation(48), 0.3],
+ ];
+
+ function setupTest() {
+ document.getElementById('container').className = 'animating';
+ }
+
+ runTransitionTest(expectedValues, setupTest, usePauseAPI);
+ </script>
+ </head>
+ <body>
+ <div id="container">
+ <div class="box" id="box1" style="-webkit-transition-timing-function: cubic-bezier(0.3, 1.5, 0.8, 1.5);"></div>
+ <div class="box" id="box2" style="-webkit-transition-timing-function: cubic-bezier(0.4, -0.8, 0.7, 1.7);"></div>
+ <div class="box" id="box3" style="-webkit-transition-timing-function: cubic-bezier(0.7, -2, 1, -1.5);"></div>
+ <div class="box" id="box4" style="-webkit-transition-timing-function: cubic-bezier(0, 4, 1, -3);"></div>
+ </div>
+ <div id="result"></div>
+ </body>
+</html>
\ No newline at end of file
+2011-09-28 Peter Beverloo <peter@chromium.org>
+
+ Don't clamp cubic-bezier timing functions between 0 and 1
+ https://bugs.webkit.org/show_bug.cgi?id=45761
+
+ Remove the limitation of clamping the cubic-bezier timing function
+ values between 0 and 1, following the specification change made on
+ April 5 of this year.
+
+ Reviewed by Dean Jackson.
+
+ Tests: transitions/cubic-bezier-overflow-color.html
+ transitions/cubic-bezier-overflow-length.html
+ transitions/cubic-bezier-overflow-shadow.html
+ transitions/cubic-bezier-overflow-svg-length.html
+ transitions/cubic-bezier-overflow-transform.html
+
+ * css/CSSParser.cpp:
+ (WebCore::CSSParser::parseCubicBezierTimingFunctionValue):
+
2011-09-28 Chris Rogers <crogers@google.com>
DelayNode must set the context on delayTime AudioParam to support automation
if (!validUnit(v, FNumber, m_strict))
return false;
result = v->fValue;
- if (result < 0 || result > 1.0)
- return false;
v = args->next();
if (!v)
// The last number in the function has no comma after it, so we're done.
projects / profile / ivi / webkit-efl.git / commitdiff