column-scroll-marker-focus-003.html (4038B)
1 <!DOCTYPE html> 2 <title>Tab focus from ::colum::scroll-marker to non-atomic inline</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: scroll; 12 columns: 7; 13 column-gap: 10px; 14 column-fill: auto; 15 column-rule: solid; 16 height: 100px; 17 line-height: 20px; 18 orphans: 1; 19 widows: 1; 20 } 21 #container::scroll-marker-group { 22 display: flex; 23 height: 20px; 24 background: hotpink; 25 } 26 #container::column::scroll-marker { 27 content: ""; 28 width: 20px; 29 height: 20px; 30 margin-right: 5px; 31 background: blue; 32 } 33 #container::column::scroll-marker:focus { 34 background: cyan; 35 } 36 </style> 37 <div id="container"> 38 <div id="wrapper"> 39 <div tabindex="0" style="display:inline-block; width:100%; height:85px;"></div> 40 <span tabindex="0" id="inlineElm1"> 41 inline<br> 42 inline<br> 43 inline<br> 44 inline<br> 45 inline<br> 46 <span tabindex="0" id="inlineElm2">inline2</span> 47 </span> 48 <div tabindex="0" id="inlineBlock1" style="display:inline-block; width:100%; height:85px; background:brown;"></div> 49 <span tabindex="0" id="inlineElm3" style="border:1px solid;"> 50 inline3<br> 51 <div tabindex="0" id="inlineBlock2" style="display:inline-block; width:100%; height:15px; background:brown;"></div> 52 inline3<br> 53 inline3<br> 54 inline3<br> 55 inline3<br> 56 </span> 57 <span tabindex="0" id="inlineElm4" style="border:1px solid;"> 58 inline4<br> 59 </span> 60 </div> 61 </div> 62 63 <script src="/resources/testharness.js"></script> 64 <script src="/resources/testharnessreport.js"></script> 65 <script src="/resources/testdriver.js"></script> 66 <script src="/resources/testdriver-actions.js"></script> 67 <script src="/resources/testdriver-vendor.js"></script> 68 69 <script> 70 async function activateMarker(idx) { 71 await new test_driver.Actions() 72 .pointerMove(5 + idx*25, 5) 73 .pointerDown() 74 .pointerUp() 75 .send(); 76 } 77 78 // Redisplay an element, to reset state. This makes the test harder to pass 79 // with Blink's "culled inlines" concept. 80 function redisplay(elm) { 81 let old_display = elm.style.display; 82 elm.style.display = "none"; 83 document.body.offsetTop; 84 elm.style.display = old_display; 85 } 86 87 async function focusNext() { 88 // https://w3c.github.io/webdriver/#keyboard-actions 89 const kTab = '\uE004'; 90 91 await new test_driver.Actions() 92 .keyDown(kTab) 93 .keyUp(kTab) 94 .send(); 95 } 96 97 promise_test(async t => { 98 await activateMarker(1); 99 await focusNext(); 100 assert_equals(document.activeElement, inlineElm1); 101 await focusNext(); 102 assert_equals(document.activeElement, inlineElm2); 103 redisplay(wrapper); 104 }, "Focus second column"); 105 106 promise_test(async t => { 107 await activateMarker(2); 108 await focusNext(); 109 assert_equals(document.activeElement, inlineElm2); 110 await focusNext(); 111 assert_equals(document.activeElement, inlineBlock1); 112 redisplay(wrapper); 113 }, "Focus third column"); 114 115 promise_test(async t => { 116 await activateMarker(3); 117 await focusNext(); 118 assert_equals(document.activeElement, inlineBlock1); 119 await focusNext(); 120 let collection = document.activeElement; 121 assert_equals(document.activeElement, inlineElm3); 122 redisplay(wrapper); 123 }, "Focus fourth column"); 124 125 promise_test(async t => { 126 await activateMarker(4); 127 await focusNext(); 128 assert_equals(document.activeElement, inlineElm3); 129 await focusNext(); 130 assert_equals(document.activeElement, inlineBlock2); 131 await focusNext(); 132 assert_equals(document.activeElement, inlineElm4); 133 redisplay(wrapper); 134 }, "Focus fifth column"); 135 136 promise_test(async t => { 137 await activateMarker(5); 138 await focusNext(); 139 assert_equals(document.activeElement, inlineElm4); 140 redisplay(wrapper); 141 }, "Focus sixth column"); 142 </script>