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-row-reading-flow-001.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="timeout" content="long">
<title>CSS Grid Lanes: grid-rows reading flow with reversed auto-placement</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-rows: repeat(3, 90px);
flow-tolerance: 0;
reading-flow: grid-rows;
width: 240px;
}
.lanes > button {
box-sizing: border-box;
padding: 0;
}
</style>
<!-- Placement reversal must not reverse the normal visual reading order. -->
<div class="test-case" data-expect="c,b,d,e,a"
data-description="Grid-rows reads top-to-bottom rows with track-reverse placement">
<div class="lanes" style="grid-lanes-direction: row track-reverse">
<button id="a" style="width: 210px">A</button>
<button id="b" style="width: 60px">B</button>
<button id="c" style="width: 150px">C</button>
<button id="d" style="width: 45px">D</button>
<button id="e" style="width: 30px">E</button>
</div>
</div>
<div class="test-case" data-expect="f,j,i,g,h"
data-description="Grid-rows reads left-to-right within rows with fill-reverse placement">
<div class="lanes" style="grid-lanes-direction: row fill-reverse">
<button id="f" style="width: 210px">F</button>
<button id="g" style="width: 60px">G</button>
<button id="h" style="width: 150px">H</button>
<button id="i" style="width: 45px">I</button>
<button id="j" style="width: 30px">J</button>
</div>
</div>
<script>
runFocusTestCases();
</script>