Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-conditional/container-queries/crashtests/focus-inside-content-visibility-crash.html - WPT Dashboard Interop Dashboard
<!doctype html>
<title>Container Queries Test: size change detected while focusing inside content-visibility: auto container</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<style>
.spacer { height: 3000px; }
.auto { content-visibility: auto; }
#container {
border: 1px solid black;
width: 100px;
height: 100px;
container-type: size;
}
#input {
width: 100%;
visibility: hidden;
}
@container (min-width: 150px) {
#input { visibility: visible; }
}
</style>
<div class=spacer></div>
<div class=auto>
<div id=container>
<input id=input type=text></input>
</div>
</div>
<script>
function focus() {
container.style.width = "200px";
input.focus();
}
onload = () => requestAnimationFrame(() => requestAnimationFrame(focus));
</script>