Bug 1480047 [wpt PR 12252] - Add WPT for :scope selector on shadow tr…

…ees, a=testonly Automatic update from web-platform-testsAdd WPT for :scope selector on shadow trees This WPT shows that :scope does not work for shadow root. :scope matches nothing when the direct child element or descendant of shadow root should be selected, while :scope works fine for descendant elements within shadow root. Link to the spec: https://drafts.csswg.org/selectors-4/#the-scope-pseudo Link to related issue: w3c/csswg-drafts#3016 Bug: 859692 Change-Id: I801706eb7891035dcb900588d5542bd48fa1c12a Reviewed-on: https://chromium-review.googlesource.com/1158445 Commit-Queue: Momoko Sumida <momon@google.com> Reviewed-by: Rakina Zata Amni <rakina@chromium.org> Reviewed-by: Hayato Ito <hayato@chromium.org> Cr-Commit-Position: refs/heads/master@{#583210} -- wpt-commits: a48491848fb4e328e6cdd5c4d7a95494f1ff2c6a wpt-pr: 12252
jankeromnes · Aug 16, 2018 · 1ef43da · 1ef43da
1 parent 0a288cd
commit 1ef43da
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 0 deletions.
diff --git a/testing/web-platform/meta/MANIFEST.json b/testing/web-platform/meta/MANIFEST.json
@@ -338541,6 +338541,12 @@
      {}
     ]
    ],
+   "css/selectors/scope-selector.html": [
+    [
+     "/css/selectors/scope-selector.html",
+     {}
+    ]
+   ],
    "css/selectors/user-invalid.html": [
     [
      "/css/selectors/user-invalid.html",
@@ -569428,6 +569434,10 @@
    "99c0cb4c26294d1d8b655ed0a35d1f0eeb4a9ccb",
    "reftest"
   ],
+  "css/selectors/scope-selector.html": [
+   "bda0aed602aa691bba4c4089f0a4827a9b836c9e",
+   "testharness"
+  ],
   "css/selectors/scope-without-scoping.html": [
    "2ee7619e8023923c7d484554fd78c8e042d4b6ad",
    "reftest"

diff --git a/testing/web-platform/tests/css/selectors/scope-selector.html b/testing/web-platform/tests/css/selectors/scope-selector.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<link rel='help' href='https://drafts.csswg.org/selectors-4/#the-scope-pseudo'>
+<meta name='description' content=':scope should match when context object is a shadow root'>
+<script src='/resources/testharness.js'></script>
+<script src='/resources/testharnessreport.js'></script>
+<div id='shadowHost'></div>
+<script>
+'use strict'
+  const shadowRoot = shadowHost.attachShadow({mode:'open'})
+  shadowRoot.innerHTML = '<div class="div" id="external_div">Shadow Element<div id="nesteddiv">nested</div></div>';
+
+test(() => {
+  assert_equals(shadowRoot.firstChild.querySelectorAll(':scope >  div').length, 1, 'should get the number of direct children of external_div');
+  assert_equals(shadowRoot.firstChild.querySelector(':scope > div'), shadowRoot.getElementById("nesteddiv"), 'should get the first direct child of external_div');
+  assert_equals(shadowRoot.firstChild.querySelector(':scope > div').innerHTML, 'nested', 'should get the text in nesteddiv');
+}, 'scope selector works in shadowRoot.firstChild')
+
+test(() => {
+  assert_equals(shadowRoot.querySelector(':scope > div'), shadowRoot.getElementById('external_div'), 'should get the direct child of shadowRoot');
+  assert_equals(shadowRoot.querySelectorAll(':scope > div').length, 1, 'should get the number of direct div children of shadowRoot');
+}, 'Selecting direct child of shadow root with :scope should work')
+
+test(() => {
+  assert_equals(shadowRoot.querySelector(':scope div'), shadowRoot.getElementById('external_div'), 'should get the first div descendant of shadowRoot');
+  assert_equals(shadowRoot.querySelectorAll(':scope div').length, 2, 'should get the number of the div descendants of shadowRoot');
+}, 'Selecting descendants of shadow root with :scope should work')
+
+test(() => {
+  assert_equals(shadowRoot.firstChild.querySelector(':scope'), null, 'should return null');
+  assert_equals(shadowRoot.querySelector(':scope'), null, 'should return null');
+  assert_equals(shadowRoot.querySelectorAll(':scope').length, 0, 'should return 0');
+}, 'querySelector() with ":scope" should return null, whether the context object is an element or a shadow root')
+
+</script>