date-input-appearance-native-computed-style.html (2043B)
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>Date input appearance native writing mode computed style</title> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 9 <input type="date" id="horizontal-empty"> 10 <input type="date" id="horizontal-with-value" value="2023-11-10"> 11 <input type="date" id="vertical-lr-empty" style="writing-mode: vertical-lr"> 12 <input type="date" id="vertical-lr-with-value" value="2023-11-10" style="writing-mode: vertical-lr"> 13 <input type="date" id="vertical-rl-empty" style="writing-mode: vertical-rl"> 14 <input type="date" id="vertical-rl-with-value" value="2023-11-10" style="writing-mode: vertical-rl"> 15 16 <script> 17 for (const element of document.querySelectorAll("[id^='horizontal-']")) { 18 test(() => { 19 const style = getComputedStyle(element); 20 const blockSize = parseInt(style.blockSize, 10); 21 const inlineSize = parseInt(style.inlineSize, 10); 22 assert_not_equals(blockSize, 0); 23 assert_not_equals(inlineSize, 0); 24 assert_greater_than(inlineSize, blockSize); 25 assert_equals(style.blockSize, style.height); 26 assert_equals(style.inlineSize, style.width); 27 }, `${element.id} block size should match height and inline size should match width`); 28 } 29 30 for (const element of document.querySelectorAll("[id^='vertical-']")) { 31 test(() => { 32 const style = getComputedStyle(element); 33 const blockSize = parseInt(style.blockSize, 10); 34 const inlineSize = parseInt(style.inlineSize, 10); 35 assert_not_equals(blockSize, 0); 36 assert_not_equals(inlineSize, 0); 37 assert_greater_than(inlineSize, blockSize); 38 assert_equals(style.blockSize, style.width); 39 assert_equals(style.inlineSize, style.height); 40 }, `${element.id} block size should match width and inline size should match height`); 41 } 42 </script>