-
Notifications
You must be signed in to change notification settings - Fork 3.7k
Expand file tree
/
Copy pathsystem-color-consistency.html
More file actions
79 lines (71 loc) · 4.11 KB
/
system-color-consistency.html
File metadata and controls
79 lines (71 loc) · 4.11 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Color 4: System color consistency</title>
<link rel="author" title="Jan Keitel" href="mailto:[email protected]">
<link rel="help" href="https://www.w3.org/TR/css-color-4/#css-system-colors">
<meta name="assert" content="computed style of form elements is consistent with definition of system colors">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
<div style="display: none">
<div id="target"></div>
<!-- Reference elements -->
<!-- Buttons -->
<div id="buttons">
<button name="button"></button><input type="submit" name="submit button">
<input type="reset" name="reset button"><input type="color" name="color picker">
</div>
<!-- Input elements -->
<div id="fields">
<input type="text" name="text field"><input type="password" name="password field">
<input type="email" name="email field"><input type="number" name="number field">
<input type="date" name="date field">
<textarea name="text area"></textarea>
</div>
<mark id="mark">Marked text</mark>
<!-- Link -->
<a href="#" id="link">Link</a>
<div id="canvas" style="color: CanvasText; background-color: Canvas">Canvas Colors</mark>
</div>
<script>
function test_not_canvas(color, colorScheme) {
test(function() {
let target = document.getElementById("target");
target.style.color = color;
let canvas = document.getElementById("canvas");
assert_not_equals(getComputedStyle(target).color, getComputedStyle(canvas).backgroundColor, `${color} should not match Canvas`);
}, `${color} should not match Canvas in ${colorScheme} mode`);
}
['light', 'dark'].forEach(colorScheme => {
document.documentElement.style.colorScheme = colorScheme;
// Buttons
for (let element of document.getElementById("buttons").children) {
style = getComputedStyle(element);
test_computed_value('color', 'ButtonBorder', style.getPropertyValue('border-color'), `resolves to the same color as the border-color of a ${element.name} (${colorScheme})`);
test_computed_value('color', 'ButtonFace', style.getPropertyValue('background-color'), `resolves to the same color as the background-color of a ${element.name} (${colorScheme})`);
test_computed_value('color', 'ButtonText', style.getPropertyValue('color'), `resolves to the same color as text on a ${element.name} (${colorScheme})`);
}
// CanvasText
style = getComputedStyle(document.getElementsByTagName('html')[0]);
test_computed_value('color', 'CanvasText', style.getPropertyValue('color'), `has the same color as the color of the html element (${colorScheme})`);
// Field and FieldText
for (let element of document.getElementById("fields").children) {
style = getComputedStyle(element);
test_computed_value('color', 'Field', style.getPropertyValue('background-color'), `resolves to the same color as the background-color of a ${element.name} (${colorScheme})`);
test_computed_value('color', 'FieldText', style.getPropertyValue('color'), `resolves to the same color as text on a ${element.name} (${colorScheme})`);
}
// Mark and MarkText
style = getComputedStyle(document.getElementById('mark'));
test_computed_value('color', 'Mark', style.getPropertyValue('background-color'), `has the same color as the background-color of a mark element (${colorScheme})`);
test_computed_value('color', 'MarkText', style.getPropertyValue('color'), `has the same color as the color of a mark element (${colorScheme})`);
// LinkText
style = getComputedStyle(document.getElementById('link'));
test_computed_value('color', 'LinkText', style.getPropertyValue('color'), `has the same color as the color of an anchor element (${colorScheme})`);
// These colors are only text colors and do not have corresponding
// backgrounds, so they should not match the canvas background (as
// otherwise they'd be invisible)
test_not_canvas("LinkText", colorScheme);
test_not_canvas("ActiveText", colorScheme);
test_not_canvas("VisitedText", colorScheme);
});
</script>