progress-appearance-native-computed-style.optional.html (1902B)
1 <!doctype html> 2 <link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org"> 3 <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-progress-element-2"> 4 <title>Progress appearance native writing mode computed style</title> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 8 <progress value="30" min="0" max="100" style="writing-mode: horizontal-tb"></progress> 9 <progress value="30" min="0" max="100" style="writing-mode: vertical-lr"></progress> 10 <progress value="30" min="0" max="100" style="writing-mode: vertical-rl"></progress> 11 12 <script> 13 test(() => { 14 const progress = document.querySelector(`progress[style="writing-mode: horizontal-tb"]`); 15 const style = getComputedStyle(progress); 16 const blockSize = parseInt(style.blockSize, 10); 17 const inlineSize = parseInt(style.inlineSize, 10); 18 assert_not_equals(blockSize, 0); 19 assert_not_equals(inlineSize, 0); 20 assert_greater_than(inlineSize, blockSize); 21 assert_equals(style.blockSize, style.height); 22 assert_equals(style.inlineSize, style.width); 23 }, `progress[style="writing-mode: horizontal-tb"] block size should match height and inline size should match width`); 24 25 for (const writingMode of ["vertical-lr", "vertical-rl"]) { 26 test(() => { 27 const progress = document.querySelector(`progress[style="writing-mode: ${writingMode}"]`); 28 const style = getComputedStyle(progress); 29 const blockSize = parseInt(style.blockSize, 10); 30 const inlineSize = parseInt(style.inlineSize, 10); 31 assert_not_equals(blockSize, 0); 32 assert_not_equals(inlineSize, 0); 33 assert_greater_than(inlineSize, blockSize); 34 assert_equals(style.blockSize, style.width); 35 assert_equals(style.inlineSize, style.height); 36 }, `progress[style="writing-mode: ${writingMode}"] block size should match width and inline size should match height`); 37 }; 38 </script>