Update web-platform-tests to revision b'421155a1c8752a36b465e62f466b18f821190e08'

This commit is contained in:
WPT Sync Bot 2023-01-08 01:54:26 +00:00
parent 871cefc926
commit fd56698ec7
722 changed files with 19686 additions and 8130 deletions

View file

@ -0,0 +1,3 @@
<!DOCTYPE html>
<audio controls style='container-type: size'></audio>
<iframe>

View file

@ -155,6 +155,29 @@ test_template(document.currentScript.previousElementSibling, (t) => {
}, 'ch units respond to changes');
</script>
<template>
<style>
:root { font-size: 10px; }
:root.larger { font-size: 20px; }
@container (width <= 15rch) {
#test { color: green }
}
</style>
<div id="container">
<div>
<div id="test"></div>
</div>
</div>
</template>
<script>
test_template(document.currentScript.previousElementSibling, (t) => {
t.add_cleanup(() => document.documentElement.classList.remove("larger"));
assert_equals(getComputedStyle(main.querySelector("#test")).color, red);
document.documentElement.classList.add("larger");
assert_equals(getComputedStyle(main.querySelector("#test")).color, green);
}, 'rch units respond to changes');
</script>
<template>
<style>
main {
@ -180,3 +203,78 @@ test_template(document.currentScript.previousElementSibling, (t) => {
assert_equals(getComputedStyle(main.querySelector("#test")).color, green);
}, 'lh units respond to changes');
</script>
<template>
<style>
:root {
font-size: 10px;
line-height: 5;
}
:root.larger {
font-size: 20px;
}
@container (width <= 1rlh) {
#test { color: green }
}
</style>
<div id="container">
<div>
<div id="test"></div>
</div>
</div>
</template>
<script>
test_template(document.currentScript.previousElementSibling, (t) => {
t.add_cleanup(() => document.documentElement.classList.remove("larger"));
assert_equals(getComputedStyle(main.querySelector("#test")).color, red);
document.documentElement.classList.add("larger");
assert_equals(getComputedStyle(main.querySelector("#test")).color, green);
}, 'rlh units respond to changes');
</script>
<template>
<style>
main { font-size: 10px; }
main.larger { font-size: 20px; }
@container (width <= 8ic) {
#test { color: green }
}
</style>
<div id="container">
<div>
<div id="test"></div>
</div>
</div>
</template>
<script>
test_template(document.currentScript.previousElementSibling, (t) => {
t.add_cleanup(() => main.classList.remove("larger"));
assert_equals(getComputedStyle(main.querySelector("#test")).color, red);
main.classList.add("larger");
assert_equals(getComputedStyle(main.querySelector("#test")).color, green);
}, 'ic units respond to changes');
</script>
<template>
<style>
:root { font-size: 10px; }
:root.larger { font-size: 20px; }
@container (width <= 8ric) {
#test { color: green }
}
</style>
<div id="container">
<div>
<div id="test"></div>
</div>
</div>
</template>
<script>
test_template(document.currentScript.previousElementSibling, (t) => {
t.add_cleanup(() => document.documentElement.classList.remove("larger"));
assert_equals(getComputedStyle(main.querySelector("#test")).color, red);
document.documentElement.classList.add("larger");
assert_equals(getComputedStyle(main.querySelector("#test")).color, green);
}, 'ric units respond to changes');
</script>

View file

@ -5,7 +5,7 @@
<script src="/resources/testharnessreport.js"></script>
<script src="support/cq-testcommon.js"></script>
<style>
:root { font-size: 10px; }
:root { font-size: 10px; line-height: 10px; }
#em_container {
container-type: inline-size;
width: 100px;
@ -47,12 +47,21 @@
@container (width: 10ch) {
#ch_test { color: green }
}
@container (width: 50rch) {
#rch_test { color: green }
}
@container (width: 10ic) {
#ic_test { color: green }
}
@container (width: 50ric) {
#ric_test { color: green }
}
@container (width: 10lh) {
#lh_test { color: green }
}
@container (width: 50rlh) {
#rlh_test { color: green }
}
</style>
<div id="em_container">
<div id="em_test"></div>
@ -64,12 +73,15 @@
</div>
<div id="ch_container">
<div id="ch_test"></div>
<div id="rch_test"></div>
</div>
<div id="ic_container">
<div id="ic_test"></div>
<div id="ric_test"></div>
</div>
<div id="lh_container">
<div id="lh_test"></div>
<div id="rlh_test"></div>
</div>
<script>
setup(() => assert_implements_container_queries());
@ -78,8 +90,11 @@
test(() => assert_equals(getComputedStyle(em_test).color, green), "em relative inline-size");
test(() => assert_equals(getComputedStyle(rem_test).color, green), "rem relative inline-size");
test(() => assert_equals(getComputedStyle(ex_test).color, green), "ex relative inline-size");
test(() => assert_equals(getComputedStyle(rex_test).color, green), "rex relative inline-size" + getComputedStyle(ex_container).width + getComputedStyle(ex_container).height);
test(() => assert_equals(getComputedStyle(rex_test).color, green), "rex relative inline-size");
test(() => assert_equals(getComputedStyle(ch_test).color, green), "ch relative inline-size");
test(() => assert_equals(getComputedStyle(rch_test).color, green), "rch relative inline-size");
test(() => assert_equals(getComputedStyle(ic_test).color, green), "ic relative inline-size");
test(() => assert_equals(getComputedStyle(ric_test).color, green), "ric relative inline-size");
test(() => assert_equals(getComputedStyle(lh_test).color, green), "lh relative inline-size");
test(() => assert_equals(getComputedStyle(rlh_test).color, green), "rlh relative inline-size");
</script>

View file

@ -215,3 +215,14 @@
assert_equals(getComputedStyle(target).getPropertyValue('--not-block-size'), '');
}, 'not (block-size < 0px)');
</script>
<style>
@container not (orientation) {
#target { --not-orientation:true; }
}
</style>
<script>
test(function(t) {
assert_equals(getComputedStyle(target).getPropertyValue('--not-orientation'), '');
}, 'not (orientation)');
</script>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
<meta name="assert" content="Changes to selection that result in no selection do not cause a crash.">
<style>
* {
content-visibility: auto;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.documentElement.convertPointFromNode({}, marquee, {})
textarea.setSelectionRange(0, 0, 'forward')
input.setAttribute('type', 'number')
document.documentElement.getBoundingClientRect()
})
</script>
</head>
<body>
<marquee id='marquee'></marquee>
<textarea id='textarea'></textarea>
<input id='input'></input>
</body>
</html>