mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-12-08 06:09:58 +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,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