blob: ef74973addc2ffa660ee38b84686982cbb889a92 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!doctype html>
<title>CSS Container Queries Test: ::backdrop appearing conditionally on dialog container</title>
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
<link rel="match" href="top-layer-dialog-backdrop-ref.html">
<style>
html {
/* Prevent multiple layout passes due to scrollbars */
overflow: hidden;
background: red;
}
dialog {
container-type: size;
width: 100px;
height: 100px;
visibility: hidden;
}
dialog::backdrop {
visibility: visible;
display: none;
background-color: green;
}
@container (width > 1px) {
dialog::backdrop {
display: block;
}
}
</style>
<dialog id="dialog"></dialog>
<script>
dialog.showModal();
</script>
|
