mirror of
https://github.com/RGBCube/serenity
synced 2025-10-31 12:12:45 +00:00
2dad3dca9a
Note that only the first test actually functions currently. Single-number ratios instead get parsed as a `<number>`, and will do until the parser gets smarter. (The alternative, where all single-numbers get parsed as `<ratio>`, does make the tests succeed, but numbers are more common than ratios so I have given numbers preference for now.) Also simplified the styling and text a bit. Now, red = fail, green = success. No more "unstyled = fail" stuff.
193 lines
5.4 KiB
HTML
193 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Media queries</title>
|
|
<style>
|
|
p {
|
|
border: 1px solid black;
|
|
background-color: red;
|
|
}
|
|
|
|
.negative {
|
|
background-color: lime;
|
|
}
|
|
|
|
@media not all {
|
|
.negative {
|
|
background-color: red !important;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
.negative {
|
|
border: 5px solid magenta !important;
|
|
}
|
|
}
|
|
|
|
@media huh {
|
|
.negative {
|
|
color: yellow;
|
|
}
|
|
}
|
|
|
|
@media screen {
|
|
.screen {
|
|
background-color: lime;
|
|
}
|
|
}
|
|
|
|
@media only all and (min-width: 400px) {
|
|
.size-min {
|
|
background-color: lime;
|
|
}
|
|
}
|
|
|
|
@media only all and (width > 399px) {
|
|
.size-min-range {
|
|
background-color: lime;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1000px) {
|
|
.size-max {
|
|
background-color: lime;
|
|
}
|
|
}
|
|
|
|
@media (1001px > width) {
|
|
.size-max-range {
|
|
background-color: lime;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 400px) and (max-width: 1000px) {
|
|
.size-range {
|
|
background-color: lime;
|
|
}
|
|
}
|
|
|
|
@media (400px <= width <= 1000px) {
|
|
.size-range-syntax {
|
|
background-color: lime;
|
|
}
|
|
}
|
|
|
|
@media (color) {
|
|
.color {
|
|
background-color: lime;
|
|
}
|
|
}
|
|
|
|
@media (not (not (color))) {
|
|
.color-2 {
|
|
background-color: lime;
|
|
}
|
|
}
|
|
|
|
@media (color) or ((color) and ((color) or (color) or (not (color)))) {
|
|
.deeply-nested {
|
|
background-color: lime;
|
|
}
|
|
}
|
|
|
|
@media (width >= 80em) {
|
|
.em {
|
|
background-color: lime;
|
|
}
|
|
}
|
|
|
|
@media (width < 100vh) {
|
|
.viewport {
|
|
background-color: lime;
|
|
}
|
|
}
|
|
|
|
@media (aspect-ratio < 4 / 3) {
|
|
.aspect-ratio {
|
|
background-color: lime;
|
|
}
|
|
}
|
|
@media (aspect-ratio >= 2) {
|
|
.aspect-ratio-integer {
|
|
background-color: lime;
|
|
}
|
|
}
|
|
@media (aspect-ratio < 0.5) {
|
|
.aspect-ratio-decimal {
|
|
background-color: lime;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="interactive">
|
|
I don't know how wide the page is. <code>window.matchMedia("(min-width: 800px)")</code> is not working. :^(
|
|
</div>
|
|
<p class="negative">
|
|
This should be green if we are correctly ignoring <code>@media</code> rules that do not apply.
|
|
</p>
|
|
<p class="screen">
|
|
This should be green if we are correctly applying <code>@media screen</code>.
|
|
</p>
|
|
<p class="size-min">
|
|
This should be green if the window is at least 400px wide.
|
|
</p>
|
|
<p class="size-min-range">
|
|
This should be green if the window is at least 400px wide, and we understand range syntax.
|
|
</p>
|
|
<p class="size-max">
|
|
This should be green if the window is at most 1000px wide.
|
|
</p>
|
|
<p class="size-max-range">
|
|
This should be green if the window is at most 1000px wide, and we understand range syntax.
|
|
</p>
|
|
<p class="size-range">
|
|
This should be green if the window is between 400px and 1000px wide.
|
|
</p>
|
|
<p class="size-range-syntax">
|
|
This should be green if the window is between 400px and 1000px wide, and we understand range syntax.
|
|
</p>
|
|
<p class="color">
|
|
This should be green if we detected the <code>color</code> feature.
|
|
</p>
|
|
<p class="color-2">
|
|
This should be green if we detected the <code>color</code> feature and we understand <code>not</code>.
|
|
</p>
|
|
<p class="color-2">
|
|
This should be green 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 if the window is wider than 80em.
|
|
</p>
|
|
<p class="viewport">
|
|
This should be green if the window is taller than it is wide.
|
|
</p>
|
|
|
|
<h2>Ratio</h2>
|
|
<p class="aspect-ratio">
|
|
This should be green if the viewport aspect-ratio is less than 4/3. (So, less wide than a 4:3 ratio.)
|
|
</p>
|
|
<p class="aspect-ratio-integer">
|
|
This should be green if the viewport aspect-ratio is at least 2. (So, at least twice as wide as it is tall.)
|
|
</p>
|
|
<p class="aspect-ratio-decimal">
|
|
This should be green if the viewport aspect-ratio is less than 0.5. (So, at least twice as tall as it is wide.)
|
|
</p>
|
|
|
|
<script>
|
|
let mql = window.matchMedia("(min-width: 800px)");
|
|
function update_match_text(input) {
|
|
if (input.matches) {
|
|
document.getElementById("interactive").innerHTML = "<code>window.matchMedia(\"(min-width: 800px)\")</code> matches!";
|
|
} else {
|
|
document.getElementById("interactive").innerHTML = "<code>window.matchMedia(\"(min-width: 800px)\")</code> doesn't match!";
|
|
}
|
|
}
|
|
mql.addEventListener("change", update_match_text);
|
|
update_match_text(mql);
|
|
</script>
|
|
</body>
|
|
</html>
|