[css-pseudo] Support 'line-height' property in ::marker

The CSSWG resolved in w3c/csswg-drafts#4568 that inherited properties that apply to text can be set on ::marker and should affect the marker text. And in w3c/csswg-drafts#5303 it resolved that 'line-height' applies to text (as it already does in Chromium). Therefore, this patch allows 'line-height' in ::marker. Note it was already possibly to set it to the list item and the ::marker would inherit it. Just letting authors set it directly to the ::marker. Bug: 1031667 TEST=external/wpt/css/css-pseudo/marker-line-height.html TEST=external/wpt/css/css-pseudo/parsing/marker-supported-properties-in-animation.html TEST=external/wpt/css/css-pseudo/parsing/marker-supported-properties.html marker-line-height.html fails in legacy because ::markers with 'content: normal' are not implemented with actual text. Change-Id: If63095d046150a2b5f76c40fce93fce1c0e7741c
web-platform-tests · Oct 27, 2020 · 2d174ca · 2d174ca
1 parent 0fc65fe
commit 2d174ca
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 15 deletions.
diff --git a/css/css-pseudo/marker-line-height-ref.html b/css/css-pseudo/marker-line-height-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Reftest Reference</title>
+<link rel="author" title="Oriol Brufau" href="mailto:[email protected]" />
+<style>
+ol {
+  float: left;
+  width: 50px;
+  list-style-position: inside;
+  line-height: 3;
+}
+li:first-child {
+  list-style-type: disc;
+}
+div {
+  line-height: 1;
+}
+</style>
+<ol>
+  <li></li>
+  <li></li>
+  <li></li>
+  <li></li>
+</ol>
+<ol>
+  <li></li>
+  <li></li>
+  <li></li>
+  <li></li>
+</ol>
+<ol>
+  <li><div>x</div></li>
+  <li><div>x</div></li>
+  <li><div>x</div></li>
+  <li><div>x</div></li>
+</ol>
+<ol>
+  <li><div>x</div></li>
+  <li><div>x</div></li>
+  <li><div>x</div></li>
+  <li><div>x</div></li>
+</ol>
diff --git a/css/css-pseudo/marker-line-height.html b/css/css-pseudo/marker-line-height.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>::marker supports 'line-height'</title>
+<link rel="author" title="Oriol Brufau" href="mailto:[email protected]" />
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo">
+<link rel="help" href="https://drafts.csswg.org/css-inline/#propdef-line-height">
+<link rel="match" href="marker-line-height-ref.html">
+<meta name="assert" content="Checks that ::marker supports 'line-height', both explicitly set or inherited from an ancestor">
+<style>
+ol {
+  float: left;
+  width: 50px;
+  list-style-position: inside;
+}
+ol, ol div {
+  line-height: 1;
+  font-size: 1rem;
+}
+.line-height.explicit ::marker,
+.line-height.inherit {
+  line-height: 3;
+}
+.line-height.inherit li {
+  font-size: 0; /* Remove the strut, which would defeat the test */
+}
+.line-height.inherit ::marker {
+  font-size: 1rem; /* Restore the font-size */
+}
+.marker-disc {
+  list-style-type: disc;
+}
+.marker-decimal {
+  list-style-type: decimal;
+}
+.marker-string {
+  list-style-type: "3. ";
+}
+.marker-content::marker {
+  content: "4. ";
+}
+</style>
+<ol class="line-height explicit">
+  <li class="marker-disc"></li>
+  <li class="marker-decimal"></li>
+  <li class="marker-string"></li>
+  <li class="marker-content"></li>
+</ol>
+<ol class="line-height inherit">
+  <li class="marker-disc"></li>
+  <li class="marker-decimal"></li>
+  <li class="marker-string"></li>
+  <li class="marker-content"></li>
+</ol>
+<ol class="line-height explicit">
+  <li class="marker-disc"><div>x</div></li>
+  <li class="marker-decimal"><div>x</div></li>
+  <li class="marker-string"><div>x</div></li>
+  <li class="marker-content"><div>x</div></li>
+</ol>
+<ol class="line-height inherit">
+  <li class="marker-disc"><div>x</div></li>
+  <li class="marker-decimal"><div>x</div></li>
+  <li class="marker-string"><div>x</div></li>
+  <li class="marker-content"><div>x</div></li>
+</ol>
diff --git a/css/css-pseudo/parsing/marker-supported-properties-in-animation.html b/css/css-pseudo/parsing/marker-supported-properties-in-animation.html
@@ -20,7 +20,7 @@
     property: "font",
     from: "oblique normal 100 ultra-condensed 5px / 20px serif",
     to: "italic small-caps 900 ultra-expanded 25px / 50px Ahem",
-    midPoint: ["italic small-caps 500 expanded 15px Ahem", "italic small-caps 500 expanded 15px/normal Ahem"],
+    midPoint: ["italic small-caps 500 expanded 15px / 35px Ahem", "italic small-caps 500 expanded 15px/35px Ahem"],
   },
   {
     property: "font-family",
@@ -113,6 +113,14 @@
     midPoint: "500",
   },
 
+  // `line-height` is not a font property but is a longhand of `font`, and is also supported.
+  {
+    property: "line-height",
+    from: "20px",
+    to: "50px",
+    midPoint: "35px",
+  },
+
   // ::marker supports `white-space`
   {
     property: "white-space",
@@ -292,15 +300,6 @@
     to: "decimal",
     midPoint: "disc",
   },
-
-  // ::marker does NOT support `line-height` because, despite being a
-  // longhand of `font`, it's not a font property.
-  {
-    property: "line-height",
-    from: "20px",
-    to: "50px",
-    midPoint: "normal",
-  },
 ];
 
 const target = document.getElementById("target");

diff --git a/css/css-pseudo/parsing/marker-supported-properties.html b/css/css-pseudo/parsing/marker-supported-properties.html
@@ -14,7 +14,7 @@
 <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"]);
+  ["italic small-caps 900 expanded 25px / 50px Ahem", "italic small-caps 900 expanded 25px/50px 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");
@@ -31,6 +31,9 @@
 test_pseudo_computed_value("::marker", "font-variant-position", "sub");
 test_pseudo_computed_value("::marker", "font-weight", "900");
 
+// `line-height` is not a font property but is a longhand of `font`, and is also supported.
+test_pseudo_computed_value("::marker", "line-height", "50px", "50px");
+
 // ::marker supports `white-space`
 test_pseudo_computed_value("::marker", "white-space", "nowrap");
 
@@ -92,8 +95,4 @@
 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>