mirror of
https://github.com/RGBCube/serenity
synced 2025-07-25 23:37:35 +00:00
Base: Add relative-length tests to media-query test page
This commit is contained in:
parent
148efd7de7
commit
50cc008efd
1 changed files with 22 additions and 0 deletions
|
@ -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) {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue