mozilla-central/testing/web-platform/tests/css/css-overflow/overflow-alignment-flex-col-reverse-overflow-001.html

Source code

Revision control

Copy as Markdown

Other Tools

<!DOCTYPE html>
<!-- No, you should not convert this test to testharness.js. -->
<html class="reftest-wait">
<title>Scrollable Area of Reversed Multiline Column Flex Containers with Overflow Content Alignment Start/Center/End</title>
<link rel="help" href="https://www.w3.org/TR/css-writing-modes/">
<link rel="author" href="http://fantasai.inkedblade.net/contact" title="Elika J. Etemad">
<style>
/* Cram Tests */
body { height: 600px; border-bottom: solid orange; } /* Reftest Max Size. Do not exceed this line. */
html { font-size: 10px; }
th, td { padding: 0; }
/* Styling/Readability */
abbr, th[scope=row] { font-variant: small-caps; text-transform: lowercase; color: gray; }
thead { display: table-footer-group; }
caption { font-weight: bold; caption-side: bottom; }
/* Note: Annotations are at the bottom / right to avoid using up checked reftest area. */
/* Create an overflowing box with a 9-grid of colors */
.indicator {
width: 72px;
height: 72px;
writing-mode: horizontal-tb;
direction: ltr;
flex: none;
margin: -24px;
}
.indicator > div {
width: 24px;
height: 24px;
}
.indicator > .tl { background: teal; float: left; }
.indicator > .tc { background: lightblue; float: left; }
.indicator > .tr { background: aqua; float: right; }
.indicator > .cl { background: gold; float: left; clear: both; }
.indicator > .cc { background: orange; float: left; }
.indicator > .cr { background: yellow; float: right; }
.indicator > .bl { background: fuchsia; float: left; clear: both; }
.indicator > .bc { background: thistle; float: left; }
.indicator > .br { background: purple; float: right; }
.indicator > [class] { xbackground: red; } /* Remove for debugging */
/* Create a test box containing a smaller box containing the overflowing indicator */
.test { /* Expand for debugging */
width: 24px;
height: 24px;
overflow: scroll;
display: flex;
flex-flow: column-reverse wrap-reverse;
}
.test > div {
width: 24px;
height: 24px;
flex: none;
}
.align-start .test { place-content: start; }
.align-center .test { place-content: center; }
.align-end .test { place-content: end; }
.align-safe-center .test { place-content: safe center; }
.align-safe-end .test { place-content: safe end; }
.align-unsafe-center .test { place-content: unsafe center; }
.align-unsafe-end .test { place-content: unsafe end; }
.ltr { direction: ltr; }
.rtl { direction: rtl; }
.htb { writing-mode: horizontal-tb; }
.vrl { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; }
.no-scroll { overflow: hidden; }
/* Pass Conditions */ /* Remove for debugging */
.no-scroll .cc { background: green; }
.scroll-TL.ltr.htb .cc { background: green; }
.scroll-TL.ltr.vrl .cl { background: green; }
.scroll-TL.ltr.vlr .cc { background: green; }
.scroll-TL.rtl.htb .cl { background: green; }
.scroll-TL.rtl.vrl .tl { background: green; }
.scroll-TL.rtl.vlr .tc { background: green; }
.scroll-BR.ltr.htb .br { background: green; }
.scroll-BR.ltr.vrl .bc { background: green; }
.scroll-BR.ltr.vlr .br { background: green; }
.scroll-BR.rtl.htb .bc { background: green; }
.scroll-BR.rtl.vrl .cc { background: green; }
.scroll-BR.rtl.vlr .cr { background: green; }
</style>
<table>
<caption>Each box must be completely green.</caption>
<thead>
<tr>
<th colspan=3><abbr title="direction: ltr">LTR</abbr>
<th colspan=3><abbr title="direction: rtl">RTL</abbr>
<tr>
<th><abbr title="writing-mode: horizontal-tb">HTB</abbr>
<th><abbr title="writing-mode: vertical-rl">VRL</abbr>
<th><abbr title="writing-mode: vertical-lr">VLR</abbr>
<th><abbr title="writing-mode: horizontal-tb">HTB</abbr>
<th><abbr title="writing-mode: vertical-rl">VRL</abbr>
<th><abbr title="writing-mode: vertical-lr">VLR</abbr>
<tbody>
<tr>
<th colspan=6 scope=rowgroup>Do not scroll any box below.
<tr class="align-start">
<td>
<div class="test ltr htb no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vrl no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vlr no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl htb no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vrl no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vlr no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<th scope=row>
start
<tr class="align-safe-center">
<td>
<div class="test ltr htb no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vrl no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vlr no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl htb no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vrl no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vlr no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<th scope=row>
safe center
<tr class="align-safe-end">
<td>
<div class="test ltr htb no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vrl no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vlr no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl htb no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vrl no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vlr no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<th scope=row>
safe end
<tr class="align-center">
<td>
<div class="test ltr htb no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vrl no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vlr no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl htb no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vrl no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vlr no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<th scope=row>
center
<tr class="align-end">
<td>
<div class="test ltr htb no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vrl no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vlr no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl htb no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vrl no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vlr no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<th scope=row>
end
<tr class="align-unsafe-center">
<td>
<div class="test ltr htb no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vrl no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vlr no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl htb no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vrl no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vlr no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<th scope=row>
unsafe center
<tr class="align-unsafe-end">
<td>
<div class="test ltr htb no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vrl no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vlr no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl htb no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vrl no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vlr no-scroll"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<th scope=row>
unsafe end
<tbody>
<tr>
<th colspan=6 scope=rowgroup>Scroll each box below to the top left.
<th>
<tr class="align-start">
<td>
<div class="test ltr htb scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vrl scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vlr scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl htb scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vrl scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vlr scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<th scope=row>
start
<tr class="align-safe-center">
<td>
<div class="test ltr htb scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vrl scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vlr scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl htb scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vrl scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vlr scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<th scope=row>
safe center
<tr class="align-safe-end">
<td>
<div class="test ltr htb scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vrl scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vlr scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl htb scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vrl scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vlr scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<th scope=row>
safe end
<tr class="align-center">
<td>
<div class="test ltr htb scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vrl scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vlr scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl htb scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vrl scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vlr scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<th scope=row>
center
<tr class="align-end">
<td>
<div class="test ltr htb scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vrl scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vlr scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl htb scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vrl scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vlr scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<th scope=row>
end
<tr class="align-unsafe-center">
<td>
<div class="test ltr htb scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vrl scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vlr scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl htb scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vrl scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vlr scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<th scope=row>
unsafe center
<tr class="align-unsafe-end">
<td>
<div class="test ltr htb scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vrl scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vlr scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl htb scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vrl scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vlr scroll-TL"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<th scope=row>
unsafe end
<tbody>
<tr>
<th colspan=6 scope=rowgroup>Scroll each box below to the bottom right.
<th>
<tr class="align-start">
<td>
<div class="test ltr htb scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vrl scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vlr scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl htb scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vrl scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vlr scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<th scope=row>
start
<tr class="align-safe-center">
<td>
<div class="test ltr htb scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vrl scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vlr scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl htb scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vrl scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vlr scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<th scope=row>
safe center
<tr class="align-safe-end">
<td>
<div class="test ltr htb scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vrl scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vlr scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl htb scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vrl scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vlr scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<th scope=row>
safe end
<tr class="align-center">
<td>
<div class="test ltr htb scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vrl scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vlr scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl htb scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vrl scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vlr scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<th scope=row>
center
<tr class="align-end">
<td>
<div class="test ltr htb scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vrl scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vlr scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl htb scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vrl scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vlr scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<th scope=row>
end
<tr class="align-unsafe-center">
<td>
<div class="test ltr htb scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vrl scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vlr scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl htb scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vrl scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vlr scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<th scope=row>
unsafe center
<tr class="align-unsafe-end">
<td>
<div class="test ltr htb scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vrl scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test ltr vlr scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl htb scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vrl scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<td>
<div class="test rtl vlr scroll-BR"><div class="container"><div class="indicator"><div class=tl></div><div class=tc></div><div class=tr></div><div class=cl></div><div class=cc></div><div class=cr></div><div class=bl></div><div class=bc></div><div class=br></div></div></div></div>
<th scope=row>
unsafe end
</table>
<script>
function test(isReftest)
{
// Simplify reftest reference by removing scrollbars
if (isReftest) {
scrollers = document.getElementsByClassName('test');
for (let s of scrollers) {
s.style.overflow = "hidden";
}
}
// Trigger layout
document.body.offsetHeight;
// Scroll to the top left
var scrollers = document.getElementsByClassName('scroll-TL');
for (let s of scrollers) {
s.scrollTop = -1000;
s.scrollLeft = -1000;
}
// Scroll to the bottom right
scrollers = document.getElementsByClassName('scroll-BR');
for (let s of scrollers) {
s.scrollTop = 1000;
s.scrollLeft = 1000;
}
document.body.offsetHeight; // trigger layout
document.documentElement.removeAttribute("class");
};
document.addEventListener("TestRendered", function(){ test(true); });
window.addEventListener("load", function(){ test(false); }); // for manual inspection
</script>