Bug 1592748 [wpt PR 20003] - [css-pseudo] Restrict the properties allowed in ::marker, a=testonly
authorOriol Brufau <obrufau@igalia.com>
Mon, 04 Nov 2019 11:44:40 +0000
changeset 564794 84e6aad768ea9f1fe112f46451d67be32bc07972
parent 564793 62fa759f6a208e0dce3d0e4acf76cd0e506395bb
child 564795 d86afbffba23b420168cb8f655260c49bf06f1f8
push id12351
push userffxbld-merge
push dateMon, 02 Dec 2019 11:32:26 +0000
treeherdermozilla-beta@dba4410526a2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1592748, 20003, 457718, 1891310, 710995
milestone72.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 1592748 [wpt PR 20003] - [css-pseudo] Restrict the properties allowed in ::marker, a=testonly Automatic update from web-platform-tests [css-pseudo] Restrict the properties allowed in ::marker Only the following properties apply to a ::marker pseudo-element: - all font properties - `color` - `text-combine-upright`, `unicode-bidi`, and `direction` - `content` Spec: https://drafts.csswg.org/css-pseudo-4/#marker-pseudo BUG=457718 TEST=external/wpt/css/css-pseudo/parsing/marker-supported-properties.html The test has 2 failures because font-synthesis and font-variant-position have not been implemented yet. Change-Id: I9f82e13bdd14a06a84ee55e352cd5a2c64d6fb97 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1891310 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Oriol Brufau <obrufau@igalia.com> Cr-Commit-Position: refs/heads/master@{#710995} -- wpt-commits: bdd57938c6385091bb4120cb7bfb0749ee62b2a1 wpt-pr: 20003 Differential Revision: https://phabricator.services.mozilla.com/D53584
testing/web-platform/tests/css/css-pseudo/parsing/marker-supported-properties.html
testing/web-platform/tests/css/support/computed-testcommon.js
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/parsing/marker-supported-properties.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: Supported properties in ::marker</title>
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo">
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<meta name="assert" content="This test checks that only certain properties apply to ::marker pseudo-elements." />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<div id="log"></div>
+<ul>
+  <li id="target">target</li>
+</ul>
+<script>
+// ::marker supports all font properties.
+test_pseudo_computed_value("::marker", "font", "italic small-caps 900 expanded 25px / 50px Ahem",
+  ["italic small-caps 900 expanded 25px Ahem", "italic small-caps 900 expanded 25px/normal Ahem"]);
+test_pseudo_computed_value("::marker", "font-family", "Ahem");
+test_pseudo_computed_value("::marker", "font-feature-settings", "\"smcp\"");
+test_pseudo_computed_value("::marker", "font-kerning", "none");
+test_pseudo_computed_value("::marker", "font-size", "25px");
+test_pseudo_computed_value("::marker", "font-size-adjust", "1");
+test_pseudo_computed_value("::marker", "font-stretch", "expanded", ["expanded", "125%"]);
+test_pseudo_computed_value("::marker", "font-style", "italic");
+test_pseudo_computed_value("::marker", "font-synthesis", "none");
+test_pseudo_computed_value("::marker", "font-variant", "small-caps");
+test_pseudo_computed_value("::marker", "font-variant-caps", "small-caps");
+test_pseudo_computed_value("::marker", "font-variant-east-asian", "full-width");
+test_pseudo_computed_value("::marker", "font-variant-ligatures", "historical-ligatures");
+test_pseudo_computed_value("::marker", "font-variant-numeric", "slashed-zero");
+test_pseudo_computed_value("::marker", "font-variant-position", "sub");
+test_pseudo_computed_value("::marker", "font-weight", "900");
+
+// ::marker supports `color`
+test_pseudo_computed_value("::marker", "color", "rgb(0, 100, 200)");
+
+// ::marker supports `text-combine-upright`, `unicode-bidi` and `direction`
+test_pseudo_computed_value("::marker", "text-combine-upright", "none");
+test_pseudo_computed_value("::marker", "unicode-bidi", "plaintext");
+test_pseudo_computed_value("::marker", "direction", "rtl");
+
+// ::marker supports `content`
+test_pseudo_computed_value("::marker", "content", "\"foo\"");
+
+// ::marker does NOT support layout properties
+test_pseudo_computed_value("::marker", "display", "none", ["block", "inline"]);
+test_pseudo_computed_value("::marker", "position", "absolute", "static");
+test_pseudo_computed_value("::marker", "float", "right", "none");
+
+// ::marker does NOT support list properties despite being affected by them,
+// they apply to the list item instead.
+test_pseudo_computed_value("::marker", "list-style", "inside url('foo') decimal", "outside none disc");
+test_pseudo_computed_value("::marker", "list-style-image", "url('foo')", "none");
+test_pseudo_computed_value("::marker", "list-style-position", "inside", "outside");
+test_pseudo_computed_value("::marker", "list-style-type", "decimal", "disc");
+
+// ::marker does NOT support `line-height` because, despite being a
+// longhand of `font`, it's not a font property.
+test_pseudo_computed_value("::marker", "line-height", "50px", "normal");
+</script>
--- a/testing/web-platform/tests/css/support/computed-testcommon.js
+++ b/testing/web-platform/tests/css/support/computed-testcommon.js
@@ -35,8 +35,49 @@ function test_computed_value(property, s
       target.style[property] = '';
       target.style[property] = readValue;
       assert_equals(getComputedStyle(target)[property], readValue,
                     'computed value should round-trip');
     }
   }, "Property " + property + " value '" + specified + "' computes to " +
      computedDesc);
 }
+
+function test_pseudo_computed_value(pseudo, property, specified, computed) {
+  if (!computed)
+    computed = specified;
+
+  let computedDesc = "'" + computed + "'";
+  if (Array.isArray(computed))
+    computedDesc = '[' + computed.map(e => "'" + e + "'").join(' or ') + ']';
+
+  test(() => {
+    assert_true(/^::\w+$/.test(pseudo), pseudo + " doesn't seem to be a pseudo-element");
+    const styleElement = document.createElement("style");
+    document.documentElement.appendChild(styleElement);
+    try {
+      const {sheet} = styleElement;
+      sheet.insertRule("#target" + pseudo + "{}");
+      const {style} = sheet.cssRules[0];
+      const target = document.getElementById('target');
+
+      assert_true(property in getComputedStyle(target, pseudo), property + " doesn't seem to be supported in the computed style");
+      assert_true(CSS.supports(property, specified), "'" + specified + "' is a supported value for " + property + ".");
+      style[property] = specified;
+
+      let readValue = getComputedStyle(target, pseudo)[property];
+      if (Array.isArray(computed)) {
+        assert_in_array(readValue, computed);
+      } else {
+        assert_equals(readValue, computed);
+      }
+      if (readValue !== specified) {
+        style[property] = '';
+        style[property] = readValue;
+        assert_equals(getComputedStyle(target, pseudo)[property], readValue,
+                      'computed value should round-trip');
+      }
+    } finally {
+      document.documentElement.removeChild(styleElement);
+    }
+  }, "Property " + property + " value '" + specified + "' computes to " +
+     computedDesc + " in " + pseudo);
+}