Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
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
w3c/csswg-drafts#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
  • Loading branch information
ericwilligers authored and jgraham committed Nov 21, 2018
1 parent 83f1d5d commit 96db0da
Show file tree
Hide file tree
Showing 4 changed files with 24 additions and 24 deletions.
@@ -1,29 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Selectors Invalidation: :matches()</title>
<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 :matches() selector is effective">
<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 :matches(.b, .c) {
.a :is(.b, .c) {
color: red;
}
/*Compound selector arguments */
.a :matches(.c#d, .e) {
.a :is(.c#d, .e) {
color: green;
}
/* Complex selector arguments */
.a .g>.b {
color: black;
}
.a :matches(.e+.f, .g>.b, .h) {
.a :is(.e+.f, .g>.b, .h) {
color: blue;
}
.g>.b {
Expand All @@ -39,7 +39,7 @@
.c>.a+.e {
color: black;
}
.a+:matches(.b+.f, :matches(.c>.e, .g)) {
.a+:is(.b+.f, :is(.c>.e, .g)) {
color: red;
}
.c>.e {
Expand Down Expand Up @@ -108,32 +108,32 @@
assert_equals(getComputedStyle(b1).color, red);
assert_equals(getComputedStyle(b3).color, red);
assert_equals(getComputedStyle(c1).color, red);
}, "Invalidate :matches() for simple selector arguments.");
}, "Invalidate :is() for simple selector arguments.");

test(() => {
a1.className = "a";
assert_equals(getComputedStyle(d).color, green);
}, "Invalidate :matches() for compound selector arguments.");
}, "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 :matches() for complex selector arguments.");
}, "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 :matches().");
}, "Invalidate nested :is().");

test(() => {
a1.className = "a";
assert_equals(getComputedStyle(b2).color, blue);
assert_equals(getComputedStyle(h1).color, black);
}, "Test specificity of :matches().");
}, "Test specificity of :is().");
</script>
</body>
</html>
Expand Up @@ -33,7 +33,7 @@
:where(.a>:where(.g+.h, .b)~.i) {
color: blue;
}
:where(:matches(.a~.h)) {
:where(:is(.a~.h)) {
color: yellow;
}
</style>
Expand Down
@@ -1,31 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Selectors: :matches()</title>
<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 :matches() selector is effective when nested">
<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 :matches() */
/* Testing that highest specificity is chosen for class outside of :is() */
.a+.b+.c>.e+.d {
color: black;
font-size: 10px;
width: 10px;
}
.a+:matches(.b+.f, .b+:matches(*, .c>.e, .g, *))+.d {
.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 :matches() */
/* Testing specificty of a class within :is() */
.a+.c>.e {
color: black;
}
.a+:matches(.b+.f, :matches(.c>.e, .g)) {
.a+:is(.b+.f, :is(.c>.e, .g)) {
color: red;
}
.c>.e {
Expand Down Expand Up @@ -61,11 +61,11 @@
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 nested :is() chooses highest specificity for class outside :is().");

test(() => {
assert_equals(getComputedStyle(e1).color, red);
}, "Test nested :matches() specificity for class within arguments.");
}, "Test nested :is() specificity for class within arguments.");

</script>
</body>
Expand Down
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Selectors: :matches()</title>
<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 :matches() selector chooses the correct specificity">
<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>
Expand All @@ -13,7 +13,7 @@
height: 10px;
width: 10px;
}
:matches(.a, .b.c + .d, .e) + :matches(* + .p, .q.r + .s, * + .t) + #target {
:is(.a, .b.c + .d, .e) + :is(* + .p, .q.r + .s, * + .t) + #target {
height: 20px;
width: 20px;
}
Expand All @@ -34,7 +34,7 @@
assert_equals(getComputedStyle(target).width, "30px");
assert_equals(getComputedStyle(target).height, "20px");
assert_equals(getComputedStyle(target).fontSize, "10px");
}, "Test :matches() uses highest possible specificity");
}, "Test :is() uses highest possible specificity");

</script>
</body>
Expand Down

0 comments on commit 96db0da

Please sign in to comment.