Commit 41cb9e56 authored by Oriol Brufau's avatar Oriol Brufau Committed by Commit Bot

[css-pseudo] Support text 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 'hyphens', 'letter-spacing', 'line-break',
'overflow-wrap', 'tab-size', 'word-break', and 'word-spacing' in marker.

Note it was already possibly to set these properties in the list item
and the ::marker would inherit them. This patch just lets authors set
them directly on the ::marker.

I would have allowed 'text-justify' too but it's not enabled by default
and in LayoutNG it has no effect on inline boxes (bug 1124043), so it
didn't seem worth it.

Bug: 1031667

TEST=external/wpt/css/css-pseudo/marker-hyphens.html
TEST=external/wpt/css/css-pseudo/marker-letter-spacing.html
TEST=external/wpt/css/css-pseudo/marker-line-break.html
TEST=external/wpt/css/css-pseudo/marker-overflow-wrap.html
TEST=external/wpt/css/css-pseudo/marker-tab-size.html
TEST=external/wpt/css/css-pseudo/marker-word-break.html
TEST=external/wpt/css/css-pseudo/marker-word-spacing.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 tests fail in legacy because ::markers with 'content: normal' are
not implemented with actual text.

Change-Id: I2086854796fd355928591ee4c85f241337b33445
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2388384Reviewed-by: default avatarRune Lillesveen <futhark@chromium.org>
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Cr-Commit-Position: refs/heads/master@{#803839}
parent 2e04f23f
......@@ -2233,7 +2233,8 @@
keywords: ["none", "manual", "auto"],
default_value: "manual",
type_name: "Hyphens",
typedom_types: ["Keyword"]
typedom_types: ["Keyword"],
valid_for_marker: true,
},
{
name: "image-rendering",
......@@ -2324,6 +2325,7 @@
keywords: ["normal"],
typedom_types: ["Keyword", "Length"],
valid_for_first_letter: true,
valid_for_marker: true,
},
{
name: "lighting-color",
......@@ -2814,7 +2816,8 @@
field_template: "keyword",
keywords: ["normal", "break-word", "anywhere"],
default_value: "normal",
typedom_types: ["Keyword"]
typedom_types: ["Keyword"],
valid_for_marker: true,
},
{
name: "overflow-inline",
......@@ -3520,7 +3523,8 @@
type_name: "TabSize",
converter: "ConvertLengthOrTabSpaces",
computed_style_custom_functions: ["setter"],
typedom_types: ["Number", "Length"]
typedom_types: ["Number", "Length"],
valid_for_marker: true,
},
{
name: "text-align",
......@@ -4201,7 +4205,8 @@
inherited: true,
type_name: "LineBreak",
keywords: ["auto", "loose", "normal", "strict", "anywhere"],
typedom_types: ["Keyword"]
typedom_types: ["Keyword"],
valid_for_marker: true,
},
// An Apple extension.
{
......@@ -4574,7 +4579,8 @@
// Word Break Values. Matches WinIE and CSS3
keywords: ["normal", "break-all", "keep-all", "break-word"],
default_value: "normal",
typedom_types: ["Keyword"]
typedom_types: ["Keyword"],
valid_for_marker: true,
},
{
name: "word-spacing",
......@@ -4586,6 +4592,7 @@
typedom_types: ["normal"],
typedom_types: ["Keyword", "Length"],
valid_for_first_letter: true,
valid_for_marker: true,
},
{
name: "z-index",
......
......@@ -85,7 +85,11 @@ crbug.com/591099 external/wpt/css/css-position/static-position/vrl-rtl-rtl.html
### external/wpt/css/css-pseudo/
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-overflow-wrap.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 ]
crbug.com/1012289 external/wpt/css/css-pseudo/marker-unicode-bidi-normal.html [ Failure ]
......
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Reftest Reference</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<style>
li {
width: 0;
list-style-type: none;
}
</style>
<ol>
<li>foo&shy;bar</li>
<li>foo&shy;bar</li>
</ol>
<ol>
<li>foo&shy;bar</li>
<li>foo&shy;bar</li>
</ol>
<ol>
<li>foobar</li>
<li>foobar</li>
</ol>
<ol>
<li>foobar</li>
<li>foobar</li>
</ol>
<!DOCTYPE html>
<meta charset="utf-8">
<title>::marker supports 'hyphens'</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-3/#hyphenation">
<link rel="match" href="marker-hyphens-ref.html">
<meta name="assert" content="Checks that ::marker supports 'hyphens', both explicitly set or inherited from an ancestor">
<style>
li {
list-style-position: inside;
width: 0;
}
.hyphens-manual.explicit ::marker,
.hyphens-manual.inherit {
hyphens: manual;
}
.hyphens-none.explicit ::marker,
.hyphens-none.inherit {
hyphens: none;
}
.marker-string {
list-style-type: "foo\AD bar";
}
.marker-content::marker {
content: "foo\AD bar";
}
</style>
<ol class="hyphens-manual explicit">
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="hyphens-manual inherit">
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="hyphens-none explicit">
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="hyphens-none inherit">
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<!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>
div {
float: left;
font: 25px/1 Ahem;
}
.inside {
list-style-position: inside;
width: 250px;
}
.outside {
list-style-position: outside;
width: 100px;
margin-left: 150px;
}
ol {
padding: 0;
}
.marker-disc {
list-style-type: disc;
}
.marker-decimal {
list-style-type: "2 . \A0 ";
}
.marker-string {
list-style-type: "X p";
}
.marker-content::marker {
content: "X p p";
}
</style>
<div class="inside">
<ol>
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
<ol>
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
</div>
<div class="outside">
<ol>
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
<ol>
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
</div>
<!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>
div {
float: left;
font: 25px/1 Ahem;
}
.inside {
list-style-position: inside;
width: 250px;
}
.outside {
list-style-position: outside;
width: 100px;
margin-left: 150px;
}
ol {
padding: 0;
}
.marker-disc {
list-style-type: disc;
}
.marker-decimal {
list-style-type: "2 . \A0 ";
}
.marker-string {
list-style-type: "X p ";
}
.marker-content::marker {
content: "X p p ";
}
</style>
<div class="inside">
<ol>
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
<ol>
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
</div>
<div class="outside">
<ol>
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
<ol>
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>::marker supports 'letter-spacing'</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-3/#letter-spacing-property">
<!-- It's unclear whether letter-spacing should add trailing spacing (https://github.com/w3c/csswg-drafts/issues/1518).
The 1st reference assumes no trailing spacing, the 2nd one does. -->
<link rel="match" href="marker-letter-spacing-ref-001.html">
<link rel="match" href="marker-letter-spacing-ref-002.html">
<meta name="assert" content="Checks that ::marker supports 'letter-spacing', both explicitly set or inherited from an ancestor">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
div {
float: left;
font: 25px/1 Ahem;
}
.inside {
list-style-position: inside;
width: 250px;
}
.outside {
list-style-position: outside;
width: 100px;
margin-left: 150px;
}
ol {
padding: 0;
}
.letter-spacing.explicit ::marker,
.letter-spacing.inherit {
letter-spacing: 25px;
}
.marker-disc {
list-style-type: disc;
}
.marker-decimal {
list-style-type: decimal;
}
.marker-string {
list-style-type: "Xp";
}
.marker-content::marker {
content: "Xpp";
}
</style>
<div class="inside">
<ol class="letter-spacing explicit">
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
<ol class="letter-spacing inherit">
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
</div>
<div class="outside">
<ol class="letter-spacing explicit">
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
<ol class="letter-spacing inherit">
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
</div>
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Reftest Reference</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<style>
ul {
float: left;
width: 50px;
list-style-position: inside;
}
</style>
<ul>
<li><br>2.<br>ab<br>cd</li>
</ul>
<ul>
<li><br>2.<br>ab<br>cd</li>
</ul>
<ul>
<li><br>2<br>.<br>a<br>b<br>c<br>d</li>
</ul>
<ul>
<li><br>2<br>.<br>a<br>b<br>c<br>d</li>
</ul>
<!DOCTYPE html>
<meta charset="utf-8">
<title>::marker supports 'line-break'</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-3/#line-break-property">
<link rel="match" href="marker-line-break-ref.html">
<meta name="assert" content="Checks that ::marker supports 'line-break', both explicitly set or inherited from an ancestor">
<style>
ol {
float: left;
width: 50px;
}
li {
list-style-position: inside;
width: 0;
}
.line-break-strict.explicit ::marker,
.line-break-strict.inherit {
line-break: strict;
}
.line-break-anywhere.explicit ::marker,
.line-break-anywhere.inherit {
line-break: anywhere;
}
.marker-disc {
list-style-type: disc;
}
.marker-decimal {
list-style-type: decimal;
}
.marker-string {
list-style-type: "ab";
}
.marker-content::marker {
content: "cd";
}
</style>
<ol class="line-break-strict 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-break-strict 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-break-anywhere 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-break-anywhere inherit">
<li class="marker-disc"></li>
<li class="marker-decimal"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<!DOCTYPE html>
<meta charset="utf-8">
<title>::marker supports 'overflow-wrap'</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-3/#overflow-wrap-property">
<link rel="match" href="marker-line-break-ref.html">
<meta name="assert" content="Checks that ::marker supports 'overflow-wrap', both explicitly set or inherited from an ancestor">
<style>
ol {
float: left;
width: 50px;
}
li {
list-style-position: inside;
width: 0;
}
.overflow-wrap-normal.explicit ::marker,
.overflow-wrap-normal.inherit {
overflow-wrap: strict;
}
.overflow-wrap-anywhere.explicit ::marker,
.overflow-wrap-anywhere.inherit {
overflow-wrap: anywhere;
}
.marker-disc {
list-style-type: disc;
}
.marker-decimal {
list-style-type: decimal;
}
.marker-string {
list-style-type: "ab";
}
.marker-content::marker {
content: "cd";
}
</style>
<ol class="overflow-wrap-normal explicit">
<li class="marker-disc"></li>
<li class="marker-decimal"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="overflow-wrap-normal inherit">
<li class="marker-disc"></li>
<li class="marker-decimal"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="overflow-wrap-anywhere explicit">
<li class="marker-disc"></li>
<li class="marker-decimal"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="overflow-wrap-anywhere inherit">
<li class="marker-disc"></li>
<li class="marker-decimal"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<!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>
div {
float: left;
font: 25px/1 Ahem;
}
.inside {
list-style-position: inside;
width: 250px;
}
.outside {
list-style-position: outside;
width: 100px;
margin-left: 150px;
}
ol {
padding: 0;
}
.marker-string {
list-style-type: "X p";
}
.marker-content::marker {
content: "X p p";
}
</style>
<div class="inside">
<ol>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
<ol>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
</div>
<div class="outside">
<ol>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
<ol>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>::marker supports 'tab-size'</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-3/#propdef-tab-size">
<link rel="match" href="marker-tab-size-ref.html">
<meta name="assert" content="Checks that ::marker supports 'tab-size', both explicitly set or inherited from an ancestor">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
div {
float: left;
font: 25px/1 Ahem;
}
.inside {
list-style-position: inside;
width: 250px;
}
.outside {
list-style-position: outside;
width: 100px;
margin-left: 150px;
}
ol {
padding: 0;
}
.tab-size.explicit ::marker,
.tab-size.inherit {
tab-size: 1;
}
.marker-string {
list-style-type: "X\9p";
}
.marker-content::marker {
content: "X\9p\9p";
}
</style>
<div class="inside">
<ol class="tab-size explicit">
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
<ol class="tab-size inherit">
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
</div>
<div class="outside">
<ol class="tab-size explicit">
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
<ol class="tab-size inherit">
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
</div>
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Reftest Reference</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<style>
ul {
float: left;
width: 50px;
list-style-position: inside;
}
</style>
<ul>
<li><br>2.<br>ab<br>cd</li>
</ul>
<ul>
<li><br>2.<br>ab<br>cd</li>
</ul>
<ul>
<li><br>2.<br>a<br>b<br>c<br>d</li>
</ul>
<ul>
<li><br>2.<br>a<br>b<br>c<br>d</li>
</ul>
<!DOCTYPE html>
<meta charset="utf-8">
<title>::marker supports 'word-break'</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-3/#word-break-property">
<link rel="match" href="marker-word-break-ref.html">
<meta name="assert" content="Checks that ::marker supports 'word-break', both explicitly set or inherited from an ancestor">
<style>
ol {
float: left;
width: 50px;
}
li {
list-style-position: inside;
width: 0;
}
.word-break-keep-all.explicit ::marker,
.word-break-keep-all.inherit {
word-break: keep-all;
}
.word-break-break-all.explicit ::marker,
.word-break-break-all.inherit {
word-break: break-all;
}
.marker-disc {
list-style-type: disc;
}
.marker-decimal {
list-style-type: decimal;
}
.marker-string {
list-style-type: "ab";
}
.marker-content::marker {
content: "cd";
}
</style>
<ol class="word-break-keep-all explicit">
<li class="marker-disc"></li>
<li class="marker-decimal"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="word-break-keep-all inherit">
<li class="marker-disc"></li>
<li class="marker-decimal"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="word-break-break-all explicit">
<li class="marker-disc"></li>
<li class="marker-decimal"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="word-break-break-all inherit">
<li class="marker-disc"></li>
<li class="marker-decimal"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<!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>
div {
float: left;
font: 25px/1 Ahem;
}
.inside {
list-style-position: inside;
width: 250px;
}
.outside {
list-style-position: outside;
width: 100px;
margin-left: 150px;
}
ol {
padding: 0;
}
.marker-disc {
list-style-type: disc;
}
.marker-decimal {
list-style-type: "2.\A0 \A0 ";
}
.marker-string {
list-style-type: "X\A0 \A0 p";
}
.marker-content::marker {
content: "Xp\A0 \A0 p";
}
</style>
<div class="inside">
<ol>
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
<ol>
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
</div>
<div class="outside">
<ol>
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
<ol>
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>::marker supports 'word-spacing'</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-3/#word-spacing-property">
<link rel="match" href="marker-word-spacing-ref.html">
<meta name="assert" content="Checks that ::marker supports 'word-spacing', both explicitly set or inherited from an ancestor">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
div {
float: left;
font: 25px/1 Ahem;
}
.inside {
list-style-position: inside;
width: 250px;
}
.outside {
list-style-position: outside;
width: 100px;
margin-left: 150px;
}
ol {
padding: 0;
}
.word-spacing.explicit ::marker,
.word-spacing.inherit {
word-spacing: 25px;
}
.marker-disc {
list-style-type: disc;
}
.marker-decimal {
list-style-type: decimal;
}
.marker-string {
list-style-type: "X p";
}
.marker-content::marker {
content: "Xp p";
}
</style>
<div class="inside">
<ol class="word-spacing explicit">
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
<ol class="word-spacing inherit">
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
</div>
<div class="outside">
<ol class="word-spacing explicit">
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
<ol class="word-spacing inherit">
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
</div>
This is a testharness.js-based test.
Found 52 tests; 49 PASS, 3 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
......@@ -35,7 +36,14 @@ PASS Property transition-delay value '1s' in ::marker
PASS Property transition-duration value '2s' in ::marker
PASS Property transition-property value 'display' in ::marker
PASS Property transition-timing-function value 'linear' in ::marker
PASS Property hyphens value 'none' in ::marker
PASS Property letter-spacing value '10px' in ::marker
PASS Property line-break value 'anywhere' in ::marker
PASS Property overflow-wrap value 'anywhere' in ::marker
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 display value 'none' in ::marker
PASS Property position value 'absolute' in ::marker
PASS Property float value 'right' in ::marker
......
This is a testharness.js-based test.
Found 62 tests; 56 PASS, 6 FAIL, 0 TIMEOUT, 0 NOTRUN.
Found 76 tests; 68 PASS, 8 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
......@@ -22,7 +22,14 @@ PASS Animation of text-combine-upright in ::marker
PASS Animation of unicode-bidi in ::marker
PASS Animation of direction in ::marker
PASS Animation of content in ::marker
PASS Animation of hyphens in ::marker
PASS Animation of letter-spacing in ::marker
PASS Animation of line-break in ::marker
PASS Animation of overflow-wrap in ::marker
FAIL Animation of tab-size in ::marker assert_equals: expected "10px" but got "20px"
PASS Animation of text-transform in ::marker
PASS Animation of word-break in ::marker
PASS Animation of word-spacing in ::marker
PASS Animation of display in ::marker
PASS Animation of position in ::marker
PASS Animation of float in ::marker
......@@ -53,7 +60,14 @@ PASS Transition of text-combine-upright in ::marker
PASS Transition of unicode-bidi in ::marker
PASS Transition of direction in ::marker
PASS Transition of content in ::marker
PASS Transition of hyphens in ::marker
PASS Transition of letter-spacing in ::marker
PASS Transition of line-break in ::marker
PASS Transition of overflow-wrap in ::marker
FAIL Transition of tab-size in ::marker assert_equals: expected "10px" but got "20px"
PASS Transition of text-transform in ::marker
PASS Transition of word-break in ::marker
PASS Transition of word-spacing in ::marker
PASS Transition of display in ::marker
PASS Transition of position in ::marker
PASS Transition of float in ::marker
......
......@@ -158,13 +158,55 @@ const interpolationTests = [
midPoint: "\"bar\"",
},
// ::marker supports `text-transform`
// ::marker supports text properties.
{
property: "hyphens",
from: "manual",
to: "none",
midPoint: "none",
},
{
property: "letter-spacing",
from: "0px",
to: "20px",
midPoint: "10px",
},
{
property: "line-break",
from: "strict",
to: "anywhere",
midPoint: "anywhere",
},
{
property: "overflow-wrap",
from: "break-word",
to: "anywhere",
midPoint: "anywhere",
},
{
property: "tab-size",
from: "0px",
to: "20px",
midPoint: "10px",
},
{
property: "text-transform",
from: "lowercase",
to: "uppercase",
midPoint: "uppercase",
},
{
property: "word-break",
from: "break-all",
to: "break-word",
midPoint: "break-word",
},
{
property: "word-spacing",
from: "0px",
to: "20px",
midPoint: "10px",
},
// ::marker does NOT support layout properties
{
......
......@@ -63,8 +63,15 @@ test_pseudo_computed_value("::marker", "transition-duration", "2s");
test_pseudo_computed_value("::marker", "transition-property", "display");
test_pseudo_computed_value("::marker", "transition-timing-function", "linear");
// ::marker supports `text-transform`
// ::marker supports text properties.
test_pseudo_computed_value("::marker", "hyphens", "none");
test_pseudo_computed_value("::marker", "letter-spacing", "10px");
test_pseudo_computed_value("::marker", "line-break", "anywhere");
test_pseudo_computed_value("::marker", "overflow-wrap", "anywhere");
test_pseudo_computed_value("::marker", "tab-size", "10px");
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 does NOT support layout properties
test_pseudo_computed_value("::marker", "display", "none", ["block", "inline", "inline-block"]);
......
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