CSS: Retire expansion-based implementation of :is and :where

We no longer attempt to expand :is and :where during style sheet loading. Correct support for these selectors remains to be implemented. In particular, we need: - invalidation - RuleFeatureSet - support for empty selector lists - error recovery - CSSSelectorParser Bug: 1127347 Change-Id: I28912cf5cb9b373c423d488b47c20251917329fe Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2405034 Commit-Queue: Eric Willigers <ericwilligers@chromium.org> Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Cr-Commit-Position: refs/heads/master@{#808207}
faceless2 · Sep 18, 2020 · 140c8a2 · 140c8a2
1 parent 4811c33
commit 140c8a2
Show file tree

Hide file tree

Showing 3 changed files with 132 additions and 0 deletions.
diff --git a/css/selectors/query/is.html b/css/selectors/query/is.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Selectors Level 4: query using :is()</title>
+  <link rel="help" href="https://drafts.csswg.org/selectors/#matches">
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <script src="/css/support/query-testcommon.js"></script>
+</head>
+<body>
+  <div id="a1" class="a">
+    <div class="b" id="b1"></div>
+    <div class="c" id="c1"></div>
+    <div class="c" id="d"></div>
+    <div class="e" id="e1"></div>
+    <div class="f" id="f1"></div>
+    <div class="g">
+      <div class="b" id="b2">
+        <div class="b" id="b3"></div>
+      </div>
+    </div>
+    <div class="h" id="h1"></div>
+  </div>
+  <div class="c" id="c2">
+    <div id="a2" class="a"></div>
+    <div class="e" id="e2"></div>
+  </div>
+  <script>
+    'use strict';
+
+    // Simple selector arguments are supported by :is
+    test_query_selector(document, '.a :is(.b, .c)',
+        ['b1', 'c1', 'd', 'b2', 'b3']);
+
+    // Compound selector arguments are supported by :is
+    test_query_selector(document, '.a :is(.c#d, .e)',
+        ['d', 'e1']);
+
+    // Complex selector arguments are supported by :is
+    test_query_selector(document, '.a :is(.e+.f, .g>.b, .h)',
+        ['f1', 'b2', 'h1']);
+
+    // Nested selector arguments are supported by :is
+    test_query_selector(document, '.a+:is(.b+.f, :is(.c>.e, .g))',
+        'e2');
+
+    // Nested :where selector arguments are supported by :is
+    test_query_selector(document, '.a :is(:where(:where(.b ~ .c)))',
+        ['c1', 'd']);
+
+    // Nested :not selector arguments are supported by :is
+    test_query_selector(document, '.b + :is(.c + .c + .c, .b + .c:not(span), .b + .c + .e) ~ .h',
+        ['h1']);
+  </script>
+</body>
+</html>
diff --git a/css/selectors/query/where.html b/css/selectors/query/where.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Selectors Level 4: query using :where()</title>
+  <link rel="help" href="https://drafts.csswg.org/selectors/#zero-matches">
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <script src="/css/support/query-testcommon.js"></script>
+</head>
+<body>
+  <div id="a1" class="a">
+    <div class="b" id="b1"></div>
+    <div class="c" id="c1"></div>
+    <div class="c" id="d"></div>
+    <div class="e" id="e1"></div>
+    <div class="f" id="f1"></div>
+    <div class="g">
+      <div class="b" id="b2">
+        <div class="b" id="b3"></div>
+      </div>
+    </div>
+    <div class="h" id="h1"></div>
+  </div>
+  <div class="c" id="c2">
+    <div id="a2" class="a"></div>
+    <div class="e" id="e2"></div>
+  </div>
+  <script>
+    'use strict';
+
+    // Simple selector arguments are supported by :where
+    test_query_selector(document, '.a :where(.b, .c)',
+        ['b1', 'c1', 'd', 'b2', 'b3']);
+
+    // Compound selector arguments are supported by :where
+    test_query_selector(document, '.a :where(.c#d, .e)',
+        ['d', 'e1']);
+
+    // Complex selector arguments are supported by :where
+    test_query_selector(document, '.a :where(.e+.f, .g>.b, .h)',
+        ['f1', 'b2', 'h1']);
+
+    // Nested selector arguments are supported by :where
+    test_query_selector(document, '.a+:where(.b+.f, :where(.c>.e, .g))',
+        ['e2']);
+
+    // Nested :is selector arguments are supported by :where
+    test_query_selector(document, '.a :where(:is(:is(.b ~ .c)))',
+        ['c1', 'd']);
+
+    // Nested :not selector arguments are supported by :where
+    test_query_selector(document, '.b + :where(.c + .c + .c, .b + .c:not(span), .b + .c + .e) ~ .h',
+        ['h1']);
+  </script>
+</body>
+</html>
diff --git a/css/support/query-testcommon.js b/css/support/query-testcommon.js
@@ -0,0 +1,18 @@
+'use strict';
+
+function test_query_selector(parentNode, selector, expected) {
+  if (!Array.isArray(expected))
+    expected = [ expected ];
+
+  test(function(){
+    const elementList = parentNode.querySelectorAll(selector);
+    assert_equals(elementList.length, expected.length);
+
+    for (let i = 0; i < elementList.length; ++i) {
+      if (typeof expected[i] === 'string')
+        assert_equals(elementList[i].id, expected[i]);
+      else
+        assert_equals(elementList[i], expected[i]);
+    }
+  }, "Selector '" + selector + '" should find the expected elements');
+}