select-appearance-native-computed-style.html (2298B)
1 <!doctype html> 2 <link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder"> 3 <link rel="help" href="https://html.spec.whatwg.org/#the-select-element"> 4 <link rel="help" href="https://drafts.csswg.org/css-writing-modes/#block-flow"> 5 <title>Select appearance native writing mode computed style</title> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 9 <select style="writing-mode: horizontal-tb"> 10 <option>Option 1</option> 11 <option>Option 2</option> 12 <option>Option 3</option> 13 <option>Option 4</option> 14 <option>Option 5</option> 15 </select> 16 17 <select style="writing-mode: vertical-lr"> 18 <option>Option 1</option> 19 <option>Option 2</option> 20 <option>Option 3</option> 21 <option>Option 4</option> 22 <option>Option 5</option> 23 </select> 24 25 <select style="writing-mode: vertical-rl"> 26 <option>Option 1</option> 27 <option>Option 2</option> 28 <option>Option 3</option> 29 <option>Option 4</option> 30 <option>Option 5</option> 31 </select> 32 33 <script> 34 test(() => { 35 const select = document.querySelector(`select[style="writing-mode: horizontal-tb"]`); 36 const style = getComputedStyle(select); 37 const blockSize = parseInt(style.blockSize, 10); 38 const inlineSize = parseInt(style.inlineSize, 10); 39 assert_not_equals(blockSize, 0); 40 assert_not_equals(inlineSize, 0); 41 assert_greater_than(inlineSize, blockSize); 42 assert_equals(style.blockSize, style.height); 43 assert_equals(style.inlineSize, style.width); 44 }, `select[style="writing-mode: horizontal-tb"] block size should match height and inline size should match width`); 45 46 for (const writingMode of ["vertical-lr", "vertical-rl"]) { 47 test(() => { 48 const select = document.querySelector(`select[style="writing-mode: ${writingMode}"]`); 49 const style = getComputedStyle(select); 50 const blockSize = parseInt(style.blockSize, 10); 51 const inlineSize = parseInt(style.inlineSize, 10); 52 assert_not_equals(blockSize, 0); 53 assert_not_equals(inlineSize, 0); 54 assert_greater_than(inlineSize, blockSize); 55 assert_equals(style.blockSize, style.width); 56 assert_equals(style.inlineSize, style.height); 57 }, `select[style="writing-mode: ${writingMode}"] block size should match width and inline size should match height`); 58 }; 59 </script>