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

Tests: Import a whole bunch of WPT mediaqueries tests

Browse source 
A lot of these are ref-tests, so I'm skipping the failing ones for now,
and will make as many pass as possible in subsequent commits.
This commit is contained in:
Sam Atkins 2025-05-19 15:57:09 +01:00
commit bb035fbfe0
Notes: github-actions[bot] 2025-05-23 09:19:59 +00:00
90 changed files with 2213 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

19
Tests/LibWeb/Ref/expected/wpt-import/css/mediaqueries/prefers-color-scheme-svg-as-image-ref.html Normal file
View file

@ -0,0 +1,19 @@
<!doctype html>
<head>
<title>prefers-color-scheme inside an SVG image</title>
<link rel="help" href="https://www.w3.org/TR/mediaqueries-5/#descdef-media-prefers-color-scheme">
</head>
<style>
div {
background-color: blue;
height: 32px;
width: 32px;
}
@media (prefers-color-scheme: dark) {
div {
background-color: purple;
}
}
</style>
<p>There should be a purple square below when the preferred color-scheme is dark, and blue otherwise.</p>
<div></div>

23
Tests/LibWeb/Ref/expected/wpt-import/css/mediaqueries/prefers-color-scheme-svg-image-normal-ref.html Normal file
View file

@ -0,0 +1,23 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS prefers-color-scheme affects SVG images - color-scheme 'normal', no &lt;meta> (reference)</title>
<style>
.background {
width: 32px;
height: 32px;
}
#light { display: revert }
#dark { display: none }
@media (prefers-color-scheme: dark) {
#light { display: none }
#dark { display: revert }
}
</style>
<div id="light">
<img src="resources/prefers-color-scheme-light.svg">
<div class="background" style="background-image: url(resources/prefers-color-scheme-light.svg)"></div>
</div>
<div id="dark">
<img src="resources/prefers-color-scheme-dark.svg">
<div class="background" style="background-image: url(resources/prefers-color-scheme-dark.svg)"></div>
</div>

14
Tests/LibWeb/Ref/expected/wpt-import/css/mediaqueries/prefers-color-scheme-svg-image-normal-with-meta-dark-ref.html Normal file
View file

@ -0,0 +1,14 @@
<!doctype html>
<meta charset="utf-8">
<meta name="color-scheme" content="dark only">
<title>CSS prefers-color-scheme affects SVG images - color-scheme 'normal', &lt;meta> 'dark only' (reference)</title>
<style>
.background {
width: 32px;
height: 32px;
}
</style>
<div>
<img src="resources/prefers-color-scheme-dark.svg">
<div class="background" style="background-image: url(resources/prefers-color-scheme-dark.svg)"></div>
</div>

13
Tests/LibWeb/Ref/expected/wpt-import/css/mediaqueries/prefers-color-scheme-svg-image-normal-with-meta-light-ref.html Normal file
View file

@ -0,0 +1,13 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS prefers-color-scheme affects SVG images - color-scheme 'normal', &lt;meta> 'light only' (reference)</title>
<style>
.background {
width: 32px;
height: 32px;
}
</style>
<div>
<img src="resources/prefers-color-scheme-light.svg">
<div class="background" style="background-image: url(resources/prefers-color-scheme-light.svg)"></div>
</div>

17
Tests/LibWeb/Ref/expected/wpt-import/css/mediaqueries/prefers-color-scheme-svg-image-ref.html Normal file
View file

@ -0,0 +1,17 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Test Reference</title>
<style>
.background {
width: 32px;
height: 32px;
}
</style>
<div style="color-scheme: light">
<img src="resources/prefers-color-scheme-light.svg">
<div class="background" style="background-image: url(resources/prefers-color-scheme-light.svg)"></div>
</div>
<div style="color-scheme: dark">
<img src="resources/prefers-color-scheme-dark.svg">
<div class="background" style="background-image: url(resources/prefers-color-scheme-dark.svg)"></div>
</div>

18
Tests/LibWeb/Ref/expected/wpt-import/css/mediaqueries/reference/ref-green-body.xht Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Chris Rebert" href="http://chrisrebert.com" />
<style type="text/css">
body {
background: green;
}
p {
font-size: 24px;
}
</style>
</head>
<body>
<p>This should have a green background.</p>
</body>
</html>

6
Tests/LibWeb/Ref/expected/wpt-import/css/mediaqueries/resources/prefers-color-scheme-dark.svg Normal file
View file

@ -0,0 +1,6 @@
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<style>
:root { color: purple }
</style>
<rect fill="currentColor" width="32" height="32"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 193 B

6
Tests/LibWeb/Ref/expected/wpt-import/css/mediaqueries/resources/prefers-color-scheme-light.svg Normal file
View file

@ -0,0 +1,6 @@
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<style>
:root { color: blue }
</style>
<rect fill="currentColor" width="32" height="32"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 191 B

4
Tests/LibWeb/Ref/expected/wpt-import/css/mediaqueries/scripting-print-noscript-ref.html Normal file
View file

@ -0,0 +1,4 @@
<!DOCTYPE html>
<noscript>
Script is disabled
</noscript>

4
Tests/LibWeb/Ref/expected/wpt-import/css/mediaqueries/scripting-print-script-ref.html Normal file
View file

@ -0,0 +1,4 @@
<!DOCTYPE html>
<div>
Script is enabled
</div>

9
Tests/LibWeb/Ref/expected/wpt-import/css/mediaqueries/viewport-script-dynamic-ref.html Normal file
View file

@ -0,0 +1,9 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Test Reference</title>
<link rel="author" href="mailto:emilio@crisal.io">
<meta name="viewport" content="width=300">
<style>
p { color: green; }
</style>
<p>Should be green</p>

26
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/aspect-ratio-001.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Media Queries Test: min-aspect-ratio - 59/79 ('aspect-ratio' property with prefix 'min')</title>
<link rel="author" title="Intel" href="http://www.intel.com/">
<link name="author" title="Xin Liu" href="mailto:xinx.liu@intel.com">
<link rel="help" title="4.6. aspect-ratio" href="http://www.w3.org/TR/css3-mediaqueries/#aspect-ratio">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="The 'aspect-ratio' property with prefix 'min' set '59/79' means that the minimum of ratio is '59/79',
only and only if the value of the 'width' to the value of the 'height' is greater than value of 'min-aspect-ratio', the style sheet will be applied.
The test runner will run this test in a 800/600 viewport (https://github.com/web-platform-tests/wpt/pull/12695).">
<style>
div {
background-color: red;
height: 100px;
width: 100px;
}
@media screen and (min-aspect-ratio: 59/79) {
div {
background-color: green;
}
}
</style>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>

24
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/aspect-ratio-002.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Media Queries Test: min-aspect-ratio - 0/0 ('aspect-ratio' property with prefix 'min')</title>
<link rel="author" title="Intel" href="http://www.intel.com/">
<link name="author" title="Xin Liu" href="mailto:xinx.liu@intel.com">
<link rel="help" title="4.6. aspect-ratio" href="http://www.w3.org/TR/css3-mediaqueries/#aspect-ratio">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="The 'aspect-ratio' property with prefix 'min' set '0/0' (which is converted into '1/0') is infinite that means the style sheet specified by 'min-aspect-ratio' will not be applied.">
<style>
div {
background-color: green;
height: 100px;
width: 100px;
}
@media screen and (min-aspect-ratio: 0/0) {
div {
background-color: red;
}
}
</style>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>

26
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/aspect-ratio-003.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Media Queries Test: max-aspect-ratio - 1280/720 ('aspect-ratio' property with prefix 'max')</title>
<link rel="author" title="Intel" href="http://www.intel.com/">
<link name="author" title="Xin Liu" href="mailto:xinx.liu@intel.com">
<link rel="help" title="4.6. aspect-ratio" href="http://www.w3.org/TR/css3-mediaqueries/#aspect-ratio">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="The 'aspect-ratio' property with prefix 'max' set '1280/720' means that the maximum of ratio is '1280/720',
only and only if the value of the 'width' to the value of the 'height' is lower than value of 'max-aspect-ratio', the style sheet will be applied.
The test runner will run this test in a 800/600 viewport (https://github.com/web-platform-tests/wpt/pull/12695)">
<style>
div {
background-color: red;
height: 100px;
width: 100px;
}
@media screen and (max-aspect-ratio: 1280/720) {
div {
background-color: green;
}
}
</style>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>

24
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/aspect-ratio-004.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Media Queries Test: max-aspect-ratio - 0/0 ('aspect-ratio' property with prefix 'max')</title>
<link rel="author" title="Intel" href="http://www.intel.com/">
<link name="author" title="Xin Liu" href="mailto:xinx.liu@intel.com">
<link rel="help" title="4.6. aspect-ratio" href="http://www.w3.org/TR/css3-mediaqueries/#aspect-ratio">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="The 'aspect-ratio' property with prefix 'max' set '0/0' (which is converted into '1/0') is infinite that means the style sheet specified by 'max-aspect-ratio' will be applied.">
<style>
div {
background-color: red;
height: 100px;
width: 100px;
}
@media screen and (max-aspect-ratio: 0/0) {
div {
background-color: green;
}
}
</style>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>

25
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/aspect-ratio-005.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Media Queries Test: max-aspect-ratio - 1280.1/720.01 ('aspect-ratio' property with prefix 'max')</title>
<link rel="author" title="Joel Olsson" href="mailto:joel_1st@hotmail.com">
<link rel="help" title="aspect-ratio" href="https://drafts.csswg.org/mediaqueries-4/#aspect-ratio">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="The 'aspect-ratio' property with prefix 'max' set 1280.1/720.01. Only and only if the value of the 'width'
to the value of the 'height' is lower than value of 'max-aspect-ratio', the style sheet will be applied.
The test runner will run this test in a 800/600 viewport (https://github.com/web-platform-tests/wpt/pull/12695)">
<style>
div {
background-color: red;
height: 100px;
width: 100px;
}
@media screen and (max-aspect-ratio: 1280.1/720.01) {
div {
background-color: green;
}
}
</style>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>

25
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/aspect-ratio-006.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Media Queries Test: min-aspect-ratio - 0.7 ('aspect-ratio' property with prefix 'min')</title>
<link rel="author" title="Joel Olsson" href="mailto:joel_1st@hotmail.com">
<link rel="help" title="aspect-ratio" href="https://drafts.csswg.org/mediaqueries-4/#aspect-ratio">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="The 'aspect-ratio' property with prefix 'min' set '0.7' means that the minimum of ratio is '0.7',
only and only if the value of the 'width' to the value of the 'height' is greater than value of 'min-aspect-ratio', the style sheet will be applied.
The test runner will run this test in a 800/600 viewport (https://github.com/web-platform-tests/wpt/pull/12695)">
<style>
div {
background-color: red;
height: 100px;
width: 100px;
}
@media screen and (min-aspect-ratio: 0.2) {
div {
background-color: green;
}
}
</style>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>

25
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/device-aspect-ratio-002.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Media Queries Test: max-device-aspect-ratio - 0/0 ('device-aspect-ratio' property with prefix 'max')</title>
<link rel="author" title="Intel" href="http://www.intel.com/">
<link rel="author" title="Xin Liu" href="mailto:xinx.liu@intel.com">
<link rel="help" title="4.7. device-aspect-ratio" href="http://www.w3.org/TR/css3-mediaqueries/#device-aspect-ratio">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="The 'device-aspect-ratio' property with prefix 'max' set '0/0' (which is converted into '1/0') is infinite that means the style sheet specified by 'max-device-aspect-ratio' will be applied.">
<style>
div {
background-color: red;
height: 100px;
width: 100px;
}
@media screen and (max-device-aspect-ratio: 0/0) {
div {
background-color: green;
}
}
</style>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>

24
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/device-aspect-ratio-003.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Media Queries Test: min-device-aspect-ratio - 1279/1024 ('device-aspect-ratio' property with prefix 'min')</title>
<link rel="author" title="Intel" href="http://www.intel.com/">
<link rel="author" title="Xin Liu" href="mailto:xinx.liu@intel.com">
<link rel="help" title="4.7. device-aspect-ratio" href="http://www.w3.org/TR/css3-mediaqueries/#device-aspect-ratio">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="The 'device-aspect-ratio' property with prefix 'min' set '1279/1024' means that the minimum of ratio is '1279/1024', only and only if the device value of 'width' to value of 'height' is greater than value of 'min-device-aspect-ratio', the style sheet will be applied.">
<style>
div {
background-color: red;
height: 100px;
width: 100px;
}
@media screen and (min-device-aspect-ratio: 1279/1024) {
div {
background-color: green;
}
}
</style>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>

24
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/device-aspect-ratio-004.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Media Queries Test: min-device-aspect-ratio - 0/0 ('device-aspect-ratio' property with prefix 'min')</title>
<link rel="author" title="Intel" href="http://www.intel.com/">
<link rel="author" title="Xin Liu" href="mailto:xinx.liu@intel.com">
<link rel="help" title="4.7. device-aspect-ratio" href="http://www.w3.org/TR/css3-mediaqueries/#device-aspect-ratio">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="The 'device-aspect-ratio' property with prefix 'min' set '0/0' (which is converted into '1/0') is infinite that means the style sheet specified by 'min-device-aspect-ratio' will not be applied.">
<style>
div {
background-color: green;
height: 100px;
width: 100px;
}
@media screen and (min-device-aspect-ratio: 0/0) {
div {
background-color: red;
}
}
</style>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>

24
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/device-aspect-ratio-006.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Media Queries Test: device-aspect-ratio - 0/0 (invalid)</title>
<link rel="author" title="Intel" href="http://www.intel.com/">
<link rel="author" title="Xin Liu" href="mailto:xinx.liu@intel.com">
<link rel="help" title="4.7. device-aspect-ratio" href="http://www.w3.org/TR/css3-mediaqueries/#device-aspect-ratio">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="The 'device-aspect-ratio' property set '0/0' is invalid that means the style sheet specified by 'device-aspect-ratio' will not be applied.">
<style>
div {
background-color: green;
height: 100px;
width: 100px;
}
@media screen and (device-aspect-ratio: 0/0) {
div {
background-color: red;
}
}
</style>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>

29
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/min-width-001.xht Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html SYSTEM "about:legacy-compat">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>CSS Media Queries Test: min-width length value approximation</title>
<link rel="author" title="Chris Rebert" href="http://chrisrebert.com" />
<link rel="help" href="http://www.w3.org/TR/css3-mediaqueries/#width" />
<link rel="help" href="http://www.w3.org/TR/mediaqueries-4/#width" />
<link rel="help" href="http://www.w3.org/TR/css3-values/#length-value" />
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="min-width length values that are too large to be supported must be clamped, rounded to infinity, or approximated, but not overflowed to a small or negative value." />
<style>
div {
width: 100px;
height: 100px;
background-color: green;
}
@media (min-width: 9999999999px) {
div {
background-color: red;
}
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>
</html>

42
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/min-width-tables-001.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html class="reftest-wait">
<head>
<meta charset="utf-8">
<title>CSS Test: Table Layout and Viewport Resizing</title>
<link rel="author" title="Chris Rebert" href="http://chrisrebert.com">
<link rel="help" href="https://drafts.csswg.org/css2/tables.html#auto-table-layout">
<link rel="help" href="https://drafts.csswg.org/mediaqueries-3/#width">
<link rel="help" href="https://drafts.csswg.org/mediaqueries-4/#width">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="dom">
<meta name="assert" content="Resizing a page which toggles the `display` of elements between `block` and `table-cell` based on the viewport width should not cause unnecessary wrapping of the table.">
<style>
iframe {
border: 0;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<iframe id="toy" width="100" height="300" src="support/min-width-tables-001-iframe.html"></iframe>
<!-- See min-width-tables-001-iframe.html for the derivation of the 100px value -->
<!-- We use 300px height so the incorrect stacking is visible in failure cases -->
<!-- This test is not about iframes specifically. It's just that resizing an iframe is more reliable than resizing the window, given browser security restrictions. -->
<script>
window.addEventListener('load', function () {
var PAINT_MS = 250;/* Assume the browser takes about this long to layout/paint this whole page */
var iframe = document.getElementById('toy');
window.setTimeout(function () {
iframe.width = 64;/* <100px ; toggle media query off */
window.setTimeout(function () {
iframe.width = 100;/* >=100px ; toggle media query on; back to initial width */
// Take the reftest screenshot after the last relayout/repaint finishes
window.setTimeout(function () {
document.documentElement.className = '';
}, PAINT_MS);
}, PAINT_MS);
}, PAINT_MS);
}, false);
</script>
</body>
</html>

25
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/mq-calc-sign-function-003.html Normal file
View file

@ -0,0 +1,25 @@
<!doctype html>
<title>Test: support for calc with sign() in Media Queries</title>
<link rel="author" title="Daniil Sakhapov" href="mailto:sakhapov@chromium.org">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<link rel="help" href="http://www.w3.org/TR/css3-mediaqueries/#units">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
:root {
font-size: 16px;
}
div {
width: 100px;
height: 100px;
background-color: red;
}
@media screen and (aspect-ratio > calc(sign(17px - 1rem) * 59) / calc(79 * sign(17px - 1rem))) {
div {
background-color: green;
}
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>

31
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/mq-deprecated-001.html Normal file
View file

@ -0,0 +1,31 @@
<!doctype html>
<title>Test: deprecated media types</title>
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/mediaqueries-4/#media-types">
<link rel="help" href="https://drafts.csswg.org/mediaqueries-4/#ref-for-media-type%E2%91%A0%E2%91%A6">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="deprecated media types must not match">
<style>
div {
width: 100px;
height: 100px;
background-color: green;
}
@media
tty,
tv,
projection,
handheld,
braille,
embossed,
aural,
speech
{
div { background-color: red; }
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.
<div></div>

23
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/mq-gamut-001.html Normal file
View file

@ -0,0 +1,23 @@
<!doctype html>
<title>Test: srgb color gamut</title>
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
<link rel="help" href="https://www.w3.org/TR/mediaqueries-4/#color-gamut">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="the srgb color-gamut is syntactically supported">
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
@media (color-gamut: srgb),
not (color-gamut: srgb)
{
div { background-color: green; }
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.
<div></div>

24
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/mq-gamut-002.html Normal file
View file

@ -0,0 +1,24 @@
<!doctype html>
<title>Test: p3 color gamut</title>
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
<link rel="help" href="https://www.w3.org/TR/mediaqueries-4/#color-gamut">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/276">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="the p3 color-gamut is syntactically supported">
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
@media (color-gamut: p3),
not (color-gamut: p3)
{
div { background-color: green; }
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.
<div></div>

25
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/mq-gamut-003.html Normal file
View file

@ -0,0 +1,25 @@
<!doctype html>
<title>Test: p3 color gamut (old name)</title>
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
<link rel="help" href="https://www.w3.org/TR/mediaqueries-4/#color-gamut">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4535">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/276">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="the dci-p3 (old name for p3) color-gamut is not syntactically supported">
<style>
div {
width: 100px;
height: 100px;
background-color: green;
}
@media (color-gamut: dci-p3),
not (color-gamut: dci-p3)
{
div { background-color: red; }
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.
<div></div>

24
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/mq-gamut-004.html Normal file
View file

@ -0,0 +1,24 @@
<!doctype html>
<title>Test: rec2020 color gamut</title>
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
<link rel="help" href="https://www.w3.org/TR/mediaqueries-4/#color-gamut">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4535">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="the rec2020 color-gamut is syntactically supported">
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
@media (color-gamut: rec2020),
not (color-gamut: rec2020)
{
div { background-color: green; }
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.
<div></div>

24
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/mq-gamut-005.html Normal file
View file

@ -0,0 +1,24 @@
<!doctype html>
<title>Test: rec2020 color gamut(old name)</title>
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
<link rel="help" href="https://www.w3.org/TR/mediaqueries-4/#color-gamut">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4535">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="the rec-2020 (old name for rec2020) color-gamut is not syntactically supported">
<style>
div {
width: 100px;
height: 100px;
background-color: green;
}
@media (color-gamut: rec-2020),
not (color-gamut: rec-2020)
{
div { background-color: red; }
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.
<div></div>

31
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/mq-invalid-media-type-002.html Normal file
View file

@ -0,0 +1,31 @@
<!doctype html>
<html>
<head>
<title>Test: syntax error handling in Media Queries</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/mediaqueries4/#error-handling">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="'or' is an invalid media type">
<meta name="flags" content="invalid">
<style>
div {
width: 100px;
height: 100px;
}
@media all {
div { background-color: green; }
}
@media not or {
div { background-color: red; }
}
@media or {
div { background-color: red; }
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>
</html>

31
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/mq-invalid-media-type-003.html Normal file
View file

@ -0,0 +1,31 @@
<!doctype html>
<html>
<head>
<title>Test: syntax error handling in Media Queries</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/mediaqueries4/#error-handling">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="'not' is an invalid media type">
<meta name="flags" content="invalid">
<style>
div {
width: 100px;
height: 100px;
}
@media all {
div { background-color: green; }
}
@media not not {
div { background-color: red; }
}
@media not {
div { background-color: red; }
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>
</html>

31
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/mq-invalid-media-type-004.html Normal file
View file

@ -0,0 +1,31 @@
<!doctype html>
<html>
<head>
<title>Test: syntax error handling in Media Queries</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/mediaqueries4/#error-handling">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="'only' is an invalid media type">
<meta name="flags" content="invalid">
<style>
div {
width: 100px;
height: 100px;
}
@media all {
div { background-color: green; }
}
@media not only {
div { background-color: red; }
}
@media only {
div { background-color: red; }
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>
</html>

31
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/mq-invalid-media-type-layer-001.html Normal file
View file

@ -0,0 +1,31 @@
<!doctype html>
<html>
<head>
<title>Test: syntax error handling in Media Queries</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/mediaqueries4/#error-handling">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="'layer' is an invalid media type">
<meta name="flags" content="invalid">
<style>
div {
width: 100px;
height: 100px;
}
@media all {
div { background-color: green; }
}
@media not layer {
div { background-color: red; }
}
@media layer {
div { background-color: red; }
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>
</html>

37
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/mq-negative-range-001.html Normal file
View file

@ -0,0 +1,37 @@
<!doctype html>
<title>Test: false in the negative range</title>
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/mediaqueries-4/#mq-syntax">
<link rel="help" href="https://www.w3.org/TR/mediaqueries-4/#false-in-the-negative-range">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/1454">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="features that are 'false in the negative range' should still parse with negative values">
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
@media
(min-width: -100px)
and
(min-height: -100px)
and
(min-color: -10)
and
(min-color-index: -10)
and
(min-monochrome: -10)
and
(min-device-width: -100px)
and
(min-device-height: -100px)
{
div { background-color: green; }
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.
<div></div>

37
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/mq-negative-range-002.html Normal file
View file

@ -0,0 +1,37 @@
<!doctype html>
<title>Test: false in the negative range</title>
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/mediaqueries-4/#mq-syntax">
<link rel="help" href="https://www.w3.org/TR/mediaqueries-4/#false-in-the-negative-range">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/1454">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="features that are 'false in the negative range' should still parse with negative values">
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
@media
(not (max-width: -100px))
and
(not (max-height: -100px))
and
(not (max-color: -10))
and
(not (max-color-index: -10))
and
(not (max-monochrome: -10))
and
(not (max-device-width: -100px))
and
(not (max-device-height: -100px))
{
div { background-color: green; }
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.
<div></div>

26
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/mq-range-001.html Normal file
View file

@ -0,0 +1,26 @@
<!doctype html>
<title>Test: invalid range syntax</title>
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/mediaqueries-4/#mq-syntax">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2790">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="range syntax without operator isn't valid syntax, unlike what some earlier iteration of the spec claimed">
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
/* if the syntax is accepted, whether (width 500px) is true or not doesn't matter,
as the second part of the "or" clause will be true,
but if the syntax is rejected, then the whole thing is ignored.
*/
@media (width 500px) or (min-width: 0) {
div { background-color: green; }
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.
<div></div>

41
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/negation-001.html Normal file
View file

@ -0,0 +1,41 @@
<!doctype html>
<html>
<head>
<title>Test: support for negated conditions in Media Queries</title>
<link rel="author" title="Romain Menke" href="https://github.com/romainmenke">
<link rel="help" href="https://www.w3.org/TR/mediaqueries-4/#media-conditions">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Test passes if negated conditions are correctly evaluated.">
<style>
div {
background-color: red;
height: 20px;
width: 100px;
}
@media not print {
.test1 { background: green; }
}
@media not (monochrome) {
.test2 { background: green; }
}
@media (not (monochrome)) {
.test3 { background: green; }
}
@media not (not (color)) {
.test4 { background: green; }
}
.test5 { background: green; }
@media not ((unknown) or (monochrome)) {
.test5 { background: red; }
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="test1"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
<div class="test5"></div>
</body>
</html>

44
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/negation-002.html Normal file
View file

@ -0,0 +1,44 @@
<!doctype html>
<html>
<head>
<title>Test: It is invalid to mix "and" and "or" and "not" at the same level of a media query.</title>
<link rel="author" title="Romain Menke" href="https://github.com/romainmenke">
<link rel="help" href="https://www.w3.org/TR/mediaqueries-4/#media-conditions">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Test passes if invalid combinations with 'not' do not apply.">
<style>
div {
background-color: red;
height: 25px;
width: 100px;
}
@media ((color) and (color)) {
/* Only green when the browser supports the general syntax */
div {
background-color: green;
}
}
@media (not (monochrome) and (color)) {
.test1 { background: red; }
}
@media (not (monochrome) or (color)) {
.test2 { background: red; }
}
@media ((color) and not (monochrome)) {
.test3 { background: red; }
}
@media ((color) or not (monochrome)) {
.test4 { background: red; }
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="test1"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
</body>
</html>

8
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/prefers-color-scheme-svg-as-image.html Normal file
View file

@ -0,0 +1,8 @@
<!doctype html>
<head>
<title>prefers-color-scheme inside an SVG image</title>
<link rel="help" href="https://www.w3.org/TR/mediaqueries-5/#descdef-media-prefers-color-scheme">
<link rel="match" href="../../../../expected/wpt-import/css/mediaqueries/prefers-color-scheme-svg-as-image-ref.html">
</head>
<p>There should be a purple square below when the preferred color-scheme is dark, and blue otherwise.</p>
<img src='resources/prefers-color-scheme.svg'>

17
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/prefers-color-scheme-svg-image-normal-with-meta-dark.html Normal file
View file

@ -0,0 +1,17 @@
<!doctype html>
<meta charset="utf-8">
<meta name="color-scheme" content="dark only">
<title>CSS prefers-color-scheme affects SVG images - color-scheme 'normal', &lt;meta> 'dark only'</title>
<link rel="help" href="https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme">
<link rel="match" href="../../../../expected/wpt-import/css/mediaqueries/prefers-color-scheme-svg-image-normal-with-meta-dark-ref.html">
<style>
.background {
width: 32px;
height: 32px;
background-image: url(resources/prefers-color-scheme.svg);
}
</style>
<div>
<img src="resources/prefers-color-scheme.svg">
<div class="background"></div>
</div>

17
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/prefers-color-scheme-svg-image-normal-with-meta-light.html Normal file
View file

@ -0,0 +1,17 @@
<!doctype html>
<meta charset="utf-8">
<meta name="color-scheme" content="light only">
<title>CSS prefers-color-scheme affects SVG images - color-scheme 'normal', &lt;meta> 'light only'</title>
<link rel="help" href="https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme">
<link rel="match" href="../../../../expected/wpt-import/css/mediaqueries/prefers-color-scheme-svg-image-normal-with-meta-light-ref.html">
<style>
.background {
width: 32px;
height: 32px;
background-image: url(resources/prefers-color-scheme.svg);
}
</style>
<div>
<img src="resources/prefers-color-scheme.svg">
<div class="background"></div>
</div>

16
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/prefers-color-scheme-svg-image-normal.html Normal file
View file

@ -0,0 +1,16 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS prefers-color-scheme affects SVG images - color-scheme 'normal', no &lt;meta></title>
<link rel="help" href="https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme">
<link rel="match" href="../../../../expected/wpt-import/css/mediaqueries/prefers-color-scheme-svg-image-normal-ref.html">
<style>
.background {
width: 32px;
height: 32px;
background-image: url(resources/prefers-color-scheme.svg);
}
</style>
<div>
<img src="resources/prefers-color-scheme.svg">
<div class="background"></div>
</div>

23
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/prefers-color-scheme-svg-image.html Normal file
View file

@ -0,0 +1,23 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS prefers-color-scheme affects SVG images</title>
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="author" href="https://mozilla.org" title="Mozilla">
<link rel="help" href="https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7213">
<link rel="match" href="../../../../expected/wpt-import/css/mediaqueries/prefers-color-scheme-svg-image-ref.html">
<style>
.background {
width: 32px;
height: 32px;
background-image: url(resources/prefers-color-scheme.svg);
}
</style>
<div style="color-scheme: light">
<img src="resources/prefers-color-scheme.svg">
<div class="background"></div>
</div>
<div style="color-scheme: dark">
<img src="resources/prefers-color-scheme.svg">
<div class="background"></div>
</div>

36
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/relative-units-001.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Test: Font-relative length units (rem) in width media queries</title>
<link rel="author" title="Chris Rebert" href="http://chrisrebert.com">
<link rel="help" href="https://www.w3.org/TR/css3-mediaqueries/#units">
<link rel="help" href="https://www.w3.org/TR/mediaqueries-4/#units">
<link rel="match" href="../../../../expected/wpt-import/css/mediaqueries/reference/ref-green-body.xht">
<meta name="assert" content="Font-relative length units (such as 'rem') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }">
<style>
:root {
font-size: 100000px;/* ~87ft */
}
body {
background: red;
}
p {
font-size: 24px;
}
</style>
</head>
<body>
<p>This should have a green background.</p>
<script>
document.body.offsetTop;
</script>
<style>
@media (min-width: 1rem) {
body {
background: green;
}
}
</style>
</body>
</html>

36
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/relative-units-002.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Test: Font-relative length units (em) in width media queries</title>
<link rel="author" title="Chris Rebert" href="http://chrisrebert.com">
<link rel="help" href="https://www.w3.org/TR/css3-mediaqueries/#units">
<link rel="help" href="https://www.w3.org/TR/mediaqueries-4/#units">
<link rel="match" href="../../../../expected/wpt-import/css/mediaqueries/reference/ref-green-body.xht">
<meta name="assert" content="Font-relative length units (such as 'em') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }">
<style>
:root {
font-size: 100000px;/* ~87ft */
}
body {
background: red;
}
p {
font-size: 24px;
}
</style>
</head>
<body>
<p>This should have a green background.</p>
<script>
document.body.offsetTop;
</script>
<style>
@media (min-width: 1em) {
body {
background: green;
}
}
</style>
</body>
</html>

36
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/relative-units-003.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Test: Font-relative length units (ex) in width media queries</title>
<link rel="author" title="Chris Rebert" href="http://chrisrebert.com">
<link rel="help" href="https://www.w3.org/TR/css3-mediaqueries/#units">
<link rel="help" href="https://www.w3.org/TR/mediaqueries-4/#units">
<link rel="match" href="../../../../expected/wpt-import/css/mediaqueries/reference/ref-green-body.xht">
<meta name="assert" content="Font-relative length units (such as 'ex') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }">
<style>
:root {
font-size: 100000px;/* ~87ft */
}
body {
background: red;
}
p {
font-size: 24px;
}
</style>
</head>
<body>
<p>This should have a green background.</p>
<script>
document.body.offsetTop;
</script>
<style>
@media (min-width: 1ex) {
body {
background: green;
}
}
</style>
</body>
</html>

36
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/relative-units-004.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Test: Font-relative length units (ch) in width media queries</title>
<link rel="author" title="Chris Rebert" href="http://chrisrebert.com">
<link rel="help" href="https://www.w3.org/TR/css3-mediaqueries/#units">
<link rel="help" href="https://www.w3.org/TR/mediaqueries-4/#units">
<link rel="match" href="../../../../expected/wpt-import/css/mediaqueries/reference/ref-green-body.xht">
<meta name="assert" content="Font-relative length units (such as 'ch') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }">
<style>
:root {
font-size: 100000px;/* ~87ft */
}
body {
background: red;
}
p {
font-size: 24px;
}
</style>
</head>
<body>
<p>This should have a green background.</p>
<script>
document.body.offsetTop;
</script>
<style>
@media (min-width: 1ch) {
body {
background: green;
}
}
</style>
</body>
</html>

9
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/resources/prefers-color-scheme.svg Normal file
View file

@ -0,0 +1,9 @@
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<style>
:root { color: blue }
@media (prefers-color-scheme: dark) {
:root { color: purple }
}
</style>
<rect fill="currentColor" width="32" height="32"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 269 B

13
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/scripting-print-noscript.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/mediaqueries/#scripting">
<link rel="match" href="../../../../expected/wpt-import/css/mediaqueries/scripting-print-noscript-ref.html">
<style>
@media (scripting) {
#noscript {
display: none;
}
}
</style>
<div id="noscript">
Script is disabled
</div>

17
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/scripting-print-script.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/mediaqueries/#scripting">
<link rel="match" href="../../../../expected/wpt-import/css/mediaqueries/scripting-print-script-ref.html">
<style>
#script {
display: none;
}
@media (scripting) {
#script {
display: block;
}
}
</style>
<div id="script">
Script is enabled
</div>

20
Tests/LibWeb/Ref/input/wpt-import/css/mediaqueries/viewport-script-dynamic.html Normal file
View file

@ -0,0 +1,20 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Test: Meta viewport after a script and stylesheets</title>
<link rel="author" href="mailto:emilio@crisal.io">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1424878">
<link rel="help" href="https://drafts.csswg.org/mediaqueries/#mf-dimensions">
<link rel="match" href="../../../../expected/wpt-import/css/mediaqueries/viewport-script-dynamic-ref.html">
<style>
p { color: green; }
/* Ensure that we initially match it, and stop matching it afterwards */
@media (min-width: 310px) {
p {
color: red;
}
}
</style>
<!-- The broken script below is the point of the test, see the bugzilla bug. -->
<script src="intentionally-broken-url.js"></script>
<meta name="viewport" content="width=300">
<p>Should be green</p>

32
Tests/LibWeb/TestConfig.ini
View file

@ -99,6 +99,38 @@ Ref/input/wpt-import/css/CSS2/floats/floats-wrap-bfc-001-right-overflow.xht
Ref/input/wpt-import/css/CSS2/floats/floats-placement-003.html Ref/input/wpt-import/css/CSS2/floats/floats-placement-003.html
Ref/input/wpt-import/css/CSS2/floats/floats-wrap-top-below-bfc-003l.xht Ref/input/wpt-import/css/CSS2/floats/floats-wrap-top-below-bfc-003l.xht
; WPT media queries ref-tests that currently fail
Ref/input/wpt-import/css/mediaqueries/aspect-ratio-001.html
Ref/input/wpt-import/css/mediaqueries/aspect-ratio-002.html
Ref/input/wpt-import/css/mediaqueries/aspect-ratio-003.html
Ref/input/wpt-import/css/mediaqueries/aspect-ratio-004.html
Ref/input/wpt-import/css/mediaqueries/aspect-ratio-005.html
Ref/input/wpt-import/css/mediaqueries/aspect-ratio-006.html
Ref/input/wpt-import/css/mediaqueries/device-aspect-ratio-002.html
Ref/input/wpt-import/css/mediaqueries/device-aspect-ratio-003.html
Ref/input/wpt-import/css/mediaqueries/device-aspect-ratio-004.html
Ref/input/wpt-import/css/mediaqueries/device-aspect-ratio-006.html
Ref/input/wpt-import/css/mediaqueries/min-width-001.xht
Ref/input/wpt-import/css/mediaqueries/min-width-tables-001.html
Ref/input/wpt-import/css/mediaqueries/mq-calc-sign-function-003.html
Ref/input/wpt-import/css/mediaqueries/mq-deprecated-001.html
Ref/input/wpt-import/css/mediaqueries/mq-gamut-001.html
Ref/input/wpt-import/css/mediaqueries/mq-gamut-002.html
Ref/input/wpt-import/css/mediaqueries/mq-gamut-003.html
Ref/input/wpt-import/css/mediaqueries/mq-gamut-004.html
Ref/input/wpt-import/css/mediaqueries/mq-gamut-005.html
Ref/input/wpt-import/css/mediaqueries/mq-invalid-media-type-002.html
Ref/input/wpt-import/css/mediaqueries/mq-invalid-media-type-003.html
Ref/input/wpt-import/css/mediaqueries/mq-invalid-media-type-004.html
Ref/input/wpt-import/css/mediaqueries/mq-invalid-media-type-layer-001.html
Ref/input/wpt-import/css/mediaqueries/mq-negative-range-001.html
Ref/input/wpt-import/css/mediaqueries/mq-negative-range-002.html
Ref/input/wpt-import/css/mediaqueries/mq-range-001.html
Ref/input/wpt-import/css/mediaqueries/negation-001.html
Ref/input/wpt-import/css/mediaqueries/negation-002.html
Ref/input/wpt-import/css/mediaqueries/prefers-color-scheme-svg-as-image.html
Ref/input/wpt-import/css/mediaqueries/viewport-script-dynamic.html
; WPT ref-tests that are flaky due to unknown reasons ; WPT ref-tests that are flaky due to unknown reasons
Ref/input/wpt-import/css/css-contain/contain-size-replaced-006.html Ref/input/wpt-import/css/css-contain/contain-size-replaced-006.html

6
Tests/LibWeb/Text/expected/wpt-import/css/mediaqueries/aspect-ratio-serialization.txt Normal file
View file

@ -0,0 +1,6 @@
Harness status: OK
Found 1 tests
1 Pass
Pass <ratio> serializes with spaces around the integer.

23
Tests/LibWeb/Text/expected/wpt-import/css/mediaqueries/display-mode.txt Normal file
View file

@ -0,0 +1,23 @@
Harness status: OK
Found 17 tests
11 Pass
6 Fail
Pass Should be known: '(display-mode)'
Pass Should be known: '(display-mode: standalone)'
Pass Should be known: '(display-mode: browser)'
Pass Should be known: '(display-mode: minimal-ui)'
Pass Should be known: '(display-mode: fullscreen)'
Fail Should be known: '(display-mode: picture-in-picture)'
Fail Should be parseable: '(display-mode: 0)'
Pass Should be unknown: '(display-mode: 0)'
Fail Should be parseable: '(display-mode: none)'
Pass Should be unknown: '(display-mode: none)'
Fail Should be parseable: '(display-mode: random)'
Pass Should be unknown: '(display-mode: random)'
Fail Should be parseable: '(display-mode: 10px)'
Pass Should be unknown: '(display-mode: 10px)'
Fail Should be parseable: '(display-mode: 1%)'
Pass Should be unknown: '(display-mode: 1%)'
Pass Check that display-mode evaluates to true in the boolean context

29
Tests/LibWeb/Text/expected/wpt-import/css/mediaqueries/dynamic-range.txt Normal file
View file

@ -0,0 +1,29 @@
Harness status: OK
Found 23 tests
15 Pass
8 Fail
Pass Should be known: '(dynamic-range: standard)'
Pass Should be known: '(dynamic-range: high)'
Pass Should be known: '(video-dynamic-range: standard)'
Pass Should be known: '(video-dynamic-range: high)'
Pass Should be known: '(dynamic-range)'
Pass Should be known: '(video-dynamic-range)'
Fail Should be parseable: '(dynamic-range: 0)'
Pass Should be unknown: '(dynamic-range: 0)'
Fail Should be parseable: '(dynamic-range: 10px)'
Pass Should be unknown: '(dynamic-range: 10px)'
Fail Should be parseable: '(dynamic-range: invalid)'
Pass Should be unknown: '(dynamic-range: invalid)'
Fail Should be parseable: '(video-dynamic-range: 0)'
Pass Should be unknown: '(video-dynamic-range: 0)'
Fail Should be parseable: '(video-dynamic-range: 10px)'
Pass Should be unknown: '(video-dynamic-range: 10px)'
Fail Should be parseable: '(video-dynamic-range: invalid)'
Pass Should be unknown: '(video-dynamic-range: invalid)'
Fail Check that dynamic-range evaluates to false in the boolean context
Fail Check that video-dynamic-range evaluates to false in the boolean context
Pass Check that dynamic-range always matches 'standard'
Pass Check that video-dynamic-range always matches 'standard'
Pass Check that video-dynamic-range is not 'invalid'

22
Tests/LibWeb/Text/expected/wpt-import/css/mediaqueries/forced-colors.txt Normal file
View file

@ -0,0 +1,22 @@
Harness status: OK
Found 16 tests
10 Pass
6 Fail
Pass Should be known: '(forced-colors)'
Pass Should be known: '(forced-colors: none)'
Pass Should be known: '(forced-colors: active)'
Fail Should be parseable: '(forced-colors: 0)'
Pass Should be unknown: '(forced-colors: 0)'
Fail Should be parseable: '(forced-colors: no-preference)'
Pass Should be unknown: '(forced-colors: no-preference)'
Fail Should be parseable: '(forced-colors: 10px)'
Pass Should be unknown: '(forced-colors: 10px)'
Fail Should be parseable: '(forced-colors: active 0)'
Pass Should be unknown: '(forced-colors: active 0)'
Fail Should be parseable: '(forced-colors: none active)'
Pass Should be unknown: '(forced-colors: none active)'
Fail Should be parseable: '(forced-colors: active/none)'
Pass Should be unknown: '(forced-colors: active/none)'
Pass Check that none evaluates to false in the boolean context

21
Tests/LibWeb/Text/expected/wpt-import/css/mediaqueries/inverted-colors.txt Normal file
View file

@ -0,0 +1,21 @@
Harness status: OK
Found 15 tests
10 Pass
5 Fail
Pass Should be known: '(inverted-colors)'
Pass Should be known: '(inverted-colors: none)'
Pass Should be known: '(inverted-colors: inverted)'
Fail Should be parseable: '(inverted-colors: 0)'
Pass Should be unknown: '(inverted-colors: 0)'
Fail Should be parseable: '(inverted-colors: no-preference)'
Pass Should be unknown: '(inverted-colors: no-preference)'
Fail Should be parseable: '(inverted-colors: 10px)'
Pass Should be unknown: '(inverted-colors: 10px)'
Fail Should be parseable: '(inverted-colors: none inverted)'
Pass Should be unknown: '(inverted-colors: none inverted)'
Fail Should be parseable: '(inverted-colors: none/inverted)'
Pass Should be unknown: '(inverted-colors: none/inverted)'
Pass Check that none evaluates to false in the boolean context
Pass Check that invalid evaluates to false

6
Tests/LibWeb/Text/expected/wpt-import/css/mediaqueries/mq-dynamic-empty-children.txt Normal file
View file

@ -0,0 +1,6 @@
Harness status: OK
Found 1 tests
1 Fail
Fail Dynamic evaluation of media queries works fine in presence of empty media rule

6
Tests/LibWeb/Text/expected/wpt-import/css/mediaqueries/mq-invalid-media-type-005.txt Normal file
View file

@ -0,0 +1,6 @@
Harness status: OK
Found 1 tests
1 Pass
Pass syntactical MQ keywords used as media types are a syntax error

6
Tests/LibWeb/Text/expected/wpt-import/css/mediaqueries/mq-invalid-media-type-layer-002.txt Normal file
View file

@ -0,0 +1,6 @@
Harness status: OK
Found 1 tests
1 Pass
Pass 'layer' used as media types is a syntax error

6
Tests/LibWeb/Text/expected/wpt-import/css/mediaqueries/mq-unknown-feature-custom-property.txt Normal file
View file

@ -0,0 +1,6 @@
Harness status: OK
Found 1 tests
1 Fail
Fail Serialization of <mf-name> : <mf-value> with custom property feature name and ident value

34
Tests/LibWeb/Text/expected/wpt-import/css/mediaqueries/overflow-media-features.txt Normal file
View file

@ -0,0 +1,34 @@
Harness status: OK
Found 28 tests
20 Pass
8 Fail
Pass Should be known: '(overflow-inline)'
Pass Should be known: '(overflow-inline: none)'
Pass Should be known: '(overflow-inline: scroll)'
Pass Should be parseable: 'overflow-inline'
Fail Should be unknown: 'overflow-inline'
Fail Should be parseable: '(overflow-inline: ?)'
Pass Should be unknown: '(overflow-inline: ?)'
Fail Should be parseable: '(overflow-inline: 10px)'
Pass Should be unknown: '(overflow-inline: 10px)'
Fail Should be parseable: '(overflow-inline: 0)'
Pass Should be unknown: '(overflow-inline: 0)'
Pass Should be known: '(overflow-block)'
Pass Should be known: '(overflow-block: none)'
Pass Should be known: '(overflow-block: scroll)'
Pass Should be known: '(overflow-block: paged)'
Pass Should be parseable: 'overflow-block'
Fail Should be unknown: 'overflow-block'
Fail Should be parseable: '(overflow-block: ?)'
Pass Should be unknown: '(overflow-block: ?)'
Fail Should be parseable: '(overflow-block: 10px)'
Pass Should be unknown: '(overflow-block: 10px)'
Fail Should be parseable: '(overflow-block: 0)'
Pass Should be unknown: '(overflow-block: 0)'
Pass Check that overflow-inline: scroll always matches non printing documents
Pass Check that overflow-block: scroll always matches non printing documents
Pass Check that overflow-inline: none doesn't match non printing documents
Pass Check that overflow-block: none doesn't match non printing documents
Pass Check that overflow-block: paged doesn't match non printing documents

24
Tests/LibWeb/Text/expected/wpt-import/css/mediaqueries/prefers-color-scheme.txt Normal file
View file

@ -0,0 +1,24 @@
Harness status: OK
Found 18 tests
11 Pass
7 Fail
Pass Should be known: '(prefers-color-scheme)'
Pass Should be known: '(prefers-color-scheme: light)'
Pass Should be known: '(prefers-color-scheme: dark)'
Fail Should be parseable: '(prefers-color-scheme: 0)'
Pass Should be unknown: '(prefers-color-scheme: 0)'
Fail Should be parseable: '(prefers-color-scheme: none)'
Pass Should be unknown: '(prefers-color-scheme: none)'
Fail Should be parseable: '(prefers-color-scheme: 10px)'
Pass Should be unknown: '(prefers-color-scheme: 10px)'
Fail Should be parseable: '(prefers-color-scheme: dark 0)'
Pass Should be unknown: '(prefers-color-scheme: dark 0)'
Fail Should be parseable: '(prefers-color-scheme: dark light)'
Pass Should be unknown: '(prefers-color-scheme: dark light)'
Fail Should be parseable: '(prefers-color-scheme: light/dark)'
Pass Should be unknown: '(prefers-color-scheme: light/dark)'
Fail Should be parseable: '(prefers-color-scheme: no-preference)'
Pass Should be unknown: '(prefers-color-scheme: no-preference)'
Pass Check that prefer-color-scheme evaluates to true in the boolean context

32
Tests/LibWeb/Text/expected/wpt-import/css/mediaqueries/prefers-contrast.txt Normal file
View file

@ -0,0 +1,32 @@
Harness status: OK
Found 26 tests
18 Pass
8 Fail
Pass Should be known: '(prefers-contrast)'
Pass Should be known: '(prefers-contrast: no-preference)'
Pass Should be known: '(prefers-contrast: more)'
Pass Should be known: '(prefers-contrast: less)'
Pass Should be known: '(prefers-contrast: custom)'
Fail Should be parseable: '(prefers-contrast: increase)'
Pass Should be unknown: '(prefers-contrast: increase)'
Fail Should be parseable: '(prefers-contrast: none)'
Pass Should be unknown: '(prefers-contrast: none)'
Fail Should be parseable: '(prefers-contrast: forced high)'
Pass Should be unknown: '(prefers-contrast: forced high)'
Fail Should be parseable: '(prefers-contrast: forced low)'
Pass Should be unknown: '(prefers-contrast: forced low)'
Fail Should be parseable: '(prefers-contrast > increase)'
Pass Should be unknown: '(prefers-contrast > increase)'
Pass Should be parseable: '(prefers-increased-contrast)'
Pass Should be unknown: '(prefers-increased-contrast)'
Pass Should be parseable: '(prefers-decreased-contrast)'
Pass Should be unknown: '(prefers-decreased-contrast)'
Fail Should be parseable: '(prefers-contrast: high)'
Pass Should be unknown: '(prefers-contrast: high)'
Fail Should be parseable: '(prefers-contrast: low)'
Pass Should be unknown: '(prefers-contrast: low)'
Fail Should be parseable: '(prefers-contrast: forced)'
Pass Should be unknown: '(prefers-contrast: forced)'
Pass Check boolean context evaluation.

23
Tests/LibWeb/Text/expected/wpt-import/css/mediaqueries/prefers-reduced-data.txt Normal file
View file

@ -0,0 +1,23 @@
Harness status: OK
Found 17 tests
11 Pass
6 Fail
Pass Should be known: '(prefers-reduced-data)'
Pass Should be known: '(prefers-reduced-data: no-preference)'
Pass Should be known: '(prefers-reduced-data: reduce)'
Fail Should be parseable: '(prefers-reduced-data: 0)'
Pass Should be unknown: '(prefers-reduced-data: 0)'
Fail Should be parseable: '(prefers-reduced-data: none)'
Pass Should be unknown: '(prefers-reduced-data: none)'
Fail Should be parseable: '(prefers-reduced-data: 10px)'
Pass Should be unknown: '(prefers-reduced-data: 10px)'
Fail Should be parseable: '(prefers-reduced-data: no-preference reduce)'
Pass Should be unknown: '(prefers-reduced-data: no-preference reduce)'
Fail Should be parseable: '(prefers-reduced-data: reduced)'
Pass Should be unknown: '(prefers-reduced-data: reduced)'
Fail Should be parseable: '(prefers-reduced-data: no-preference/reduce)'
Pass Should be unknown: '(prefers-reduced-data: no-preference/reduce)'
Pass Check that no-preference evaluates to false in the boolean context
Pass Check that invalid evaluates to false

22
Tests/LibWeb/Text/expected/wpt-import/css/mediaqueries/prefers-reduced-motion.txt Normal file
View file

@ -0,0 +1,22 @@
Harness status: OK
Found 16 tests
10 Pass
6 Fail
Pass Should be known: '(prefers-reduced-motion)'
Pass Should be known: '(prefers-reduced-motion: no-preference)'
Pass Should be known: '(prefers-reduced-motion: reduce)'
Fail Should be parseable: '(prefers-reduced-motion: 0)'
Pass Should be unknown: '(prefers-reduced-motion: 0)'
Fail Should be parseable: '(prefers-reduced-motion: none)'
Pass Should be unknown: '(prefers-reduced-motion: none)'
Fail Should be parseable: '(prefers-reduced-motion: 10px)'
Pass Should be unknown: '(prefers-reduced-motion: 10px)'
Fail Should be parseable: '(prefers-reduced-motion: no-preference reduce)'
Pass Should be unknown: '(prefers-reduced-motion: no-preference reduce)'
Fail Should be parseable: '(prefers-reduced-motion: reduced)'
Pass Should be unknown: '(prefers-reduced-motion: reduced)'
Fail Should be parseable: '(prefers-reduced-motion: no-preference/reduce)'
Pass Should be unknown: '(prefers-reduced-motion: no-preference/reduce)'
Pass Check that no-preference evaluates to false in the boolean context

23
Tests/LibWeb/Text/expected/wpt-import/css/mediaqueries/prefers-reduced-transparency.txt Normal file
View file

@ -0,0 +1,23 @@
Harness status: OK
Found 17 tests
11 Pass
6 Fail
Pass Should be known: '(prefers-reduced-transparency)'
Pass Should be known: '(prefers-reduced-transparency: no-preference)'
Pass Should be known: '(prefers-reduced-transparency: reduce)'
Fail Should be parseable: '(prefers-reduced-transparency: 0)'
Pass Should be unknown: '(prefers-reduced-transparency: 0)'
Fail Should be parseable: '(prefers-reduced-transparency: none)'
Pass Should be unknown: '(prefers-reduced-transparency: none)'
Fail Should be parseable: '(prefers-reduced-transparency: 10px)'
Pass Should be unknown: '(prefers-reduced-transparency: 10px)'
Fail Should be parseable: '(prefers-reduced-transparency: no-preference reduce)'
Pass Should be unknown: '(prefers-reduced-transparency: no-preference reduce)'
Fail Should be parseable: '(prefers-reduced-transparency: reduced)'
Pass Should be unknown: '(prefers-reduced-transparency: reduced)'
Fail Should be parseable: '(prefers-reduced-transparency: no-preference/reduce)'
Pass Should be unknown: '(prefers-reduced-transparency: no-preference/reduce)'
Pass Check that no-preference evaluates to false in the boolean context
Pass Check that invalid evaluates to false

9
Tests/LibWeb/Text/expected/wpt-import/css/mediaqueries/relative-units-005.txt Normal file
View file

@ -0,0 +1,9 @@
Harness status: OK
Found 3 tests
2 Pass
1 Fail
Pass ex unit in media queries should match initial font
Pass ch unit in media queries should match initial font
Fail ic unit in media queries should match initial font

18
Tests/LibWeb/Text/expected/wpt-import/css/mediaqueries/scripting.txt Normal file
View file

@ -0,0 +1,18 @@
Harness status: OK
Found 12 tests
9 Pass
3 Fail
Pass Should be known: '(scripting)'
Pass Should be known: '(scripting: enabled)'
Pass Should be known: '(scripting: initial-only)'
Pass Should be known: '(scripting: none)'
Fail Should be parseable: '(scripting: 0)'
Pass Should be unknown: '(scripting: 0)'
Fail Should be parseable: '(scripting: 10px)'
Pass Should be unknown: '(scripting: 10px)'
Fail Should be parseable: '(scripting: invalid)'
Pass Should be unknown: '(scripting: invalid)'
Pass Check that scripting currently matches 'enabled'
Pass Check that scripting currently evaluates to true in the boolean context

20
Tests/LibWeb/Text/expected/wpt-import/css/mediaqueries/update-media-feature.txt Normal file
View file

@ -0,0 +1,20 @@
Harness status: OK
Found 14 tests
11 Pass
3 Fail
Pass Should be known: '(update)'
Pass Should be known: '(update: none)'
Pass Should be known: '(update: slow)'
Pass Should be known: '(update: fast)'
Fail Should be parseable: '(update: ?)'
Pass Should be unknown: '(update: ?)'
Fail Should be parseable: '(update: 10px)'
Pass Should be unknown: '(update: 10px)'
Fail Should be parseable: '(update: 0)'
Pass Should be unknown: '(update: 0)'
Pass Check that update: fast always matches fast displays
Pass Check that update: slow doesn't match fast displays
Pass Check that update: none doesn't match fast displays
Pass Check that update always matches non printing documents

13
Tests/LibWeb/Text/input/wpt-import/css/mediaqueries/aspect-ratio-serialization.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Media Queries Test: 'aspect-ratio' serializes with spaces around ' / '.</title>
<link rel="help" href="https://drafts.csswg.org/cssom/#serialize-a-css-component-value">
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="author" href="https://mozilla.org" title="Mozilla">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
test(function() {
assert_equals(matchMedia("(aspect-ratio: 1/3)").media, "(aspect-ratio: 1 / 3)");
}, "<ratio> serializes with spaces around the integer.");
</script>

24
Tests/LibWeb/Text/input/wpt-import/css/mediaqueries/display-mode.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<link rel="help" href="http://www.w3.org/TR/mediaqueries-5/#display-mode" />
<script type="text/javascript" src="../../resources/testharness.js"></script>
<script type="text/javascript" src="../../resources/testharnessreport.js"></script>
<script type="text/javascript" src="resources/matchmedia-utils.js"></script>
<script>
query_should_be_known("(display-mode)");
query_should_be_known("(display-mode: standalone)");
query_should_be_known("(display-mode: browser)");
query_should_be_known("(display-mode: minimal-ui)");
query_should_be_known("(display-mode: fullscreen)");
query_should_be_known("(display-mode: picture-in-picture)");
query_should_be_unknown("(display-mode: 0)");
query_should_be_unknown("(display-mode: none)");
query_should_be_unknown("(display-mode: random)");
query_should_be_unknown("(display-mode: 10px)");
query_should_be_unknown("(display-mode: 1%)");
test(() => {
let booleanContext = window.matchMedia("(display-mode)");
assert_true(booleanContext.matches);
}, "Check that display-mode evaluates to true in the boolean context");
</script>

47
Tests/LibWeb/Text/input/wpt-import/css/mediaqueries/dynamic-range.html Normal file
View file

@ -0,0 +1,47 @@
<!DOCTYPE html>
<link rel="help" title="6.5 dynamic-range" href="https://www.w3.org/TR/mediaqueries-5/#dynamic-range">
<script type="text/javascript" src="../../resources/testharness.js"></script>
<script type="text/javascript" src="../../resources/testharnessreport.js"></script>
<script type="text/javascript" src="resources/matchmedia-utils.js"></script>
<script>
query_should_be_known("(dynamic-range: standard)");
query_should_be_known("(dynamic-range: high)");
query_should_be_known("(video-dynamic-range: standard)");
query_should_be_known("(video-dynamic-range: high)");
query_should_be_known("(dynamic-range)");
query_should_be_known("(video-dynamic-range)");
query_should_be_unknown("(dynamic-range: 0)");
query_should_be_unknown("(dynamic-range: 10px)");
query_should_be_unknown("(dynamic-range: invalid)");
query_should_be_unknown("(video-dynamic-range: 0)");
query_should_be_unknown("(video-dynamic-range: 10px)");
query_should_be_unknown("(video-dynamic-range: invalid)");
test(() => {
let match_boolean = window.matchMedia("(dynamic-range)");
assert_false(match_boolean.matches);
}, "Check that dynamic-range evaluates to false in the boolean context");
test(() => {
let match_boolean = window.matchMedia("(video-dynamic-range)");
assert_false(match_boolean.matches);
}, "Check that video-dynamic-range evaluates to false in the boolean context");
test(() => {
let match_standard = window.matchMedia("(dynamic-range: standard)");
assert_true(match_standard.matches);
}, "Check that dynamic-range always matches 'standard'");
test(() => {
let match_standard = window.matchMedia("(video-dynamic-range: standard)");
assert_true(match_standard.matches);
}, "Check that video-dynamic-range always matches 'standard'");
test(() => {
let match_invalid = window.matchMedia("(video-dynamic-range: invalid)");
assert_false(match_invalid.matches);
}, "Check that video-dynamic-range is not 'invalid'");
</script>

24
Tests/LibWeb/Text/input/wpt-import/css/mediaqueries/forced-colors.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/mediaqueries-5/#forced-colors" />
<script type="text/javascript" src="../../resources/testharness.js"></script>
<script type="text/javascript" src="../../resources/testharnessreport.js"></script>
<script type="text/javascript" src="resources/matchmedia-utils.js"></script>
<script>
query_should_be_known("(forced-colors)");
query_should_be_known("(forced-colors: none)");
query_should_be_known("(forced-colors: active)");
query_should_be_unknown("(forced-colors: 0)");
query_should_be_unknown("(forced-colors: no-preference)");
query_should_be_unknown("(forced-colors: 10px)");
query_should_be_unknown("(forced-colors: active 0)");
query_should_be_unknown("(forced-colors: none active)");
query_should_be_unknown("(forced-colors: active/none)");
test(() => {
let booleanContext = window.matchMedia("(forced-colors)");
let none = window.matchMedia("(forced-colors: none)");
assert_equals(booleanContext.matches, !none.matches);
}, "Check that none evaluates to false in the boolean context");
</script>

29
Tests/LibWeb/Text/input/wpt-import/css/mediaqueries/inverted-colors.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/mediaqueries-5/#inverted" />
<script type="text/javascript" src="../../resources/testharness.js"></script>
<script type="text/javascript" src="../../resources/testharnessreport.js"></script>
<script type="text/javascript" src="resources/matchmedia-utils.js"></script>
<script>
query_should_be_known("(inverted-colors)");
query_should_be_known("(inverted-colors: none)");
query_should_be_known("(inverted-colors: inverted)");
query_should_be_unknown("(inverted-colors: 0)");
query_should_be_unknown("(inverted-colors: no-preference)");
query_should_be_unknown("(inverted-colors: 10px)");
query_should_be_unknown("(inverted-colors: none inverted)");
query_should_be_unknown("(inverted-colors: none/inverted)");
test(() => {
// https://drafts.csswg.org/mediaqueries-5/#boolean-context
let booleanContext = window.matchMedia("(inverted-colors)");
let none = window.matchMedia("(inverted-colors: none)");
assert_equals(booleanContext.matches, !none.matches);
}, "Check that none evaluates to false in the boolean context");
test(() => {
let invalid = window.matchMedia("(inverted-colors: 10px)");
assert_equals(invalid.matches, false);
}, "Check that invalid evaluates to false");
</script>

40
Tests/LibWeb/Text/input/wpt-import/css/mediaqueries/mq-dynamic-empty-children.html Normal file
View file

@ -0,0 +1,40 @@
<!doctype html>
<title>Dynamic evaluation of media queries works fine in presence of empty media rule</title>
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="author" href="https://mozilla.org" title="Mozilla">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1669600">
<link rel="help" href="https://drafts.csswg.org/mediaqueries-4/">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<iframe width=500 height=300 frameborder=0></iframe>
<script>
let iframe = document.querySelector("iframe");
promise_test(async function (t) {
await new Promise(resolve => {
window.addEventListener("load", resolve);
});
let frameLoaded = new Promise(resolve => {
iframe.addEventListener("load", resolve);
});
iframe.srcdoc = `
<style>
:root { background-color: red; }
/* This one should never apply */
@media (min-width: 1500px) {}
/* This one should change and start matching */
@media (max-width: 400px) {
:root { background-color: lime; }
}
</style>
`;
await frameLoaded;
function getColor() {
return iframe.contentWindow.getComputedStyle(iframe.contentDocument.documentElement).backgroundColor;
}
assert_equals(getColor(), "rgb(255, 0, 0)", "Should start red");
iframe.width = 400;
assert_equals(getColor(), "rgb(0, 255, 0)", "Should turn green");
});
</script>

45
Tests/LibWeb/Text/input/wpt-import/css/mediaqueries/mq-invalid-media-type-005.html Normal file
View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Mediaqueries-3 test: parsing hanging-punctuation with invalid values</title>
<link rel="help" href="https://www.w3.org/TR/css3-mediaqueries/#error-handling">
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
<meta name="flags" content="invalid">
<meta name="assert" content="media types ''not'', ''and'', ''only'' and ''or'' must not be treated as unknown media types, but rather trigger the malformed query clause.">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
@media not and {
div { background-color: red; }
}
@media and {
div { background-color: red; }
}
@media not or {
div { background-color: red; }
}
@media or {
div { background-color: red; }
}
@media not not {
div { background-color: red; }
}
@media not {
div { background-color: red; }
}
@media not only {
div { background-color: red; }
}
@media only {
div { background-color: red; }
}
</style>
<script>
var queries = document.styleSheets[0].cssRules;
test(() => {
for (const query of queries) {
assert_equals(query.conditionText, "not all");
}
assert_equals(queries.length, 8, "invalid rules must be treated as 'not all', not dropped");
}, "syntactical MQ keywords used as media types are a syntax error");
</script>

27
Tests/LibWeb/Text/input/wpt-import/css/mediaqueries/mq-invalid-media-type-layer-002.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Mediaqueries-3 test: parsing hanging-punctuation with invalid values</title>
<link rel="help" href="https://www.w3.org/TR/css3-mediaqueries/#error-handling">
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
<meta name="flags" content="invalid">
<meta name="assert" content="'layer' must not be treated as an unknown media type, but rather trigger the malformed query clause.">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
@media not layer {
body { background-color: red; }
}
@media layer {
body { background-color: red; }
}
</style>
<script>
var queries = document.styleSheets[0].cssRules;
test(() => {
for (const query of queries) {
assert_equals(query.conditionText, "not all");
}
assert_equals(queries.length, 2, "invalid rules must be treated as 'not all', not dropped");
}, "'layer' used as media types is a syntax error");
</script>

13
Tests/LibWeb/Text/input/wpt-import/css/mediaqueries/mq-unknown-feature-custom-property.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<title>Media Queries Test: Custom property name as media feature name</title>
<link rel="help" href="https://drafts.csswg.org/mediaqueries-4/#mq-syntax">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style id="media_sheet">
@media (--FOO: bar) {}
</style>
<script>
test(() => {
assert_equals(media_sheet.sheet.cssRules[0].conditionText, "(--FOO: bar)")
}, "Serialization of <mf-name> : <mf-value> with custom property feature name and ident value");
</script>

53
Tests/LibWeb/Text/input/wpt-import/css/mediaqueries/overflow-media-features.html Normal file
View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<title>CSS Media Queries Test: overflow media features</title>
<link rel="help" href="https://drafts.csswg.org/mediaqueries-4/#descdef-media-update">
<meta assert="The test is supposed to be run on computer displays as it will no match otherwise">
<script type="text/javascript" src="../../resources/testharness.js"></script>
<script type="text/javascript" src="../../resources/testharnessreport.js"></script>
<script type="text/javascript" src="resources/matchmedia-utils.js"></script>
<script>
query_should_be_known("(overflow-inline)");
query_should_be_known("(overflow-inline: none)");
query_should_be_known("(overflow-inline: scroll)");
query_should_be_unknown("overflow-inline");
query_should_be_unknown("(overflow-inline: ?)");
query_should_be_unknown("(overflow-inline: 10px)");
query_should_be_unknown("(overflow-inline: 0)");
query_should_be_known("(overflow-block)");
query_should_be_known("(overflow-block: none)");
query_should_be_known("(overflow-block: scroll)");
query_should_be_known("(overflow-block: paged)");
query_should_be_unknown("overflow-block");
query_should_be_unknown("(overflow-block: ?)");
query_should_be_unknown("(overflow-block: 10px)");
query_should_be_unknown("(overflow-block: 0)");
test(() => {
let match_standard = window.matchMedia("(overflow-inline: scroll)");
assert_true(match_standard.matches);
}, "Check that overflow-inline: scroll always matches non printing documents");
test(() => {
let match_standard = window.matchMedia("(overflow-block: scroll)");
assert_true(match_standard.matches);
}, "Check that overflow-block: scroll always matches non printing documents");
test(() => {
let match_standard = window.matchMedia("(overflow-inline: none)");
assert_false(match_standard.matches);
}, "Check that overflow-inline: none doesn't match non printing documents");
test(() => {
let match_standard = window.matchMedia("(overflow-block: none)");
assert_false(match_standard.matches);
}, "Check that overflow-block: none doesn't match non printing documents");
test(() => {
let match_standard = window.matchMedia("(overflow-block: paged)");
assert_false(match_standard.matches);
}, "Check that overflow-block: paged doesn't match non printing documents");
</script>

24
Tests/LibWeb/Text/input/wpt-import/css/mediaqueries/prefers-color-scheme.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme" />
<script type="text/javascript" src="../../resources/testharness.js"></script>
<script type="text/javascript" src="../../resources/testharnessreport.js"></script>
<script type="text/javascript" src="resources/matchmedia-utils.js"></script>
<script>
query_should_be_known("(prefers-color-scheme)");
query_should_be_known("(prefers-color-scheme: light)");
query_should_be_known("(prefers-color-scheme: dark)");
query_should_be_unknown("(prefers-color-scheme: 0)");
query_should_be_unknown("(prefers-color-scheme: none)");
query_should_be_unknown("(prefers-color-scheme: 10px)");
query_should_be_unknown("(prefers-color-scheme: dark 0)");
query_should_be_unknown("(prefers-color-scheme: dark light)");
query_should_be_unknown("(prefers-color-scheme: light/dark)");
query_should_be_unknown("(prefers-color-scheme: no-preference)");
test(() => {
let booleanContext = window.matchMedia("(prefers-color-scheme)");
assert_true(booleanContext.matches);
}, "Check that prefer-color-scheme evaluates to true in the boolean context");
</script>

36
Tests/LibWeb/Text/input/wpt-import/css/mediaqueries/prefers-contrast.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/mediaqueries-5/#prefers-contrast" />
<script type="text/javascript" src="../../resources/testharness.js"></script>
<script type="text/javascript" src="../../resources/testharnessreport.js"></script>
<script type="text/javascript" src="resources/matchmedia-utils.js"></script>
<script>
query_should_be_known("(prefers-contrast)");
query_should_be_known("(prefers-contrast: no-preference)");
query_should_be_known("(prefers-contrast: more)");
query_should_be_known("(prefers-contrast: less)");
query_should_be_known("(prefers-contrast: custom)");
query_should_be_unknown("(prefers-contrast: increase)");
query_should_be_unknown("(prefers-contrast: none)");
query_should_be_unknown("(prefers-contrast: forced high)");
query_should_be_unknown("(prefers-contrast: forced low)");
query_should_be_unknown("(prefers-contrast > increase)");
query_should_be_unknown("(prefers-increased-contrast)");
query_should_be_unknown("(prefers-decreased-contrast)");
query_should_be_unknown("(prefers-contrast: high)");
query_should_be_unknown("(prefers-contrast: low)");
query_should_be_unknown("(prefers-contrast: forced)");
test(() => {
// no-preference is the default and all other values evaluate to
// true in the boolean context. If no-preference matches, then
// boolean context should be false. If no-preference does not match
// then boolean context should be true. Therefore, these two values
// should always be each others inverse irrespective of OS level
// settings.
let booleanContext = window.matchMedia("(prefers-contrast)");
let noPref = window.matchMedia("(prefers-contrast: no-preference)");
assert_equals(noPref.matches, !booleanContext.matches);
}, "Check boolean context evaluation.");
</script>

30
Tests/LibWeb/Text/input/wpt-import/css/mediaqueries/prefers-reduced-data.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-data" />
<script type="text/javascript" src="../../resources/testharness.js"></script>
<script type="text/javascript" src="../../resources/testharnessreport.js"></script>
<script type="text/javascript" src="resources/matchmedia-utils.js"></script>
<script>
query_should_be_known("(prefers-reduced-data)");
query_should_be_known("(prefers-reduced-data: no-preference)");
query_should_be_known("(prefers-reduced-data: reduce)");
query_should_be_unknown("(prefers-reduced-data: 0)");
query_should_be_unknown("(prefers-reduced-data: none)");
query_should_be_unknown("(prefers-reduced-data: 10px)");
query_should_be_unknown("(prefers-reduced-data: no-preference reduce)");
query_should_be_unknown("(prefers-reduced-data: reduced)");
query_should_be_unknown("(prefers-reduced-data: no-preference/reduce)");
test(() => {
// https://drafts.csswg.org/mediaqueries-5/#boolean-context
let booleanContext = window.matchMedia("(prefers-reduced-data)");
let noPreference = window.matchMedia("(prefers-reduced-data: no-preference)");
assert_equals(booleanContext.matches, !noPreference.matches);
}, "Check that no-preference evaluates to false in the boolean context");
test(() => {
let invalid = window.matchMedia("(prefers-reduced-data: 10px)");
assert_equals(invalid.matches, false);
}, "Check that invalid evaluates to false");
</script>

27
Tests/LibWeb/Text/input/wpt-import/css/mediaqueries/prefers-reduced-motion.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion" />
<script type="text/javascript" src="../../resources/testharness.js"></script>
<script type="text/javascript" src="../../resources/testharnessreport.js"></script>
<script type="text/javascript" src="resources/matchmedia-utils.js"></script>
<script>
query_should_be_known("(prefers-reduced-motion)");
query_should_be_known("(prefers-reduced-motion: no-preference)");
query_should_be_known("(prefers-reduced-motion: reduce)");
query_should_be_unknown("(prefers-reduced-motion: 0)");
query_should_be_unknown("(prefers-reduced-motion: none)");
query_should_be_unknown("(prefers-reduced-motion: 10px)");
query_should_be_unknown("(prefers-reduced-motion: no-preference reduce)");
query_should_be_unknown("(prefers-reduced-motion: reduced)");
query_should_be_unknown("(prefers-reduced-motion: no-preference/reduce)");
test(() => {
// What this is saying is that 'no-preference' is not the default, so
// irregardless of the current OS settings, (prefers-reduced-motion).matches
// should not be equivalent to (prefers-reduced-motion: no-preference).matches.
let booleanContext = window.matchMedia("(prefers-reduced-motion)");
let noPreference = window.matchMedia("(prefers-reduced-motion: no-preference)");
assert_equals(booleanContext.matches, !noPreference.matches);
}, "Check that no-preference evaluates to false in the boolean context");
</script>

30
Tests/LibWeb/Text/input/wpt-import/css/mediaqueries/prefers-reduced-transparency.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-transparency" />
<script type="text/javascript" src="../../resources/testharness.js"></script>
<script type="text/javascript" src="../../resources/testharnessreport.js"></script>
<script type="text/javascript" src="resources/matchmedia-utils.js"></script>
<script>
query_should_be_known("(prefers-reduced-transparency)");
query_should_be_known("(prefers-reduced-transparency: no-preference)");
query_should_be_known("(prefers-reduced-transparency: reduce)");
query_should_be_unknown("(prefers-reduced-transparency: 0)");
query_should_be_unknown("(prefers-reduced-transparency: none)");
query_should_be_unknown("(prefers-reduced-transparency: 10px)");
query_should_be_unknown("(prefers-reduced-transparency: no-preference reduce)");
query_should_be_unknown("(prefers-reduced-transparency: reduced)");
query_should_be_unknown("(prefers-reduced-transparency: no-preference/reduce)");
test(() => {
// https://drafts.csswg.org/mediaqueries-5/#boolean-context
let booleanContext = window.matchMedia("(prefers-reduced-transparency)");
let noPreference = window.matchMedia("(prefers-reduced-transparency: no-preference)");
assert_equals(booleanContext.matches, !noPreference.matches);
}, "Check that no-preference evaluates to false in the boolean context");
test(() => {
let invalid = window.matchMedia("(prefers-reduced-transparency: 10px)");
assert_equals(invalid.matches, false);
}, "Check that invalid evaluates to false");
</script>

29
Tests/LibWeb/Text/input/wpt-import/css/mediaqueries/relative-units-005.html Normal file
View file

@ -0,0 +1,29 @@
<!doctype html>
<title>CSS Media Queries Test: ex, ch, and ic from initial font</title>
<link rel="help" href="https://drafts.csswg.org/mediaqueries/#units">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<div id="ex_ref" style="width: 100ex"></div>
<div id="ch_ref" style="width: 100ch"></div>
<div id="ic_ref" style="width: 100ic"></div>
<script>
const viewport_width = document.documentElement.offsetWidth;
test(() => {
const viewport_ex = (viewport_width * 100) / ex_ref.offsetWidth;
const ex_query = `(min-width: ${viewport_ex-0.5}ex) and (max-width: ${viewport_ex+0.5}ex)`;
assert_true(matchMedia(ex_query).matches);
}, "ex unit in media queries should match initial font");
test(() => {
const viewport_ch = (viewport_width * 100) / ch_ref.offsetWidth;
const ch_query = `(min-width: ${viewport_ch-0.5}ch) and (max-width: ${viewport_ch+0.5}ch)`;
assert_true(matchMedia(ch_query).matches);
}, "ch unit in media queries should match initial font");
test(() => {
const viewport_ic = (viewport_width * 100) / ic_ref.offsetWidth;
const ic_query = `(min-width: ${viewport_ic-0.5}ic) and (max-width: ${viewport_ic+0.5}ic)`;
assert_true(matchMedia(ic_query).matches);
}, "ic unit in media queries should match initial font");
</script>

76
Tests/LibWeb/Text/input/wpt-import/css/mediaqueries/resources/matchmedia-utils.js Normal file
View file

@ -0,0 +1,76 @@
'use strict';
function query_is_css_parseable(query) {
const style = document.createElement('style');
style.type = 'text/css';
document.head.appendChild(style);
const sheet = style.sheet;
try {
sheet.insertRule("@media " + query + "{}", 0);
return sheet.cssRules.length == 1 &&
sheet.cssRules[0].media.mediaText != "not all";
} finally {
while (sheet.cssRules.length)
sheet.deleteRule(0);
style.remove();
}
}
function query_should_be_css_parseable(query) {
test(() => {
assert_true(query_is_css_parseable(query));
}, "Should be parseable in a CSS stylesheet: '" + query + "'");
}
function query_should_not_be_css_parseable(query) {
test(() => {
assert_false(query_is_css_parseable(query));
}, "Should not be parseable in a CSS stylesheet: '" + query + "'");
}
function query_is_js_parseable(query) {
// We cannot rely on whether a given feature is on or off, so only check the
// 'media' member of the result.
const match = window.matchMedia(query);
return match.media == query;
}
function query_should_be_js_parseable(query) {
test(() => {
assert_true(query_is_js_parseable(query));
}, "Should be parseable in JS: '" + query + "'");
}
function query_should_not_be_js_parseable(query) {
test(() => {
assert_false(query_is_js_parseable(query));
}, "Should not be parseable in JS: '" + query + "'");
}
function query_is_known(query) {
return window.matchMedia(`${query}, not all and ${query}`).matches;
}
function query_is_unknown(query) {
return !window.matchMedia(`${query}, not all and ${query}`).matches;
}
function query_should_be_known(query) {
test(() => {
assert_true(query_is_js_parseable(query), "Can parse with JS");
assert_true(query_is_css_parseable(query), "Can parse with CSS");
assert_true(query_is_known(query));
}, "Should be known: '" + query + "'");
}
function query_should_be_unknown(query) {
test(() => {
assert_true(query_is_js_parseable(query), "Can parse with JS");
assert_true(query_is_css_parseable(query), "Can parse with CSS");
}, "Should be parseable: '" + query + "'");
test(() => {
assert_true(query_is_unknown(query));
}, "Should be unknown: '" + query + "'");
}

26
Tests/LibWeb/Text/input/wpt-import/css/mediaqueries/scripting.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/mediaqueries-5/#scripting">
<script type="text/javascript" src="../../resources/testharness.js"></script>
<script type="text/javascript" src="../../resources/testharnessreport.js"></script>
<script type="text/javascript" src="resources/matchmedia-utils.js"></script>
<script>
query_should_be_known("(scripting)");
query_should_be_known("(scripting: enabled)");
query_should_be_known("(scripting: initial-only)");
query_should_be_known("(scripting: none)");
query_should_be_unknown("(scripting: 0)");
query_should_be_unknown("(scripting: 10px)");
query_should_be_unknown("(scripting: invalid)");
test(() => {
let match_enabled = window.matchMedia("(scripting: enabled)");
assert_true(match_enabled.matches);
}, "Check that scripting currently matches 'enabled'");
test(() => {
let booleanContext = window.matchMedia("(scripting)");
assert_true(booleanContext.matches);
}, "Check that scripting currently evaluates to true in the boolean context");
</script>

38
Tests/LibWeb/Text/input/wpt-import/css/mediaqueries/update-media-feature.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<title>CSS Media Query Test: update media feature</title>
<link rel="help" href="https://drafts.csswg.org/mediaqueries-4/#descdef-media-update">
<meta assert="The test is supposed to be run on fast computer displays as it will no match otherwise. The definition of fast can be found in the spec link.">
<script type="text/javascript" src="../../resources/testharness.js"></script>
<script type="text/javascript" src="../../resources/testharnessreport.js"></script>
<script type="text/javascript" src="resources/matchmedia-utils.js"></script>
<script>
query_should_be_known("(update)");
query_should_be_known("(update: none)");
query_should_be_known("(update: slow)");
query_should_be_known("(update: fast)");
query_should_be_unknown("(update: ?)");
query_should_be_unknown("(update: 10px)");
query_should_be_unknown("(update: 0)");
test(() => {
let match_standard = window.matchMedia("(update: fast)");
assert_true(match_standard.matches);
}, "Check that update: fast always matches fast displays");
test(() => {
let match_standard = window.matchMedia("(update: slow)");
assert_false(match_standard.matches);
}, "Check that update: slow doesn't match fast displays");
test(() => {
let match_standard = window.matchMedia("(update: none)");
assert_false(match_standard.matches);
}, "Check that update: none doesn't match fast displays");
test(() => {
let match_standard = window.matchMedia("(update)");
assert_true(match_standard.matches);
}, "Check that update always matches non printing documents");
</script>