button-appearance-native-computed-style.html (3952B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> 4 <link rel="help" href="https://drafts.csswg.org/css-writing-modes/#block-flow"> 5 <title>Button appearance native writing mode computed style</title> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 9 <button id="horizontal-button">あいなき あいなき</button> 10 <button id="horizontal-button-multiline">あいなき あいなき<br>あいなき</button> 11 12 <input type="button" id="horizontal-input" value="あいなき あいなき"> 13 <input type="button" id="horizontal-input-multiline" value="あいなき あいなき あいなき"> 14 15 <button id="vertical-lr-button" style="writing-mode: vertical-lr">あいなき あいなき</button> 16 <button id="vertical-rl-button" style="writing-mode: vertical-rl">あいなき あいなき</button> 17 <button id="vertical-lr-button-multiline" style="writing-mode: vertical-lr">あいなき あいなき<br>あいなき</button> 18 <button id="vertical-rl-button-multiline" style="writing-mode: vertical-rl">あいなき あいなき<br>あいなき</button> 19 20 <input type="button" id="vertical-lr-input" style="writing-mode: vertical-lr" value="あいなき あいなき"> 21 <input type="button" id="vertical-rl-input" style="writing-mode: vertical-rl" value="あいなき あいなき"> 22 <input type="button" id="vertical-lr-input-multiline" style="writing-mode: vertical-lr" value="あいなき あいなき あいなき"> 23 <input type="button" id="vertical-rl-input-multiline" style="writing-mode: vertical-rl" value="あいなき あいなき あいなき"> 24 25 <script> 26 for (const element of document.querySelectorAll("[id^='horizontal-']")) { 27 test(() => { 28 const style = getComputedStyle(element); 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.height); 35 assert_equals(style.inlineSize, style.width); 36 }, `${element.id} block size should match height and inline size should match width`); 37 if (!element.matches("[id$='-multiline']")) { 38 test(() => { 39 const multiline = document.querySelector(`#${element.id}-multiline`); 40 const style = getComputedStyle(element); 41 const multilineStyle = getComputedStyle(multiline); 42 assert_greater_than(parseInt(multilineStyle.height, 10), parseInt(style.height, 10)); 43 assert_equals(multilineStyle.width, style.width); 44 }, `${element.id}'s height is less than its multi-line counterpart, but width is identical.`); 45 } 46 } 47 48 for (const element of document.querySelectorAll("[id^='vertical-']")) { 49 test(() => { 50 const style = getComputedStyle(element); 51 const blockSize = parseInt(style.blockSize, 10); 52 const inlineSize = parseInt(style.inlineSize, 10); 53 assert_not_equals(blockSize, 0); 54 assert_not_equals(inlineSize, 0); 55 assert_greater_than(inlineSize, blockSize); 56 assert_equals(style.blockSize, style.width); 57 assert_equals(style.inlineSize, style.height); 58 }, `${element.id} block size should match width and inline size should match height`); 59 60 if (!element.matches("[id$='-multiline']")) { 61 test(() => { 62 const multiline = document.querySelector(`#${element.id}-multiline`); 63 const style = getComputedStyle(element); 64 const multilineStyle = getComputedStyle(multiline); 65 assert_greater_than(parseInt(multilineStyle.width, 10), parseInt(style.width, 10)); 66 assert_equals(multilineStyle.height, style.height); 67 }, `${element.id}'s width is less than its multi-line counterpart, but height is identical.`); 68 } 69 } 70 </script>