Bug 1508031 [wpt PR 14108] - [css-logical] Fix animation-004.html, a=testonly
authorOriol Brufau <obrufau@igalia.com>
Mon, 19 Nov 2018 18:46:44 +0000
changeset 504012 7378efd716566160646f83fc0b3da1fbbe25972c
parent 504011 60b55f9c6aed47b143ee8b7578020beda7abe2d9
child 504013 8b797bf446c843db38a18aee54c072c212c261d0
push id10290
push userffxbld-merge
push dateMon, 03 Dec 2018 16:23:23 +0000
treeherdermozilla-beta@700bed2445e6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1508031, 14108, 14107
milestone65.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1508031 [wpt PR 14108] - [css-logical] Fix animation-004.html, a=testonly Automatic update from web-platform-tests[css-logical] Fix animation-004.html Fixes #14107 -- Merge pull request #14108 from Loirooriol/fix-logical-transitions [css-logical] Fix animation-004.html -- wpt-commits: f2853643f52e0f1c5cdb9b23b35e4c0e66fd296f, b603262eb6add91220b57cd0ad5e0d625f838584 wpt-pr: 14108
testing/web-platform/tests/css/css-logical/animation-004.html
--- a/testing/web-platform/tests/css/css-logical/animation-004.html
+++ b/testing/web-platform/tests/css/css-logical/animation-004.html
@@ -23,35 +23,41 @@ function makeDeclaration(object = {}) {
  * specified in finalStyles, be linear, last 10 seconds and start halfway, but this can be
  * overridden in baseStyles.
  *
  * @param t  The testharness.js Test object.
  * @param baseStyles  A dictionary object with property names and values to set on the
  *                    element before starting the transition.
  * @param finalStyles  A dictionary object with property names and values towards which
  *                     the element will transition.
+ * @param [transitionStyles]  An optional dictionary object to costumize the transition.
  */
-function transition(t, baseStyles, finalStyles) {
+function transition(t, baseStyles, finalStyles, transitionStyles = {}) {
   // Clear styles from previous test.
   testEl.style.cssText = "";
   testEl.className = "";
   getComputedStyle(testEl).height;
 
-  // Set base styles
+  // Set base and final styles
+  addStyle(t, {
+    "#test": makeDeclaration(baseStyles),
+    "#test.transition": makeDeclaration(finalStyles),
+  });
+  getComputedStyle(testEl).height;
+
+  // Set transition styles
   const defaultTransition = {
     "transition-property": Object.keys(finalStyles).join(", "),
     "transition-timing-function": "linear",
     "transition-duration": "10s",
     "transition-delay": "-5s",
   };
   addStyle(t, {
-    "#test": makeDeclaration(Object.assign(defaultTransition, baseStyles)),
-    "#test.transition": makeDeclaration(finalStyles),
+    "#test": makeDeclaration(Object.assign(defaultTransition, transitionStyles)),
   });
-  getComputedStyle(testEl).height;
 
   // Start the transition
   testEl.className = "transition";
 }
 
 test(t => {
   transition(t, {
     "block-size": "0px",
@@ -90,32 +96,32 @@ test(t => {
   }, {
     "block-size": "100px",
     "height": "300px",
   });
   assert_equals(getComputedStyle(testEl).height, '250px');
 }, 'Declaration order is respected within declaration blocks');
 
 test(t => {
-  transition(t, {
-    "transition-timing-function": "step-start",
-  }, {
+  transition(t, {}, {
     "margin-top": "200px",
     "margin-block-start": "100px"
+  }, {
+    "transition-timing-function": "step-start",
   });
   assert_equals(getComputedStyle(testEl).marginTop, '100px');
 }, 'Logical properties are able to override physical properties in declaration blocks');
 
 test(t => {
-  transition(t, {
-    "transition-timing-function": "step-start",
-  }, {
+  transition(t, {}, {
     "margin-inline": "200px",
     "margin-inline-start": "0px",
     "margin-inline-start": "100px",
+  }, {
+    "transition-timing-function": "step-start",
   });
   assert_equals(getComputedStyle(testEl).marginLeft, '100px');
 }, 'Declaration order is respected amongst logical properties within declaration blocks');
 
 test(t => {
   transition(t, {
     "block-size": "200px",
   }, {
@@ -148,22 +154,23 @@ test(t => {
 
   testEl.style.writingMode = 'vertical-rl';
   assert_equals(getComputedStyle(testEl).width, '50px');
   assert_equals(getComputedStyle(testEl).height, '0px');
 }, 'Transitions update when the writing-mode is changed');
 
 promise_test(async t => {
   transition(t, {
-    "transition-delay": "-9.9s",
     "width": "0px",
     "height": "0px",
     "block-size": "0px",
   }, {
     "block-size": "100px",
+  }, {
+    "transition-delay": "-9.9s",
   });
   const watcher = new EventWatcher(t, testEl, [ 'transitionend' ]);
   await watcher.wait_for('transitionend');
 
   assert_equals(getComputedStyle(testEl).width, '0px');
   assert_equals(getComputedStyle(testEl).height, '100px');
 
   testEl.style.transition = 'none';
@@ -242,9 +249,36 @@ test(t => {
   assert_equals(getComputedStyle(testEl).marginLeft, '50px');
   assert_equals(getComputedStyle(testEl).marginRight, '0px');
 
   testEl.style.direction = 'rtl';
   assert_equals(getComputedStyle(testEl).marginLeft, '0px');
   assert_equals(getComputedStyle(testEl).marginRight, '50px');
 }, 'Transitions update when the direction is changed');
 
+test(t => {
+  transition(t, {
+    "margin-inline-start": "100px",
+  }, {
+    "margin-left": "200px",
+  });
+  assert_equals(getComputedStyle(testEl).marginLeft, '150px');
+  assert_equals(getComputedStyle(testEl).marginRight, '0px');
+
+  testEl.style.direction = 'rtl';
+  assert_equals(getComputedStyle(testEl).marginLeft, '150px');
+  assert_equals(getComputedStyle(testEl).marginRight, '100px');
+}, 'Transitions from logical to physical update when the direction is changed');
+
+test(t => {
+  transition(t, {
+    "margin-left": "200px",
+  }, {
+    "margin-inline-start": "100px",
+  });
+  assert_equals(getComputedStyle(testEl).marginLeft, '150px');
+  assert_equals(getComputedStyle(testEl).marginRight, '0px');
+
+  testEl.style.direction = 'rtl';
+  assert_equals(getComputedStyle(testEl).marginLeft, '200px');
+  assert_equals(getComputedStyle(testEl).marginRight, '50px');
+}, 'Transitions from physical to logical update when the direction is changed');
 </script>