Bug 1504801 [wpt PR 13928] - [css-logical] Fix logical values according to the spec, a=testonly
authorOriol Brufau <obrufau@igalia.com>
Mon, 19 Nov 2018 18:46:19 +0000
changeset 504001 ffda747fa9a4723641765585d0daeddb4be7ddf6
parent 504000 d4ceb2524c99145bf805801719dda49b76c09d86
child 504002 e3aa644a327a03e4fef610d31bbb10fc4fbaeef5
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
bugs1504801, 13928, 901409, 1315989, 608730
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 1504801 [wpt PR 13928] - [css-logical] Fix logical values according to the spec, a=testonly Automatic update from web-platform-tests[css-logical] Fix logical values according to the spec Spec: https://drafts.csswg.org/css-logical/#directional-keywords Currently logical values compute to the corresponding physical value, and the mapping is with respect to the element itself. This patch makes them compute as specified and changes the mapping to be with respect to the containing block. BUG=901409 TEST=external/wpt/css/css-logical/logical-values-float-clear.html TEST=external/wpt/css/css-logical/logical-values-float-clear-reftest.html TEST=external/wpt/css/css-logical/logical-values-resize.html TEST=webexposed/nonstable-css-properties.html Change-Id: Ie0acaacde813c5343ec3bb8de712c4af03639475 Reviewed-on: https://chromium-review.googlesource.com/c/1315989 Commit-Queue: Manuel Rego <rego@igalia.com> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Cr-Commit-Position: refs/heads/master@{#608730} -- wpt-commits: 68eabe4d5bf5bed82dcdcc33e8b9e54a45d55307 wpt-pr: 13928
testing/web-platform/tests/css/css-logical/logical-values-float-clear-reftest.html
testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-reftest-ref.html
testing/web-platform/tests/css/css-logical/resources/test-logical-values.js
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/logical-values-float-clear-reftest.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Logical Values: Flow-Relative Values for the 'float' property</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-logical/#float-clear">
+<meta name="assert" content="This test checks that the 'inline-start' and 'inline-end' values of the 'float' and 'clear' properties map to the correct physical value." />
+<link rel="match" href="reference/logical-values-float-clear-reftest-ref.html">
+<style>
+.test {
+  display: block;
+  overflow: hidden;
+  width: 300px;
+}
+.inline {
+  display: inline;
+}
+.float, .clear {
+  display: block;
+  overflow: hidden;
+  height: 3px;
+  width: 100px;
+  background: #f0f;
+}
+.clear {
+  background: #0ff;
+}
+</style>
+<body>
+<script>
+const sides = ["inline-start", "inline-end"];
+const directions = ["ltr", "rtl"];
+for (const floatSide of sides) {
+  for (const clearSide of sides) {
+    for (const containerDirection of directions) {
+      for (const inlineParentDirection of [null, ...directions]) {
+        for (const floatDirection of directions) {
+          for (const clearDirection of directions) {
+            const containerEl = document.createElement("div");
+            containerEl.className = "test";
+            containerEl.style.direction = containerDirection;
+            const floatEl = document.createElement("div");
+            floatEl.className = "float";
+            floatEl.style.direction = floatDirection;
+            floatEl.style.float = floatSide;
+            const clearEl = document.createElement("div");
+            clearEl.className = "clear";
+            clearEl.style.direction = floatDirection;
+            clearEl.style.clear = clearSide;
+            if (inlineParentDirection) {
+              const inlineParent = document.createElement("div");
+              inlineParent.className = "inline";
+              inlineParent.style.direction = inlineParentDirection;
+              inlineParent.appendChild(floatEl);
+              inlineParent.appendChild(clearEl);
+              containerEl.appendChild(inlineParent);
+            } else {
+              containerEl.appendChild(floatEl);
+              containerEl.appendChild(clearEl);
+            }
+            document.body.appendChild(containerEl);
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+</body>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-reftest-ref.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Reftest Reference</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
+<style>
+.test {
+  display: block;
+  overflow: hidden;
+  width: 300px;
+}
+.inline {
+  display: inline;
+}
+.float, .clear {
+  display: block;
+  overflow: hidden;
+  height: 3px;
+  width: 100px;
+  background: #f0f;
+}
+.clear {
+  background: #0ff;
+}
+</style>
+<body>
+<script>
+function physicalValue(value, containerDirection) {
+  return ((value === "inline-start") === (containerDirection === "ltr")) ? "left" : "right";
+}
+const sides = ["inline-start", "inline-end"];
+const directions = ["ltr", "rtl"];
+for (const floatSide of sides) {
+  for (const clearSide of sides) {
+    for (const containerDirection of directions) {
+      for (const inlineParentDirection of [null, ...directions]) {
+        for (const floatDirection of directions) {
+          for (const clearDirection of directions) {
+            const containerEl = document.createElement("div");
+            containerEl.className = "test";
+            containerEl.style.direction = containerDirection;
+            const floatEl = document.createElement("div");
+            floatEl.className = "float";
+            floatEl.style.direction = floatDirection;
+            floatEl.style.float = physicalValue(floatSide, containerDirection);
+            const clearEl = document.createElement("div");
+            clearEl.className = "clear";
+            clearEl.style.direction = floatDirection;
+            clearEl.style.clear = physicalValue(clearSide, containerDirection);
+            if (inlineParentDirection) {
+              const inlineParent = document.createElement("div");
+              inlineParent.className = "inline";
+              inlineParent.style.direction = inlineParentDirection;
+              inlineParent.appendChild(floatEl);
+              inlineParent.appendChild(clearEl);
+              containerEl.appendChild(inlineParent);
+            } else {
+              containerEl.appendChild(floatEl);
+              containerEl.appendChild(clearEl);
+            }
+            document.body.appendChild(containerEl);
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+</body>
--- a/testing/web-platform/tests/css/css-logical/resources/test-logical-values.js
+++ b/testing/web-platform/tests/css/css-logical/resources/test-logical-values.js
@@ -16,32 +16,12 @@ import {
  */
 export function runTests(property, values) {
   for (const value of values) {
     test(function() {
       const {style} = testElement;
       style.cssText = "";
       style.setProperty(property, value);
       testCSSValues("logical values in inline style", style, [[property, value]]);
+      testComputedValues("logical values in computed style", style, [[property, value]]);
     }, `Test that '${property}: ${value}' is supported.`);
-
-    const camelCase = value.replace(/-(.)/g, (match, $1) => $1.toUpperCase());
-    for (const writingMode of writingModes) {
-      for (const style of writingMode.styles) {
-        const writingModeDecl = makeDeclaration(style);
-        test(function() {
-          const physicalSide = writingMode[camelCase];
-          let expected;
-          if (physicalSide === writingMode.lineLeft) {
-            expected = "left";
-          } else if (physicalSide === writingMode.lineRight) {
-            expected = "right";
-          } else {
-            expected = physicalSide;
-          }
-          testComputedValues(`computed value`,
-                             `.test { ${writingModeDecl} }`,
-                             [[property, expected]]);
-        }, `Test '${property}: ${value}' with '${writingModeDecl}'.`);
-      }
-    }
   }
 }