Bug 1482393 [wpt PR 12409] - [css-logical] Interpolate logical properties like physical ones in CSS transitions, a=testonly
authorOriol Brufau <obrufau@igalia.com>
Thu, 16 Aug 2018 09:40:01 +0000
changeset 431997 1b70c1fa962eb60f045c23e43d16d4cc7009829f
parent 431996 8c5d1fe7039fa19da77958118b3246cf72d41cd3
child 431998 a6d7d1767f0943f0d78ffc50fb363b44ec73a7f2
push id34456
push usertoros@mozilla.com
push dateThu, 16 Aug 2018 21:33:21 +0000
treeherdermozilla-central@72442cf86f54 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1482393, 12409, 873101, 1170769, 582895
milestone63.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 1482393 [wpt PR 12409] - [css-logical] Interpolate logical properties like physical ones in CSS transitions, a=testonly Automatic update from web-platform-tests[css-logical] Interpolate logical properties like physical ones in CSS transitions Spec: https://drafts.csswg.org/css-logical/#box BUG=873101 TEST=external/wpt/css/css-logical/animation-004.html Change-Id: I104a8ecc746f4516e567b16a75c5d32a31d4dab8 Reviewed-on: https://chromium-review.googlesource.com/1170769 Reviewed-by: Robert Flack <flackr@chromium.org> Commit-Queue: Oriol Brufau <obrufau@igalia.com> Cr-Commit-Position: refs/heads/master@{#582895} -- wpt-commits: c02862684bb2faac9000b1ec1ad785464c97f5d9 wpt-pr: 12409
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/css-logical/animation-004.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -330771,16 +330771,22 @@
     ]
    ],
    "css/css-logical/animation-003.tentative.html": [
     [
      "/css/css-logical/animation-003.tentative.html",
      {}
     ]
    ],
+   "css/css-logical/animation-004.html": [
+    [
+     "/css/css-logical/animation-004.html",
+     {}
+    ]
+   ],
    "css/css-logical/logical-box-border-color.html": [
     [
      "/css/css-logical/logical-box-border-color.html",
      {}
     ]
    ],
    "css/css-logical/logical-box-border-shorthands.html": [
     [
@@ -535968,16 +535974,20 @@
   "css/css-logical/animation-002.html": [
    "d4f199d50e48b3e239e395fd442da9d530652066",
    "testharness"
   ],
   "css/css-logical/animation-003.tentative.html": [
    "bcb4e15d80c4225603ff59b92ccfc56dfc90d877",
    "testharness"
   ],
+  "css/css-logical/animation-004.html": [
+   "48cb58a29e4183d8e80527795b0000fb2f821bf3",
+   "testharness"
+  ],
   "css/css-logical/cascading-001-ref.html": [
    "79a432c4557bbda081a9b1c8d0dd9602c0eb85e5",
    "support"
   ],
   "css/css-logical/cascading-001.html": [
    "653925552f870f740d3c9fc397b4dc2267994103",
    "reftest"
   ],
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/animation-004.html
@@ -0,0 +1,250 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Animating CSS logical properties using CSS Transitions</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#box">
+<meta name="assert" content="The specified values of these properties are separate from the specified values of the parallel physical properties, but the flow-relative and physical properties share computed values.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../css-animations/support/testcommon.js"></script>
+
+<div id="log"></div>
+<div id="test"></div>
+<script>
+'use strict';
+
+const testEl = document.getElementById("test");
+
+function makeDeclaration(object = {}) {
+  return Object.entries(object).map(([prop, val]) => prop + ": " + val).join("; ");
+}
+
+/**
+ * Starts a CSS transition in testEl. By default, the transition will affect the properies
+ * 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.
+ */
+function transition(t, baseStyles, finalStyles) {
+  // Clear styles from previous test.
+  testEl.style.cssText = "";
+  testEl.className = "";
+  getComputedStyle(testEl).height;
+
+  // Set base 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),
+  });
+  getComputedStyle(testEl).height;
+
+  // Start the transition
+  testEl.className = "transition";
+}
+
+test(t => {
+  transition(t, {
+    "block-size": "0px",
+  }, {
+    "block-size": "100px",
+  });
+  assert_equals(getComputedStyle(testEl).height, '50px');
+}, 'Logical properties can be transitioned');
+
+test(t => {
+  transition(t, {
+    "block-size": "0px",
+    "writing-mode": "vertical-rl",
+  }, {
+    "block-size": "100px",
+  });
+  assert_equals(getComputedStyle(testEl).width, '50px');
+  assert_equals(getComputedStyle(testEl).height, '0px');
+}, 'Logical properties in transitions respect the writing-mode');
+
+test(t => {
+  transition(t, {
+    "margin-inline-start": "0px",
+    "direction": "rtl",
+  }, {
+    "margin-inline-start": "100px",
+  });
+  assert_equals(getComputedStyle(testEl).marginLeft, '0px');
+  assert_equals(getComputedStyle(testEl).marginRight, '50px');
+}, 'Logical properties in transitions respect the direction');
+
+test(t => {
+  transition(t, {
+    "block-size": "0px",
+    "height": "200px",
+  }, {
+    "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",
+  }, {
+    "margin-top": "200px",
+    "margin-block-start": "100px"
+  });
+  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",
+  }, {
+    "margin-inline": "200px",
+    "margin-inline-start": "0px",
+    "margin-inline-start": "100px",
+  });
+  assert_equals(getComputedStyle(testEl).marginLeft, '100px');
+}, 'Declaration order is respected amongst logical properties within declaration blocks');
+
+test(t => {
+  transition(t, {
+    "block-size": "200px",
+  }, {
+    "height": "300px",
+  });
+  assert_equals(getComputedStyle(testEl).height, '250px');
+}, 'Physical properties and logical properties can be mixed');
+
+test(t => {
+  transition(t, {
+    "height": "100px",
+    "block-size": "200px",
+  }, {
+    "block-size": "100px",
+    "height": "300px",
+  });
+  assert_equals(getComputedStyle(testEl).height, '250px');
+}, 'Declaration order is respected on each keyframe individually');
+
+test(t => {
+  transition(t, {
+    "width": "0px",
+    "height": "0px",
+    "block-size": "0px",
+  }, {
+    "block-size": "100px",
+  });
+  assert_equals(getComputedStyle(testEl).width, '0px');
+  assert_equals(getComputedStyle(testEl).height, '50px');
+
+  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",
+  });
+  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';
+  testEl.style.writingMode = 'vertical-rl';
+  assert_equals(getComputedStyle(testEl).width, '100px');
+  assert_equals(getComputedStyle(testEl).height, '0px');
+}, 'Filling transitions update when the writing-mode is changed');
+
+test(t => {
+  transition(t, {
+    "width": "0px",
+    "height": "0px",
+  }, {
+    "block-size": "100px",
+    "height": "200px",
+  });
+
+  // Initially we are interpolating the height from 0 to 200px
+  assert_equals(getComputedStyle(testEl).width, '0px');
+  assert_equals(getComputedStyle(testEl).height, '100px');
+
+  // But once we change the writing-mode, we will be interpolating *both*
+  // the height (from 0px to 200px) *and* the width (from 0px to 100px).
+  testEl.style.writingMode = 'vertical-rl';
+  assert_equals(getComputedStyle(testEl).width, '50px');
+  assert_equals(getComputedStyle(testEl).height, '100px');
+}, 'The number of interpolating properties can be increased when the'
+   + ' writing-mode is changed');
+
+test(t => {
+  transition(t, {
+    "width": "100px",
+    "height": "100px",
+  }, {
+    "width": "500px",
+    "block-size": "200px",
+  });
+
+  // Initially we are interpolating the width (100px -> 500px) and the height
+  // (100px -> 200px).
+  assert_equals(getComputedStyle(testEl).width, '300px');
+  assert_equals(getComputedStyle(testEl).height, '150px');
+
+  // Once we change the writing-mode, we will be interpolating *only* the
+  // width (300px -> 200px).
+  testEl.style.writingMode = 'vertical-rl';
+  assert_equals(getComputedStyle(testEl).width, '250px');
+  assert_equals(getComputedStyle(testEl).height, '100px');
+}, 'The number of interpolating properties can be decreased when the'
+   + ' writing-mode is changed');
+
+test(t => {
+  addStyle(t, { ':root': '--writingMode: horizontal-tb' });
+  transition(t, {
+    "width": "0px",
+    "height": "0px",
+    "writing-mode": "var(--writingMode)",
+    "block-size": "0px",
+  }, {
+    "block-size": "100px"
+  });
+  assert_equals(getComputedStyle(testEl).width, '0px');
+  assert_equals(getComputedStyle(testEl).height, '50px');
+
+  testEl.style.setProperty('--writingMode', 'vertical-rl');
+  assert_equals(getComputedStyle(testEl).width, '50px');
+  assert_equals(getComputedStyle(testEl).height, '0px');
+}, 'Transitions update when the writing-mode is changed through a CSS variable');
+
+test(t => {
+  transition(t, {
+    "margin-inline-start": "0px",
+  }, {
+    "margin-inline-start": "100px",
+  });
+  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');
+
+</script>