diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-native-computed-style.optional.html')
-rw-r--r-- | testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-native-computed-style.optional.html | 38 |
1 files changed, 38 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-native-computed-style.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-native-computed-style.optional.html new file mode 100644 index 0000000000..0f2e4f1792 --- /dev/null +++ b/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-native-computed-style.optional.html @@ -0,0 +1,38 @@ +<!doctype html> +<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-progress-element-2"> +<title>Progress appearance native writing mode computed style</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<progress value="30" min="0" max="100" style="writing-mode: horizontal-tb"></progress> +<progress value="30" min="0" max="100" style="writing-mode: vertical-lr"></progress> +<progress value="30" min="0" max="100" style="writing-mode: vertical-rl"></progress> + +<script> +test(() => { + const progress = document.querySelector(`progress[style="writing-mode: horizontal-tb"]`); + const style = getComputedStyle(progress); + 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(inlineSize, blockSize); + assert_equals(style.blockSize, style.height); + assert_equals(style.inlineSize, style.width); +}, `progress[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 progress = document.querySelector(`progress[style="writing-mode: ${writingMode}"]`); + const style = getComputedStyle(progress); + 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(inlineSize, blockSize); + assert_equals(style.blockSize, style.width); + assert_equals(style.inlineSize, style.height); + }, `progress[style="writing-mode: ${writingMode}"] block size should match width and inline size should match height`); +}; +</script>
\ No newline at end of file |