| <!DOCTYPE html> |
| <html> |
| |
| <head> |
| <meta charset="utf-8"> |
| <title>CSS Color 4: Computed value of color-contrast()</title> |
| <link rel="author" title="Jan Keitel" href="mailto:jkeitel@google.com"> |
| <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> |
| </head> |
| |
| <body> |
| <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> |
| </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'); |
| </script> |
| </body> |
| |
| </html> |