Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 4 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-overflow/column-scroll-marker-focus-002.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>Tab focus and ::colum::scroll-marker, wrapped column rows</title>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<style>
body {
margin: 0;
}
#container {
scroll-marker-group: before;
overflow: hidden;
columns: 3;
column-wrap: wrap;
column-height: 100px;
column-fill: auto;
column-rule: solid;
height: 150px;
line-height: 20px;
}
#container::scroll-marker-group {
display: flex;
height: 20px;
background: hotpink;
}
#container::column::scroll-marker {
content: "";
width: 20px;
height: 20px;
margin-right: 5px;
background: blue;
}
#container::column::scroll-marker:focus {
background: cyan;
}
</style>
<div id="container">
<!-- Column #0 -->
<div tabindex="0" id="c0" style="height:100px;">First</div>
<!-- Column #1 -->
<div tabindex="0" id="c1first">line</div>
<div tabindex="0" id="c1second" style="height:100px; background:red;">line</div>
<!-- Column #2 -->
<div tabindex="0" id="inlineBlock" style="display:inline-block; box-sizing:border-box; width:100%; height:70px; border:solid;"></div>
<!-- Column #3 -->
<div>
<div style="display:flex; flex-flow:wrap row-reverse;">
<div tabindex="0" id="flex1" style="width:30%; height:100px;">A</div>
<div tabindex="0" id="flex2" style="width:30%;">B</div>
<div tabindex="0" id="flex3" style="width:30%;">C</div>
</div>
<!-- Column #4 -->
<div tabindex="0" id="flex4" style="width:30%;">D</div>
<div tabindex="0" id="flex5" style="width:30%;">E</div>
<div tabindex="0" id="flex6" style="width:30%;">F</div>
</div>
</div>
<div tabindex="0" id="after">after</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script>
async function activateMarker(idx) {
await new test_driver.Actions()
.pointerMove(5 + idx*25, 5)
.pointerDown()
.pointerUp()
.send();
}
async function focusNext() {
const kTab = '\uE004';
await new test_driver.Actions()
.keyDown(kTab)
.keyUp(kTab)
.send();
}
promise_test(async t => {
await activateMarker(1);
await focusNext();
assert_equals(document.activeElement, c1first);
await focusNext();
assert_equals(document.activeElement, c1second);
await focusNext();
assert_equals(document.activeElement, inlineBlock);
}, "Column #1");
promise_test(async t => {
await activateMarker(2);
await focusNext();
assert_equals(document.activeElement, inlineBlock);
await focusNext();
assert_equals(document.activeElement, flex1);
}, "Column #2");
promise_test(async t => {
await activateMarker(0);
await focusNext();
assert_equals(document.activeElement, c0);
await focusNext();
assert_equals(document.activeElement, c1first);
}, "Column #0");
promise_test(async t => {
await activateMarker(4);
await focusNext();
assert_equals(document.activeElement, flex4);
await focusNext();
assert_equals(document.activeElement, flex5);
await focusNext();
assert_equals(document.activeElement, flex6);
await focusNext();
assert_equals(document.activeElement, after);
}, "Column #4");
promise_test(async t => {
await activateMarker(3);
await focusNext();
assert_equals(document.activeElement, flex1);
await focusNext();
assert_equals(document.activeElement, flex2);
await focusNext();
assert_equals(document.activeElement, flex3);
await focusNext();
assert_equals(document.activeElement, flex4);
}, "Column #3");
</script>