[Web Animations] Expose Web Animations CSS integration as an experimental feature
[WebKit-https.git] / LayoutTests / transitions / transform-op-list-no-match.html
index 7583918..4a0eda9 100644 (file)
@@ -1,11 +1,8 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-   "http://www.w3.org/TR/html4/loose.dtd">
+<!DOCTYPE html><!-- webkit-test-runner [ enableWebAnimationsCSSIntegration=true ] -->
 
-<html lang="en">
+<html>
 <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-  <title>Transition Between Transform Operation Lists Which Don't Match</title>
-  <style type="text/css" media="screen">
+  <style>
     #box {
       height: 100px;
       width: 100px;
       -webkit-transition-property: -webkit-transform;
     }
   </style>
-  <script type="text/javascript" charset="utf-8">
-    if (window.layoutTestController) {
-      layoutTestController.dumpAsText();
-      layoutTestController.waitUntilDone();
-    }
-    
-    result = "PASS";
-    const defaultTolerance = 10;
+  <script src="resources/transition-test-helpers.js"></script>
+  <script type="text/javascript">
     
-    function isEqual(actual, desired, tolerance)
+    function DegreesToRotation(angle)
     {
-        if (tolerance == undefined || tolerance == 0)
-            tolerance = defaultTolerance;
-        var diff = Math.abs(actual - desired);
-        return diff < tolerance;
+      return roundNumber(Math.cos(angle * Math.PI / 180), 5);
     }
     
-    function changeValues()
-    {
-        var box = document.getElementById('box');
-        box.style.webkitTransitionDuration = "0.1s";
-    }
+    const expectedValues = [
+      // [time, element-id, property, expected-value, tolerance]
+      [0.5, "box", "-webkit-transform.0", DegreesToRotation(45), DegreesToRotation(10)],
+      [1.0, "box", "-webkit-transform.0", DegreesToRotation(90), DegreesToRotation(10)],
+    ];
     
-    function check(expected)
+    function setupTest()
     {
-        if (result != "PASS")
-            return;
-            
-        var t = window.getComputedStyle(document.getElementById('box')).webkitTransform;
-        var a = t.split("(");
-        a = a[1].split(",");
-        var angle = Math.acos(a[0]) * 180 / Math.PI;
-        if (!isEqual(angle, expected))
-            result = "FAIL(was:"+t.m41+", s/b:0)";
+      var box = document.getElementById('box');
+      box.style.webkitTransform = 'rotate(540deg)';
     }
     
-    function startTimeout()
-    {
-        setTimeout("check(45)", 500);
-        setTimeout("check(90)", 1000);
-        
-        window.setTimeout(function() {
-            document.getElementById('result').innerHTML = result;
-            if (window.layoutTestController)
-                layoutTestController.notifyDone();
-        }, 1100);
-    }
-    
-    function start()
-    {
-        var box = document.getElementById('box');
-        box.style.webkitTransform = 'rotate(540deg)';
-        window.setTimeout("startTimeout()", 0);
-    }
-    
-    window.addEventListener('load', start, false);
-    
+    runTransitionTest(expectedValues, setupTest, usePauseAPI);
   </script>
 </head>
 <body>