checkbox-switch-input-computed-style.tentative.html (1658B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>Switch input writing mode computed style</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <input type=checkbox switch id=horizontal-input style="writing-mode: horizontal-tb"> 8 <input type=checkbox switch id=vertical-lr-input style="writing-mode: vertical-lr"> 9 <input type=checkbox switch id=vertical-rl-input style="writing-mode: vertical-rl"> 10 11 <script> 12 for (const element of document.querySelectorAll("[id^='horizontal-']")) { 13 test(() => { 14 const style = getComputedStyle(element); 15 const blockSize = parseInt(style.blockSize, 10); 16 const inlineSize = parseInt(style.inlineSize, 10); 17 assert_not_equals(blockSize, 0); 18 assert_not_equals(inlineSize, 0); 19 assert_greater_than(inlineSize, blockSize); 20 assert_equals(style.blockSize, style.height); 21 assert_equals(style.inlineSize, style.width); 22 }, `${element.id} block size should match height and inline size should match width`); 23 } 24 25 for (const element of document.querySelectorAll("[id^='vertical-']")) { 26 test(() => { 27 const style = getComputedStyle(element); 28 const blockSize = parseInt(style.blockSize, 10); 29 const inlineSize = parseInt(style.inlineSize, 10); 30 assert_not_equals(blockSize, 0); 31 assert_not_equals(inlineSize, 0); 32 assert_greater_than(inlineSize, blockSize); 33 assert_equals(style.blockSize, style.width); 34 assert_equals(style.inlineSize, style.height); 35 }, `${element.id} block size should match width and inline size should match height`); 36 } 37 </script>