зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1523562 [wpt PR 14969] - CSS: WPT for style update on sibling insertion, a=testonly
Automatic update from web-platform-tests 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} -- wpt-commits: 63295f9e7e8d11e5db0426df6a028d416c509058 wpt-pr: 14969
This commit is contained in:
Eric Willigers
James Graham
Родитель
09ec95d9b0
Коммит
94ed833e90
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Загрузка…
Ссылка в новой задаче