select-size-scrolling-and-sizing.optional.html (5196B)
1 <!doctype html> 2 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> 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-4/#block-flow"> 5 <link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-area"> 6 <title>Test <select> size attribute scroll progression and sizing</title> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 10 <select size="5"></select> 11 <script> 12 const select = document.querySelector("select"); 13 for (let i = 0; i < 100; i++) { 14 const option = document.createElement("option"); 15 option.textContent = `Option ${i + 1}`; 16 select.appendChild(option); 17 } 18 19 for (const writingMode of ["horizontal-tb", "vertical-lr", "vertical-rl", "sideways-lr", "sideways-rl"]) { 20 if (!CSS.supports(`writing-mode: ${writingMode}`)) 21 continue; 22 23 const scrollBlockAxis = (() => { 24 switch (writingMode) { 25 case "horizontal-tb": 26 return "scrollTop"; 27 case "vertical-lr": 28 case "sideways-lr": 29 case "vertical-rl": 30 case "sideways-rl": 31 return "scrollLeft"; 32 } 33 })(); 34 const scrollInlineAxis = scrollBlockAxis === "scrollTop" ? "scrollLeft" : "scrollTop"; 35 36 const isHorizontal = writingMode === "horizontal-tb"; 37 const clientBlock = isHorizontal ? "clientHeight" : "clientWidth"; 38 const clientInline = isHorizontal ? "clientWidth" : "clientHeight"; 39 const scrollBlock = isHorizontal ? "scrollHeight" : "scrollWidth"; 40 const scrollInline = isHorizontal ? "scrollWidth" : "scrollHeight"; 41 42 const select = document.querySelector("select"); 43 44 test(t => { 45 select.scrollTop = select.scrollLeft = 0; 46 select.style.writingMode = writingMode; 47 t.add_cleanup(() => { 48 select.removeAttribute("style"); 49 select.scrollTop = select.scrollLeft = 0; 50 }); 51 52 assert_true( 53 select[scrollBlock] > select[clientBlock], 54 "select should be scrollable in block axis" 55 ); 56 assert_equals( 57 select[scrollInline], select[clientInline], 58 "select should not be scrollable in inline axis" 59 ); 60 61 assert_equals( 62 select[scrollBlockAxis], 0, 63 `scrolling is initially at block start for writing-mode: ${writingMode}` 64 ); 65 66 const isReversedBlockFlowDirection = writingMode.endsWith("-rl"); 67 select[scrollBlockAxis] = 100; 68 if (!isReversedBlockFlowDirection) { 69 assert_true( 70 select[scrollBlockAxis] > 0, 71 `Setting ${scrollBlockAxis} to a positive value of the list works for writing-mode: ${writingMode}` 72 ); 73 } else { 74 assert_equals( 75 select[scrollBlockAxis], 0, 76 `Setting ${scrollBlockAxis} to a positive value of the list does not work for writing-mode: ${writingMode}` 77 ); 78 } 79 80 select[scrollBlockAxis] = -100; 81 if (isReversedBlockFlowDirection) { 82 assert_true( 83 select[scrollBlockAxis] < 0, 84 `Setting ${scrollBlockAxis} to a negative value of the list works for writing-mode: ${writingMode}` 85 ); 86 } else { 87 assert_equals( 88 select[scrollBlockAxis], 0, 89 `Setting ${scrollBlockAxis} to a negative value of the list does not work for writing-mode: ${writingMode}` 90 ); 91 } 92 93 select[scrollInlineAxis] = 100; 94 assert_equals( 95 select[scrollInlineAxis], 0, 96 `setting ${scrollInlineAxis} to a positive value should not scroll for writing-mode: ${writingMode}` 97 ); 98 select[scrollInlineAxis] = -100; 99 assert_equals( 100 select[scrollInlineAxis], 0, 101 `setting ${scrollInlineAxis} to a negative value should not scroll for writing-mode: ${writingMode}` 102 ); 103 }, `select[size][style="writing-mode: ${writingMode}"] scrolls correctly`); 104 105 test(t => { 106 select.style.writingMode = writingMode; 107 t.add_cleanup(() => { 108 select.removeAttribute("style"); 109 select.size = 5; 110 }); 111 112 let prevBlockSize = select[clientBlock]; 113 let prevInlineSize = select[clientInline]; 114 select.size = 10; 115 assert_true( 116 select[clientBlock] > prevBlockSize, 117 `${clientBlock} increased when increasing size` 118 ); 119 assert_equals( 120 select[clientInline], prevInlineSize, 121 `${clientInline} did not change when increasing size` 122 ); 123 124 prevBlockSize = select[clientBlock]; 125 prevInlineSize = select[clientInline]; 126 select.size = 8; 127 assert_true( 128 select[clientBlock] < prevBlockSize, 129 `${clientBlock} decreased when decreasing size` 130 ); 131 assert_equals( 132 select[clientInline], prevInlineSize, 133 `${clientInline} did not change when decreasing size` 134 ); 135 }, `select[size][style="writing-mode: ${writingMode}"] sizing works correctly`); 136 }; 137 </script>