[counter-style] Add a test for styling list markers via shadow DOM part

Note: this test case is the same as example FOUR in w3c/csswg-drafts#1995 (comment) Bug: 1225033 Change-Id: Ic02c6c0e9c623c4eb12ac4bc152716f63f6ebd52 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3025847 Reviewed-by: Ian Kilpatrick <[email protected]> Commit-Queue: Xiaocheng Hu <[email protected]> Cr-Commit-Position: refs/heads/master@{#901552}
Alan-love · Jul 14, 2021 · a5cb2f8 · a5cb2f8
1 parent 5a5584f
commit a5cb2f8
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 0 deletions.
diff --git a/...ink/web_tests/external/wpt/css/css-counter-styles/counter-styles-shadow-dom-part-ref.html b/...ink/web_tests/external/wpt/css/css-counter-styles/counter-styles-shadow-dom-part-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+
+<ol>
+  <div>A.</div>
+  <div>B.</div>
+  <div>C.</div>
+</ol>
+
diff --git a/...y/blink/web_tests/external/wpt/css/css-counter-styles/counter-styles-shadow-dom-part.html b/...y/blink/web_tests/external/wpt/css/css-counter-styles/counter-styles-shadow-dom-part.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<title>Counter style tree-scoped references</title>
+<link rel="help" href="https://drafts.csswg.org/css-counter-styles-3/#the-counter-style-rule">
+<link rel="help" href="https://drafts.csswg.org/css-scoping/#shadow-names">
+<link rel="author" href="mailto:[email protected]">
+<link rel="match" href="counter-styles-shadow-dom-part-ref.html">
+<meta name="assert" content="The list in the shadow tree should use the counter style defined in the outer document, because it's styled by the outer document">
+
+<style>
+@counter-style foo {
+  system: fixed;
+  symbols: A B C;
+}
+#host::part(list) {
+  list-style-type: foo;
+}
+</style>
+
+<div id="host"></div>
+
+<script>
+document.getElementById("host").attachShadow({mode: 'open'}).innerHTML = `
+<style>
+@counter-style foo {
+  system: fixed;
+  symbols: D E F;
+}
+</style>
+<ol part="list" style="list-style-position: inside">
+  <li></li>
+  <li></li>
+  <li></li>
+</ol>
+`;
+</script>