mirror of
https://github.com/servo/servo.git
synced 2025-06-26 18:14:34 +01:00
134 lines
3.4 KiB
HTML
134 lines
3.4 KiB
HTML
<!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>
|