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

239
tests/wpt/web-platform-tests/css/css-contain/container-queries/container-nested.html Normal file
View file

@ -0,0 +1,239 @@
<!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>