Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-06 14:10:11 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision b'b728032f59a396243864b0f8584e7211e3632005'

Browse source
This commit is contained in:
WPT Sync Bot 2022-11-10 01:22:36 +00:00
parent ace9b32b1c
commit df68c4e5d1
15632 changed files with 514865 additions and 155000 deletions
Download patch file Download diff file Expand all files Collapse all files

134
tests/wpt/web-platform-tests/css/css-contain/container-queries/sibling-layout-dependency.html Normal file
View file

@ -0,0 +1,134 @@
<!doctype html>
<title>@container-dependent styles respond to layout changes</title>
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
<link rel="help" href="https://drafts.csswg.org/css-contain-2/#containment-size">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/cq-testcommon.js"></script>
<script>
setup(() => assert_implements_container_queries());
</script>
<style>
@container (width: 10px) { .affected { --x:10; } }
@container (width: 20px) { .affected { --x:20; } }
.flex {
display: flex;
height: 30px;
width: 30px;
}
.container {
container-type: size;
flex: 1;
background: tomato;
}
.sibling {
background-color: skyblue;
}
.w10 {
width: 10px;
}
.ahem { font: 5px Ahem; }
/* The following is just to make the results more human-readable. */
main {
display: flex;
flex-wrap: wrap;
}
</style>
<main>
<!-- A sibling of the container gets a layout-affecting style change -->
<div class=flex>
<div class=container>
<div>
<div>
<div class=affected id=target1></div>
</div>
</div>
</div>
<div class="sibling w10" id=sibling1></div>
</div>
<script>
test(function() {
let cs = getComputedStyle(target1);
assert_equals(cs.getPropertyValue('--x'), '20');
sibling1.style.width = '20px';
assert_equals(cs.getPropertyValue('--x'), '10');
}, 'Sibling style mutation');
</script>
<!-- A sibling of the container gets a layout-affecting style change
affecting the parent of the gCS target -->
<div class=flex>
<div class=container>
<div>
<div class=affected id=parent2>
<div id=target2></div>
</div>
</div>
</div>
<div class="sibling w10" id=sibling2></div>
</div>
<script>
test(function() {
let cs = getComputedStyle(target2);
assert_equals(cs.getPropertyValue('--x'), '20');
sibling2.style.width = '20px';
assert_equals(cs.getPropertyValue('--x'), '10');
}, 'Sibling style mutation, parent is affected');
</script>
<!-- A sibling of the container gets a layout-affecting style change
affecting an ancestor of the gCS target -->
<div class=flex>
<div class=container>
<div class=affected id=ancestor3>
<div>
<div id=target3></div>
</div>
</div>
</div>
<div class="sibling w10" id=sibling3></div>
</div>
<script>
test(function() {
let cs = getComputedStyle(target3);
assert_equals(cs.getPropertyValue('--x'), '20');
sibling3.style.width = '20px';
assert_equals(cs.getPropertyValue('--x'), '10');
}, 'Sibling style mutation, ancestor is affected');
</script>
<!-- A sibling of the container needs layout via text mutation -->
<div class=flex>
<div class=container>
<div>
<div>
<div class=affected id=target4></div>
</div>
</div>
</div>
<div class="sibling ahem" id=sibling4>XX</div>
</div>
<script>
promise_test(async function() {
await document.fonts.ready;
let cs = getComputedStyle(target4);
assert_equals(cs.getPropertyValue('--x'), '20');
sibling4.textContent = 'XXXX';
assert_equals(cs.getPropertyValue('--x'), '10');
}, 'Sibling text mutation');
</script>
</main>