column-scroll-marker-focus-001.html (6139B)
1 <!DOCTYPE html> 2 <title>Tab focus and ::colum::scroll-marker</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 #container { 10 scroll-marker-group: before; 11 overflow: hidden; 12 columns: 9; 13 column-fill: auto; 14 column-rule: solid; 15 height: 100px; 16 line-height: 20px; 17 } 18 #container::scroll-marker-group { 19 display: flex; 20 height: 20px; 21 background: hotpink; 22 } 23 #container::column::scroll-marker { 24 content: ""; 25 width: 20px; 26 height: 20px; 27 margin-right: 5px; 28 background: blue; 29 } 30 #container::column::scroll-marker:focus { 31 background: cyan; 32 } 33 </style> 34 <div id="container"> 35 <!-- Column #0 --> 36 <div style="height:100px;">Nothing</div> 37 38 <!-- Column #1 --> 39 <div tabindex="0" id="c1first">line</div> 40 <div tabindex="0" id="c1second" style="height:180px;">line</div> 41 42 <!-- Column #2 only has a resumed block (#c1second). --> 43 44 <!-- Column #3 --> 45 <div tabindex="0" id="inlineBlock" style="display:inline-block; box-sizing:border-box; width:100%; height:90px; border:solid;"></div> 46 47 <!-- Column #4 --> 48 <div> 49 <div style="display:flex; flex-flow:wrap row-reverse;"> 50 <div tabindex="0" id="flex1" style="width:30%; height:100px;">A</div> 51 <div tabindex="0" id="flex2" style="width:30%;">B</div> 52 <div tabindex="0" id="flex3" style="width:30%;">C</div> 53 54 <!-- Column #5 --> 55 <div tabindex="0" id="flex4" style="width:30%;">D</div> 56 <div tabindex="0" id="flex5" style="width:30%;">E</div> 57 <div tabindex="0" id="flex6" style="width:30%;">F</div> 58 </div> 59 </div> 60 <div style="display:table;"> 61 <div style="display:table-caption; height:70px; background:cyan;">caption</div> 62 63 <!-- Column #6 --> 64 <div tabindex="0" id="tfoot" style="display:table-footer-group;">footer</div> 65 <div tabindex="0" id="thead" style="display:table-header-group;">header</div> 66 <div tabindex="0" id="tbody" style="display:table-row-group;">body</div> 67 </div> 68 <div style="position:relative;"> 69 <div style="height:50px; background:black;"></div> 70 71 <!-- Column #7 --> 72 <div tabindex="0" id="c6Abs" style="position:absolute; left:50px;">abs</div> 73 <div tabindex="0" id="c6Block" style="width:50px;">block</div> 74 <div style="height:80px; background:black;"></div> 75 76 <!-- Column #8 --> 77 <div tabindex="0" id="c7Block" style="width:50px;">block</div> 78 <div tabindex="0" id="c7Abs" style="position:absolute; margin-top:-20px; left:50px;">abs</div> 79 </div> 80 </div> 81 82 <div tabindex="0" id="after">after</div> 83 84 <script src="/resources/testharness.js"></script> 85 <script src="/resources/testharnessreport.js"></script> 86 <script src="/resources/testdriver.js"></script> 87 <script src="/resources/testdriver-actions.js"></script> 88 <script src="/resources/testdriver-vendor.js"></script> 89 90 <script> 91 async function activateMarker(idx) { 92 await new test_driver.Actions() 93 .pointerMove(5 + idx*25, 5) 94 .pointerDown() 95 .pointerUp() 96 .send(); 97 } 98 99 async function focusNext() { 100 // https://w3c.github.io/webdriver/#keyboard-actions 101 const kTab = '\uE004'; 102 103 await new test_driver.Actions() 104 .keyDown(kTab) 105 .keyUp(kTab) 106 .send(); 107 } 108 109 promise_test(async t => { 110 await activateMarker(4); 111 await focusNext(); 112 assert_equals(document.activeElement, flex1); 113 await focusNext(); 114 assert_equals(document.activeElement, flex2); 115 await focusNext(); 116 assert_equals(document.activeElement, flex3); 117 await focusNext(); 118 assert_equals(document.activeElement, flex4); 119 }, "Column 4"); 120 121 promise_test(async t => { 122 await activateMarker(3); 123 await focusNext(); 124 assert_equals(document.activeElement, inlineBlock); 125 await focusNext(); 126 assert_equals(document.activeElement, flex1); 127 }, "Column #3"); 128 129 // TODO(https://github.com/w3c/csswg-drafts/issues/11882): Figure out how to 130 // treat columns with no elements, and test it here. Column #2 has no start 131 // elements. 132 promise_test(async t => { 133 // At the very least, we should not crash. :) 134 await activateMarker(2); 135 await focusNext(); 136 }, "Column #2"); 137 138 promise_test(async t => { 139 await activateMarker(1); 140 await focusNext(); 141 assert_equals(document.activeElement, c1first); 142 await focusNext(); 143 assert_equals(document.activeElement, c1second); 144 await focusNext(); 145 assert_equals(document.activeElement, inlineBlock); 146 }, "Column #1"); 147 148 promise_test(async t => { 149 // Column #0 has nothing focusable. The next column has something. 150 await activateMarker(0); 151 await focusNext(); 152 assert_equals(document.activeElement, c1first); 153 }, "Column #0"); 154 155 promise_test(async t => { 156 await activateMarker(8); 157 await focusNext(); 158 assert_equals(document.activeElement, c7Block); 159 await focusNext(); 160 assert_equals(document.activeElement, c7Abs); 161 await focusNext(); 162 assert_equals(document.activeElement, after); 163 }, "Column #8"); 164 165 promise_test(async t => { 166 await activateMarker(7); 167 await focusNext(); 168 assert_equals(document.activeElement, c6Abs); 169 await focusNext(); 170 assert_equals(document.activeElement, c6Block); 171 await focusNext(); 172 assert_equals(document.activeElement, c7Block); 173 }, "Column 7"); 174 175 promise_test(async t => { 176 await activateMarker(6); 177 await focusNext(); 178 assert_equals(document.activeElement, tfoot); 179 await focusNext(); 180 assert_equals(document.activeElement, thead); 181 await focusNext(); 182 assert_equals(document.activeElement, tbody); 183 await focusNext(); 184 assert_equals(document.activeElement, c6Abs); 185 }, "Column 6"); 186 187 promise_test(async t => { 188 await activateMarker(5); 189 await focusNext(); 190 assert_equals(document.activeElement, flex4); 191 await focusNext(); 192 assert_equals(document.activeElement, flex5); 193 await focusNext(); 194 assert_equals(document.activeElement, flex6); 195 await focusNext(); 196 assert_equals(document.activeElement, tfoot); 197 }, "Column 5"); 198 </script>