2009-01-19 Simon Fraser <simon.fraser@apple.com>
authorsimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 20 Jan 2009 03:31:37 +0000 (03:31 +0000)
committersimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 20 Jan 2009 03:31:37 +0000 (03:31 +0000)
        https://bugs.webkit.org/show_bug.cgi?id=18078

        New testcases for transitions of shorthand properties.

        * transitions/shorthand-border-transitions-expected.txt: Added.
        * transitions/shorthand-border-transitions.html: Added.
        * transitions/shorthand-transitions-expected.txt: Added.
        * transitions/shorthand-transitions.html: Added.

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

LayoutTests/ChangeLog
LayoutTests/transitions/shorthand-border-transitions-expected.txt [new file with mode: 0644]
LayoutTests/transitions/shorthand-border-transitions.html [new file with mode: 0644]
LayoutTests/transitions/shorthand-transitions-expected.txt [new file with mode: 0644]
LayoutTests/transitions/shorthand-transitions.html [new file with mode: 0644]

index 691893e..03b649b 100644 (file)
@@ -1,3 +1,14 @@
+2009-01-19  Simon Fraser  <simon.fraser@apple.com>
+
+        https://bugs.webkit.org/show_bug.cgi?id=18078
+        
+        New testcases for transitions of shorthand properties.
+
+        * transitions/shorthand-border-transitions-expected.txt: Added.
+        * transitions/shorthand-border-transitions.html: Added.
+        * transitions/shorthand-transitions-expected.txt: Added.
+        * transitions/shorthand-transitions.html: Added.
+
 2009-01-19  Darin Adler  <darin@apple.com>
 
         Reviewed by Sam Weinig.
diff --git a/LayoutTests/transitions/shorthand-border-transitions-expected.txt b/LayoutTests/transitions/shorthand-border-transitions-expected.txt
new file mode 100644 (file)
index 0000000..58d7062
--- /dev/null
@@ -0,0 +1,15 @@
+Tests transitions of the border shorthand properties.
+
+PASS - "border-top-color" property for "box" element at 0.5s saw something close to: 128,0,128
+PASS - "border-right-color" property for "box" element at 0.5s saw something close to: 128,0,128
+PASS - "border-bottom-color" property for "box" element at 0.5s saw something close to: 128,0,128
+PASS - "border-left-color" property for "box" element at 0.5s saw something close to: 128,0,128
+PASS - "border-top-width" property for "box" element at 0.5s saw something close to: 10
+PASS - "border-right-width" property for "box" element at 0.5s saw something close to: 10
+PASS - "border-bottom-width" property for "box" element at 0.5s saw something close to: 10
+PASS - "border-left-width" property for "box" element at 0.5s saw something close to: 10
+PASS - "border-top-width" property for "box1" element at 0.5s saw something close to: 10
+PASS - "border-top-color" property for "box1" element at 0.5s saw something close to: 255,0,255
+PASS - "border-top-width" property for "box2" element at 0.5s saw something close to: 10
+PASS - "border-bottom-width" property for "box2" element at 0.5s saw something close to: 20
+
diff --git a/LayoutTests/transitions/shorthand-border-transitions.html b/LayoutTests/transitions/shorthand-border-transitions.html
new file mode 100644 (file)
index 0000000..9543b1c
--- /dev/null
@@ -0,0 +1,100 @@
+<!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>Test shorthand transitions</title>
+  <style type="text/css" media="screen">
+    #box {
+      height: 100px;
+      width: 100px;
+      margin: 10px;
+      background-color: gray;
+      border: 0px solid rgb(0, 0, 0);
+      -webkit-transition: border 1s linear;
+    }
+    
+    #box.final {
+      border: 20px dashed rgb(255, 0, 255);
+    }
+
+    #box1 {
+      height: 100px;
+      width: 100px;
+      margin: 10px;
+      background-color: gray;
+      border: 0px solid rgb(0, 0, 0);
+      -webkit-transition: border-width 1s linear;
+    }
+    
+    #box1.final {
+      border: 20px solid rgb(255, 0, 255);
+    }
+
+    #box2 {
+      height: 100px;
+      width: 100px;
+      margin: 10px;
+      background-color: gray;
+      border: 0px solid rgb(0, 0, 0);
+      -webkit-transition: border 1s linear;
+    }
+    
+    #box2.final {
+      border-width: 20px;
+      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">
+    
+    const expectedValues = [
+      // [time, element-id, property, expected-value, tolerance]
+      // color and width of each side should be animating
+      [0.5, 'box', 'border-top-color', [128, 0, 128], 10],
+      [0.5, 'box', 'border-right-color', [128, 0, 128], 10],
+      [0.5, 'box', 'border-bottom-color', [128, 0, 128], 10],
+      [0.5, 'box', 'border-left-color', [128, 0, 128], 10],
+      [0.5, 'box', 'border-top-width', 10, 1],
+      [0.5, 'box', 'border-right-width', 10, 1],
+      [0.5, 'box', 'border-bottom-width', 10, 1],
+      [0.5, 'box', 'border-left-width', 10, 1],
+
+      // only border-width should be animating
+      [0.5, 'box1', 'border-top-width', 10, 1],
+      [0.5, 'box1', 'border-top-color', [255, 0, 255], 0],  // initial value
+
+      // border-width should be animating
+      [0.5, 'box2', 'border-top-width', 10, 1],
+      [0.5, 'box2', 'border-bottom-width', 20, 1],
+    ];
+    
+    function setupTest()
+    {
+      var box = document.getElementById('box');
+      box.className = 'final';
+
+      var box1 = document.getElementById('box1');
+      box1.className = 'final';
+
+      var box2 = document.getElementById('box2');
+      box2.className = 'final';
+    }
+    
+    runTransitionTest(expectedValues, setupTest, false);
+  </script>
+</head>
+<body>
+
+<p>
+  Tests transitions of the border shorthand properties.
+</p>
+<div id="box"></div>
+<div id="box1"></div>
+<div id="box2"></div>
+
+<div id="result">
+</div>
+</body>
+</html>
diff --git a/LayoutTests/transitions/shorthand-transitions-expected.txt b/LayoutTests/transitions/shorthand-transitions-expected.txt
new file mode 100644 (file)
index 0000000..b978cc3
--- /dev/null
@@ -0,0 +1,9 @@
+Tests transitions of the shorthand properties padding, margin, outline, background, -webkit-border-radius.
+
+PASS - "padding-top" property for "box" element at 0.5s saw something close to: 5
+PASS - "margin-top" property for "box" element at 0.5s saw something close to: 25
+PASS - "outline-color" property for "box" element at 0.5s saw something close to: 128,0,128
+PASS - "background-color" property for "box" element at 0.5s saw something close to: 128,128,255
+PASS - "-webkit-border-top-right-radius" property for "box" element at 0.5s saw something close to: 10
+PASS - "-webkit-transform-origin" property for "box" element at 0.5s saw something close to: 50,50
+
diff --git a/LayoutTests/transitions/shorthand-transitions.html b/LayoutTests/transitions/shorthand-transitions.html
new file mode 100644 (file)
index 0000000..e1de3ca
--- /dev/null
@@ -0,0 +1,65 @@
+<!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>Test shorthand transitions</title>
+  <style type="text/css" media="screen">
+    #box {
+      height: 100px;
+      width: 100px;
+      margin: 10px;
+      background-color: white;
+      outline-color: black;
+      -webkit-transition-property: padding, margin, outline, background, -webkit-border-radius, -webkit-transform-origin;
+      -webkit-transition-duration: 1s;
+      -webkit-transition-timing-function: linear;
+      -webkit-transform-origin: bottom left;
+    }
+    
+    #box.final {
+      padding: 10px;
+      margin: 40px;
+      outline: 10px solid rgb(255, 0, 255);
+      background-color: blue;
+      -webkit-border-radius: 20px;
+      -webkit-transform-origin: top right;
+    }
+
+  </style>
+  <script src="transition-test-helpers.js" type="text/javascript" charset="utf-8"></script>
+  <script type="text/javascript" charset="utf-8">
+    
+    const expectedValues = [
+      // [time, element-id, property, expected-value, tolerance]
+      [0.5, 'box', 'padding-top', 5, 1],
+      [0.5, 'box', 'margin-top', 25, 2],
+      [0.5, 'box', 'outline-color', [128, 0, 128], 10],
+      [0.5, 'box', 'background-color', [128, 128, 255], 10],
+      [0.5, 'box', '-webkit-border-top-right-radius', 10, 2],
+      [0.5, 'box', '-webkit-transform-origin', [50, 50], 5],
+    ];
+    
+    function setupTest()
+    {
+      var box = document.getElementById('box');
+      box.className = 'final';
+    }
+    
+    // We can't use the pause API because it only works for individual properties, and
+    // -webkit-transform-origin is a compound property.
+    runTransitionTest(expectedValues, setupTest, false);
+  </script>
+</head>
+<body>
+
+<p>
+Tests transitions of the shorthand properties padding, margin, outline, background, -webkit-border-radius.
+</p>
+<div id="box"></div>
+
+<div id="result">
+</div>
+</body>
+</html>