зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1668270 [wpt PR 25886] - [css-pseudo] Support 'line-height' property in ::marker, a=testonly
Automatic update from web-platform-tests [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: Rune Lillesveen <futhark@chromium.org> Reviewed-by: Koji Ishii <kojii@chromium.org> Cr-Commit-Position: refs/heads/master@{#821293} -- wpt-commits: 91da84149d57c560e3435866fd198d1910c22e3f wpt-pr: 25886
This commit is contained in:
Oriol Brufau
moz-wptsync-bot
Родитель
f8cd02d61c
Коммит
287bfe9c49
|
|
@ -0,0 +1,42 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!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>
|
||||
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче