Bug 1507472 [wpt PR 14071] - CSS: rename :matches to :is, a=testonly
☠☠ backed out by 46ad93280b06 ☠ ☠
authorEric Willigers <ericwilligers@chromium.org>
Mon, 19 Nov 2018 18:46:15 +0000
changeset 503744 bb03633ea79a37977e3c79530ffdb687afbf482b
parent 503743 f73f874848390bfe55e387771beda2ccec982460
child 503745 b49e6067e4bc5b0fd23c1efe8c66a4e2cb55b0d5
push id10290
push userffxbld-merge
push dateMon, 03 Dec 2018 16:23:23 +0000
treeherdermozilla-beta@700bed2445e6 [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