mirror of
https://github.com/servo/servo.git
synced 2025-06-25 17:44:33 +01:00
239 lines
5.4 KiB
HTML
239 lines
5.4 KiB
HTML
<!doctype html>
|
|
<title>@container (nested)</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-rule">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="support/cq-testcommon.js"></script>
|
|
<style>
|
|
|
|
#outer {
|
|
container-name: outer;
|
|
container-type: size;
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
#inner {
|
|
container-name: inner;
|
|
container-type: size;
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
</style>
|
|
<div id=outer>
|
|
<div id=inner>
|
|
<div id=child></div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
setup(() => assert_implements_container_queries());
|
|
</script>
|
|
|
|
<!--
|
|
"Implicit" refers to implicit container selection, i.e. understanding which
|
|
container to evaluate against by looking at the features used.
|
|
-->
|
|
|
|
<style>
|
|
@container (width: 50px) {
|
|
@container (height: 50px) {
|
|
#child { --implicit:true; }
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
test(() => {
|
|
assert_equals(getComputedStyle(child).getPropertyValue('--implicit'), 'true');
|
|
}, 'Implicit');
|
|
</script>
|
|
|
|
|
|
<style>
|
|
@container (width: 70px) {
|
|
@container (height: 50px) {
|
|
#child { --implicit-outer-fail:true; }
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
test(() => {
|
|
assert_equals(getComputedStyle(child).getPropertyValue('--implicit-outer-fail'), '');
|
|
}, 'Implicit, outer failing');
|
|
</script>
|
|
|
|
|
|
<style>
|
|
@container (width: 50px) {
|
|
@container (height: 70px) {
|
|
#child { --implicit-inner-fail:true; }
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
test(() => {
|
|
assert_equals(getComputedStyle(child).getPropertyValue('--implicit-inner-fail'), '');
|
|
}, 'Implicit, inner failing');
|
|
</script>
|
|
|
|
|
|
<style>
|
|
@container outer (width: 100px) {
|
|
@container inner (height: 50px) {
|
|
#child { --named-outer-inner:true; }
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
test(() => {
|
|
assert_equals(getComputedStyle(child).getPropertyValue('--named-outer-inner'), 'true');
|
|
}, 'Outer named, inner named');
|
|
</script>
|
|
|
|
|
|
<style>
|
|
@container inner (width: 50px) {
|
|
@container outer (height: 100px) {
|
|
#child { --named-outer-inner-reverse:true; }
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
test(() => {
|
|
assert_equals(getComputedStyle(child).getPropertyValue('--named-outer-inner-reverse'), 'true');
|
|
}, 'Outer named, inner named (reverse)');
|
|
</script>
|
|
|
|
|
|
<style>
|
|
@container unknown (width: 100px) {
|
|
@container inner (height: 50px) {
|
|
#child { --named-failing-outer:true; }
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
test(() => {
|
|
assert_equals(getComputedStyle(child).getPropertyValue('--named-failing-outer'), '');
|
|
}, 'Failing outer name');
|
|
</script>
|
|
|
|
<style>
|
|
@container outer (width: 100px) {
|
|
@container unknown (height: 50px) {
|
|
#child { --named-failing-inner:true; }
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
test(() => {
|
|
assert_equals(getComputedStyle(child).getPropertyValue('--named-failing-inner'), '');
|
|
}, 'Failing inner name');
|
|
</script>
|
|
|
|
|
|
<style>
|
|
@container outer (width: 100px) {
|
|
@container (height: 50px) {
|
|
#child { --named-outer-inner-implicit:true; }
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
test(() => {
|
|
assert_equals(getComputedStyle(child).getPropertyValue('--named-outer-inner-implicit'), 'true');
|
|
}, 'Outer named, inner implicit');
|
|
</script>
|
|
|
|
|
|
<style>
|
|
@container (width: 50px) {
|
|
@container inner (height: 50px) {
|
|
#child { --implicit-outer-inner-named:true; }
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
test(() => {
|
|
assert_equals(getComputedStyle(child).getPropertyValue('--implicit-outer-inner-named'), 'true');
|
|
}, 'Inner named, outer implicit');
|
|
</script>
|
|
|
|
|
|
<style>
|
|
@container (width: 50px) {
|
|
@container outer (height: 100px) {
|
|
#child { --implicit-outer-inner-named-reverse:true; }
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
test(() => {
|
|
assert_equals(getComputedStyle(child).getPropertyValue('--implicit-outer-inner-named-reverse'), 'true');
|
|
}, 'Inner named, outer implicit (reverse)');
|
|
</script>
|
|
|
|
|
|
<style>
|
|
@container (width > 1px) {
|
|
@container (width > 2px) {
|
|
@container (width > 3px) {
|
|
#child { --three-levels:true; }
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
test(() => {
|
|
assert_equals(getComputedStyle(child).getPropertyValue('--three-levels'), 'true');
|
|
}, 'Three levels');
|
|
</script>
|
|
|
|
|
|
<style>
|
|
@container (width > 1px) {
|
|
@container (width > 2000px) {
|
|
@container (width > 3px) {
|
|
#child { --three-levels-middle-fail:true; }
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
test(() => {
|
|
assert_equals(getComputedStyle(child).getPropertyValue('--three-levels-middle-fail'), '');
|
|
}, 'Three levels, middle fail');
|
|
</script>
|
|
|
|
|
|
<style>
|
|
@container (width: 50px) {
|
|
@container outer (height: 100px) {
|
|
#child { --inner-named-invalidation:true; }
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
test((t) => {
|
|
t.add_cleanup(() => { outer.style = ''; });
|
|
assert_equals(getComputedStyle(child).getPropertyValue('--inner-named-invalidation'), 'true');
|
|
outer.style.height = '200px';
|
|
assert_equals(getComputedStyle(child).getPropertyValue('--inner-named-invalidation'), '');
|
|
}, 'Named inner invalidation');
|
|
</script>
|
|
|
|
|
|
<style>
|
|
@container (width: 50px) {
|
|
@container outer (height: 100px) {
|
|
#child { --outer-implicit-invalidation:true; }
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
test((t) => {
|
|
t.add_cleanup(() => { inner.style = ''; });
|
|
assert_equals(getComputedStyle(child).getPropertyValue('--outer-implicit-invalidation'), 'true');
|
|
inner.style.width = '200px';
|
|
assert_equals(getComputedStyle(child).getPropertyValue('--outer-implicit-invalidation'), '');
|
|
}, 'Implicit outer invalidation');
|
|
</script>
|