LadybirdBrowser/ladybird
1
1
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-12-26 20:55:35 +03:00
Code Issues Packages Projects Releases Wiki Activity

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
Notes: sideshowbarker 2024-07-18 03:01:03 +09:00 
Author: https://github.com/AtkinsSJ
Commit: https://github.com/SerenityOS/serenity/commit/19fc225b455
Pull-request: https://github.com/SerenityOS/serenity/pull/10367
1 changed files with 16 additions and 0 deletions
Show Stats 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>
</head>
<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">
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>
@ -102,5 +105,18 @@
<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>.
</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>