CSS: WPT for style update on sibling insertion
https: //drafts.csswg.org/selectors-4/#adjacent-sibling-combinators
https: //drafts.csswg.org/selectors-4/#general-sibling-combinators
Change-Id: I79b93fc952a09de6eff69d312b5e3ceadef1e7ea
Reviewed-on: https://chromium-review.googlesource.com/c/1420555
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Commit-Queue: Eric Willigers <ericwilligers@chromium.org>
Cr-Commit-Position: refs/heads/master@{#624541}diff --git a/third_party/blink/web_tests/external/wpt/css/selectors/invalidation/insert-sibling-001.html b/third_party/blink/web_tests/external/wpt/css/selectors/invalidation/insert-sibling-001.html
new file mode 100644
index 0000000..fa966d3
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/selectors/invalidation/insert-sibling-001.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Selectors Invalidation: insert sibling</title>
+ <link rel="help" href="https://drafts.csswg.org/selectors-4/#adjacent-sibling-combinators">
+ <meta name="assert" content="This tests that the + next-sibling selector is effective">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <style>
+ .c { background-color: blue; }
+ .a + * + .c { background-color: green; }
+ </style>
+</head>
+<body>
+ <div>
+ <div id="first" class="a"></div>
+ <div></div>
+ <div id="target" class="c"></div>
+ </div>
+ <script>
+ 'use strict';
+ const green = 'rgb(0, 128, 0)';
+ const blue = 'rgb(0, 0, 255)';
+
+ test(function() {
+ const first = document.getElementById('first');
+ const target = document.getElementById('target');
+ const parent = first.parentElement;
+ assert_equals(getComputedStyle(target).backgroundColor, green, "initial color");
+
+ parent.removeChild(first);
+ assert_equals(getComputedStyle(target).backgroundColor, blue, "color after removal");
+
+ parent.insertBefore(first, parent.firstChild);
+ assert_equals(getComputedStyle(target).backgroundColor, green, "color after insert")
+ }, "Remove/Insert earlier sibling");
+ </script>
+</body>
+</html>
diff --git a/third_party/blink/web_tests/external/wpt/css/selectors/invalidation/insert-sibling-002.html b/third_party/blink/web_tests/external/wpt/css/selectors/invalidation/insert-sibling-002.html
new file mode 100644
index 0000000..7e1eac3
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/selectors/invalidation/insert-sibling-002.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Selectors Invalidation: insert adjacent sibling of parent</title>
+ <link rel="help" href="https://drafts.csswg.org/selectors-4/#adjacent-sibling-combinators">
+ <meta name="assert" content="This tests that the + next-sibling selector is effective">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <style>
+ .d { background-color: blue; }
+
+ .a + .c > .d { background-color: green; }
+ </style>
+</head>
+<body>
+ <div>
+ <div id="first" class="a"></div>
+ <div class="c">
+ <div id="target" class="d"></div>
+ </div>
+ </div>
+ <script>
+ 'use strict';
+ const green = 'rgb(0, 128, 0)';
+ const blue = 'rgb(0, 0, 255)';
+
+ test(function() {
+ const first = document.getElementById('first');
+ const target = document.getElementById('target');
+ const parent = first.parentElement;
+ assert_equals(getComputedStyle(target).backgroundColor, green, "initial color");
+
+ parent.removeChild(first);
+ assert_equals(getComputedStyle(target).backgroundColor, blue, "color after removal");
+
+ parent.insertBefore(first, parent.firstChild);
+ assert_equals(getComputedStyle(target).backgroundColor, green, "color after insert")
+ }, "Remove/Insert adjacent sibling of parent");
+ </script>
+</body>
+</html>
diff --git a/third_party/blink/web_tests/external/wpt/css/selectors/invalidation/insert-sibling-003.html b/third_party/blink/web_tests/external/wpt/css/selectors/invalidation/insert-sibling-003.html
new file mode 100644
index 0000000..c7c51ea
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/selectors/invalidation/insert-sibling-003.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Selectors Invalidation: insert sibling of ancestor</title>
+ <link rel="help" href="https://drafts.csswg.org/selectors-4/#adjacent-sibling-combinators">
+ <meta name="assert" content="This tests that the + next-sibling selector is effective">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <style>
+ .c * { background-color: blue; }
+
+ .a + * + .c * { background-color: green; }
+ </style>
+</head>
+<body>
+ <div>
+ <div id="first" class="a"></div>
+ <div></div>
+ <div class="c">
+ <div>
+ <div id="target"></div>
+ </div>
+ </div>
+ </div>
+ <script>
+ 'use strict';
+ const green = 'rgb(0, 128, 0)';
+ const blue = 'rgb(0, 0, 255)';
+
+ test(function() {
+ const first = document.getElementById('first');
+ const target = document.getElementById('target');
+ const parent = first.parentElement;
+ assert_equals(getComputedStyle(target).backgroundColor, green, "initial color");
+
+ parent.removeChild(first);
+ assert_equals(getComputedStyle(target).backgroundColor, blue, "color after removal");
+
+ parent.insertBefore(first, parent.firstChild);
+ assert_equals(getComputedStyle(target).backgroundColor, green, "color after insert")
+ }, "Remove/Insert earlier sibling of ancestor");
+ </script>
+</body>
+</html>
diff --git a/third_party/blink/web_tests/external/wpt/css/selectors/invalidation/insert-sibling-004.html b/third_party/blink/web_tests/external/wpt/css/selectors/invalidation/insert-sibling-004.html
new file mode 100644
index 0000000..aa3fb1c
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/selectors/invalidation/insert-sibling-004.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Selectors Invalidation: insert sibling of parent</title>
+ <link rel="help" href="https://drafts.csswg.org/selectors-4/#general-sibling-combinators">
+ <meta name="assert" content="This tests that the ~ subsequent-sibling selector is effective">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <style>
+ span { background-color: blue; }
+
+ .a ~ .c > span { background-color: green; }
+ </style>
+</head>
+<body>
+ <div>
+ <div id="first" class="a"></div>
+ <div></div>
+ <div></div>
+ <div class="c">
+ <span id="target"></span>
+ </div>
+ </div>
+ <script>
+ 'use strict';
+ const green = 'rgb(0, 128, 0)';
+ const blue = 'rgb(0, 0, 255)';
+
+ test(function() {
+ const first = document.getElementById('first');
+ const target = document.getElementById('target');
+ const parent = first.parentElement;
+ assert_equals(getComputedStyle(target).backgroundColor, green, "initial color");
+
+ parent.removeChild(first);
+ assert_equals(getComputedStyle(target).backgroundColor, blue, "color after removal");
+
+ parent.insertBefore(first, parent.firstChild);
+ assert_equals(getComputedStyle(target).backgroundColor, green, "color after insert")
+ }, "Remove/Insert earlier sibling of parent");
+ </script>
+</body>
+</html>
