diff --git a/third_party/blink/web_tests/external/wpt/css/css-counter-styles/counter-styles-shadow-dom-part-ref.html b/third_party/blink/web_tests/external/wpt/css/css-counter-styles/counter-styles-shadow-dom-part-ref.html
new file mode 100644
index 00000000000000..7f1af7532075c9
--- /dev/null
+++ b/third_party/blink/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/third_party/blink/web_tests/external/wpt/css/css-counter-styles/counter-styles-shadow-dom-part.html b/third_party/blink/web_tests/external/wpt/css/css-counter-styles/counter-styles-shadow-dom-part.html
new file mode 100644
index 00000000000000..2be169c80126c0
--- /dev/null
+++ b/third_party/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:xiaochengh@chromium.org">
+<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>
