Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/external/wpt/css/css-overflow/overflow-alignment-flex-col-wrap-overflow-002.html 


<!DOCTYPE html>
<!-- No, you should not convert this test to testharness.js. -->
<html class="reftest-wait">
<title>Scrollable Area of Multiline Column Flex Containers with Overflow 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 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] { background: red; }          /* Remove for debugging */

   /* Create a test box containing the overflowing indicator */
   .test {                                            /* Expand for debugging */
      width: 24px;
      height: 24px;
      overflow: scroll;
      display: flex;
      flex-flow: column wrap;
   }
   .align-normal           .test { place-content: normal; }
   .align-stretch          .test { place-content: stretch; }
   .align-left             .test { place-content: start left; }
   .align-right            .test { place-content: start right; }
   .align-space-around     .test { place-content: space-around; }
   .align-space-evenly     .test { place-content: space-evenly; }
   .align-space-between    .test { place-content: space-between; }
   .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-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="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="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="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="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="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="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="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="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="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="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="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="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="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="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>

<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>