1 files changed, 59 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-001.html b/testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-001.html
new file mode 100644
index 0000000000..0baef0bfc2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-001.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<title>CSS Container Queries Test: Container for elements with pseudo elements</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#query-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  :root {
+    color: black;
+  }
+
+  .container {
+    container-type: size;
+    width: 200px;
+    height: 40px;
+  }
+
+  @container (min-width: 300px) {
+    #container1 div::before { content: "before"; }
+    #container1 div::after { content: "after"; }
+    #container2 li::marker { color: green; }
+  }
+</style>
+<main id=container1 class=container>
+  <div>test</div>
+</main>
+<main id=container2 class=container>
+  <ol>
+    <li>One</li>
+  </ol>
+</main>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(function() {
+    let div = document.querySelector('#container1 > div');
+    assert_equals(getComputedStyle(div, '::before').content, 'none');
+    assert_equals(getComputedStyle(div, '::after').content, 'none');
+
+    container1.style.width = '300px';
+    assert_equals(getComputedStyle(div, '::before').content, '"before"');
+    assert_equals(getComputedStyle(div, '::after').content, '"after"');
+
+    container1.style = '';
+    assert_equals(getComputedStyle(div, '::before').content, 'none');
+    assert_equals(getComputedStyle(div, '::after').content, 'none');
+  }, 'Pseudo-elements ::before and ::after respond to container size changes');
+
+  test(function() {
+    let li = document.querySelector('#container2 li');
+    assert_equals(getComputedStyle(li, '::marker').color, 'rgb(0, 0, 0)');
+
+    container2.style.width = '300px';
+    assert_equals(getComputedStyle(li, '::marker').color, 'rgb(0, 128, 0)');
+
+    container2.style = '';
+    assert_equals(getComputedStyle(li, '::marker').color, 'rgb(0, 0, 0)');
+  }, 'Pseudo-element ::marker responds to container size changes');
+</script>