select-multiple-scrolling.optional.html (4145B)
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> multiple attribute scroll progression</title> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 10 <select multiple 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 promise_test(async t => { 43 select.style.writingMode = writingMode; 44 select.scrollTop = select.scrollLeft = 0; 45 46 t.add_cleanup(() => { 47 select.removeAttribute("style"); 48 select.scrollTop = select.scrollLeft = 0; 49 return new Promise(resolve => requestAnimationFrame(resolve)); 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[multiple][style="writing-mode: ${writingMode}"] scrolls correctly`); 104 }; 105 </script>