diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-writing-modes/forms/color-input-appearance-native-computed-style.html')
-rw-r--r-- | testing/web-platform/tests/css/css-writing-modes/forms/color-input-appearance-native-computed-style.html | 39 |
1 files changed, 39 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/color-input-appearance-native-computed-style.html b/testing/web-platform/tests/css/css-writing-modes/forms/color-input-appearance-native-computed-style.html new file mode 100644 index 0000000000..7ab0e0923d --- /dev/null +++ b/testing/web-platform/tests/css/css-writing-modes/forms/color-input-appearance-native-computed-style.html @@ -0,0 +1,39 @@ +<!doctype html> +<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder"> +<link rel="help" href="https://html.spec.whatwg.org/#color-state-(type=color)"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes/#block-flow"> +<title>Color input appearance native writing mode computed style</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<input type="color" style="writing-mode: horizontal-tb"> +<input type="color" style="writing-mode: vertical-lr"> +<input type="color" style="writing-mode: vertical-rl"> + +<script> +test(() => { + const input = document.querySelector(`input[type="color"][style="writing-mode: horizontal-tb"]`); + const style = getComputedStyle(input); + const blockSize = parseInt(style.blockSize, 10); + const inlineSize = parseInt(style.inlineSize, 10); + assert_not_equals(blockSize, 0); + assert_not_equals(inlineSize, 0); + assert_greater_than_equal(inlineSize, blockSize); + assert_equals(style.blockSize, style.height); + assert_equals(style.inlineSize, style.width); +}, `input[type="color"][style="writing-mode: horizontal-tb"] block size should match height and inline size should match width`); + +for (const writingMode of ["vertical-lr", "vertical-rl"]) { + test(() => { + const input = document.querySelector(`input[type="color"][style="writing-mode: ${writingMode}"]`); + const style = getComputedStyle(input); + const blockSize = parseInt(style.blockSize, 10); + const inlineSize = parseInt(style.inlineSize, 10); + assert_not_equals(blockSize, 0); + assert_not_equals(inlineSize, 0); + assert_greater_than_equal(inlineSize, blockSize); + assert_equals(style.blockSize, style.width); + assert_equals(style.inlineSize, style.height); + }, `input[type="color"][style="writing-mode: ${writingMode}"] block size should match width and inline size should match height`); +}; +</script> |