column-scroll-marker-focus-004.html (4371B)
1 <!DOCTYPE html> 2 <title>Tab focus from ::colum::scroll-marker, some columns with no elements</title> 3 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-next-focus"> 5 <style> 6 body { 7 margin: 0; 8 } 9 #scrollable { 10 scroll-marker-group: after; 11 overflow: hidden; 12 height: 100px; 13 line-height: 20px; 14 } 15 #multicol { 16 columns: 11; 17 column-gap: 10px; 18 column-fill: auto; 19 column-rule: solid; 20 height: 100%; 21 orphans: 1; 22 widows: 1; 23 } 24 #scrollable::scroll-marker-group { 25 display: flex; 26 height: 20px; 27 background: hotpink; 28 } 29 #multicol::column::scroll-marker { 30 content: ""; 31 width: 20px; 32 height: 20px; 33 margin-right: 5px; 34 background: blue; 35 } 36 #multicol::column::scroll-marker:focus { 37 background: cyan; 38 } 39 </style> 40 <div id="scrollable"> 41 <div id="multicol"> 42 <div tabindex="0" id="block1" style="height:85px; background:#ccc;"></div> 43 <div tabindex="0" id="block2"> 44 block<br> 45 block<br> 46 block<br> 47 block<br> 48 block<br> 49 block<br> 50 </div> 51 <div tabindex="0" id="inlineBlock1" style="display:inline-block; width:100%; height:81px; background:#ccc;"></div> 52 <span tabindex="0" id="inlineElm1"> 53 inline<br> 54 inline<br> 55 inline<br> 56 inline<br> 57 inline<br> 58 inline<br> 59 inline<br> 60 inline<br> 61 inline<br> 62 inline<br> 63 inline<br> 64 </span> 65 <div tabindex="0" id="inlineBlock2" style="display:inline-block; width:100%; height:81px; background:#ccc;"></div> 66 <span tabindex="0" id="inlineElm2"> 67 inline<br> 68 inline<br> 69 inline<br> 70 inline<br> 71 inline<br> 72 inline<br> 73 inline<br> 74 inline<br> 75 inline<br> 76 inline<br> 77 inline<br> 78 </span> 79 </div> 80 </div> 81 <div id="after" tabindex="0">after</div> 82 83 <script src="/resources/testharness.js"></script> 84 <script src="/resources/testharnessreport.js"></script> 85 <script src="/resources/testdriver.js"></script> 86 <script src="/resources/testdriver-actions.js"></script> 87 <script src="/resources/testdriver-vendor.js"></script> 88 89 <script> 90 async function activateMarker(idx) { 91 await new test_driver.Actions() 92 .pointerMove(5 + idx*25, 105) 93 .pointerDown() 94 .pointerUp() 95 .send(); 96 } 97 98 async function focusNext() { 99 // https://w3c.github.io/webdriver/#keyboard-actions 100 const kTab = '\uE004'; 101 102 await new test_driver.Actions() 103 .keyDown(kTab) 104 .keyUp(kTab) 105 .send(); 106 } 107 108 promise_test(async t => { 109 await activateMarker(1); 110 await focusNext(); 111 assert_equals(document.activeElement, block2); 112 }, "Focus column #1"); 113 114 promise_test(async t => { 115 await activateMarker(10); 116 await focusNext(); 117 assert_equals(document.activeElement, after); 118 }, "Focus column #10"); 119 120 promise_test(async t => { 121 await activateMarker(2); 122 await focusNext(); 123 assert_equals(document.activeElement, inlineBlock1); 124 }, "Focus column #2"); 125 126 promise_test(async t => { 127 await activateMarker(9); 128 await focusNext(); 129 assert_equals(document.activeElement, after); 130 }, "Focus column #9"); 131 132 promise_test(async t => { 133 await activateMarker(8); 134 await focusNext(); 135 assert_equals(document.activeElement, inlineElm2); 136 }, "Focus column #8"); 137 138 promise_test(async t => { 139 await activateMarker(7); 140 await focusNext(); 141 assert_equals(document.activeElement, inlineBlock2); 142 }, "Focus column #7"); 143 144 promise_test(async t => { 145 await activateMarker(6); 146 await focusNext(); 147 assert_equals(document.activeElement, inlineBlock2); 148 }, "Focus column #6"); 149 150 promise_test(async t => { 151 await activateMarker(5); 152 await focusNext(); 153 assert_equals(document.activeElement, inlineBlock2); 154 }, "Focus column #5"); 155 156 promise_test(async t => { 157 await activateMarker(4); 158 await focusNext(); 159 assert_equals(document.activeElement, inlineElm1); 160 }, "Focus column #4"); 161 162 promise_test(async t => { 163 await activateMarker(3); 164 await focusNext(); 165 assert_equals(document.activeElement, inlineBlock1); 166 }, "Focus column #3"); 167 168 promise_test(async t => { 169 await activateMarker(0); 170 await focusNext(); 171 assert_equals(document.activeElement, block1); 172 }, "Focus column #0"); 173 </script>