Bug 1507472 [wpt PR 14071] - CSS: rename :matches to :is, a=testonly
authorEric Willigers <ericwilligers@chromium.org>
Mon, 19 Nov 2018 18:46:15 +0000
changeset 506779 a04958fad14705781e87dd2dacd83b3596a4f02e
parent 506778 359ee839f1a358175a0d4d537476d32a7f4a39a4
child 506780 d4ceb2524c99145bf805801719dda49b76c09d86
push id1905
push userffxbld-merge
push dateMon, 21 Jan 2019 12:33:13 +0000
treeherdermozilla-release@c2fca1944d8c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1507472, 14071, 568705, 1337227, 608722
milestone65.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1507472 [wpt PR 14071] - CSS: rename :matches to :is, a=testonly Automatic update from web-platform-testsCSS: rename :matches to :is Recent CSS WG decision https://github.com/w3c/csswg-drafts/issues/3258 Bug: 568705 Change-Id: If24be4b2c0a49ba12c92df873b0a4de12eb1a21e Reviewed-on: https://chromium-review.googlesource.com/c/1337227 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Eric Willigers <ericwilligers@chromium.org> Cr-Commit-Position: refs/heads/master@{#608722} -- wpt-commits: 4decb8ae3b8890851073d36cba9bb9a76f29e8d3 wpt-pr: 14071
testing/web-platform/tests/css/selectors/invalidation/is.html
testing/web-platform/tests/css/selectors/invalidation/matches.html
testing/web-platform/tests/css/selectors/invalidation/where.html
testing/web-platform/tests/css/selectors/is-nested.html
testing/web-platform/tests/css/selectors/is-specificity.html
testing/web-platform/tests/css/selectors/matches-nested.html
testing/web-platform/tests/css/selectors/matches-specificity.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/selectors/invalidation/is.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Selectors Invalidation: :is()</title>
+    <link rel="author" title="Victoria Su" href="mailto:victoriaytsu@google.com">
+    <link rel="help" href="https://drafts.csswg.org/selectors-4/#matches">
+    <meta name="assert" content="This tests that the :is() selector is effective">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <style>
+      .b {
+        color: yellow;
+      }
+      /*Simple selector arguments */
+      .a :is(.b, .c) {
+        color: red;
+      }
+      /*Compound selector arguments */
+      .a :is(.c#d, .e) {
+        color: green;
+      }
+      /* Complex selector arguments */
+      .a .g>.b {
+        color: black;
+      }
+      .a :is(.e+.f, .g>.b, .h) {
+        color: blue;
+      }
+      .g>.b {
+        color: black;
+      }
+      .a .h {
+        color: black;
+      }
+      /* Nested */
+      .a+.c>.e {
+        color: black;
+      }
+      .c>.a+.e {
+        color: black;
+      }
+      .a+:is(.b+.f, :is(.c>.e, .g)) {
+        color: red;
+      }
+      .c>.e {
+        color: black;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="a1">
+      <div class="b" id="b1">
+        Red
+      </div>
+      <div class="c" id="c1">
+        Red
+      </div>
+      <div class="c" id="d">
+        Green
+      </div>
+      <div class="e" id="e1">
+        Green
+      </div>
+      <div class="f" id="f1">
+        Blue
+      </div>
+      <div class="g">
+        <div class="b" id="b2">
+          Blue
+          <div class="b" id="b3">
+            Red
+          </div>
+        </div>
+      </div>
+      <div class="h" id="h1">
+        Black
+      </div>
+    </div>
+    <div class="c" id="c2">
+      <div id="a2"></div>
+      <div class="e" id="e2">
+        Red
+      </div>
+    </div>
+    <script>
+      document.body.offsetTop;
+
+      var black = "rgb(0, 0, 0)";
+      var blue = "rgb(0, 0, 255)";
+      var green = "rgb(0, 128, 0)";
+      var red = "rgb(255, 0, 0)";
+      var yellow = "rgb(255, 255, 0)";
+
+      test(() => {
+        assert_equals(getComputedStyle(b1).color, yellow);
+        assert_equals(getComputedStyle(b2).color, black);
+        assert_equals(getComputedStyle(b3).color, yellow);
+        assert_equals(getComputedStyle(c1).color, black);
+        assert_equals(getComputedStyle(d).color, black);
+        assert_equals(getComputedStyle(e1).color, black);
+        assert_equals(getComputedStyle(e2).color, black);
+        assert_equals(getComputedStyle(f1).color, black);
+        assert_equals(getComputedStyle(h1).color, black);
+      }, "Preconditions.");
+
+      test(() => {
+        a1.className = "a";
+        assert_equals(getComputedStyle(b1).color, red);
+        assert_equals(getComputedStyle(b3).color, red);
+        assert_equals(getComputedStyle(c1).color, red);
+      }, "Invalidate :is() for simple selector arguments.");
+
+      test(() => {
+        a1.className = "a";
+        assert_equals(getComputedStyle(d).color, green);
+      }, "Invalidate :is() for compound selector arguments.");
+
+      test(() => {
+        a1.className = "a";
+        assert_equals(getComputedStyle(b2).color, blue);
+        assert_equals(getComputedStyle(b3).color, red);
+        assert_equals(getComputedStyle(f1).color, blue);
+      }, "Invalidate :is() for complex selector arguments.");
+
+      test(() => {
+        a1.className = "a";
+        assert_equals(getComputedStyle(e2).color, black);
+        a2.className = "a";
+        assert_equals(getComputedStyle(e2).color, red);
+      }, "Invalidate nested :is().");
+
+      test(() => {
+        a1.className = "a";
+        assert_equals(getComputedStyle(b2).color, blue);
+        assert_equals(getComputedStyle(h1).color, black);
+      }, "Test specificity of :is().");
+    </script>
+  </body>
+</html>
\ No newline at end of file
deleted file mode 100644
--- a/testing/web-platform/tests/css/selectors/invalidation/matches.html
+++ /dev/null
@@ -1,139 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>CSS Selectors Invalidation: :matches()</title>
-    <link rel="author" title="Victoria Su" href="mailto:victoriaytsu@google.com">
-    <link rel="help" href="https://drafts.csswg.org/selectors-4/#matches">
-    <meta name="assert" content="This tests that the :matches() selector is effective">
-    <script src="/resources/testharness.js"></script>
-    <script src="/resources/testharnessreport.js"></script>
-    <style>
-      .b {
-        color: yellow;
-      }
-      /*Simple selector arguments */
-      .a :matches(.b, .c) {
-        color: red;
-      }
-      /*Compound selector arguments */
-      .a :matches(.c#d, .e) {
-        color: green;
-      }
-      /* Complex selector arguments */
-      .a .g>.b {
-        color: black;
-      }
-      .a :matches(.e+.f, .g>.b, .h) {
-        color: blue;
-      }
-      .g>.b {
-        color: black;
-      }
-      .a .h {
-        color: black;
-      }
-      /* Nested */
-      .a+.c>.e {
-        color: black;
-      }
-      .c>.a+.e {
-        color: black;
-      }
-      .a+:matches(.b+.f, :matches(.c>.e, .g)) {
-        color: red;
-      }
-      .c>.e {
-        color: black;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="a1">
-      <div class="b" id="b1">
-        Red
-      </div>
-      <div class="c" id="c1">
-        Red
-      </div>
-      <div class="c" id="d">
-        Green
-      </div>
-      <div class="e" id="e1">
-        Green
-      </div>
-      <div class="f" id="f1">
-        Blue
-      </div>
-      <div class="g">
-        <div class="b" id="b2">
-          Blue
-          <div class="b" id="b3">
-            Red
-          </div>
-        </div>
-      </div>
-      <div class="h" id="h1">
-        Black
-      </div>
-    </div>
-    <div class="c" id="c2">
-      <div id="a2"></div>
-      <div class="e" id="e2">
-        Red
-      </div>
-    </div>
-    <script>
-      document.body.offsetTop;
-
-      var black = "rgb(0, 0, 0)";
-      var blue = "rgb(0, 0, 255)";
-      var green = "rgb(0, 128, 0)";
-      var red = "rgb(255, 0, 0)";
-      var yellow = "rgb(255, 255, 0)";
-
-      test(() => {
-        assert_equals(getComputedStyle(b1).color, yellow);
-        assert_equals(getComputedStyle(b2).color, black);
-        assert_equals(getComputedStyle(b3).color, yellow);
-        assert_equals(getComputedStyle(c1).color, black);
-        assert_equals(getComputedStyle(d).color, black);
-        assert_equals(getComputedStyle(e1).color, black);
-        assert_equals(getComputedStyle(e2).color, black);
-        assert_equals(getComputedStyle(f1).color, black);
-        assert_equals(getComputedStyle(h1).color, black);
-      }, "Preconditions.");
-
-      test(() => {
-        a1.className = "a";
-        assert_equals(getComputedStyle(b1).color, red);
-        assert_equals(getComputedStyle(b3).color, red);
-        assert_equals(getComputedStyle(c1).color, red);
-      }, "Invalidate :matches() for simple selector arguments.");
-
-      test(() => {
-        a1.className = "a";
-        assert_equals(getComputedStyle(d).color, green);
-      }, "Invalidate :matches() for compound selector arguments.");
-
-      test(() => {
-        a1.className = "a";
-        assert_equals(getComputedStyle(b2).color, blue);
-        assert_equals(getComputedStyle(b3).color, red);
-        assert_equals(getComputedStyle(f1).color, blue);
-      }, "Invalidate :matches() for complex selector arguments.");
-
-      test(() => {
-        a1.className = "a";
-        assert_equals(getComputedStyle(e2).color, black);
-        a2.className = "a";
-        assert_equals(getComputedStyle(e2).color, red);
-      }, "Invalidate nested :matches().");
-
-      test(() => {
-        a1.className = "a";
-        assert_equals(getComputedStyle(b2).color, blue);
-        assert_equals(getComputedStyle(h1).color, black);
-      }, "Test specificity of :matches().");
-    </script>
-  </body>
-</html>
\ No newline at end of file
--- a/testing/web-platform/tests/css/selectors/invalidation/where.html
+++ b/testing/web-platform/tests/css/selectors/invalidation/where.html
@@ -28,17 +28,17 @@
       }
       :where(.a~.h, .a~.h+.f) {
         color: yellow;
       }
       /* Nested */
       :where(.a>:where(.g+.h, .b)~.i) {
         color: blue;
       }
-      :where(:matches(.a~.h)) {
+      :where(:is(.a~.h)) {
         color: yellow;
       }
     </style>
   </head>
   <body>
     <div id="a1">
       <div class="g">
       </div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/selectors/is-nested.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Selectors: :is()</title>
+    <link rel="author" title="Victoria Su" href="mailto:victoriaytsu@google.com">
+    <link rel="help" href="https://drafts.csswg.org/selectors-4/#matches">
+    <meta name="assert" content="This tests that the :is() selector is effective when nested">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <style>
+      /* Testing that highest specificity is chosen for class outside of :is() */
+      .a+.b+.c>.e+.d {
+        color: black;
+        font-size: 10px;
+        width: 10px;
+      }
+      .a+:is(.b+.f, .b+:is(*, .c>.e, .g, *))+.d {
+        color: red;
+        font-size: 20px;
+      }
+      .a+.b+.c>.e+.d {
+        color: yellow;
+      }
+      /* Testing specificty of a class within :is() */
+      .a+.c>.e {
+        color: black;
+      }
+      .a+:is(.b+.f, :is(.c>.e, .g)) {
+        color: red;
+      }
+      .c>.e {
+        color: black;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="a">
+    </div>
+    <div class="b" id="b2">
+    </div>
+    <div class="c" id="c2">
+      <div class="e">
+      </div>
+      <div class="d" id="d1">
+        Yellow
+      </div>
+    </div>
+    <div class="a">
+    </div>
+    <div class="c" id="c2">
+      <div class="e" id="e1">
+        Red
+      </div>
+    </div>
+    <script>
+
+      var red = "rgb(255, 0, 0)";
+      var yellow = "rgb(255, 255, 0)";
+
+      test(() => {
+        assert_equals(getComputedStyle(d1).color, yellow);
+        assert_equals(getComputedStyle(d1).fontSize, "20px");
+        assert_equals(getComputedStyle(d1).width, "10px");
+      }, "Test nested :is() chooses highest specificity for class outside :is().");
+
+      test(() => {
+        assert_equals(getComputedStyle(e1).color, red);
+      }, "Test nested :is() specificity for class within arguments.");
+
+    </script>
+  </body>
+</html>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/selectors/is-specificity.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Selectors: :is()</title>
+    <link rel="author" title="Victoria Su" href="mailto:victoriaytsu@google.com">
+    <link rel="help" href="https://drafts.csswg.org/selectors-4/#matches">
+    <meta name="assert" content="This tests that the :is() selector chooses the correct specificity">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <style>
+      .b.c + .d + .q.r + .s + #target {
+        font-size: 10px;
+        height: 10px;
+        width: 10px;
+      }
+      :is(.a, .b.c + .d, .e) + :is(* + .p, .q.r + .s, * + .t) + #target {
+        height: 20px;
+        width: 20px;
+      }
+      .b.c + .d + .q.r + .s + #target {
+        width: 30px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="b c"></div>
+    <div class="a d e"></div>
+    <div class="q r"></div>
+    <div class="p s t"></div>
+    <div id="target"></div>
+    <script>
+
+      test(() => {
+        assert_equals(getComputedStyle(target).width, "30px");
+        assert_equals(getComputedStyle(target).height, "20px");
+        assert_equals(getComputedStyle(target).fontSize, "10px");
+      }, "Test :is() uses highest possible specificity");
+
+    </script>
+  </body>
+</html>
\ No newline at end of file
deleted file mode 100644
--- a/testing/web-platform/tests/css/selectors/matches-nested.html
+++ /dev/null
@@ -1,72 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>CSS Selectors: :matches()</title>
-    <link rel="author" title="Victoria Su" href="mailto:victoriaytsu@google.com">
-    <link rel="help" href="https://drafts.csswg.org/selectors-4/#matches">
-    <meta name="assert" content="This tests that the :matches() selector is effective when nested">
-    <script src="/resources/testharness.js"></script>
-    <script src="/resources/testharnessreport.js"></script>
-    <style>
-      /* Testing that highest specificity is chosen for class outside of :matches() */
-      .a+.b+.c>.e+.d {
-        color: black;
-        font-size: 10px;
-        width: 10px;
-      }
-      .a+:matches(.b+.f, .b+:matches(*, .c>.e, .g, *))+.d {
-        color: red;
-        font-size: 20px;
-      }
-      .a+.b+.c>.e+.d {
-        color: yellow;
-      }
-      /* Testing specificty of a class within :matches() */
-      .a+.c>.e {
-        color: black;
-      }
-      .a+:matches(.b+.f, :matches(.c>.e, .g)) {
-        color: red;
-      }
-      .c>.e {
-        color: black;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="a">
-    </div>
-    <div class="b" id="b2">
-    </div>
-    <div class="c" id="c2">
-      <div class="e">
-      </div>
-      <div class="d" id="d1">
-        Yellow
-      </div>
-    </div>
-    <div class="a">
-    </div>
-    <div class="c" id="c2">
-      <div class="e" id="e1">
-        Red
-      </div>
-    </div>
-    <script>
-
-      var red = "rgb(255, 0, 0)";
-      var yellow = "rgb(255, 255, 0)";
-
-      test(() => {
-        assert_equals(getComputedStyle(d1).color, yellow);
-        assert_equals(getComputedStyle(d1).fontSize, "20px");
-        assert_equals(getComputedStyle(d1).width, "10px");
-      }, "Test nested :matches() chooses highest specificity for class outside :matches().");
-
-      test(() => {
-        assert_equals(getComputedStyle(e1).color, red);
-      }, "Test nested :matches() specificity for class within arguments.");
-
-    </script>
-  </body>
-</html>
\ No newline at end of file
deleted file mode 100644
--- a/testing/web-platform/tests/css/selectors/matches-specificity.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>CSS Selectors: :matches()</title>
-    <link rel="author" title="Victoria Su" href="mailto:victoriaytsu@google.com">
-    <link rel="help" href="https://drafts.csswg.org/selectors-4/#matches">
-    <meta name="assert" content="This tests that the :matches() selector chooses the correct specificity">
-    <script src="/resources/testharness.js"></script>
-    <script src="/resources/testharnessreport.js"></script>
-    <style>
-      .b.c + .d + .q.r + .s + #target {
-        font-size: 10px;
-        height: 10px;
-        width: 10px;
-      }
-      :matches(.a, .b.c + .d, .e) + :matches(* + .p, .q.r + .s, * + .t) + #target {
-        height: 20px;
-        width: 20px;
-      }
-      .b.c + .d + .q.r + .s + #target {
-        width: 30px;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="b c"></div>
-    <div class="a d e"></div>
-    <div class="q r"></div>
-    <div class="p s t"></div>
-    <div id="target"></div>
-    <script>
-
-      test(() => {
-        assert_equals(getComputedStyle(target).width, "30px");
-        assert_equals(getComputedStyle(target).height, "20px");
-        assert_equals(getComputedStyle(target).fontSize, "10px");
-      }, "Test :matches() uses highest possible specificity");
-
-    </script>
-  </body>
-</html>
\ No newline at end of file