mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-09-15 14:02:20 +00:00
Tests: Import a whole bunch of WPT mediaqueries tests
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
parent
6711438e0d
commit
bb035fbfe0
Notes:
github-actions[bot]
2025-05-23 09:19:59 +00:00
Author: https://github.com/AtkinsSJ
Commit: bb035fbfe0
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/4817
90 changed files with 2213 additions and 0 deletions
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS prefers-color-scheme affects SVG images - color-scheme 'normal', no <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>
|
||||
|
|
@ -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', <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>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS prefers-color-scheme affects SVG images - color-scheme 'normal', <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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 193 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 191 B |
|
|
@ -0,0 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<noscript>
|
||||
Script is disabled
|
||||
</noscript>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<div>
|
||||
Script is enabled
|
||||
</div>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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'>
|
||||
|
|
@ -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', <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>
|
||||
|
|
@ -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', <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>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS prefers-color-scheme affects SVG images - color-scheme 'normal', no <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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 269 B |
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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-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
|
||||
Ref/input/wpt-import/css/css-contain/contain-size-replaced-006.html
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 1 tests
|
||||
|
||||
1 Pass
|
||||
Pass <ratio> serializes with spaces around the integer.
|
||||
|
|
@ -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
|
||||
|
|
@ -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'
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 1 tests
|
||||
|
||||
1 Pass
|
||||
Pass syntactical MQ keywords used as media types are a syntax error
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 1 tests
|
||||
|
||||
1 Pass
|
||||
Pass 'layer' used as media types is a syntax error
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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.
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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 + "'");
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue