file-input-computed-style.html (1966B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder"> 4 <link rel="help" href="https://drafts.csswg.org/css-writing-modes/#block-flow"> 5 <title>File input writing mode computed style</title> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 9 <input type="file" id="horizontal-input" style="writing-mode: horizontal-tb"> 10 <input type="file" id="vertical-lr-input" style="writing-mode: vertical-lr"> 11 <input type="file" id="vertical-rl-input" style="writing-mode: vertical-rl"> 12 <input type="file" id="sideways-lr-input" style="writing-mode: sideways-lr"> 13 <input type="file" id="sideways-rl-input" style="writing-mode: sideways-rl"> 14 15 <script> 16 for (const element of document.querySelectorAll("[id^='horizontal-']")) { 17 test(() => { 18 const style = getComputedStyle(element); 19 const blockSize = parseInt(style.blockSize, 10); 20 const inlineSize = parseInt(style.inlineSize, 10); 21 assert_not_equals(blockSize, 0); 22 assert_not_equals(inlineSize, 0); 23 assert_greater_than(inlineSize, blockSize); 24 assert_equals(style.blockSize, style.height); 25 assert_equals(style.inlineSize, style.width); 26 }, `${element.id} block size should match height and inline size should match width`); 27 } 28 29 for (const element of document.querySelectorAll("[id^='vertical-'], [id^='sideways-']")) { 30 test(() => { 31 const style = getComputedStyle(element); 32 const blockSize = parseInt(style.blockSize, 10); 33 const inlineSize = parseInt(style.inlineSize, 10); 34 assert_not_equals(blockSize, 0); 35 assert_not_equals(inlineSize, 0); 36 assert_greater_than(inlineSize, blockSize); 37 assert_equals(style.blockSize, style.width); 38 assert_equals(style.inlineSize, style.height); 39 }, `${element.id} block size should match width and inline size should match height`); 40 } 41 </script>