Skip to content

GitLab

T
tangled
Commit cd65c12e authored by Oriol Brufau's avatar Oriol Brufau Committed by Commit Bot
Browse files
Options

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

The CSSWG resolved in https://github.com/w3c/csswg-drafts/issues/4568
that inherited properties that apply to text can be set on ::marker and
should affect the marker text.
And in https://github.com/w3c/csswg-drafts/issues/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
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2438413
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Reviewed-by: default avatarRune Lillesveen <futhark@chromium.org>
Reviewed-by: default avatarKoji Ishii <kojii@chromium.org>
Cr-Commit-Position: refs/heads/master@{#821293}
parent abd81b43
Hide whitespace changes
Inline Side-by-side
Showing with 125 additions and 18 deletions
third_party/blink/renderer/core/css/css_properties.json5
View file @ cd65c12e
......@@ -2388,6 +2388,7 @@
typedom_types: ["Keyword", "Length", "Number", "Percentage"],
valid_for_first_letter: true,
valid_for_cue: true,
valid_for_marker: true,
},
{
name: "line-height-step",
......
third_party/blink/web_tests/FlagExpectations/disable-layout-ng
View file @ cd65c12e
......@@ -96,6 +96,7 @@ crbug.com/1101040 external/wpt/css/css-pseudo/marker-content-016.html [ Failure
crbug.com/1101034 external/wpt/css/css-pseudo/marker-content-018.html [ Failure ]
crbug.com/1108830 external/wpt/css/css-pseudo/marker-hyphens.html [ Failure ]
crbug.com/1108830 external/wpt/css/css-pseudo/marker-line-break.html [ Failure ]
crbug.com/1108830 external/wpt/css/css-pseudo/marker-line-height.html [ Failure ]
crbug.com/1108830 external/wpt/css/css-pseudo/marker-overflow-wrap.html [ Failure ]
crbug.com/1108830 external/wpt/css/css-pseudo/marker-text-decoration-skip-ink.html [ Failure ]
crbug.com/1108830 external/wpt/css/css-pseudo/marker-text-emphasis.html [ Failure ]
......
third_party/blink/web_tests/external/wpt/css/css-pseudo/marker-line-height-ref.html 0 → 100644
View file @ cd65c12e
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Reftest Reference</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<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>
third_party/blink/web_tests/external/wpt/css/css-pseudo/marker-line-height.html 0 → 100644
View file @ cd65c12e
<!DOCTYPE html>
<meta charset="utf-8">
<title>::marker supports 'line-height'</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<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>
third_party/blink/web_tests/external/wpt/css/css-pseudo/parsing/marker-supported-properties-expected.txt
View file @ cd65c12e
......@@ -16,6 +16,7 @@ PASS Property font-variant-ligatures value 'historical-ligatures' in ::marker
PASS Property font-variant-numeric value 'slashed-zero' in ::marker
FAIL Property font-variant-position value 'sub' in ::marker assert_true: font-variant-position doesn't seem to be supported in the computed style expected true got false
PASS Property font-weight value '900' in ::marker
PASS Property line-height value '50px' in ::marker
FAIL Property white-space value 'nowrap' in ::marker assert_equals: expected "nowrap" but got "pre"
PASS Property color value 'rgb(0, 100, 200)' in ::marker
PASS Property text-combine-upright value 'all' in ::marker
......@@ -57,6 +58,5 @@ PASS Property list-style value 'inside url('foo') decimal' in ::marker
PASS Property list-style-image value 'url('foo')' in ::marker
PASS Property list-style-position value 'inside' in ::marker
PASS Property list-style-type value 'decimal' in ::marker
PASS Property line-height value '50px' in ::marker
Harness: the test ran to completion.
third_party/blink/web_tests/external/wpt/css/css-pseudo/parsing/marker-supported-properties-in-animation-expected.txt
View file @ cd65c12e
......@@ -16,6 +16,7 @@ PASS Animation of font-variant-ligatures in ::marker
PASS Animation of font-variant-numeric in ::marker
FAIL Animation of font-variant-position in ::marker assert_true: font-variant-position doesn't seem to be supported in the computed style expected true got false
PASS Animation of font-weight in ::marker
PASS Animation of line-height in ::marker
FAIL Animation of white-space in ::marker assert_equals: expected "nowrap" but got "pre"
PASS Animation of color in ::marker
PASS Animation of text-combine-upright in ::marker
......@@ -43,7 +44,6 @@ PASS Animation of list-style in ::marker
PASS Animation of list-style-image in ::marker
PASS Animation of list-style-position in ::marker
PASS Animation of list-style-type in ::marker
PASS Animation of line-height in ::marker
PASS Transition of font in ::marker
PASS Transition of font-family in ::marker
PASS Transition of font-feature-settings in ::marker
......@@ -60,6 +60,7 @@ PASS Transition of font-variant-ligatures in ::marker
PASS Transition of font-variant-numeric in ::marker
FAIL Transition of font-variant-position in ::marker assert_true: font-variant-position doesn't seem to be supported in the computed style expected true got false
PASS Transition of font-weight in ::marker
PASS Transition of line-height in ::marker
FAIL Transition of white-space in ::marker assert_equals: expected "nowrap" but got "pre"
PASS Transition of color in ::marker
PASS Transition of text-combine-upright in ::marker
......@@ -87,6 +88,5 @@ PASS Transition of list-style in ::marker
PASS Transition of list-style-image in ::marker
PASS Transition of list-style-position in ::marker
PASS Transition of list-style-type in ::marker
PASS Transition of line-height in ::marker
Harness: the test ran to completion.
third_party/blink/web_tests/external/wpt/css/css-pseudo/parsing/marker-supported-properties-in-animation.html
View file @ cd65c12e
......@@ -20,7 +20,7 @@ const interpolationTests = [
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 @@ const interpolationTests = [
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 @@ const interpolationTests = [
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");
......
third_party/blink/web_tests/external/wpt/css/css-pseudo/parsing/marker-supported-properties.html
View file @ cd65c12e
......@@ -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-numeric", "slashed-zero");
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", "inside url('foo') decimal"
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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment