Google Git
Sign in
chromium / external / w3c / web-platform-tests / master / . / css / css-overflow / overflow-alignment-002-ref.html
blob: 8c2974347515641ab47d04ef63da9b4615302ef7 [file] [log] [blame]
<!DOCTYPE html>
<html>
<title>Scrollable Area with Content Alignment Miscellaneous</title>
<link rel="help" href="https://www.w3.org/TR/css-align/#overflow-scroll-position">
<link rel="help" href="https://www.w3.org/TR/css-overflow/#scrollable">
<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 */
.indicator {
width: 72px;
height: 72px;
background: green;
}
/* Create a test box with appropriate scrollbars */
.test {
width: 24px;
height: 24px;
overflow: hidden;
}
</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="start align-normal">
<td>
<div class="test ltr htb no-scroll"><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>
<td>
<div class="test ltr vrl no-scroll"><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>
<td>
<div class="test ltr vlr no-scroll"><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>
<td>
<div class="test rtl htb no-scroll"><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>
<td>
<div class="test rtl vrl no-scroll"><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>
<td>
<div class="test rtl vlr no-scroll"><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>
<th scope=row>
normal
<tr class="start align-stretch">
<td>
<div class="test ltr htb no-scroll"><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>
<td>
<div class="test ltr vrl no-scroll"><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>
<td>
<div class="test ltr vlr no-scroll"><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>
<td>
<div class="test rtl htb no-scroll"><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>
<td>
<div class="test rtl vrl no-scroll"><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>
<td>
<div class="test rtl vlr no-scroll"><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>
<th scope=row>
stretch
<tr class="left align-left">
<td>
<div class="test ltr htb no-scroll"><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>
<td>
<div class="test ltr vrl no-scroll"><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>
<td>
<div class="test ltr vlr no-scroll"><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>
<td>
<div class="test rtl htb no-scroll"><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>
<td>
<div class="test rtl vrl no-scroll"><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>
<td>
<div class="test rtl vlr no-scroll"><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>
<th scope=row>
left
<tr class="right align-right">
<td>
<div class="test ltr htb no-scroll"><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>
<td>
<div class="test ltr vrl no-scroll"><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>
<td>
<div class="test ltr vlr no-scroll"><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>
<td>
<div class="test rtl htb no-scroll"><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>
<td>
<div class="test rtl vrl no-scroll"><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>
<td>
<div class="test rtl vlr no-scroll"><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>
<th scope=row>
right
<tr class="center align-space-around">
<td>
<div class="test ltr htb no-scroll"><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>
<td>
<div class="test ltr vrl no-scroll"><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>
<td>
<div class="test ltr vlr no-scroll"><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>
<td>
<div class="test rtl htb no-scroll"><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>
<td>
<div class="test rtl vrl no-scroll"><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>
<td>
<div class="test rtl vlr no-scroll"><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>
<th scope=row>
space-around
<tr class="center align-space-evenly">
<td>
<div class="test ltr htb no-scroll"><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>
<td>
<div class="test ltr vrl no-scroll"><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>
<td>
<div class="test ltr vlr no-scroll"><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>
<td>
<div class="test rtl htb no-scroll"><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>
<td>
<div class="test rtl vrl no-scroll"><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>
<td>
<div class="test rtl vlr no-scroll"><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>
<th scope=row>
space-evenly
<tr class="start align-space-between">
<td>
<div class="test ltr htb no-scroll"><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>
<td>
<div class="test ltr vrl no-scroll"><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>
<td>
<div class="test ltr vlr no-scroll"><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>
<td>
<div class="test rtl htb no-scroll"><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>
<td>
<div class="test rtl vrl no-scroll"><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>
<td>
<div class="test rtl vlr no-scroll"><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>
<th scope=row>
space-between
<tbody>
<tr>
<th colspan=6 scope=rowgroup>Scroll each box below to the top left.
<th>
<tr class="start align-normal">
<td>
<div class="test ltr htb scroll-TL"><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>
<td>
<div class="test ltr vrl scroll-TL"><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>
<td>
<div class="test ltr vlr scroll-TL"><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>
<td>
<div class="test rtl htb scroll-TL"><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>
<td>
<div class="test rtl vrl scroll-TL"><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>
<td>
<div class="test rtl vlr scroll-TL"><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>
<th scope=row>
normal
<tr class="start align-stretch">
<td>
<div class="test ltr htb scroll-TL"><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>
<td>
<div class="test ltr vrl scroll-TL"><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>
<td>
<div class="test ltr vlr scroll-TL"><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>
<td>
<div class="test rtl htb scroll-TL"><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>
<td>
<div class="test rtl vrl scroll-TL"><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>
<td>
<div class="test rtl vlr scroll-TL"><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>
<th scope=row>
stretch
<tr class="left align-left">
<td>
<div class="test ltr htb scroll-TL"><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>
<td>
<div class="test ltr vrl scroll-TL"><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>
<td>
<div class="test ltr vlr scroll-TL"><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>
<td>
<div class="test rtl htb scroll-TL"><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>
<td>
<div class="test rtl vrl scroll-TL"><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>
<td>
<div class="test rtl vlr scroll-TL"><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>
<th scope=row>
left
<tr class="right align-right">
<td>
<div class="test ltr htb scroll-TL"><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>
<td>
<div class="test ltr vrl scroll-TL"><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>
<td>
<div class="test ltr vlr scroll-TL"><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>
<td>
<div class="test rtl htb scroll-TL"><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>
<td>
<div class="test rtl vrl scroll-TL"><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>
<td>
<div class="test rtl vlr scroll-TL"><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>
<th scope=row>
right
<tr class="center align-space-around">
<td>
<div class="test ltr htb scroll-TL"><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>
<td>
<div class="test ltr vrl scroll-TL"><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>
<td>
<div class="test ltr vlr scroll-TL"><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>
<td>
<div class="test rtl htb scroll-TL"><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>
<td>
<div class="test rtl vrl scroll-TL"><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>
<td>
<div class="test rtl vlr scroll-TL"><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>
<th scope=row>
space-around
<tr class="center align-space-evenly">
<td>
<div class="test ltr htb scroll-TL"><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>
<td>
<div class="test ltr vrl scroll-TL"><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>
<td>
<div class="test ltr vlr scroll-TL"><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>
<td>
<div class="test rtl htb scroll-TL"><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>
<td>
<div class="test rtl vrl scroll-TL"><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>
<td>
<div class="test rtl vlr scroll-TL"><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>
<th scope=row>
space-evenly
<tr class="start align-space-between">
<td>
<div class="test ltr htb scroll-TL"><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>
<td>
<div class="test ltr vrl scroll-TL"><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>
<td>
<div class="test ltr vlr scroll-TL"><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>
<td>
<div class="test rtl htb scroll-TL"><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>
<td>
<div class="test rtl vrl scroll-TL"><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>
<td>
<div class="test rtl vlr scroll-TL"><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>
<th scope=row>
space-between
<tbody>
<tr>
<th colspan=6 scope=rowgroup>Scroll each box below to the bottom right.
<th>
<tr class="start align-normal">
<td>
<div class="test ltr htb scroll-BR"><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>
<td>
<div class="test ltr vrl scroll-BR"><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>
<td>
<div class="test ltr vlr scroll-BR"><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>
<td>
<div class="test rtl htb scroll-BR"><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>
<td>
<div class="test rtl vrl scroll-BR"><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>
<td>
<div class="test rtl vlr scroll-BR"><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>
<th scope=row>
normal
<tr class="start align-stretch">
<td>
<div class="test ltr htb scroll-BR"><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>
<td>
<div class="test ltr vrl scroll-BR"><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>
<td>
<div class="test ltr vlr scroll-BR"><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>
<td>
<div class="test rtl htb scroll-BR"><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>
<td>
<div class="test rtl vrl scroll-BR"><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>
<td>
<div class="test rtl vlr scroll-BR"><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>
<th scope=row>
stretch
<tr class="left align-left">
<td>
<div class="test ltr htb scroll-BR"><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>
<td>
<div class="test ltr vrl scroll-BR"><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>
<td>
<div class="test ltr vlr scroll-BR"><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>
<td>
<div class="test rtl htb scroll-BR"><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>
<td>
<div class="test rtl vrl scroll-BR"><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>
<td>
<div class="test rtl vlr scroll-BR"><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>
<th scope=row>
left
<tr class="right align-right">
<td>
<div class="test ltr htb scroll-BR"><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>
<td>
<div class="test ltr vrl scroll-BR"><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>
<td>
<div class="test ltr vlr scroll-BR"><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>
<td>
<div class="test rtl htb scroll-BR"><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>
<td>
<div class="test rtl vrl scroll-BR"><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>
<td>
<div class="test rtl vlr scroll-BR"><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>
<th scope=row>
right
<tr class="center align-space-around">
<td>
<div class="test ltr htb scroll-BR"><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>
<td>
<div class="test ltr vrl scroll-BR"><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>
<td>
<div class="test ltr vlr scroll-BR"><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>
<td>
<div class="test rtl htb scroll-BR"><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>
<td>
<div class="test rtl vrl scroll-BR"><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>
<td>
<div class="test rtl vlr scroll-BR"><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>
<th scope=row>
space-around
<tr class="center align-space-evenly">
<td>
<div class="test ltr htb scroll-BR"><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>
<td>
<div class="test ltr vrl scroll-BR"><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>
<td>
<div class="test ltr vlr scroll-BR"><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>
<td>
<div class="test rtl htb scroll-BR"><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>
<td>
<div class="test rtl vrl scroll-BR"><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>
<td>
<div class="test rtl vlr scroll-BR"><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>
<th scope=row>
space-evenly
<tr class="start align-space-between">
<td>
<div class="test ltr htb scroll-BR"><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>
<td>
<div class="test ltr vrl scroll-BR"><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>
<td>
<div class="test ltr vlr scroll-BR"><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>
<td>
<div class="test rtl htb scroll-BR"><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>
<td>
<div class="test rtl vrl scroll-BR"><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>
<td>
<div class="test rtl vlr scroll-BR"><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>
<th scope=row>
space-between
</table>