Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-lists] Add list-style-type: <string> #19542

Merged
merged 1 commit into from Oct 10, 2019
Merged
Changes from all commits
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

[css-lists] Add list-style-type: <string>

This patch extends the syntax of the list-style-type property to accept
arbitrary string values in order to customize the marker contents.

I have followed the same approach as https://crrev.com/c/879135 did for
the display property. When a string is specified for list-style-type,
the patch sets it to a special EListStyleType::kString, and the string
is stored in an extra field. As a result of this split, list-style-type
doesn't use as much auto generated code now, e.g. EListStyleType is not
automatically generated.

Intent to Implement and Ship: list-style-type: <string>
https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/GojYpoeDbqc

Spec: https://drafts.csswg.org/css-lists/#valdef-list-style-type-string

Bug: 687946

TEST=third_party/blink/web_tests/external/wpt/css/css-lists/list-style-type-string-002.html
TEST=third_party/blink/web_tests/external/wpt/css/css-lists/list-style-type-string-003.html
TEST=third_party/blink/web_tests/external/wpt/css/css-lists/list-style-type-string-004.html
TEST=third_party/blink/web_tests/external/wpt/css/css-lists/list-style-type-string-005a.html
TEST=third_party/blink/web_tests/external/wpt/css/css-lists/list-style-type-string-005b.html
TEST=third_party/blink/web_tests/external/wpt/css/css-lists/list-style-type-string-006.html
TEST=third_party/blink/web_tests/external/wpt/css/css-lists/parsing/list-style-type-computed.html
TEST=third_party/blink/web_tests/external/wpt/css/css-lists/parsing/list-style-type-valid.html
TEST=third_party/blink/web_tests/external/wpt/css/vendor-imports/mozilla/mozilla-central-reftests/lists-3/list-style-type-string-001a.html
TEST=third_party/blink/web_tests/external/wpt/css/vendor-imports/mozilla/mozilla-central-reftests/lists-3/list-style-type-string-001b.html

This patch makes some ::marker tests in css-pseudo fail, but this is
expected because ::marker has not been implemented yet.

Change-Id: I5743b99bc1a8e66679235874623c82650860ea29
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1841472
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Reviewed-by: Morten Stenshorne <mstensho@chromium.org>
Reviewed-by: Koji Ishii <kojii@chromium.org>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#704563}
  • Loading branch information
Loirooriol authored and chromium-wpt-export-bot committed Oct 10, 2019
commit 3cadaf1de3eff90e6dc53a29d2e2091609dddc69
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Reference: String value of list-style-type with outside position</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@gmail.com">
<style>
.list { list-style: none }
.list > ::before {
content: "";
display: inline-block;
width: 0px;
direction: rtl;
white-space: pre;
}
.list > :nth-child(2)::before { content: "foo" }
.list > :nth-child(3)::before { content: "foobar"; }
.list > :nth-child(4)::before { content: "some very long text that is not going to fit and will overflow"; }
</style>
</head>
<body>
<ol class="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ol>
<ul class="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</body>
</html>
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>String value of list-style-type with outside position</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@gmail.com">
<link rel="help" href="https://drafts.csswg.org/css-lists-3/#valdef-list-style-type-string">
<link rel="match" href="list-style-type-string-002-ref.html">
<meta name="assert" content="This test checks that list-style-type can set the marker string when the marker is positioned outside.">
<style>
.list { list-style-type: "" }
.list > :nth-child(2) { list-style-type: "foo" }
.list > :nth-child(3) { list-style-type: "foobar"; }
.list > :nth-child(4) { list-style-type: "some very long text that is not going to fit and will overflow"; }
</style>
</head>
<body>
<ol class="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ol>
<ul class="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</body>
</html>
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Reference: String value of list-style-type with RTL direction</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@gmail.com">
<style>
.list {
list-style: none;
direction: rtl;
}
.list > ::before {
content: "";
display: inline-block;
width: 0px;
direction: ltr;
white-space: pre;
}
.list > :nth-child(2)::before { content: "foo" }
.list > :nth-child(3)::before { content: "foobar"; }
.list > :nth-child(4)::before { content: "some very long text that is not going to fit and will overflow"; }
</style>
</head>
<body>
<ol class="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ol>
<ul class="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</body>
</html>
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>String value of list-style-type with RTL direction</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@gmail.com">
<link rel="help" href="https://drafts.csswg.org/css-lists-3/#valdef-list-style-type-string">
<link rel="match" href="list-style-type-string-003-ref.html">
<meta name="assert" content="This test checks that list-style-type can set the marker string when the direction is RTL.">
<style>
.list {
list-style-type: "";
direction: rtl;
}
.list > :nth-child(2) { list-style-type: "foo" }
.list > :nth-child(3) { list-style-type: "foobar"; }
.list > :nth-child(4) { list-style-type: "some very long text that is not going to fit and will overflow"; }
</style>
</head>
<body>
<ol class="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ol>
<ul class="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</body>
</html>
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Test: String value of list-style-type changing dynamically</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@gmail.com">
<style>
.list { list-style-type: "bar" }
</style>
</head>
<body>
<ol class="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ol>
<ul class="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</body>
</html>
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en" class="reftest-wait">
<head>
<meta charset="UTF-8">
<title>CSS Test: String value of list-style-type changing dynamically</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@gmail.com">
<link rel="help" href="https://drafts.csswg.org/css-lists-3/#valdef-list-style-type-string">
<link rel="match" href="list-style-type-string-004-ref.html">
<meta name="assert" content="This test checks that the marker text is updated when list-style-type changes.">
<style>
.list { list-style-type: "foo" }
</style>
</head>
<body>
<ol class="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ol>
<ul class="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<script src="/common/reftest-wait.js"></script>
<script>
"use strict";
addEventListener("load", function() {
requestAnimationFrame(() => {
for (const list of document.querySelectorAll(".list")) {
list.style.listStyleType = '"bar"';
}
takeScreenshot();
});
}, {once: true});
</script>
</body>
</html>
@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Reference: String value of list-style-type with bidi text</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@gmail.com">
<style>
.list {
width: 50%;
box-sizing: border-box;
float: left;
padding-inline-start: 14ch;
margin: 0;
line-height: 1.6;
list-style: none;
}
.rtl { direction: rtl }
.list > ::before {
unicode-bidi: isolate;
display: inline-flex;
flex-direction: row-reverse;
width: 0px;
white-space: pre;
}
.list > :nth-child(1)::before { content: "\627 \644 " }
.list > :nth-child(2)::before { content: "\61 \627 \644 " }
.list > :nth-child(3)::before { content: "\627 \644 \62 " }
.list > :nth-child(4)::before { content: "\61 \627 \644 \62 " }
.list > :nth-child(5)::before { content: "\61 \62 \627 \644 " }
.list > :nth-child(6)::before { content: "\627 \644 \61 \62 " }
.list > :nth-child(7)::before { content: "\31 \627 \644 " }
.list > :nth-child(8)::before { content: "\627 \644 \32 " }
.list > :nth-child(9)::before { content: "\31 \627 \644 \32 " }
.list > :nth-child(10)::before { content: "\31 \32 \627 \644 " }
.list > :nth-child(11)::before { content: "\627 \644 \31 \32 " }
</style>
</head>
<body>
<ol class="list ltr">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
<li>item 11</li>
</ol>
<ul class="list rtl">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
<li>item 11</li>
</ul>
</body>
</html>
@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>String value of list-style-type with bidi text</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@gmail.com">
<link rel="help" href="https://drafts.csswg.org/css-lists-3/#valdef-list-style-type-string">
<link rel="match" href="list-style-type-string-005-ref.html">
<meta name="assert" content="This test checks that the bidi algorithm runs for markers.">
<style>
.list {
width: 50%;
box-sizing: border-box;
float: left;
padding-inline-start: 14ch;
margin: 0;
line-height: 1.6;
}
.rtl { direction: rtl }
.list > :nth-child(1) { list-style-type: "\627 \644 " }
.list > :nth-child(2) { list-style-type: "\61 \627 \644 " }
.list > :nth-child(3) { list-style-type: "\627 \644 \62 " }
.list > :nth-child(4) { list-style-type: "\61 \627 \644 \62 " }
.list > :nth-child(5) { list-style-type: "\61 \62 \627 \644 " }
.list > :nth-child(6) { list-style-type: "\627 \644 \61 \62 " }
.list > :nth-child(7) { list-style-type: "\31 \627 \644 " }
.list > :nth-child(8) { list-style-type: "\627 \644 \32 " }
.list > :nth-child(9) { list-style-type: "\31 \627 \644 \32 " }
.list > :nth-child(10) { list-style-type: "\31 \32 \627 \644 " }
.list > :nth-child(11) { list-style-type: "\627 \644 \31 \32 " }
</style>
</head>
<body>
<ol class="list ltr">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
<li>item 11</li>
</ol>
<ul class="list rtl">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
<li>item 11</li>
</ul>
</body>
</html>
@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>String value of list-style-type with bidi text in multicol</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@gmail.com">
<link rel="help" href="https://drafts.csswg.org/css-lists-3/#valdef-list-style-type-string">
<link rel="match" href="list-style-type-string-005-ref.html">
<meta name="assert" content="This test checks that the bidi algorithm runs for markers in multicol.">
<style>
body { column-count: 2 }
.list {
padding-inline-start: 14ch;
margin: 0;
line-height: 1.6;
}
.rtl { direction: rtl }
.list > :nth-child(1) { list-style-type: "\627 \644 " }
.list > :nth-child(2) { list-style-type: "\61 \627 \644 " }
.list > :nth-child(3) { list-style-type: "\627 \644 \62 " }
.list > :nth-child(4) { list-style-type: "\61 \627 \644 \62 " }
.list > :nth-child(5) { list-style-type: "\61 \62 \627 \644 " }
.list > :nth-child(6) { list-style-type: "\627 \644 \61 \62 " }
.list > :nth-child(7) { list-style-type: "\31 \627 \644 " }
.list > :nth-child(8) { list-style-type: "\627 \644 \32 " }
.list > :nth-child(9) { list-style-type: "\31 \627 \644 \32 " }
.list > :nth-child(10) { list-style-type: "\31 \32 \627 \644 " }
.list > :nth-child(11) { list-style-type: "\627 \644 \31 \32 " }
</style>
</head>
<body>
<ol class="list ltr">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
<li>item 11</li>
</ol>
<ul class="list rtl">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
<li>item 11</li>
</ul>
</body>
</html>
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.