diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-color/system-color-consistency.html')
-rw-r--r-- | testing/web-platform/tests/css/css-color/system-color-consistency.html | 57 |
1 files changed, 34 insertions, 23 deletions
diff --git a/testing/web-platform/tests/css/css-color/system-color-consistency.html b/testing/web-platform/tests/css/css-color/system-color-consistency.html index 4eb9d81100..0d23d84ad2 100644 --- a/testing/web-platform/tests/css/css-color/system-color-consistency.html +++ b/testing/web-platform/tests/css/css-color/system-color-consistency.html @@ -29,31 +29,42 @@ <textarea name="text area"></textarea> </div> <mark id="mark">Marked text</mark> + <!-- Link --> + <a href="#" id="link">Link</a> </div> + <script> - // Buttons - for (let element of document.getElementById("buttons").children) { - style = document.defaultView.getComputedStyle(element); - test_computed_value('color', 'ButtonBorder', style.getPropertyValue('border-color'), 'resolves to the same color as the border-color of a ' + element.name); - test_computed_value('color', 'ButtonFace', style.getPropertyValue('background-color'), 'resolves to the same color as the background-color of a ' + element.name); - test_computed_value('color', 'ButtonText', style.getPropertyValue('color'), 'resolves to the same color as text on a ' + element.name); - } - - // CanvasText - style = document.defaultView.getComputedStyle(document.getElementsByTagName('html')[0]); - test_computed_value('color', 'CanvasText', style.getPropertyValue('color'), 'has the same color as the color of the html element'); - - // Field and FieldText - for (let element of document.getElementById("fields").children) { - style = document.defaultView.getComputedStyle(element); - test_computed_value('color', 'Field', style.getPropertyValue('background-color'), 'resolves to the same color as the background-color of a ' + element.name); - test_computed_value('color', 'FieldText', style.getPropertyValue('color'), 'resolves to the same color as text on a ' + element.name); - } - - // Mark and MarkText - style = document.defaultView.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'); - test_computed_value('color', 'MarkText', style.getPropertyValue('color'), 'has the same color as the color of a mark element'); + ['light', 'dark'].forEach(colorScheme => { + document.documentElement.style.colorScheme = colorScheme; + + // Buttons + for (let element of document.getElementById("buttons").children) { + style = document.defaultView.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 = document.defaultView.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 = document.defaultView.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 = document.defaultView.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 = document.defaultView.getComputedStyle(document.getElementById('link')); + test_computed_value('color', 'LinkText', style.getPropertyValue('color'), `has the same color as the color of an anchor element (${colorScheme})`); + }); </script> </body> |