mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-09-02 15:46:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

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
commit 19fc225b45
Notes: sideshowbarker 2024-07-18 03:01:03 +09:00
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>