RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 17:37:35 +00:00
Code Issues Activity Actions

Base: Add relative-length tests to media-query test page

Browse source
This commit is contained in:
Sam Atkins 2022-02-15 16:05:54 +00:00 • committed by Andreas Kling
parent 148efd7de7
commit 50cc008efd
1 changed files with 22 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

22
Base/res/html/misc/media-queries.html
View file

@ -96,6 +96,20 @@
border: 1px solid black;
}
}
@media (width >= 80em) {
.em {
background-color: lime;
border: 1px solid black;
}
}
@media (width < 100vh) {
.viewport {
background-color: lime;
border: 1px solid black;
}
}
</style>
</head>
<body>
@ -136,6 +150,14 @@
This should be green, with a black border and black text, if we detected the <code>color</code> feature and a deeply nested query: <code>(color) or ((color) and ((color) or (color) or (not (color))))</code>.
</p>
<h2>Relative lengths</h2>
<p class="em">
This should be green, with a black border and black text, if the window is wider than 80em.
</p>
<p class="viewport">
This should be green, with a black border and black text, if the window is taller than it is wide.
</p>
<script>
let mql = window.matchMedia("(min-width: 800px)");
function update_match_text(input) {