Implement offset-rotate.

This includes style system and layout update. I add 3 extra reftests because the original tests use ray() function as the offset-path, but we don't support it. It'd be better to add tests using a different type of offset-path. The spec issue about the serialization: w3c/fxtf-drafts#340 Differential Revision: https://phabricator.services.mozilla.com/D32212 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1429301 gecko-commit: ae71e496d5873033d9696c54fb8b36297abbf8d0 gecko-integration-branch: autoland gecko-reviewers: emilio
web-platform-tests · Jul 23, 2019 · 0fb89fa · 0fb89fa
1 parent 628eae4
commit 0fb89fa
Show file tree

Hide file tree

Showing 8 changed files with 150 additions and 21 deletions.
diff --git a/css/motion/inheritance.html b/css/motion/inheritance.html
@@ -19,7 +19,8 @@
 assert_not_inherited('offset-distance', '0px', '4px');
 assert_not_inherited('offset-path', 'none', 'path("M 5 6 H 7")');
 assert_not_inherited('offset-position', 'auto', '8px 9px');
-assert_not_inherited('offset-rotate', 'auto 0deg', '90deg');
+// https://github.com/w3c/fxtf-drafts/issues/340
+assert_not_inherited('offset-rotate', ['auto 0deg', 'auto'], '90deg');
 </script>
 </body>
 </html>
diff --git a/css/motion/offset-rotate-003.html b/css/motion/offset-rotate-003.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: offset-rotate</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property">
+    <link rel="match" href="offset-rotate-ref.html">
+    <meta name="assert" content="This tests offset-rotate <angle>">
+    <style>
+      #target {
+        position: absolute;
+        left: 300px;
+        top: 100px;
+        width: 300px;
+        height: 200px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        offset-path: path('m 0 0 v -200 -200') ;
+        offset-rotate: 30deg;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/css/motion/offset-rotate-004.html b/css/motion/offset-rotate-004.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <title>CSS Motion Path: offset-rotate</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property">
+    <link rel="match" href="offset-rotate-ref.html">
+    <meta name="assert" content="This tests offset-rotate auto with path()">
+    <style>
+      #target {
+        position: absolute;
+        left: 300px;
+        top: 100px;
+        width: 300px;
+        height: 200px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        offset-rotate: auto;
+      }
+    </style>
+    <script>
+      function test() {
+        let target = document.getElementById('target');
+        // Get a path which has the same direction as "ray(120deg ...)"
+        let verticalMove = 100 * Math.tan(30 * Math.PI / 180);
+        target.style.offsetPath = `path("m 0 0 l 100 ${verticalMove}")`;
+        window.getComputedStyle(target).offsetPath;
+
+        window.requestAnimationFrame(function() {
+          document.documentElement.removeAttribute('class');
+        });
+      }
+    </script>
+  </head>
+  <body onload='test()'>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/css/motion/offset-rotate-005.html b/css/motion/offset-rotate-005.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <title>CSS Motion Path: offset-rotate</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property">
+    <link rel="match" href="offset-rotate-ref.html">
+    <meta name="assert" content="This tests offset-rotate reverse <angle> with path()">
+    <style>
+      #target {
+        position: absolute;
+        left: 300px;
+        top: 100px;
+        width: 300px;
+        height: 200px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        offset-rotate: reverse 60deg;
+      }
+    </style>
+    <script>
+      function test() {
+        let target = document.getElementById('target');
+        // Get a path which has the same direction as "ray(-120deg ...)"
+        let verticalMove = 100 * Math.tan(30 * Math.PI / 180);
+        target.style.offsetPath = `path("m 0 0 l -100 ${verticalMove}")`;
+        window.getComputedStyle(target).offsetPath;
+
+        window.requestAnimationFrame(function() {
+          document.documentElement.removeAttribute('class');
+        });
+      }
+    </script>
+  </head>
+  <body onload='test()'>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/css/motion/parsing/offset-rotate-computed.html b/css/motion/parsing/offset-rotate-computed.html
@@ -13,7 +13,8 @@
 <body>
 <div id="target"></div>
 <script>
-test_computed_value("offset-rotate", "auto", "auto 0deg");
+// https://github.com/w3c/fxtf-drafts/issues/340
+test_computed_value("offset-rotate", "auto", ["auto 0deg", "auto"]);
 test_computed_value("offset-rotate", "reverse", "auto 180deg");
 test_computed_value("offset-rotate", "calc(90deg - 0.5turn - 300grad + 0rad)", "-360deg");
 test_computed_value("offset-rotate", "auto 5turn", "auto 1800deg");

diff --git a/css/motion/parsing/offset-rotate-parsing-valid.html b/css/motion/parsing/offset-rotate-parsing-valid.html
@@ -16,9 +16,11 @@
 test_valid_value("offset-rotate", "reverse");
 test_valid_value("offset-rotate", "-400deg");
 test_valid_value("offset-rotate", "auto 5turn");
-test_valid_value("offset-rotate", "reverse 0rad");
+// https://github.com/w3c/fxtf-drafts/issues/340
+test_valid_value("offset-rotate", "reverse 0rad", ["reverse 0rad", "reverse"]);
 test_valid_value("offset-rotate", "5turn auto", "auto 5turn");
-test_valid_value("offset-rotate", "0rad reverse", "reverse 0rad");
+// https://github.com/w3c/fxtf-drafts/issues/340
+test_valid_value("offset-rotate", "0rad reverse", ["reverse 0rad", "reverse"]);
 </script>
 </body>
 </html>
diff --git a/css/support/computed-testcommon.js b/css/support/computed-testcommon.js
@@ -6,22 +6,36 @@
  *
  * @param {string} property  The name of the CSS property being tested.
  * @param {string} specified A specified value for the property.
- * @param {string} computed  The expected computed value. If omitted,
-                             defaults to specified.
+ * @param {string|array} computed  The expected computed value,
+ *                                 or an array of permitted computed value.
+ *                                 If omitted, defaults to specified.
  */
 function test_computed_value(property, specified, computed) {
   if (!computed)
     computed = specified;
+
+  let computedDesc = "'" + computed + "'";
+  if (Array.isArray(computed))
+    computedDesc = '[' + computed.map(e => "'" + e + "'").join(' or ') + ']';
+
   test(() => {
     const target = document.getElementById('target');
     assert_true(property in getComputedStyle(target), property + " doesn't seem to be supported in the computed style");
     target.style[property] = '';
     target.style[property] = specified;
-    assert_equals(getComputedStyle(target)[property], computed);
-    if (computed !== specified) {
+
+    let readValue = getComputedStyle(target)[property];
+    if (Array.isArray(computed)) {
+      assert_in_array(readValue, computed);
+    } else {
+      assert_equals(readValue, computed);
+    }
+    if (readValue !== specified) {
       target.style[property] = '';
-      target.style[property] = computed;
-      assert_equals(getComputedStyle(target)[property], computed, 'computed value should round-trip');
+      target.style[property] = readValue;
+      assert_equals(getComputedStyle(target)[property], readValue,
+                    'computed value should round-trip');
     }
-  }, "Property " + property + " value '" + specified + "' computes to '" + computed + "'");
+  }, "Property " + property + " value '" + specified + "' computes to " +
+     computedDesc);
 }
diff --git a/css/support/inheritance-testcommon.js b/css/support/inheritance-testcommon.js
@@ -3,24 +3,34 @@
 (function() {
 
 function assert_initial(property, initial) {
+  let initialDesc = initial;
+  if (Array.isArray(initial))
+    initialDesc = '[' + initial.map(e => "'" + e + "'").join(' or ') + ']';
+
   test(() => {
     const target = document.getElementById('target');
     assert_true(property in getComputedStyle(target), property + " doesn't seem to be supported in the computed style");
     target.style[property] = 'initial';
-    assert_equals(getComputedStyle(target)[property], initial);
+    if (Array.isArray(initial)) {
+      assert_in_array(getComputedStyle(target)[property], initial);
+    } else {
+      assert_equals(getComputedStyle(target)[property], initial);
+    }
     target.style[property] = '';
-  }, 'Property ' + property + ' has initial value ' + initial);
+  }, 'Property ' + property + ' has initial value ' + initialDesc);
 }
 
 /**
  * Create tests that a CSS property inherits and has the given initial value.
  *
  * The current document must have an element #target within element #container.
  *
- * @param {string} property  The name of the CSS property being tested.
- * @param {string} initial   The computed value for 'initial'.
- * @param {string} other     An arbitrary value for the property that round
- *                           trips and is distinct from the initial value.
+ * @param {string}        property  The name of the CSS property being tested.
+ * @param {string|array}  initial   The computed value for 'initial' or a list
+ *                                  of acceptable computed value serializations.
+ * @param {string}        other     An arbitrary value for the property that
+ *                                  round trips and is distinct from the initial
+ *                                  value.
  */
 function assert_inherited(property, initial, other) {
   assert_initial(property, initial);
@@ -52,10 +62,12 @@ function assert_inherited(property, initial, other) {
  *
  * The current document must have an element #target within element #container.
  *
- * @param {string} property  The name of the CSS property being tested.
- * @param {string} initial   The computed value for 'initial'.
- * @param {string} other     An arbitrary value for the property that round
- *                           trips and is distinct from the initial value.
+ * @param {string}        property  The name of the CSS property being tested.
+ * @param {string|array}  initial   The computed value for 'initial' or a list
+ *                                  of acceptable computed value serializations.
+ * @param {string}        other     An arbitrary value for the property that
+ *                                  round trips and is distinct from the initial
+ *                                  value.
  */
 function assert_not_inherited(property, initial, other) {
   assert_initial(property, initial);