haikuwebkit/LayoutTests/fast/media/mq-prefers-contrast-matchMe...

49 lines
1.3 KiB
HTML

<html>
<head>
<title>CSS4 media query test: prefers-contrast using matchMedia and addListener.</title>
<script>
function runTest()
{
if (!window.internals)
return;
var query = window.matchMedia("(prefers-contrast)");
query.addListener(() => {
document.getElementById("after").textContent = query.matches ? "true" : "false";
queryFired = true;
checkDone();
});
document.getElementById("before").textContent = query.matches ? "true" : "false";
window.internals.settings.forcedPrefersContrastAccessibilityValue = "on";
testRunner.runUIScript(`
(function() {
uiController.simulateAccessibilitySettingsChangeNotification(function() {
uiController.uiScriptComplete("Done");
});
})();`, function (result) {
scriptRan = true;
checkDone();
}
);
}
let queryFired = false;
let scriptRan = false;
function checkDone() {
if (queryFired && scriptRan)
testRunner.notifyDone();
}
window.addEventListener("load", runTest, false);
</script>
</head>
<body>
<p>Initial value of query.matches: <span id="before">unknown</span> - should be false</p>
<p>Updated value of query.matches: <span id="after">unknown</span> - should be true</p>
<p>Note the updated value will only be filled if the listener fires.</p>
</body>
</html>