[Web Animations] Expose Web Animations CSS integration as an experimental feature
[WebKit-https.git] / LayoutTests / transitions / shorthand-border-transitions.html
index fc35871..5fd96b6 100644 (file)
@@ -1,18 +1,15 @@
-<!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>Test shorthand transitions</title>
-  <style type="text/css" media="screen">
+  <style>
     #box {
       height: 100px;
       width: 100px;
       margin: 10px;
       background-color: gray;
       border: 0px solid rgb(0, 0, 0);
-      -webkit-transition: border 0.5s linear;
+      -webkit-transition: border 1s linear;
     }
     
     #box.final {
@@ -25,7 +22,7 @@
       margin: 10px;
       background-color: gray;
       border: 0px solid rgb(0, 0, 0);
-      -webkit-transition: border-width 0.5s linear;
+      -webkit-transition: border-width 1s linear;
     }
     
     #box1.final {
@@ -38,7 +35,7 @@
       margin: 10px;
       background-color: gray;
       border: 0px solid rgb(0, 0, 0);
-      -webkit-transition: border 0.5s linear;
+      -webkit-transition: border 1s linear;
     }
     
     #box2.final {
       border-bottom-width: 40px;
     }
   </style>
-  <script src="transition-test-helpers.js" type="text/javascript" charset="utf-8"></script>
-  <script type="text/javascript" charset="utf-8">
+  <script src="resources/transition-test-helpers.js"></script>
+  <script type="text/javascript">
     
     const expectedValues = [
-      // [time, element-id, property, expected-value, tolerance]
+      // [time, element-id, property, expected-value, tolerance, callback, should-be-transitioning]
       // color and width of each side should be animating
-      [0.25, 'box', 'border-top-color', [128, 0, 128], 30],
-      [0.25, 'box', 'border-right-color', [128, 0, 128], 30],
-      [0.25, 'box', 'border-bottom-color', [128, 0, 128], 30],
-      [0.25, 'box', 'border-left-color', [128, 0, 128], 30],
-      [0.25, 'box', 'border-top-width', 10, 2],
-      [0.25, 'box', 'border-right-width', 10, 2],
-      [0.25, 'box', 'border-bottom-width', 10, 2],
-      [0.25, 'box', 'border-left-width', 10, 2],
+      [0.5, 'box', 'border-top-color', [128, 0, 128], 30],
+      [0.5, 'box', 'border-right-color', [128, 0, 128], 30],
+      [0.5, 'box', 'border-bottom-color', [128, 0, 128], 30],
+      [0.5, 'box', 'border-left-color', [128, 0, 128], 30],
+      [0.5, 'box', 'border-top-width', 10, 2],
+      [0.5, 'box', 'border-right-width', 10, 2],
+      [0.5, 'box', 'border-bottom-width', 10, 2],
+      [0.5, 'box', 'border-left-width', 10, 2],
 
       // only border-width should be animating
-      [0.25, 'box1', 'border-top-width', 10, 2],
-      [0.25, 'box1', 'border-top-color', [255, 0, 255], 0],  // initial value
+      [0.5, 'box1', 'border-top-width', 10, 2],
+      [0.5, 'box1', 'border-top-color', [255, 0, 255], 0, null, shouldNotBeTransitioning],
 
       // border-width should be animating
-      [0.25, 'box2', 'border-top-width', 10, 2],
-      [0.25, 'box2', 'border-bottom-width', 20, 4],
+      [0.5, 'box2', 'border-top-width', 10, 2],
+      [0.5, 'box2', 'border-bottom-width', 20, 4],
     ];
     
     function setupTest()
@@ -82,7 +79,7 @@
       box2.className = 'final';
     }
     
-    runTransitionTest(expectedValues, setupTest, false);
+    runTransitionTest(expectedValues, setupTest, usePauseAPI);
   </script>
 </head>
 <body>