Skip to content

GitLab

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

[css-pseudo] Support inherited text decoration properties 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.

Therefore, this patch allows text-decoration-skip-ink, text-emphasis,
-webkit-text-emphasis-color, -webkit-text-emphasis-position,
-webkit-text-emphasis-style, and text-shadow in ::marker.

text-underline-position is not allowed despite being inherited because
it doesn't affect underlines specified by ancestor elements. And since
text-decoration-line is not allowed, it would be pointless.

Bug: 1031667

TEST=external/wpt/css/css-pseudo/marker-text-decoration-skip-ink.html
TEST=external/wpt/css/css-pseudo/marker-text-emphasis.html
TEST=external/wpt/css/css-pseudo/marker-text-shadow.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

Some parsing tests fail because unprefixed text-emphasis hasn't been
implemented. And some reftests fail in legacy because ::markers with
'content: normal' are not implemented using actual text.

Change-Id: I3bd7287f0e8164a7fac0ed84dd4ec0af57a34f2e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2396125
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Reviewed-by: default avatarRune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#805343}
parent 5fdf69a0
Hide whitespace changes
Inline Side-by-side
Showing with 330 additions and 3 deletions
third_party/blink/renderer/core/css/css_properties.json5
View file @ 896f37a4
......@@ -3618,6 +3618,7 @@
default_value: "auto",
valid_for_first_letter: true,
valid_for_cue: true,
valid_for_marker: true,
computed_value_comparable: true,
},
{
......@@ -3700,6 +3701,7 @@
affected_by_forced_colors: true,
valid_for_first_letter: true,
valid_for_cue: true,
valid_for_marker: true,
},
{
name: "text-size-adjust",
......@@ -4416,6 +4418,7 @@
converter: "ConvertStyleColor",
style_builder_template: "color",
affected_by_forced_colors: true,
valid_for_marker: true,
},
{
name: "-webkit-text-emphasis-position",
......@@ -4427,12 +4430,14 @@
default_value: "TextEmphasisPosition::kOverRight",
type_name: "TextEmphasisPosition",
converter: "ConvertTextTextEmphasisPosition",
valid_for_marker: true,
},
{
name: "-webkit-text-emphasis-style",
property_methods: ["ParseSingleValue", "CSSValueFromComputedStyleInternal"],
inherited: true,
style_builder_custom_functions: ["initial", "inherit", "value"],
valid_for_marker: true,
},
{
name: "-webkit-text-fill-color",
......
third_party/blink/web_tests/FlagExpectations/disable-layout-ng
View file @ 896f37a4
......@@ -88,6 +88,9 @@ 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-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 ]
crbug.com/1108830 external/wpt/css/css-pseudo/marker-text-shadow.html [ Failure ]
crbug.com/1108830 external/wpt/css/css-pseudo/marker-text-transform-uppercase.html [ Failure ]
crbug.com/1108830 external/wpt/css/css-pseudo/marker-word-break.html [ Failure ]
crbug.com/1012289 external/wpt/css/css-pseudo/marker-unicode-bidi-default.html [ Failure ]
......
third_party/blink/web_tests/external/wpt/css/css-pseudo/marker-text-decoration-skip-ink-ref.html 0 → 100644
View file @ 896f37a4
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Reftest Reference</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
ol {
float: left;
width: 50px;
list-style: none;
text-decoration: underline;
}
.text-decoration-skip-ink-auto {
text-decoration-skip-ink: auto;
}
.text-decoration-skip-ink-none {
text-decoration-skip-ink: none;
}
</style>
<ol class="text-decoration-skip-ink-auto">
<li>g. </li>
<li>p. </li>
<li>q. </li>
</ol>
<ol class="text-decoration-skip-ink-auto">
<li>g. </li>
<li>p. </li>
<li>q. </li>
</ol>
<ol class="text-decoration-skip-ink-none">
<li>g. </li>
<li>p. </li>
<li>q. </li>
</ol>
<ol class="text-decoration-skip-ink-none">
<li>g. </li>
<li>p. </li>
<li>q. </li>
</ol>
third_party/blink/web_tests/external/wpt/css/css-pseudo/marker-text-decoration-skip-ink.html 0 → 100644
View file @ 896f37a4
<!DOCTYPE html>
<meta charset="utf-8">
<title>::marker supports 'text-decoration-skip-ink'</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-text-decor-4/#text-decoration-skip-ink-property">
<link rel="match" href="marker-text-decoration-skip-ink-ref.html">
<meta name="assert" content="Checks that ::marker supports 'text-decoration-skip-ink', both explicitly set or inherited from an ancestor">
<style>
ol {
float: left;
width: 50px;
list-style-position: inside;
text-decoration: underline;
}
.text-decoration-skip-ink-auto.explicit ::marker,
.text-decoration-skip-ink-auto.inherit {
text-decoration-skip-ink: auto;
}
.text-decoration-skip-ink-none.explicit ::marker,
.text-decoration-skip-ink-none.inherit {
text-decoration-skip-ink: none;
}
.marker-alpha {
list-style-type: lower-alpha;
}
.marker-string {
list-style-type: "p. ";
}
.marker-content::marker {
content: "q. ";
}
</style>
<ol class="text-decoration-skip-ink-auto explicit">
<li class="marker-alpha" value="7"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="text-decoration-skip-ink-auto inherit">
<li class="marker-alpha" value="7"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="text-decoration-skip-ink-none explicit">
<li class="marker-alpha" value="7"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="text-decoration-skip-ink-none inherit">
<li class="marker-alpha" value="7"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
third_party/blink/web_tests/external/wpt/css/css-pseudo/marker-text-emphasis-ref.html 0 → 100644
View file @ 896f37a4
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Reftest Reference</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
ol {
float: left;
width: 50px;
list-style: none;
}
.text-emphasis-shorthand {
-webkit-text-emphasis: circle green;
text-emphasis: circle green;
}
.text-emphasis-longhands {
-webkit-text-emphasis-style: circle;
-webkit-text-emphasis-color: green;
-webkit-text-emphasis-position: under right;
text-emphasis-style: circle;
text-emphasis-color: green;
text-emphasis-position: under right;
}
</style>
<ol class="text-emphasis-shorthand">
<li>1. </li>
<li>2. </li>
<li>3. </li>
</ol>
<ol class="text-emphasis-shorthand">
<li>1. </li>
<li>2. </li>
<li>3. </li>
</ol>
<ol class="text-emphasis-longhands">
<li>1. </li>
<li>2. </li>
<li>3. </li>
</ol>
<ol class="text-emphasis-longhands">
<li>1. </li>
<li>2. </li>
<li>3. </li>
</ol>
third_party/blink/web_tests/external/wpt/css/css-pseudo/marker-text-emphasis.html 0 → 100644
View file @ 896f37a4
<!DOCTYPE html>
<meta charset="utf-8">
<title>::marker supports 'text-emphasis'</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-text-decor-4/#emphasis-marks">
<link rel="match" href="marker-text-emphasis-ref.html">
<meta name="assert" content="Checks that ::marker supports 'text-emphasis', both explicitly set or inherited from an ancestor">
<style>
ol {
float: left;
width: 50px;
list-style-position: inside;
}
.text-emphasis-shorthand.explicit ::marker,
.text-emphasis-shorthand.inherit {
-webkit-text-emphasis: circle green;
text-emphasis: circle green;
}
.text-emphasis-longhands.explicit ::marker,
.text-emphasis-longhands.inherit {
-webkit-text-emphasis-style: circle;
-webkit-text-emphasis-color: green;
-webkit-text-emphasis-position: under right;
text-emphasis-style: circle;
text-emphasis-color: green;
text-emphasis-position: under right;
}
.marker-decimal {
list-style-type: decimal;
}
.marker-string {
list-style-type: "2. ";
}
.marker-content::marker {
content: "3. ";
}
</style>
<ol class="text-emphasis-shorthand explicit">
<li class="marker-decimal"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="text-emphasis-shorthand inherit">
<li class="marker-decimal"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="text-emphasis-longhands explicit">
<li class="marker-decimal"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="text-emphasis-longhands inherit">
<li class="marker-decimal"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
third_party/blink/web_tests/external/wpt/css/css-pseudo/marker-text-shadow-ref.html 0 → 100644
View file @ 896f37a4
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Reftest Reference</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
ol {
float: left;
width: 50px;
list-style: none;
text-shadow: #0f0 1px 2px 3px;
}
</style>
<ol>
<li>1. </li>
<li>2. </li>
<li>3. </li>
</ol>
<ol>
<li>1. </li>
<li>2. </li>
<li>3. </li>
</ol>
third_party/blink/web_tests/external/wpt/css/css-pseudo/marker-text-shadow.html 0 → 100644
View file @ 896f37a4
<!DOCTYPE html>
<meta charset="utf-8">
<title>::marker supports 'text-shadow'</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-text-decor-4/#text-shadow-property">
<link rel="match" href="marker-text-shadow-ref.html">
<meta name="assert" content="Checks that ::marker supports 'text-shadow', both explicitly set or inherited from an ancestor">
<style>
ol {
float: left;
width: 50px;
list-style-position: inside;
}
.text-shadow.explicit ::marker,
.text-shadow.inherit {
text-shadow: #0f0 1px 2px 3px;
}
.marker-decimal {
list-style-type: decimal;
}
.marker-string {
list-style-type: "2. ";
}
.marker-content::marker {
content: "3. ";
}
</style>
<ol class="text-shadow explicit">
<li class="marker-decimal"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="text-shadow inherit">
<li class="marker-decimal"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
third_party/blink/web_tests/external/wpt/css/css-pseudo/parsing/marker-supported-properties-expected.txt
View file @ 896f37a4
This is a testharness.js-based test.
Found 52 tests; 49 PASS, 3 FAIL, 0 TIMEOUT, 0 NOTRUN.
Found 58 tests; 51 PASS, 7 FAIL, 0 TIMEOUT, 0 NOTRUN.
PASS Property font value 'italic small-caps 900 expanded 25px / 50px Ahem' in ::marker
PASS Property font-family value 'Ahem' in ::marker
PASS Property font-feature-settings value '"smcp"' in ::marker
......@@ -44,6 +44,12 @@ PASS Property tab-size value '10px' in ::marker
PASS Property text-transform value 'uppercase' in ::marker
PASS Property word-break value 'break-word' in ::marker
PASS Property word-spacing value '10px' in ::marker
PASS Property text-decoration-skip-ink value 'none' in ::marker
FAIL Property text-emphasis value 'dot rgb(0, 255, 0)' in ::marker assert_true: text-emphasis doesn't seem to be supported in the computed style expected true got false
FAIL Property text-emphasis-color value 'rgb(0, 255, 0)' in ::marker assert_true: text-emphasis-color doesn't seem to be supported in the computed style expected true got false
FAIL Property text-emphasis-position value 'under left' in ::marker assert_true: text-emphasis-position doesn't seem to be supported in the computed style expected true got false
FAIL Property text-emphasis-style value 'dot' in ::marker assert_true: text-emphasis-style doesn't seem to be supported in the computed style expected true got false
PASS Property text-shadow value 'rgb(0, 255, 0) 1px 2px 3px' in ::marker
PASS Property display value 'none' in ::marker
PASS Property position value 'absolute' in ::marker
PASS Property float value 'right' in ::marker
......
third_party/blink/web_tests/external/wpt/css/css-pseudo/parsing/marker-supported-properties-in-animation-expected.txt
View file @ 896f37a4
This is a testharness.js-based test.
Found 76 tests; 70 PASS, 6 FAIL, 0 TIMEOUT, 0 NOTRUN.
Found 88 tests; 74 PASS, 14 FAIL, 0 TIMEOUT, 0 NOTRUN.
PASS Animation of font in ::marker
PASS Animation of font-family in ::marker
PASS Animation of font-feature-settings in ::marker
......@@ -30,6 +30,12 @@ PASS Animation of tab-size in ::marker
PASS Animation of text-transform in ::marker
PASS Animation of word-break in ::marker
PASS Animation of word-spacing in ::marker
PASS Animation of text-decoration-skip-ink in ::marker
FAIL Animation of text-emphasis in ::marker assert_true: text-emphasis doesn't seem to be supported in the computed style expected true got false
FAIL Animation of text-emphasis-color in ::marker assert_true: text-emphasis-color doesn't seem to be supported in the computed style expected true got false
FAIL Animation of text-emphasis-position in ::marker assert_true: text-emphasis-position doesn't seem to be supported in the computed style expected true got false
FAIL Animation of text-emphasis-style in ::marker assert_true: text-emphasis-style doesn't seem to be supported in the computed style expected true got false
PASS Animation of text-shadow in ::marker
PASS Animation of display in ::marker
PASS Animation of position in ::marker
PASS Animation of float in ::marker
......@@ -68,6 +74,12 @@ PASS Transition of tab-size in ::marker
PASS Transition of text-transform in ::marker
PASS Transition of word-break in ::marker
PASS Transition of word-spacing in ::marker
PASS Transition of text-decoration-skip-ink in ::marker
FAIL Transition of text-emphasis in ::marker assert_true: text-emphasis doesn't seem to be supported in the computed style expected true got false
FAIL Transition of text-emphasis-color in ::marker assert_true: text-emphasis-color doesn't seem to be supported in the computed style expected true got false
FAIL Transition of text-emphasis-position in ::marker assert_true: text-emphasis-position doesn't seem to be supported in the computed style expected true got false
FAIL Transition of text-emphasis-style in ::marker assert_true: text-emphasis-style doesn't seem to be supported in the computed style expected true got false
PASS Transition of text-shadow in ::marker
PASS Transition of display in ::marker
PASS Transition of position in ::marker
PASS Transition of float in ::marker
......
third_party/blink/web_tests/external/wpt/css/css-pseudo/parsing/marker-supported-properties-in-animation.html
View file @ 896f37a4
......@@ -158,7 +158,7 @@ const interpolationTests = [
midPoint: "\"bar\"",
},
// ::marker supports text properties.
// ::marker supports text properties.
{
property: "hyphens",
from: "manual",
......@@ -208,6 +208,44 @@ const interpolationTests = [
midPoint: "10px",
},
// ::marker supports inherited text decoration properties.
{
property: "text-decoration-skip-ink",
from: "auto",
to: "none",
midPoint: "none",
},
{
property: "text-emphasis",
from: "dot rgb(0, 200, 0)",
to: "triangle rgb(100, 0, 200)",
midPoint: "triangle rgb(50, 100, 100)",
},
{
property: "text-emphasis-color",
from: "rgb(0, 200, 0)",
to: "rgb(100, 0, 200)",
midPoint: "rgb(50, 100, 100)",
},
{
property: "text-emphasis-position",
from: "over right",
to: "under left",
midPoint: "under left",
},
{
property: "text-emphasis-style",
from: "dot",
to: "triangle",
midPoint: "triangle",
},
{
property: "text-shadow",
from: "rgb(0, 200, 0) 1px 2px 3px",
to: "rgb(100, 0, 200) 3px 2px 1px",
midPoint: "rgb(50, 100, 100) 2px 2px 2px",
},
// ::marker does NOT support layout properties
{
property: "display",
......
third_party/blink/web_tests/external/wpt/css/css-pseudo/parsing/marker-supported-properties.html
View file @ 896f37a4
......@@ -73,6 +73,14 @@ test_pseudo_computed_value("::marker", "text-transform", "uppercase");
test_pseudo_computed_value("::marker", "word-break", "break-word");
test_pseudo_computed_value("::marker", "word-spacing", "10px");
// ::marker supports inherited text decoration properties.
test_pseudo_computed_value("::marker", "text-decoration-skip-ink", "none");
test_pseudo_computed_value("::marker", "text-emphasis", "dot rgb(0, 255, 0)");
test_pseudo_computed_value("::marker", "text-emphasis-color", "rgb(0, 255, 0)");
test_pseudo_computed_value("::marker", "text-emphasis-position", "under left");
test_pseudo_computed_value("::marker", "text-emphasis-style", "dot");
test_pseudo_computed_value("::marker", "text-shadow", "rgb(0, 255, 0) 1px 2px 3px");
// ::marker does NOT support layout properties
test_pseudo_computed_value("::marker", "display", "none", ["block", "inline", "inline-block"]);
test_pseudo_computed_value("::marker", "position", "absolute", "static");
......
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