<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>WebPreferences Test: colorScheme attribute tests</title>
<link rel="author" title="Luke Warlow" href="mailto:[email protected]" />
<link rel="help" href="https://wicg.github.io/web-preferences-api/" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src=./resources/preferences-helper.js></script>
</head>
<body>
<script>
test(() => {
assert_true('preferences' in navigator, 'navigator.preferences defined');
assert_true('colorScheme' in navigator.preferences, 'navigator.preferences.colorScheme defined');
}, "navigator.preferences.colorScheme supported");
test(() => {
assert_true('override' in navigator.preferences.colorScheme, 'navigator.preferences.colorScheme.override defined');
assert_equals(navigator.preferences.colorScheme.override, null);
}, "navigator.preferences.colorScheme.override supported");
test(() => {
assert_true('value' in navigator.preferences.colorScheme, 'navigator.preferences.colorScheme.value defined');
assert_equals(navigator.preferences.colorScheme.value, 'light');
}, "navigator.preferences.colorScheme.value supported");
test(() => {
assert_true('validValues' in navigator.preferences.colorScheme, 'navigator.preferences.colorScheme.validValues defined');
assert_true(navigator.preferences.colorScheme.validValues.includes('light'), 'navigator.preferences.colorScheme.validValues includes "light"');
assert_true(navigator.preferences.colorScheme.validValues.includes('dark'), 'navigator.preferences.colorScheme.validValues includes "dark"');
}, "navigator.preferences.colorScheme.validValues supported");
promise_test((t) => {
assert_true('requestOverride' in navigator.preferences.colorScheme, 'navigator.preferences.colorScheme.requestOverride() defined');
return navigator.preferences.colorScheme.requestOverride('this-is-an-invalid-value')
.then(() => {
assert_not_reached('requestOverride with invalid value should not resolve');
})
.catch((e) => {
assert_true(e instanceof DOMException);
assert_equals(null, navigator.preferences.colorScheme.override);
t.done();
});
}, "navigator.preferences.colorScheme.requestOverride() with invalid value throws");
promise_test(async (t) => {
assert_true('clearOverride' in navigator.preferences.colorScheme, 'navigator.preferences.colorScheme.clearOverride() defined');
await navigator.preferences.colorScheme.requestOverride('light');
assert_equals(navigator.preferences.colorScheme.override, 'light');
navigator.preferences.colorScheme.clearOverride();
assert_equals(navigator.preferences.colorScheme.override, null);
t.done();
}, "navigator.preferences.colorScheme.override returns override value");
promise_test(async (t) => {
await navigator.preferences.colorScheme.requestOverride('light');
assert_equals(navigator.preferences.colorScheme.override, 'light');
await navigator.preferences.colorScheme.requestOverride(null);
assert_equals(navigator.preferences.colorScheme.override, null);
t.done();
}, "navigator.preferences.colorScheme.requestOverride(null) works like clearOverride()");
promise_test(async (t) => {
await navigator.preferences.colorScheme.requestOverride('light');
assert_equals(navigator.preferences.colorScheme.override, 'light');
await navigator.preferences.colorScheme.requestOverride('');
assert_equals(navigator.preferences.colorScheme.override, null);
t.done();
}, "navigator.preferences.colorScheme.requestOverride('') works like clearOverride()");
promise_test(async (t) => {
await navigator.preferences.colorScheme.requestOverride('light');
assert_true(window.matchMedia('(prefers-color-scheme: light)').matches, '(prefers-color-scheme: light) matches');
assert_equals(navigator.preferences.colorScheme.value, 'light');
await navigator.preferences.colorScheme.requestOverride('dark');
assert_true(window.matchMedia('(prefers-color-scheme: dark)').matches, '(prefers-color-scheme: dark) matches');
assert_equals(navigator.preferences.colorScheme.value, 'dark');
navigator.preferences.colorScheme.clearOverride();
assert_true(window.matchMedia('(prefers-color-scheme: light)').matches);
assert_equals(navigator.preferences.colorScheme.value, 'light');
t.done();
}, "navigator.preferences.colorScheme.requestOverride() updates (prefers-color-scheme)");
async_test((t) => {
t.add_cleanup(() => {
navigator.preferences.colorScheme.clearOverride();
navigator.preferences.colorScheme.onchange = null;
});
navigator.preferences.colorScheme.onchange = t.step_func_done();
navigator.preferences.colorScheme.requestOverride('dark');
}, "navigator.preferences.colorScheme fires change event when requesting override");
async_test((t) => {
t.add_cleanup(() => {
navigator.preferences.colorScheme.clearOverride();
navigator.preferences.colorScheme.onchange = null;
});
navigator.preferences.colorScheme.onchange = t.step_func_done();
navigator.preferences.colorScheme.requestOverride('light');
}, "navigator.preferences.colorScheme fires change event when requesting override (without value change)");
promise_test(async (t) => {
t.add_cleanup(() => {
navigator.preferences.colorScheme.clearOverride();
navigator.preferences.colorScheme.onchange = null;
});
await navigator.preferences.colorScheme.requestOverride('dark');
const eventPromise = changeEventPromise("colorScheme");
await navigator.preferences.colorScheme.clearOverride();
await eventPromise;
}, "navigator.preferences.colorScheme fires change event when clearing override");
promise_test(async (t) => {
t.add_cleanup(() => {
navigator.preferences.colorScheme.clearOverride();
navigator.preferences.colorScheme.onchange = null;
});
await navigator.preferences.colorScheme.requestOverride('light');
const eventPromise = changeEventPromise("colorScheme");
await navigator.preferences.colorScheme.clearOverride();
await eventPromise;
}, "navigator.preferences.colorScheme fires change event when clearing override (without value change)");
</script>
</body>
</html>