Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 2 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /shadow-dom/focus-navigation/reading-flow/tentative/grid-lanes-column-reading-flow-008.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="timeout" content="long">
<title>CSS Grid Lanes: grid-columns reading flow with spanning items and dense packing</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/shadow-dom/focus-navigation/resources/shadow-dom.js"></script>
<script src="/shadow-dom/focus-navigation/resources/focus-utils.js"></script>
<style>
.test-case {
margin-top: 20px;
}
.lanes {
display: grid-lanes;
grid-template-columns: repeat(3, 80px);
flow-tolerance: 0;
reading-flow: grid-columns;
width: 240px;
}
.lanes > button {
box-sizing: border-box;
width: 100%;
min-width: 0;
min-height: 0;
padding: 0;
}
</style>
<!-- Spanning items are read once, when first encountered in visual track order. -->
<div class="test-case" data-expect="a,c,b,d"
data-description="Grid-columns reads spanning items once in visual column order">
<div class="lanes">
<button id="a" style="height: 40px">A</button>
<button id="b" style="grid-column: span 2; height: 100px">B</button>
<button id="c" style="grid-column: span 2; height: 20px">C</button>
<button id="d" style="height: 20px">D</button>
</div>
</div>
<!-- The gap between E and G in the first track is large enough to backfill H. -->
<div class="test-case" data-expect="e,h,g,f"
data-description="Grid-columns follows visual column order after dense backfill">
<div class="lanes" style="grid-lanes-pack: dense">
<button id="e" style="height: 40px">E</button>
<button id="f" style="grid-column: span 2; height: 100px">F</button>
<button id="g" style="grid-column: span 2; height: 20px">G</button>
<button id="h" style="height: 20px">H</button>
</div>
</div>
<script>
runFocusTestCases();
</script>