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

Base: Add window.matchMedia() test to media-queries.html

Browse source
This commit is contained in:
Sam Atkins 2021-10-05 15:43:50 +01:00 • committed by Andreas Kling
parent 050823bea7
commit 19fc225b45
1 changed files with 16 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -78,6 +78,9 @@
</style> </style>
</head> </head>
<body> <body>
<p id="interactive">
I don't know how wide the page is. <code>window.matchMedia("(min-width: 800px)")</code> is not working. :^(
</p>
<p class="negative"> <p class="negative">
This should be green, with a black border and black text, if we are correctly ignoring <code>@media</code> rules that do not apply. This should be green, with a black border and black text, if we are correctly ignoring <code>@media</code> rules that do not apply.
</p> </p>
@ -102,5 +105,18 @@
<p class="color-2"> <p class="color-2">
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>. 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> </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> </body>
</html> </html>