2008-12-15 Pierre-Olivier Latour <pol@apple.com>
authorpol@apple.com <pol@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 15 Dec 2008 19:49:19 +0000 (19:49 +0000)
committerpol@apple.com <pol@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 15 Dec 2008 19:49:19 +0000 (19:49 +0000)
        Reviewed by Sam Weinig.

        Add new layout tests for transforms, animations & transitions.
        Also move a couple transform layout tests to the proper subdirectory.

        https://bugs.webkit.org/show_bug.cgi?id=22836

        * animations/combo-transform-translate+scale-expected.txt: Added.
        * animations/combo-transform-translate+scale.html: Added.
        * transforms/2d/computed-style-origin-expected.txt: Copied from LayoutTests/transforms/computed-style-origin-expected.txt.
        * transforms/2d/computed-style-origin.html: Copied from LayoutTests/transforms/computed-style-origin.html.
        * transforms/2d/transform-value-types-expected.txt: Copied from LayoutTests/transforms/transform-value-types-expected.txt.
        * transforms/2d/transform-value-types.html: Copied from LayoutTests/transforms/transform-value-types.html.
        * transforms/computed-style-origin-expected.txt: Removed.
        * transforms/computed-style-origin.html: Removed.
        * transforms/transform-value-types-expected.txt: Removed.
        * transforms/transform-value-types.html: Removed.
        * transitions/interrupt-transform-transition-expected.txt: Added.
        * transitions/interrupt-transform-transition.html: Added.
        * transitions/start-transform-transition-expected.txt: Added.
        * transitions/start-transform-transition.html: Added.
        * transitions/transition-timing-function-software-expected.txt: Added.
        * transitions/transition-timing-function-software.html: Added.
        * transitions/zero-duration-in-list-expected.txt: Added.
        * transitions/zero-duration-in-list.html: Added.
        * transitions/zero-duration-without-units-expected.txt: Added.
        * transitions/zero-duration-without-units.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@39307 268f45cc-cd09-0410-ab3c-d52691b4dbfc

17 files changed:
LayoutTests/ChangeLog
LayoutTests/animations/combo-transform-translate+scale-expected.txt [new file with mode: 0644]
LayoutTests/animations/combo-transform-translate+scale.html [new file with mode: 0644]
LayoutTests/transforms/2d/computed-style-origin-expected.txt [moved from LayoutTests/transforms/computed-style-origin-expected.txt with 100% similarity]
LayoutTests/transforms/2d/computed-style-origin.html [moved from LayoutTests/transforms/computed-style-origin.html with 89% similarity]
LayoutTests/transforms/2d/transform-value-types-expected.txt [moved from LayoutTests/transforms/transform-value-types-expected.txt with 53% similarity]
LayoutTests/transforms/2d/transform-value-types.html [moved from LayoutTests/transforms/transform-value-types.html with 66% similarity]
LayoutTests/transitions/interrupt-transform-transition-expected.txt [new file with mode: 0644]
LayoutTests/transitions/interrupt-transform-transition.html [new file with mode: 0644]
LayoutTests/transitions/start-transform-transition-expected.txt [new file with mode: 0644]
LayoutTests/transitions/start-transform-transition.html [new file with mode: 0644]
LayoutTests/transitions/transition-timing-function-software-expected.txt [new file with mode: 0644]
LayoutTests/transitions/transition-timing-function-software.html [new file with mode: 0644]
LayoutTests/transitions/zero-duration-in-list-expected.txt [new file with mode: 0644]
LayoutTests/transitions/zero-duration-in-list.html [new file with mode: 0644]
LayoutTests/transitions/zero-duration-without-units-expected.txt [new file with mode: 0644]
LayoutTests/transitions/zero-duration-without-units.html [new file with mode: 0644]

index d4a1020..26b184a 100644 (file)
@@ -1,3 +1,33 @@
+2008-12-15  Pierre-Olivier Latour  <pol@apple.com>
+
+        Reviewed by Sam Weinig.
+
+        Add new layout tests for transforms, animations & transitions.
+        Also move a couple transform layout tests to the proper subdirectory.
+
+        https://bugs.webkit.org/show_bug.cgi?id=22836
+
+        * animations/combo-transform-translate+scale-expected.txt: Added.
+        * animations/combo-transform-translate+scale.html: Added.
+        * transforms/2d/computed-style-origin-expected.txt: Copied from LayoutTests/transforms/computed-style-origin-expected.txt.
+        * transforms/2d/computed-style-origin.html: Copied from LayoutTests/transforms/computed-style-origin.html.
+        * transforms/2d/transform-value-types-expected.txt: Copied from LayoutTests/transforms/transform-value-types-expected.txt.
+        * transforms/2d/transform-value-types.html: Copied from LayoutTests/transforms/transform-value-types.html.
+        * transforms/computed-style-origin-expected.txt: Removed.
+        * transforms/computed-style-origin.html: Removed.
+        * transforms/transform-value-types-expected.txt: Removed.
+        * transforms/transform-value-types.html: Removed.
+        * transitions/interrupt-transform-transition-expected.txt: Added.
+        * transitions/interrupt-transform-transition.html: Added.
+        * transitions/start-transform-transition-expected.txt: Added.
+        * transitions/start-transform-transition.html: Added.
+        * transitions/transition-timing-function-software-expected.txt: Added.
+        * transitions/transition-timing-function-software.html: Added.
+        * transitions/zero-duration-in-list-expected.txt: Added.
+        * transitions/zero-duration-in-list.html: Added.
+        * transitions/zero-duration-without-units-expected.txt: Added.
+        * transitions/zero-duration-without-units.html: Added.
+
 2008-12-15  Simon Hausmann  <hausmann@webkit.org>
 
         Reviewed by Holger Freyther.
         * fast/js/ignored-result-null-comparison-crash.html: Added.
         * fast/js/resources/ignored-result-null-comparison-crash.js: Added.
 
+>>>>>>> .r39306
 2008-12-12  Pierre-Olivier Latour  <pol@apple.com>
 
         Checked-in new results for failing SVG tests so that the bots are green again.
diff --git a/LayoutTests/animations/combo-transform-translate+scale-expected.txt b/LayoutTests/animations/combo-transform-translate+scale-expected.txt
new file mode 100644 (file)
index 0000000..0a6be14
--- /dev/null
@@ -0,0 +1,4 @@
+This test performs an animation of the translate() and scale() operators. It animates over 2 seconds. At 0.5 and 1 second it takes a snapshot and expects the result to be within range.
+PASS - "webkitTransform" property for "box" element at 0.5s saw something close to: 1.25,0,0,1.75,25,50
+PASS - "webkitTransform" property for "box" element at 1s saw something close to: 1.5,0,0,2.5,50,100
+
diff --git a/LayoutTests/animations/combo-transform-translate+scale.html b/LayoutTests/animations/combo-transform-translate+scale.html
new file mode 100644 (file)
index 0000000..c82c789
--- /dev/null
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+   "http://www.w3.org/TR/html4/loose.dtd">
+
+<html lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <title>Combined transform translate() scale()</title>
+  <style type="text/css" media="screen">
+    #box {
+      height: 100px;
+      width: 100px;
+      background-color: blue;
+      -webkit-animation-duration: 2s;
+      -webkit-animation-timing-function: linear;
+      -webkit-animation-name: "anim";
+    }
+    @-webkit-keyframes "anim" {
+        from { -webkit-transform: translate(0,0) scale(1,1); }
+        to   { -webkit-transform: translate(100px, 200px) scale(2,4); }
+    }
+  </style>
+  <script src="animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
+  <script type="text/javascript" charset="utf-8">
+    
+    const expectedValues = [
+      // [animation-name, time, element-id, property, expected-value, tolerance]
+      ["anim", 0.5, "box", "webkitTransform", [1.25,0,0,1.75,25,50], 0.2],
+      ["anim", 1.0, "box", "webkitTransform", [1.5,0,0,2.5,50,100], 0.2],
+    ];
+    
+    runAnimationTest(expectedValues);
+    
+  </script>
+</head>
+<body>
+This test performs an animation of the translate() and scale() operators. It animates over 2 seconds. 
+At 0.5 and 1 second it takes a snapshot and expects the result to be within range.
+<div id="box">
+</div>
+<div id="result">
+</div>
+</body>
+</html>
@@ -1,6 +1,6 @@
 <html>
 <head>
-<link rel="stylesheet" href="../fast/js/resources/js-test-style.css">
+<link rel="stylesheet" href="../../fast/js/resources/js-test-style.css">
 <style type="text/css" media="screen">
     #test1 {
         width: 20px;
@@ -35,7 +35,7 @@
         -webkit-transform-origin: 5px 7px;
     }
 </style>
-<script src="../fast/js/resources/js-test-pre.js"></script>
+<script src="../../fast/js/resources/js-test-pre.js"></script>
 </head>
 <body>
 <p id="test1"></p>
@@ -67,6 +67,6 @@ debug("");
 successfullyParsed = true;
 
 </script>
-<script src="../fast/js/resources/js-test-post.js"></script>
+<script src="../../fast/js/resources/js-test-post.js"></script>
 </body>
 </html>
@@ -4,33 +4,33 @@ PASS jsWrapperClass(transformRule.constructor) is 'CSSValueListConstructor'
 PASS jsWrapperClass(transformRule[0]) is 'WebKitCSSTransformValue'
 PASS jsWrapperClass(transformRule[0].__proto__) is 'WebKitCSSTransformValuePrototype'
 PASS jsWrapperClass(transformRule[0].constructor) is 'WebKitCSSTransformValueConstructor'
-PASS transformRule[0].operationType is WebKitCSSTransformValue.CSS_TRANSLATE
+PASS transformRule[0].operationType is 1
 PASS transformRule[0].cssText is 'translate(10px)'
-PASS transformRule[1].operationType is WebKitCSSTransformValue.CSS_TRANSLATEX
+PASS transformRule[1].operationType is 2
 PASS transformRule[1].cssText is 'translateX(10px)'
-PASS transformRule[2].operationType is WebKitCSSTransformValue.CSS_TRANSLATEY
+PASS transformRule[2].operationType is 3
 PASS transformRule[2].cssText is 'translateY(10px)'
-PASS transformRule[3].operationType is WebKitCSSTransformValue.CSS_ROTATE
+PASS transformRule[3].operationType is 4
 PASS transformRule[3].cssText is 'rotate(10deg)'
-PASS transformRule[4].operationType is WebKitCSSTransformValue.CSS_ROTATE
+PASS transformRule[4].operationType is 4
 PASS transformRule[4].cssText is 'rotate(11rad)'
-PASS transformRule[5].operationType is WebKitCSSTransformValue.CSS_ROTATE
+PASS transformRule[5].operationType is 4
 PASS transformRule[5].cssText is 'rotate(12grad)'
-PASS transformRule[6].operationType is WebKitCSSTransformValue.CSS_ROTATE
+PASS transformRule[6].operationType is 4
 PASS transformRule[6].cssText is 'rotate(13turn)'
-PASS transformRule[7].operationType is WebKitCSSTransformValue.CSS_SCALE
+PASS transformRule[7].operationType is 5
 PASS transformRule[7].cssText is 'scale(2)'
-PASS transformRule[8].operationType is WebKitCSSTransformValue.CSS_SCALEX
+PASS transformRule[8].operationType is 6
 PASS transformRule[8].cssText is 'scaleX(1.2)'
-PASS transformRule[9].operationType is WebKitCSSTransformValue.CSS_SCALEY
+PASS transformRule[9].operationType is 7
 PASS transformRule[9].cssText is 'scaleY(1.2)'
-PASS transformRule[10].operationType is WebKitCSSTransformValue.CSS_SKEW
+PASS transformRule[10].operationType is 8
 PASS transformRule[10].cssText is 'skew(10deg, 10rad)'
-PASS transformRule[11].operationType is WebKitCSSTransformValue.CSS_SKEWX
+PASS transformRule[11].operationType is 9
 PASS transformRule[11].cssText is 'skewX(10deg)'
-PASS transformRule[12].operationType is WebKitCSSTransformValue.CSS_SKEWY
+PASS transformRule[12].operationType is 10
 PASS transformRule[12].cssText is 'skewY(11grad)'
-PASS transformRule[13].operationType is WebKitCSSTransformValue.CSS_MATRIX
+PASS transformRule[13].operationType is 11
 PASS transformRule[13].cssText is 'matrix(1, 0, 0, 1, 0, 0)'
 PASS successfullyParsed is true
 
@@ -1,8 +1,8 @@
 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
 <html>
 <head>
-<link rel="stylesheet" href="../fast/js/resources/js-test-style.css">
-<script src="../fast/js/resources/js-test-pre.js"></script>
+<link rel="stylesheet" href="../../fast/js/resources/js-test-style.css">
+<script src="../../fast/js/resources/js-test-pre.js"></script>
 <style id="style" media="screen">
 .non-existent-class {
     -webkit-transform: translate(10px)
   
   test("transformRule[0]", "WebKitCSSTransformValue");
 
-  shouldBe("transformRule[0].operationType", "WebKitCSSTransformValue.CSS_TRANSLATE");
+  shouldBe("transformRule[0].operationType", "1");        // CSS_TRANSLATE
   shouldBe("transformRule[0].cssText", "'translate(10px)'");
 
-  shouldBe("transformRule[1].operationType", "WebKitCSSTransformValue.CSS_TRANSLATEX");
+  shouldBe("transformRule[1].operationType", "2");        // CSS_TRANSLATEX
   shouldBe("transformRule[1].cssText", "'translateX(10px)'");
 
-  shouldBe("transformRule[2].operationType", "WebKitCSSTransformValue.CSS_TRANSLATEY");
+  shouldBe("transformRule[2].operationType", "3");        // CSS_TRANSLATEY
   shouldBe("transformRule[2].cssText", "'translateY(10px)'");
 
-  shouldBe("transformRule[3].operationType", "WebKitCSSTransformValue.CSS_ROTATE");
+  shouldBe("transformRule[3].operationType", "4");        // CSS_ROTATE
   shouldBe("transformRule[3].cssText", "'rotate(10deg)'");
 
-  shouldBe("transformRule[4].operationType", "WebKitCSSTransformValue.CSS_ROTATE");
+  shouldBe("transformRule[4].operationType", "4");        // CSS_ROTATE
   shouldBe("transformRule[4].cssText", "'rotate(11rad)'");
 
-  shouldBe("transformRule[5].operationType", "WebKitCSSTransformValue.CSS_ROTATE");
+  shouldBe("transformRule[5].operationType", "4");        // CSS_ROTATE
   shouldBe("transformRule[5].cssText", "'rotate(12grad)'");
 
-  shouldBe("transformRule[6].operationType", "WebKitCSSTransformValue.CSS_ROTATE");
+  shouldBe("transformRule[6].operationType", "4");        // CSS_ROTATE
   shouldBe("transformRule[6].cssText", "'rotate(13turn)'");
 
-  shouldBe("transformRule[7].operationType", "WebKitCSSTransformValue.CSS_SCALE");
+  shouldBe("transformRule[7].operationType", "5");        // CSS_SCALE
   shouldBe("transformRule[7].cssText", "'scale(2)'");
 
-  shouldBe("transformRule[8].operationType", "WebKitCSSTransformValue.CSS_SCALEX");
+  shouldBe("transformRule[8].operationType", "6");        // CSS_SCALEX
   shouldBe("transformRule[8].cssText", "'scaleX(1.2)'");
 
-  shouldBe("transformRule[9].operationType", "WebKitCSSTransformValue.CSS_SCALEY");
+  shouldBe("transformRule[9].operationType", "7");        // CSS_SCALEY
   shouldBe("transformRule[9].cssText", "'scaleY(1.2)'");
 
-  shouldBe("transformRule[10].operationType", "WebKitCSSTransformValue.CSS_SKEW");
+  shouldBe("transformRule[10].operationType", "8");        // CSS_SKEW
   shouldBe("transformRule[10].cssText", "'skew(10deg, 10rad)'");
 
-  shouldBe("transformRule[11].operationType", "WebKitCSSTransformValue.CSS_SKEWX");
+  shouldBe("transformRule[11].operationType", "9");        // CSS_SKEWX
   shouldBe("transformRule[11].cssText", "'skewX(10deg)'");
 
-  shouldBe("transformRule[12].operationType", "WebKitCSSTransformValue.CSS_SKEWY");
+  shouldBe("transformRule[12].operationType", "10");        // CSS_SKEWY
   shouldBe("transformRule[12].cssText", "'skewY(11grad)'");
 
-  shouldBe("transformRule[13].operationType", "WebKitCSSTransformValue.CSS_MATRIX");
+  shouldBe("transformRule[13].operationType", "11");        // CSS_MATRIX
   shouldBe("transformRule[13].cssText", "'matrix(1, 0, 0, 1, 0, 0)'");
   
   var successfullyParsed = true;
 </script>
-<script src="../fast/js/resources/js-test-post.js"></script>
+<script src="../../fast/js/resources/js-test-post.js"></script>
 </body>
 </html>
diff --git a/LayoutTests/transitions/interrupt-transform-transition-expected.txt b/LayoutTests/transitions/interrupt-transform-transition-expected.txt
new file mode 100644 (file)
index 0000000..8b08558
--- /dev/null
@@ -0,0 +1,3 @@
+Interrupted hardware transition should not jump back to pre-transtion transform
+
+PASS
diff --git a/LayoutTests/transitions/interrupt-transform-transition.html b/LayoutTests/transitions/interrupt-transform-transition.html
new file mode 100644 (file)
index 0000000..930ba27
--- /dev/null
@@ -0,0 +1,60 @@
+<html>
+<head>
+  <title>Interrupted hardware transition</title>
+  <style type="text/css" media="screen">
+    .box {
+      position: relative;
+      top: 0;
+      left: 0;
+      width: 100px;
+      height: 100px;
+      background-color: blue;
+      -webkit-transition-property: -webkit-transform;
+      -webkit-transition-duration: 2s;
+      -webkit-transform: translate(0, 0);
+    }
+
+    .moved {
+/*      -webkit-transform: translateX(300px);*/
+    }
+  </style>
+  <script type="text/javascript" charset="utf-8">
+    if (window.layoutTestController) {
+      layoutTestController.dumpAsText();
+      layoutTestController.waitUntilDone();
+    }
+
+    function test()
+    {
+      var t = window.getComputedStyle(document.getElementById('box')).webkitTransform;
+      // grab the x value from the matrix()
+      var lastValueRE = /([\.\d]+),[^,]+\)$/;
+      var xTranslate = lastValueRE.exec(t)[1];
+      var result = (xTranslate > 0) ? 'PASS' : 'FAIL: transition should be re-targeted from 200px in x, so x > 0';
+      document.getElementById('result').innerHTML = result;
+
+      if (window.layoutTestController)
+          layoutTestController.notifyDone();
+    }
+
+    function startTest()
+    {
+      var box = document.getElementById('box');
+      box.style.webkitTransform = 'translate(200px, 0)';
+      
+      window.setTimeout(function() {
+        box.style.webkitTransform = 'translate(0, 200px)';
+        window.setTimeout(test, 0);
+      }, 300);
+
+    }
+  </script>
+</head>
+<body onload="startTest()">
+  <p>Interrupted hardware transition should not jump back to pre-transtion transform</p>
+  <div id="box" class="box">
+  </div>
+  <div id="result">
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/transitions/start-transform-transition-expected.txt b/LayoutTests/transitions/start-transform-transition-expected.txt
new file mode 100644 (file)
index 0000000..d75ab8d
--- /dev/null
@@ -0,0 +1,3 @@
+Box should start transition from style change on timer
+
+PASS
diff --git a/LayoutTests/transitions/start-transform-transition.html b/LayoutTests/transitions/start-transform-transition.html
new file mode 100644 (file)
index 0000000..0873b18
--- /dev/null
@@ -0,0 +1,56 @@
+<html>
+<head>
+  <title>Start hardware transition</title>
+  <style type="text/css" media="screen">
+    .box {
+      position: relative;
+      width: 100px;
+      height: 100px;
+      background-color: blue;
+      -webkit-transition-property: -webkit-transform;
+      -webkit-transition-duration: 5s;
+      -webkit-transform: translate(0, 0);
+    }
+
+    .moved {
+      -webkit-transform: translateX(300px);
+    }
+  </style>
+  <script type="text/javascript" charset="utf-8">
+    if (window.layoutTestController) {
+      layoutTestController.dumpAsText();
+      layoutTestController.waitUntilDone();
+    }
+
+    function test()
+    {
+      var t = window.getComputedStyle(document.getElementById('box')).webkitTransform;
+      // grab the x value from the matrix()
+      var lastValueRE = /([\.\d]+),[^,]+\)$/;
+      var xTranslate = lastValueRE.exec(t)[1];
+      var result = (xTranslate > 0) ? 'PASS' : 'FAIL: transition should be running, so x > 0';
+      document.getElementById('result').innerHTML = result;
+
+      if (window.layoutTestController)
+          layoutTestController.notifyDone();
+    }
+
+    function startTest()
+    {
+      window.setTimeout(function() {
+        document.getElementById('box').className = 'moved box';
+        window.setTimeout(test, 200);
+      }, 200);
+    }
+  </script>
+</head>
+<body onload="startTest()">
+  <p>Box should start transition from style change on timer</p>
+  <div id="container">
+    <div id="box" class="box" onclick="this.className='redirected box'">
+    </div>
+  </div>
+  <div id="result">
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/transitions/transition-timing-function-software-expected.txt b/LayoutTests/transitions/transition-timing-function-software-expected.txt
new file mode 100644 (file)
index 0000000..194bf5c
--- /dev/null
@@ -0,0 +1,6 @@
+box1: within 5% of 200: PASSED
+box2: within 5% of 320: PASSED
+box3: within 5% of 125: PASSED
+box4: within 5% of 272: PASSED
+box5: within 5% of 200: PASSED
+
diff --git a/LayoutTests/transitions/transition-timing-function-software.html b/LayoutTests/transitions/transition-timing-function-software.html
new file mode 100644 (file)
index 0000000..3d3b068
--- /dev/null
@@ -0,0 +1,83 @@
+<html>
+<head>
+  <title>Transitions</title>
+  <style type="text/css" media="screen">
+    .box {
+      position: relative;
+      left: 0;
+      height: 100px;
+      width: 100px;
+      margin: 10px;
+      background-color: blue;
+      -webkit-transition-duration: 5s;
+      -webkit-transition-timing-function: linear;
+    }
+  </style>
+  <script type="text/javascript" charset="utf-8">
+    if (window.layoutTestController) {
+        layoutTestController.dumpAsText();
+        layoutTestController.waitUntilDone();
+    }
+
+    var kExpecteds = {
+      'box1' : 200,
+      'box2' : 320,
+      'box3' : 125,
+      'box4' : 272,
+      'box5' : 200
+    }
+    
+    function measurePosition()
+    {
+      var boxes = document.body.getElementsByClassName('box');
+
+      var result = '';
+      for (var i = 0; i < boxes.length; ++i)
+      {
+        var curBox = boxes[i];
+        var curLeft = parseInt(window.getComputedStyle(curBox).left);
+        
+        var expected = kExpecteds[curBox.id];
+        var passed = (Math.abs(curLeft - expected) / expected) < 0.05;
+        var thisResult;
+        if (passed)
+          thisResult = curBox.id + ': within 5% of ' + expected + ': PASSED';
+        else
+          thisResult = curBox.id + ': expected ' + expected + ', got ' + curLeft + '; outside 5%: FAIL';
+
+        result += thisResult + '<br>';
+      }
+
+      document.body.removeChild(document.getElementById('container'));
+
+      document.getElementById('result').innerHTML = result;
+
+      if (window.layoutTestController)
+          layoutTestController.notifyDone();
+    }
+
+    function startTransition()
+    {
+      var boxes = document.body.getElementsByClassName('box');
+      for (var i = 0; i < boxes.length; ++i)
+        boxes[i].style.left = '400px';
+      
+      window.setTimeout(measurePosition, 2500);
+    }
+    window.addEventListener('load', startTransition, false);
+  </script>
+</head>
+<body>
+
+<div id="container">
+  <div id="box1" class="box" style="-webkit-transition-timing-function: linear;"></div>
+  <div id="box2" class="box" style="-webkit-transition-timing-function: ease;"></div>
+  <div id="box3" class="box" style="-webkit-transition-timing-function: ease-in;"></div>
+  <div id="box4" class="box" style="-webkit-transition-timing-function: ease-out;"></div>
+  <div id="box5" class="box" style="-webkit-transition-timing-function: ease-in-out;"></div>
+</div>
+
+<div id="result"></div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/transitions/zero-duration-in-list-expected.txt b/LayoutTests/transitions/zero-duration-in-list-expected.txt
new file mode 100644 (file)
index 0000000..c91d114
--- /dev/null
@@ -0,0 +1,3 @@
+Tests that with a zero duration transition on top, it does not animate
+
+PASS
diff --git a/LayoutTests/transitions/zero-duration-in-list.html b/LayoutTests/transitions/zero-duration-in-list.html
new file mode 100644 (file)
index 0000000..16484ab
--- /dev/null
@@ -0,0 +1,73 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+   "http://www.w3.org/TR/html4/loose.dtd">
+
+<html lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <title>Handle 0 duration in a multiple value list</title>
+  <style type="text/css" media="screen">
+    #box {
+      position: absolute;
+      height: 100px;
+      width: 100px;
+      background-color: blue;
+      -webkit-transition-duration: 0, 0.5s;
+      -webkit-transition-timing-function: linear;
+      -webkit-transition-property: top, left;
+    }
+  </style>
+  <script type="text/javascript" charset="utf-8">
+    if (window.layoutTestController) {
+      layoutTestController.dumpAsText();
+      layoutTestController.waitUntilDone();
+    }
+    
+    result = "PASS";
+    const defaultTolerance = 10;
+    
+    function isEqual(actual, desired, tolerance)
+    {
+        if (tolerance == undefined || tolerance == 0)
+            tolerance = defaultTolerance;
+        var diff = Math.abs(actual - desired);
+        return diff < tolerance;
+    }
+    
+    function check()
+    {
+        var style = window.getComputedStyle(document.getElementById('box'));
+        if (!isEqual(parseInt(style.left), 50, defaultTolerance))
+            result = "FAIL (left was:" + style.left + ", should be 50)";
+        else if (!isEqual(parseInt(style.top), 100, defaultTolerance))
+            result = "FAIL (top was:" + style.top + ", should be 100)";
+
+        document.getElementById('result').innerHTML = result;
+        if (window.layoutTestController)
+            layoutTestController.notifyDone();
+    }
+    
+    function startTimeout()
+    {
+        setTimeout(check, 250);
+    }
+
+    function start()
+    {
+        var box = document.getElementById('box');
+        box.style.top = '100px';
+        box.style.left = '100px';
+        setTimeout(startTimeout, 0);    // this gives the style time to resolve
+    }
+    
+    window.addEventListener('load', start, false);
+  </script>
+</head>
+<body>
+
+<p>Tests that with a zero duration transition on top, it does not animate</p>
+<div id="box">
+</div>
+<div id="result">
+</div>
+</body>
+</html>
diff --git a/LayoutTests/transitions/zero-duration-without-units-expected.txt b/LayoutTests/transitions/zero-duration-without-units-expected.txt
new file mode 100644 (file)
index 0000000..463cd0d
--- /dev/null
@@ -0,0 +1 @@
+Duration was 0 (should be 0): PASS
diff --git a/LayoutTests/transitions/zero-duration-without-units.html b/LayoutTests/transitions/zero-duration-without-units.html
new file mode 100644 (file)
index 0000000..ef83742
--- /dev/null
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+   "http://www.w3.org/TR/html4/loose.dtd">
+
+<html lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <title>Zero Duration Without Units</title>
+  <style type="text/css" media="screen">
+    #box {
+      height: 50px;
+      width: 100px;
+      background-color: blue;
+      -webkit-transition-property: top;
+      -webkit-transition-duration: 1s;
+      -webkit-transition-duration: 0;
+    }
+  </style>
+  <script type="text/javascript" charset="utf-8">
+    if (window.layoutTestController)
+      layoutTestController.dumpAsText();
+
+    function test()
+    {
+        var box = document.getElementById('box');
+        var dur = parseInt(window.getComputedStyle(box).webkitTransitionDuration);
+        document.getElementById('result').innerHTML = "Duration was " + dur + " (should be 0): " + (dur == 0 ? "PASS" : "FAIL");
+    }
+    window.addEventListener('load', test, false)
+  </script>
+</head>
+<body>
+
+<div id="box">
+</div>
+<div id="result">
+</div>
+</body>
+</html>