Google Git
Sign in
chromium / external / w3c / web-platform-tests / refs/tags/merge_pr_43144^! / .
commit03fcc8eb50f61b42fc40f232a21d94cea1454dcf[log] [tgz]
authorKent Tamura <tkent@chromium.org>Tue Nov 14 08:30:47 2023
committerBlink WPT Bot <blink-w3c-test-autoroller@chromium.org>Tue Nov 14 09:01:45 2023
tree28d96c23142b3621b51198feecfb168b4357960d
parentaa6bdcbb00f30914b87794cf82b015fc02d4cc5b [diff]
css-align: Convert some tests to testharness tests

Convert some tests in css-align/blocks/ to testharness tests.

Bug: crbug.com/1500511
Change-Id: Iec2f3a82b0598a4a78cce85bf01cb9d113fb00ee
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5029454
Auto-Submit: Kent Tamura <tkent@chromium.org>
Reviewed-by: Koji Ishii <kojii@chromium.org>
Commit-Queue: Kent Tamura <tkent@chromium.org>
Commit-Queue: Koji Ishii <kojii@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1224134}

diff --git a/css/css-align/blocks/align-content-block-002-ref.html b/css/css-align/blocks/align-content-block-002-ref.html
deleted file mode 100644
index d7bde74..0000000
--- a/css/css-align/blocks/align-content-block-002-ref.html
+++ /dev/null

@@ -1,231 +0,0 @@
-<!DOCTYPE html>
-<title>CSS Box Alignment: align-content on large block container</title>
-<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
-
-<style title="Needed for automation; delete to review/debug">
-  @import "/fonts/ahem.css";
-  html { font: 10px/1 Ahem; max-width: 800px; }
-  .label { display: none; }
-</style>
-
-<style>
-  html, body { margin: 0; padding: 0; }
-
-  .test { height: 5em; margin: 0.5em 2em;
-          /* show bounds of test box without interfering with margin-collapsing */
-          background: black; padding-right: 2px;
-          /* ensure bullet follows first line */
-          display: list-item; }
-  /* ensure margin is contained */
-    .in-flow { margin: 1em 0 0.4em; background: orange }
-  /* ensure relpos is ignored */
-    .relpos { position: relative; top: -1.5em; }
-  /* ensure abspos static position follows alignment */
-    .wrapper { position: relative; }
-    .abspos { position: absolute; right: 0; margin-top: -1.5em; }
-  /* ensure overflow is not counted */
-    .overflow { height: 0; }
-
-  /* cram into 800x600 */
-  html { max-height: 600px; columns: 3 }
-  .wrapper { break-inside: avoid; border: solid 2px gray; }
-
-  /* readability */
-  .test > * { color: #8888; }
-  .label { color: black; font-weight: bold; }
-
-  /* reference code */
-  .test { box-sizing: border-box; }
-  .in-flow { margin: 0; }
-</style>
-
-<div class="wrapper">
-  <div class="test" style="padding-top: 1em">
-    <div class="in-flow"></div>
-    <div class="in-flow">
-      <span class="label">START</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test" style="padding-top: 2.3em">
-    <div class="in-flow"></div>
-    <div class="in-flow">
-      <span class="label">CENTER</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test" style="padding-top: 3.6em">
-    <div class="in-flow"></div>
-    <div class="in-flow">
-      <span class="label">END</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test" style="padding-top: 1em">
-    <div class="in-flow"></div>
-    <div class="in-flow">
-      <span class="label">BASELINE</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test" style="padding-top: 3.6em">
-    <div class="in-flow"></div>
-    <div class="in-flow">
-      <span class="label">LAST BASELINE</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test" style="padding-top: 1em">
-    <div class="in-flow"></div>
-    <div class="in-flow">
-      <span class="label">FLEX-START</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test" style="padding-top: 3.6em">
-    <div class="in-flow"></div>
-    <div class="in-flow">
-      <span class="label">FLEX-END</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test" style="padding-top: 1em">
-    <div class="in-flow"></div>
-    <div class="in-flow">
-      <span class="label">UNSAFE START</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test" style="padding-top: 2.3em">
-    <div class="in-flow"></div>
-    <div class="in-flow">
-      <span class="label">UNSAFE CENTER</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test" style="padding-top: 3.6em">
-    <div class="in-flow"></div>
-    <div class="in-flow">
-      <span class="label">UNSAFE END</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test" style="padding-top: 1em">
-    <div class="in-flow"></div>
-    <div class="in-flow">
-      <span class="label">SAFE START</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test" style="padding-top: 2.3em">
-    <div class="in-flow"></div>
-    <div class="in-flow">
-      <span class="label">SAFE CENTER</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test" style="padding-top: 3.6em">
-    <div class="in-flow"></div>
-    <div class="in-flow">
-      <span class="label">SAFE END</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test" style="padding-top: 2.3em">
-    <div class="in-flow"></div>
-    <div class="in-flow">
-      <span class="label">SPACE-EVENLY</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test" style="padding-top: 1em">
-    <div class="in-flow"></div>
-    <div class="in-flow">
-      <span class="label">SPACE-BETWEEN</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test" style="padding-top: 2.3em">
-    <div class="in-flow"></div>
-    <div class="in-flow">
-      <span class="label">SPACE-AROUND</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test" style="margin-top: 1em">
-    <div class="in-flow"></div>
-    <div class="in-flow">
-      <span class="label">NORMAL</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-
-<p>
-  <button onclick="document.querySelector('style[title]').textContent = 'html { font-size: 12px; }'">Show Text</button>

diff --git a/css/css-align/blocks/align-content-block-002.html b/css/css-align/blocks/align-content-block-002.html
index bad174d..795872e 100644
--- a/css/css-align/blocks/align-content-block-002.html
+++ b/css/css-align/blocks/align-content-block-002.html

@@ -2,7 +2,9 @@
 <title>CSS Box Alignment: align-content on large block container</title>
 <link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block">
 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
-<link rel="match" href="align-content-block-002-ref.html">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
 
 <style title="Needed for automation; delete to review/debug">
   @import "/fonts/ahem.css";
@@ -37,189 +39,190 @@
   .label { color: black; font-weight: bold; }
 </style>
 
+<body onload="checkLayout('.test');">
 <div class="wrapper">
-  <div class="test" style="align-content: start">
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: start" title="start">
+    <div class="in-flow" data-offset-y="15"></div>
     <div class="in-flow">
       <span class="label">START</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
+      <span class="abspos" data-offset-y="0">ABS</span>
+      <span class="relpos" data-offset-y="0">REL</span>
       <div class="overflow">OVERFLOW</div>
     </div>
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: center">
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: center" title="center">
+    <div class="in-flow" data-offset-y="28"></div>
     <div class="in-flow">
       <span class="label">CENTER</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
+      <span class="abspos" data-offset-y="13">ABS</span>
+      <span class="relpos" data-offset-y="13">REL</span>
       <div class="overflow">OVERFLOW</div>
     </div>
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: end">
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: end" title="end">
+    <div class="in-flow" data-offset-y="41"></div>
     <div class="in-flow">
       <span class="label">END</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
+      <span class="abspos" data-offset-y="26">ABS</span>
+      <span class="relpos" data-offset-y="26">REL</span>
       <div class="overflow">OVERFLOW</div>
     </div>
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: baseline">
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: baseline" title="baseline">
+    <div class="in-flow" data-offset-y="15"></div>
     <div class="in-flow">
       <span class="label">BASELINE</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
+      <span class="abspos" data-offset-y="0">ABS</span>
+      <span class="relpos" data-offset-y="0">REL</span>
       <div class="overflow">OVERFLOW</div>
     </div>
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: last baseline">
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: last baseline" title="last baseline">
+    <div class="in-flow" data-offset-y="41"></div>
     <div class="in-flow">
       <span class="label">LAST BASELINE</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
+      <span class="abspos" data-offset-y="26">ABS</span>
+      <span class="relpos" data-offset-y="26">REL</span>
       <div class="overflow">OVERFLOW</div>
     </div>
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: flex-start">
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: flex-start" title="flex-start">
+    <div class="in-flow" data-offset-y="15"></div>
     <div class="in-flow">
       <span class="label">FLEX-START</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
+      <span class="abspos" data-offset-y="0">ABS</span>
+      <span class="relpos" data-offset-y="0">REL</span>
       <div class="overflow">OVERFLOW</div>
     </div>
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: flex-end">
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: flex-end" title="flex-end">
+    <div class="in-flow" data-offset-y="41"></div>
     <div class="in-flow">
       <span class="label">FLEX-END</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
+      <span class="abspos" data-offset-y="26">ABS</span>
+      <span class="relpos" data-offset-y="26">REL</span>
       <div class="overflow">OVERFLOW</div>
     </div>
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: unsafe start">
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: unsafe start" title="unsafe start">
+    <div class="in-flow" data-offset-y="15"></div>
     <div class="in-flow">
       <span class="label">UNSAFE START</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
+      <span class="abspos" data-offset-y="0">ABS</span>
+      <span class="relpos" data-offset-y="0">REL</span>
       <div class="overflow">OVERFLOW</div>
     </div>
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: unsafe center">
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: unsafe center" title="unsafe center">
+    <div class="in-flow" data-offset-y="28"></div>
     <div class="in-flow">
       <span class="label">UNSAFE CENTER</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
+      <span class="abspos" data-offset-y="13">ABS</span>
+      <span class="relpos" data-offset-y="13">REL</span>
       <div class="overflow">OVERFLOW</div>
     </div>
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: unsafe end">
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: unsafe end" title="unsafe end">
+    <div class="in-flow" data-offset-y="41"></div>
     <div class="in-flow">
       <span class="label">UNSAFE END</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
+      <span class="abspos" data-offset-y="26">ABS</span>
+      <span class="relpos" data-offset-y="26">REL</span>
       <div class="overflow">OVERFLOW</div>
     </div>
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: safe start">
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: safe start" title="safe start">
+    <div class="in-flow" data-offset-y="15"></div>
     <div class="in-flow">
       <span class="label">SAFE START</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
+      <span class="abspos" data-offset-y="0">ABS</span>
+      <span class="relpos" data-offset-y="0">REL</span>
       <div class="overflow">OVERFLOW</div>
     </div>
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: safe center">
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: safe center" title="safe center">
+    <div class="in-flow" data-offset-y="28"></div>
     <div class="in-flow">
       <span class="label">SAFE CENTER</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
+      <span class="abspos" data-offset-y="13">ABS</span>
+      <span class="relpos" data-offset-y="13">REL</span>
       <div class="overflow">OVERFLOW</div>
     </div>
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: safe end">
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: safe end" title="safe end">
+    <div class="in-flow" data-offset-y="41"></div>
     <div class="in-flow">
       <span class="label">SAFE END</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
+      <span class="abspos" data-offset-y="26">ABS</span>
+      <span class="relpos" data-offset-y="26">REL</span>
       <div class="overflow">OVERFLOW</div>
     </div>
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: space-evenly">
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: space-evenly" title="space-evenly">
+    <div class="in-flow" data-offset-y="28"></div>
     <div class="in-flow">
       <span class="label">SPACE-EVENLY</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
+      <span class="abspos" data-offset-y="13">ABS</span>
+      <span class="relpos" data-offset-y="13">REL</span>
       <div class="overflow">OVERFLOW</div>
     </div>
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: space-between">
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: space-between" title="space-between">
+    <div class="in-flow" data-offset-y="15"></div>
     <div class="in-flow">
       <span class="label">SPACE-BETWEEN</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
+      <span class="abspos" data-offset-y="0">ABS</span>
+      <span class="relpos" data-offset-y="0">REL</span>
       <div class="overflow">OVERFLOW</div>
     </div>
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: space-around">
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: space-around" title="space-around">
+    <div class="in-flow" data-offset-y="28"></div>
     <div class="in-flow">
       <span class="label">SPACE-AROUND</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
+      <span class="abspos" data-offset-y="13">ABS</span>
+      <span class="relpos" data-offset-y="13">REL</span>
       <div class="overflow">OVERFLOW</div>
     </div>
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: normal">
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: normal" title="normal">
+    <div class="in-flow" data-offset-y="10"></div>
     <div class="in-flow">
       <span class="label">NORMAL</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
+      <span class="abspos" data-offset-y="-5">ABS</span>
+      <span class="relpos" data-offset-y="-5">REL</span>
       <div class="overflow">OVERFLOW</div>
     </div>
   </div>
@@ -227,3 +230,4 @@
 
 <p>
   <button onclick="document.querySelector('style[title]').textContent = 'html { font-size: 12px; }'">Show Text</button>
+</body>

diff --git a/css/css-align/blocks/align-content-block-003-ref.html b/css/css-align/blocks/align-content-block-003-ref.html
deleted file mode 100644
index 3441480..0000000
--- a/css/css-align/blocks/align-content-block-003-ref.html
+++ /dev/null

@@ -1,230 +0,0 @@
-<!DOCTYPE html>
-<title>CSS Box Alignment: align-content on small block container</title>
-<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
-
-<style title="Needed for automation; delete to review/debug">
-  @import "/fonts/ahem.css";
-  html { font: 10px/1 Ahem; max-width: 800px; }
-  .label { display: none; }
-</style>
-
-<style>
-  html, body { margin: 0; padding: 0; }
-
-  .test { height: 0.5em; margin: 0.5em 2em;
-          /* show bounds of test box without interfering with margin-collapsing */
-          background: black; padding-right: 2px;
-          /* ensure bullet follows first line */
-          display: list-item; }
-  /* ensure margin is contained */
-    .in-flow { margin: 1em 0 0.5em; background: orange }
-  /* ensure relpos is ignored */
-    .relpos { position: relative; top: -1.5em; }
-  /* ensure abspos static position follows alignment */
-    .wrapper { position: relative; }
-    .abspos { position: absolute; right: 0; margin-top: -1.5em; }
-  /* ensure overflow is not counted */
-    .overflow { height: 0; }
-
-  /* cram into 800x600 */
-  html { max-height: 600px; columns: 3 }
-  .wrapper { break-inside: avoid; border: solid 2px gray; padding: 2em 0; }
-
-  /* readability */
-  .test > * { color: #8888; }
-  .label { color: black; font-weight: bold; }
-
-  /* reference code */
-  .in-flow { margin: 0; }
-</style>
-
-<div class="wrapper">
-  <div class="test">
-    <div style="padding-top: 1em"></div>
-    <div class="in-flow">
-      <span class="label">START</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test">
-    <div style="padding-top: 1em"></div>
-    <div class="in-flow">
-      <span class="label">CENTER</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test">
-    <div style="padding-top: 1em"></div>
-    <div class="in-flow">
-      <span class="label">END</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test">
-    <div style="padding-top: 1em"></div>
-    <div class="in-flow">
-      <span class="label">BASELINE</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test">
-    <div style="padding-top: 1em"></div>
-    <div class="in-flow">
-      <span class="label">LAST BASELINE</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test">
-    <div style="padding-top: 1em"></div>
-    <div class="in-flow">
-      <span class="label">FLEX-START</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test">
-    <div style="padding-top: 1em"></div>
-    <div class="in-flow">
-      <span class="label">FLEX-END</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test">
-    <div style="padding-top: 1em"></div>
-    <div class="in-flow">
-      <span class="label">UNSAFE START</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test">
-    <div style="padding-top: 1em; margin-bottom: -1em"></div>
-    <div class="in-flow">
-      <span class="label">UNSAFE CENTER</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test">
-    <div style="padding-top: 1em; margin-bottom: -2em"></div>
-    <div class="in-flow">
-      <span class="label">UNSAFE END</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test">
-    <div style="padding-top: 1em"></div>
-    <div class="in-flow">
-      <span class="label">SAFE START</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test">
-    <div style="padding-top: 1em"></div>
-    <div class="in-flow">
-      <span class="label">SAFE CENTER</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test">
-    <div style="padding-top: 1em"></div>
-    <div class="in-flow">
-      <span class="label">SAFE END</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test">
-    <div style="padding-top: 1em"></div>
-    <div class="in-flow">
-      <span class="label">SPACE-EVENLY</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test">
-    <div style="padding-top: 1em"></div>
-    <div class="in-flow">
-      <span class="label">SPACE-BETWEEN</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test">
-    <div style="padding-top: 1em"></div>
-    <div class="in-flow">
-      <span class="label">SPACE-AROUND</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test">
-    <div style="margin-top: 1em"></div>
-    <div class="in-flow">
-      <span class="label">NORMAL</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-
-<p>
-  <button onclick="document.querySelector('style[title]').textContent = 'html { font-size: 12px; }'">Show Text</button>

diff --git a/css/css-align/blocks/align-content-block-003.html b/css/css-align/blocks/align-content-block-003.html
index 9356d2a..2f3fea9 100644
--- a/css/css-align/blocks/align-content-block-003.html
+++ b/css/css-align/blocks/align-content-block-003.html

@@ -2,7 +2,9 @@
 <title>CSS Box Alignment: align-content on small block container</title>
 <link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block">
 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
-<link rel="match" href="align-content-block-003-ref.html">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
 
 <style title="Needed for automation; delete to review/debug">
   @import "/fonts/ahem.css";
@@ -37,189 +39,190 @@
   .label { color: black; font-weight: bold; }
 </style>
 
+<body onload="checkLayout('.test');">
 <div class="wrapper">
-  <div class="test" style="align-content: start">
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: start" title="start">
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
       <span class="label">START</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
+      <span class="abspos" data-offset-y="20">ABS</span>
+      <span class="relpos" data-offset-y="20">REL</span>
       <div class="overflow">OVERFLOW</div>
     </div>
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: center">
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: center" title="center">
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
       <span class="label">CENTER</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
+      <span class="abspos" data-offset-y="20">ABS</span>
+      <span class="relpos" data-offset-y="20">REL</span>
       <div class="overflow">OVERFLOW</div>
     </div>
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: end">
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: end" title="end">
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
       <span class="label">END</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
+      <span class="abspos" data-offset-y="20">ABS</span>
+      <span class="relpos" data-offset-y="20">REL</span>
       <div class="overflow">OVERFLOW</div>
     </div>
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: baseline">
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: baseline" title="baseline">
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
       <span class="label">BASELINE</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
+      <span class="abspos" data-offset-y="20">ABS</span>
+      <span class="relpos" data-offset-y="20">REL</span>
       <div class="overflow">OVERFLOW</div>
     </div>
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: last baseline">
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: last baseline" title="last baseline">
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
       <span class="label">LAST BASELINE</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
+      <span class="abspos" data-offset-y="20">ABS</span>
+      <span class="relpos" data-offset-y="20">REL</span>
       <div class="overflow">OVERFLOW</div>
     </div>
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: flex-start">
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: flex-start" title="flex-start">
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
       <span class="label">FLEX-START</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
+      <span class="abspos" data-offset-y="20">ABS</span>
+      <span class="relpos" data-offset-y="20">REL</span>
       <div class="overflow">OVERFLOW</div>
     </div>
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: flex-end">
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: flex-end" title="flex-end">
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
       <span class="label">FLEX-END</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
+      <span class="abspos" data-offset-y="20">ABS</span>
+      <span class="relpos" data-offset-y="20">REL</span>
       <div class="overflow">OVERFLOW</div>
     </div>
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: unsafe start">
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: unsafe start" title="unsafe start">
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
       <span class="label">UNSAFE START</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
+      <span class="abspos" data-offset-y="20">ABS</span>
+      <span class="relpos" data-offset-y="20">REL</span>
       <div class="overflow">OVERFLOW</div>
     </div>
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: unsafe center">
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: unsafe center" title="unsafe center">
+    <div class="in-flow" data-offset-y="25"></div>
     <div class="in-flow">
       <span class="label">UNSAFE CENTER</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
+      <span class="abspos" data-offset-y="10">ABS</span>
+      <span class="relpos" data-offset-y="10">REL</span>
       <div class="overflow">OVERFLOW</div>
     </div>
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: unsafe end">
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: unsafe end" title="unsafe end">
+    <div class="in-flow" data-offset-y="15"></div>
     <div class="in-flow">
       <span class="label">UNSAFE END</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
+      <span class="abspos" data-offset-y="0">ABS</span>
+      <span class="relpos" data-offset-y="0">REL</span>
       <div class="overflow">OVERFLOW</div>
     </div>
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: safe start">
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: safe start" title="safe start">
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
       <span class="label">SAFE START</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
+      <span class="abspos" data-offset-y="20">ABS</span>
+      <span class="relpos" data-offset-y="20">REL</span>
       <div class="overflow">OVERFLOW</div>
     </div>
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: safe center">
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: safe center" title="safe center">
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
       <span class="label">SAFE CENTER</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
+      <span class="abspos" data-offset-y="20">ABS</span>
+      <span class="relpos" data-offset-y="20">REL</span>
       <div class="overflow">OVERFLOW</div>
     </div>
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: safe end">
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: safe end" title="safe end">
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
       <span class="label">SAFE END</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
+      <span class="abspos" data-offset-y="20">ABS</span>
+      <span class="relpos" data-offset-y="20">REL</span>
       <div class="overflow">OVERFLOW</div>
     </div>
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: space-evenly">
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: space-evenly" title="space-evently">
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
       <span class="label">SPACE-EVENLY</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
+      <span class="abspos" data-offset-y="20">ABS</span>
+      <span class="relpos" data-offset-y="20">REL</span>
       <div class="overflow">OVERFLOW</div>
     </div>
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: space-between">
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: space-between" title="space-between">
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
       <span class="label">SPACE-BETWEEN</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
+      <span class="abspos" data-offset-y="20">ABS</span>
+      <span class="relpos" data-offset-y="20">REL</span>
       <div class="overflow">OVERFLOW</div>
     </div>
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: space-around">
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: space-around" title="space-around">
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
       <span class="label">SPACE-AROUND</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
+      <span class="abspos" data-offset-y="20">ABS</span>
+      <span class="relpos" data-offset-y="20">REL</span>
       <div class="overflow">OVERFLOW</div>
     </div>
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: normal">
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: normal" title="normal">
+    <div class="in-flow" data-offset-y="30"></div>
     <div class="in-flow">
       <span class="label">NORMAL</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
+      <span class="abspos" data-offset-y="15">ABS</span>
+      <span class="relpos" data-offset-y="15">REL</span>
       <div class="overflow">OVERFLOW</div>
     </div>
   </div>
@@ -227,3 +230,4 @@
 
 <p>
   <button onclick="document.querySelector('style[title]').textContent = 'html { font-size: 12px; }'">Show Text</button>
+</body>

diff --git a/css/css-align/blocks/align-content-block-004-ref.html b/css/css-align/blocks/align-content-block-004-ref.html
deleted file mode 100644
index ba1182b..0000000
--- a/css/css-align/blocks/align-content-block-004-ref.html
+++ /dev/null

@@ -1,264 +0,0 @@
-<!DOCTYPE html>
-<title>CSS Box Alignment: align-content on large block container with floats</title>
-<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
-
-<style title="Needed for automation; delete to review/debug">
-  @import "/fonts/ahem.css";
-  html { font: 10px/1 Ahem; max-width: 800px; }
-  .label { display: none; }
-</style>
-
-<style>
-  html, body { margin: 0; padding: 0; }
-
-  .test { height: 5em; margin: 0.5em 1em;
-          /* show bounds of test box without interfering with margin-collapsing */
-          background: black; padding-right: 2px; }
-  /* ensure float is contained */
-    .float { float: right; background: orange; height: 2em }
-  /* ensure margin is contained */
-    .in-flow { margin-top: 1em; background: orange }
-  /* ensure relpos is ignored */
-    .relpos { position: relative; top: -1.5em; }
-  /* ensure abspos static position follows alignment */
-    .wrapper { position: relative; }
-    .abspos { position: absolute; right: 0; margin-top: -1.5em; }
-  /* ensure overflow is not counted */
-    .overflow { height: 0; }
-
-  /* cram into 800x600 */
-  html { max-height: 600px; columns: 3 }
-  .wrapper { break-inside: avoid; border: solid 2px gray; }
-
-  /* readability */
-  .test > * { color: #8888; }
-  .label { color: black; font-weight: bold; }
-
-  /* reference code */
-  .test { display: flow-root; box-sizing: border-box; }
-</style>
-
-<div class="wrapper">
-  <div class="test" style="padding-top: 0">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
-    <div class="in-flow">
-      <div class="float">FLT</div>
-      <span class="label">START</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test" style="padding-top: 1em">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
-    <div class="in-flow">
-      <div class="float">FLT</div>
-      <span class="label">CENTER</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test" style="padding-top: 2em">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
-    <div class="in-flow">
-      <div class="float">FLT</div>
-      <span class="label">END</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test" style="padding-top: 0">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
-    <div class="in-flow">
-      <div class="float">FLT</div>
-      <span class="label">BASELINE</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test" style="padding-top: 2em">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
-    <div class="in-flow">
-      <div class="float">FLT</div>
-      <span class="label">LAST BASELINE</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test" style="padding-top: 0">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
-    <div class="in-flow">
-      <div class="float">FLT</div>
-      <span class="label">FLEX-START</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test" style="padding-top: 2em">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
-    <div class="in-flow">
-      <div class="float">FLT</div>
-      <span class="label">FLEX-END</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test" style="padding-top: 0">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
-    <div class="in-flow">
-      <div class="float">FLT</div>
-      <span class="label">UNSAFE START</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test" style="padding-top: 1em">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
-    <div class="in-flow">
-      <div class="float">FLT</div>
-      <span class="label">UNSAFE CENTER</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test" style="padding-top: 2em">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
-    <div class="in-flow">
-      <div class="float">FLT</div>
-      <span class="label">UNSAFE END</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test" style="padding-top: 0">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
-    <div class="in-flow">
-      <div class="float">FLT</div>
-      <span class="label">SAFE START</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test" style="padding-top: 1em">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
-    <div class="in-flow">
-      <div class="float">FLT</div>
-      <span class="label">SAFE CENTER</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test" style="padding-top: 2em">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
-    <div class="in-flow">
-      <div class="float">FLT</div>
-      <span class="label">SAFE END</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test" style="padding-top: 1em">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
-    <div class="in-flow">
-      <div class="float">FLT</div>
-      <span class="label">SPACE-EVENLY</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test" style="padding-top: 0">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
-    <div class="in-flow">
-      <div class="float">FLT</div>
-      <span class="label">SPACE-BETWEEN</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test" style="padding-top: 1em">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
-    <div class="in-flow">
-      <div class="float">FLT</div>
-      <span class="label">SPACE-AROUND</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test" style="display: block">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
-    <div class="in-flow">
-      <div class="float">FLT</div>
-      <span class="label">NORMAL</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-
-<p>
-  <button onclick="document.querySelector('style[title]').textContent = 'html { font-size: 12px; }'">Show Text</button>

diff --git a/css/css-align/blocks/align-content-block-004.html b/css/css-align/blocks/align-content-block-004.html
index 38a3309..18ac442 100644
--- a/css/css-align/blocks/align-content-block-004.html
+++ b/css/css-align/blocks/align-content-block-004.html

@@ -2,7 +2,9 @@
 <title>CSS Box Alignment: align-content on large block container with floats</title>
 <link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block">
 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
-<link rel="match" href="align-content-block-004-ref.html">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
 
 <style title="Needed for automation; delete to review/debug">
   @import "/fonts/ahem.css";
@@ -37,12 +39,13 @@
   .label { color: black; font-weight: bold; }
 </style>
 
+<body onload="checkLayout('.test');">
 <div class="wrapper">
-  <div class="test" style="align-content: start">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: start" title="start">
+    <div class="float" data-offset-y="5">FLT</div>
+    <div class="in-flow" data-offset-y="15"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="15">FLT</div>
       <span class="label">START</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -51,11 +54,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: center">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: center" title="center">
+    <div class="float" data-offset-y="15">FLT</div>
+    <div class="in-flow" data-offset-y="25"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="25">FLT</div>
       <span class="label">CENTER</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -64,11 +67,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: end">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: end" title="end">
+    <div class="float" data-offset-y="25">FLT</div>
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="35">FLT</div>
       <span class="label">END</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -77,11 +80,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: baseline">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: baseline" title="baseline">
+    <div class="float" data-offset-y="5">FLT</div>
+    <div class="in-flow" data-offset-y="15"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="15">FLT</div>
       <span class="label">BASELINE</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -90,11 +93,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: last baseline">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: last baseline" title="last baseline">
+    <div class="float" data-offset-y="25">FLT</div>
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="35">FLT</div>
       <span class="label">LAST BASELINE</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -103,11 +106,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: flex-start">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: flex-start" title="flex-start">
+    <div class="float" data-offset-y="5">FLT</div>
+    <div class="in-flow" data-offset-y="15"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="15">FLT</div>
       <span class="label">FLEX-START</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -116,11 +119,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: flex-end">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: flex-end" title="flex-end">
+    <div class="float" data-offset-y="25">FLT</div>
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="35">FLT</div>
       <span class="label">FLEX-END</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -129,11 +132,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: unsafe start">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: unsafe start" title="unsafe start">
+    <div class="float" data-offset-y="5">FLT</div>
+    <div class="in-flow" data-offset-y="15"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="15">FLT</div>
       <span class="label">UNSAFE START</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -142,11 +145,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: unsafe center">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: unsafe center" title="unsafe center">
+    <div class="float" data-offset-y="15">FLT</div>
+    <div class="in-flow" data-offset-y="25"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="25">FLT</div>
       <span class="label">UNSAFE CENTER</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -155,11 +158,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: unsafe end">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: unsafe end" title="unsafe end">
+    <div class="float" data-offset-y="25">FLT</div>
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="35">FLT</div>
       <span class="label">UNSAFE END</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -168,11 +171,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: safe start">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: safe start" title="safe start">
+    <div class="float" data-offset-y="5">FLT</div>
+    <div class="in-flow" data-offset-y="15"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="15">FLT</div>
       <span class="label">SAFE START</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -181,11 +184,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: safe center">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: safe center" title="safe center">
+    <div class="float" data-offset-y="15">FLT</div>
+    <div class="in-flow" data-offset-y="25"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="25">FLT</div>
       <span class="label">SAFE CENTER</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -194,11 +197,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: safe end">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: safe end" title="safe end">
+    <div class="float" data-offset-y="25">FLT</div>
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="35">FLT</div>
       <span class="label">SAFE END</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -207,11 +210,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: space-evenly">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: space-evenly" title="space-evenly">
+    <div class="float" data-offset-y="15">FLT</div>
+    <div class="in-flow" data-offset-y="25"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="25">FLT</div>
       <span class="label">SPACE-EVENLY</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -220,11 +223,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: space-between">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: space-between" title="space-between">
+    <div class="float" data-offset-y="5">FLT</div>
+    <div class="in-flow" data-offset-y="15"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="15">FLT</div>
       <span class="label">SPACE-BETWEEN</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -233,11 +236,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: space-around">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: space-around" title="space-around">
+    <div class="float" data-offset-y="15">FLT</div>
+    <div class="in-flow" data-offset-y="25"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="25">FLT</div>
       <span class="label">SPACE-AROUND</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -246,11 +249,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: normal">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: normal" title="normal">
+    <div class="float" data-offset-y="10">FLT</div>
+    <div class="in-flow" data-offset-y="10"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="10">FLT</div>
       <span class="label">NORMAL</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -261,3 +264,4 @@
 
 <p>
   <button onclick="document.querySelector('style[title]').textContent = 'html { font-size: 12px; }'">Show Text</button>
+</body>

diff --git a/css/css-align/blocks/align-content-block-005-ref.html b/css/css-align/blocks/align-content-block-005-ref.html
deleted file mode 100644
index c371261..0000000
--- a/css/css-align/blocks/align-content-block-005-ref.html
+++ /dev/null

@@ -1,261 +0,0 @@
-<!DOCTYPE html>
-<title>CSS Box Alignment: align-content on small block container with floats</title>
-<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
-
-<style title="Needed for automation; delete to review/debug">
-  @import "/fonts/ahem.css";
-  html { font: 10px/1 Ahem; max-width: 800px; }
-  .label { display: none; }
-</style>
-
-<style>
-  html, body { margin: 0; padding: 0; }
-
-  .test { height: 1em; margin: 0.5em 2em;
-          /* show bounds of test box without interfering with margin-collapsing */
-          background: black; padding-right: 2px; }
-  /* ensure float is contained */
-    .float { float: right; background: orange; height: 2em }
-  /* ensure margin is contained */
-    .in-flow { margin-top: 1em; background: orange }
-  /* ensure relpos is ignored */
-    .relpos { position: relative; top: -1.5em; }
-  /* ensure abspos static position follows alignment */
-    .wrapper { position: relative; }
-    .abspos { position: absolute; right: 0; margin-top: -1.5em; }
-  /* ensure overflow is not counted */
-    .overflow { height: 0; }
-
-  /* cram into 800x600 */
-  html { max-height: 600px; columns: 3 }
-  .wrapper { break-inside: avoid; border: solid 2px gray; padding: 3em 0; }
-
-  /* readability */
-  .test > * { color: #8888; }
-  .label { color: black; font-weight: bold; }
-</style>
-
-<div class="wrapper">
-  <div class="test">
-    <div class="float">FLT</div>
-    <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div>
-    <div class="in-flow">
-      <div class="float">FLT</div>
-      <span class="label">START</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test">
-    <div class="float">FLT</div>
-    <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div>
-    <div class="in-flow">
-      <div class="float">FLT</div>
-      <span class="label">CENTER</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test">
-    <div class="float">FLT</div>
-    <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div>
-    <div class="in-flow">
-      <div class="float">FLT</div>
-      <span class="label">END</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test">
-    <div class="float">FLT</div>
-    <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div>
-    <div class="in-flow">
-      <div class="float">FLT</div>
-      <span class="label">BASELINE</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test">
-    <div class="float">FLT</div>
-    <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div>
-    <div class="in-flow">
-      <div class="float">FLT</div>
-      <span class="label">LAST BASELINE</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test">
-    <div class="float">FLT</div>
-    <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div>
-    <div class="in-flow">
-      <div class="float">FLT</div>
-      <span class="label">FLEX-START</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test">
-    <div class="float">FLT</div>
-    <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div>
-    <div class="in-flow">
-      <div class="float">FLT</div>
-      <span class="label">FLEX-END</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test">
-    <div class="float">FLT</div>
-    <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div>
-    <div class="in-flow">
-      <div class="float">FLT</div>
-      <span class="label">UNSAFE START</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test">
-    <div class="float" style="margin-top: -1em">FLT</div>
-    <div style="padding-top: 0.5em; margin-bottom: -1.5em"></div>
-    <div class="in-flow">
-      <div class="float">FLT</div>
-      <span class="label">UNSAFE CENTER</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test">
-    <div style="padding-top: 0.5em; margin-bottom: -2.5em"></div>
-    <div class="in-flow">
-      <div class="float" style="margin-top: -1em">FLT</div>
-      <div class="float">FLT</div>
-      <span class="label">UNSAFE END</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test">
-    <div class="float">FLT</div>
-    <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div>
-    <div class="in-flow">
-      <div class="float">FLT</div>
-      <span class="label">SAFE START</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test">
-    <div class="float">FLT</div>
-    <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div>
-    <div class="in-flow">
-      <div class="float">FLT</div>
-      <span class="label">SAFE CENTER</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test">
-    <div class="float">FLT</div>
-    <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div>
-    <div class="in-flow">
-      <div class="float">FLT</div>
-      <span class="label">SAFE END</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test">
-    <div class="float">FLT</div>
-    <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div>
-    <div class="in-flow">
-      <div class="float">FLT</div>
-      <span class="label">SPACE-EVENLY</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test">
-    <div class="float">FLT</div>
-    <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div>
-    <div class="in-flow">
-      <div class="float">FLT</div>
-      <span class="label">SPACE-BETWEEN</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test">
-    <div class="float">FLT</div>
-    <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div>
-    <div class="in-flow">
-      <div class="float">FLT</div>
-      <span class="label">SPACE-AROUND</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-<div class="wrapper">
-  <div class="test">
-    <div class="float">FLT</div>
-    <div></div>
-    <div class="in-flow">
-      <div class="float">FLT</div>
-      <span class="label">NORMAL</span>
-      <span class="abspos">ABS</span>
-      <span class="relpos">REL</span>
-      <div class="overflow">OVERFLOW</div>
-    </div>
-  </div>
-</div>
-
-<p>
-  <button onclick="document.querySelector('style[title]').textContent = 'html { font-size: 12px; }'">Show Text</button>

diff --git a/css/css-align/blocks/align-content-block-005.html b/css/css-align/blocks/align-content-block-005.html
index 97fe6c9..f20582d 100644
--- a/css/css-align/blocks/align-content-block-005.html
+++ b/css/css-align/blocks/align-content-block-005.html

@@ -2,7 +2,9 @@
 <title>CSS Box Alignment: align-content on small block container with floats</title>
 <link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block">
 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
-<link rel="match" href="align-content-block-003-ref.html">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
 
 <style title="Needed for automation; delete to review/debug">
   @import "/fonts/ahem.css";
@@ -37,12 +39,13 @@
   .label { color: black; font-weight: bold; }
 </style>
 
+<body onload="checkLayout('.test');">
 <div class="wrapper">
-  <div class="test" style="align-content: start">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: start" title="start">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">START</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -51,11 +54,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: center">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: center" title="center">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">CENTER</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -64,11 +67,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: end">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: end" title="end">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">END</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -77,11 +80,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: baseline">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: baseline" title="baseline">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">BASELINE</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -90,11 +93,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: last baseline">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: last baseline" title="last baseline">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">LAST BASELINE</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -103,11 +106,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: flex-start">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: flex-start" title="flex-start">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">FLEX-START</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -116,11 +119,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: flex-end">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: flex-end" title="flex-end">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">FLEX-END</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -129,11 +132,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: unsafe start">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: unsafe start" title="unsafe start">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">UNSAFE START</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -142,11 +145,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: unsafe center">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: unsafe center" title="unsafe center">
+    <div class="float" data-offset-y="25">FLT</div>
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="35">FLT</div>
       <span class="label">UNSAFE CENTER</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -155,11 +158,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: unsafe end">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: unsafe end" title="unsafe end">
+    <div class="float" data-offset-y="15">FLT</div>
+    <div class="in-flow" data-offset-y="25"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="25">FLT</div>
       <span class="label">UNSAFE END</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -168,11 +171,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: safe start">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: safe start" title="safe start">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">SAFE START</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -181,11 +184,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: safe center">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: safe center" title="safe center">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">SAFE CENTER</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -194,11 +197,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: safe end">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: safe end" title="safe end">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">SAFE END</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -207,11 +210,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: space-evenly">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: space-evenly" title="space-evenly">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">SPACE-EVENLY</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -221,11 +224,11 @@
 </div>
 
 <div class="wrapper">
-  <div class="test" style="align-content: space-between">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: space-between" title="space-between">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">SPACE-BETWEEN</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -234,11 +237,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: space-around">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: space-around" title="space-around">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">SPACE-AROUND</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -247,11 +250,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: normal">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: normal" title="normal">
+    <div class="float" data-offset-y="40">FLT</div>
+    <div class="in-flow" data-offset-y="40"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="40">FLT</div>
       <span class="label">NORMAL</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -262,3 +265,4 @@
 
 <p>
   <button onclick="document.querySelector('style[title]').textContent = 'html { font-size: 12px; }'">Show Text</button>
+</body>

diff --git a/css/css-align/blocks/align-content-block-006.html b/css/css-align/blocks/align-content-block-006.html
index be62e78..acdb645 100644
--- a/css/css-align/blocks/align-content-block-006.html
+++ b/css/css-align/blocks/align-content-block-006.html

@@ -1,9 +1,11 @@
 <!DOCTYPE html>
-<html class="reftest-wait">
+<html>
 <title>CSS Box Alignment: align-content container change to large block container with floats</title>
 <link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block">
 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
-<link rel="match" href="align-content-block-004-ref.html">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
 
 <style title="Needed for automation; delete to review/debug">
   @import "/fonts/ahem.css";
@@ -16,13 +18,17 @@
   .test { height: 1em !important; }
 </style>
 <script>
-  function test()
+  function doTest()
   {
     document.body.offsetHeight; // trigger layout
     document.getElementById('initial').type = 'text/plain'; // invalidate stylesheet
-    document.documentElement.removeAttribute("class");
+    checkLayout('.test');
+  }
+  window.onload = () => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(doTest);
+    });
   };
-  document.addEventListener("TestRendered", test);
   window.addEventListener("click", () => { document.getElementById('manual').style.display = "inline"; });
 </script>
 
@@ -53,14 +59,18 @@
   .label { color: black; font-weight: bold; }
 </style>
 
+<!--
+  Results should be same as align-content-block-004.html.
+-->
+
 <body>
 
 <div class="wrapper">
-  <div class="test" style="align-content: start">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: start" title="start">
+    <div class="float" data-offset-y="5">FLT</div>
+    <div class="in-flow" data-offset-y="15"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="15">FLT</div>
       <span class="label">START</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -69,11 +79,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: center">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: center" title="center">
+    <div class="float" data-offset-y="15">FLT</div>
+    <div class="in-flow" data-offset-y="25"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="25">FLT</div>
       <span class="label">CENTER</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -82,11 +92,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: end">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: end" title="end">
+    <div class="float" data-offset-y="25">FLT</div>
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="35">FLT</div>
       <span class="label">END</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -95,11 +105,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: baseline">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: baseline" title="baseline">
+    <div class="float" data-offset-y="5">FLT</div>
+    <div class="in-flow" data-offset-y="15"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="15">FLT</div>
       <span class="label">BASELINE</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -108,11 +118,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: last baseline">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: last baseline" title="last baseline">
+    <div class="float" data-offset-y="25">FLT</div>
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="35">FLT</div>
       <span class="label">LAST BASELINE</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -121,11 +131,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: flex-start">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: flex-start" title="flex-start">
+    <div class="float" data-offset-y="5">FLT</div>
+    <div class="in-flow" data-offset-y="15"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="15">FLT</div>
       <span class="label">FLEX-START</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -134,11 +144,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: flex-end">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: flex-end" title="flex-end">
+    <div class="float" data-offset-y="25">FLT</div>
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="35">FLT</div>
       <span class="label">FLEX-END</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -147,11 +157,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: unsafe start">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: unsafe start" title="unsafe start">
+    <div class="float" data-offset-y="5">FLT</div>
+    <div class="in-flow" data-offset-y="15"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="15">FLT</div>
       <span class="label">UNSAFE START</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -160,11 +170,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: unsafe center">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: unsafe center" title="unsafe center">
+    <div class="float" data-offset-y="15">FLT</div>
+    <div class="in-flow" data-offset-y="25"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="25">FLT</div>
       <span class="label">UNSAFE CENTER</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -173,11 +183,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: unsafe end">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: unsafe end" title="unsafe end">
+    <div class="float" data-offset-y="25">FLT</div>
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="35">FLT</div>
       <span class="label">UNSAFE END</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -186,11 +196,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: safe start">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: safe start" title="safe start">
+    <div class="float" data-offset-y="5">FLT</div>
+    <div class="in-flow" data-offset-y="15"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="15">FLT</div>
       <span class="label">SAFE START</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -199,11 +209,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: safe center">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: safe center" title="safe center">
+    <div class="float"" data-offset-y="15">FLT</div>
+    <div class="in-flow"" data-offset-y="25"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float"" data-offset-y="25">FLT</div>
       <span class="label">SAFE CENTER</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -212,11 +222,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: safe end">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: safe end" title="safe end">
+    <div class="float" data-offset-y="25">FLT</div>
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="35">FLT</div>
       <span class="label">SAFE END</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -225,11 +235,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: space-evenly">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: space-evenly" title="space-evenly">
+    <div class="float" data-offset-y="15">FLT</div>
+    <div class="in-flow" data-offset-y="25"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="25">FLT</div>
       <span class="label">SPACE-EVENLY</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -238,11 +248,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: space-between">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: space-between" title="space-between">
+    <div class="float" data-offset-y="5">FLT</div>
+    <div class="in-flow" data-offset-y="15"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="15">FLT</div>
       <span class="label">SPACE-BETWEEN</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -251,11 +261,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: space-around">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: space-around" title="space-around">
+    <div class="float" data-offset-y="15">FLT</div>
+    <div class="in-flow" data-offset-y="25"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="25">FLT</div>
       <span class="label">SPACE-AROUND</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -264,11 +274,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: normal">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: normal" title="normal">
+    <div class="float" data-offset-y="10">FLT</div>
+    <div class="in-flow" data-offset-y="10"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="10">FLT</div>
       <span class="label">NORMAL</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -279,4 +289,4 @@
 
 <p>
   <button onclick="document.querySelector('style[title]').textContent = 'html { font-size: 12px; }'">Show Text</button>
-  <button onclick="test()" id="manual">Run Test (Manual Trigger)</button>
+</body>

diff --git a/css/css-align/blocks/align-content-block-007.html b/css/css-align/blocks/align-content-block-007.html
index 61c4c68..c60f640 100644
--- a/css/css-align/blocks/align-content-block-007.html
+++ b/css/css-align/blocks/align-content-block-007.html

@@ -1,9 +1,11 @@
 <!DOCTYPE html>
-<html class="reftest-wait">
+<html>
 <title>CSS Box Alignment: align-content container change to small block container with floats</title>
 <link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block">
 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
-<link rel="match" href="align-content-block-005-ref.html">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
 
 <style title="Needed for automation; delete to review/debug">
   @import "/fonts/ahem.css";
@@ -16,13 +18,17 @@
   .test { height: 5em !important; }
 </style>
 <script>
-  function test()
+  function doTest()
   {
     document.body.offsetHeight; // trigger layout
     document.getElementById('initial').type = 'text/plain'; // invalidate stylesheet
-    document.documentElement.removeAttribute("class");
+    checkLayout('.test');
+  }
+  window.onload = () => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(doTest);
+    });
   };
-  document.addEventListener("TestRendered", test);
   window.addEventListener("click", () => { document.getElementById('manual').style.display = "inline"; });
 </script>
 
@@ -53,12 +59,16 @@
   .label { color: black; font-weight: bold; }
 </style>
 
+<!--
+  Results should be same as align-content-block-005.html.
+-->
+
 <div class="wrapper">
-  <div class="test" style="align-content: start">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: start" title="start">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">START</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -67,11 +77,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: center">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: center" title="center">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">CENTER</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -80,11 +90,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: end">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: end" title="end">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">END</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -93,11 +103,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: baseline">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: baseline" title="baseline">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">BASELINE</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -106,11 +116,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: last baseline">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: last baseline" title="last baseline">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">LAST BASELINE</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -119,11 +129,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: flex-start">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: flex-start" title="flex-start">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">FLEX-START</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -132,11 +142,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: flex-end">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: flex-end" title="flex-end">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">FLEX-END</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -145,11 +155,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: unsafe start">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: unsafe start" title="unsafe start">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">UNSAFE START</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -158,11 +168,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: unsafe center">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: unsafe center" title="unsafe center">
+    <div class="float" data-offset-y="25">FLT</div>
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="35">FLT</div>
       <span class="label">UNSAFE CENTER</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -171,11 +181,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: unsafe end">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: unsafe end" title="unsafe end">
+    <div class="float" data-offset-y="15">FLT</div>
+    <div class="in-flow" data-offset-y="25"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="25">FLT</div>
       <span class="label">UNSAFE END</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -184,11 +194,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: safe start">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: safe start" title="safe start">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">SAFE START</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -197,11 +207,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: safe center">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: safe center" title="safe center">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">SAFE CENTER</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -210,11 +220,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: safe end">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: safe end" title="safe end">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">SAFE END</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -223,11 +233,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: space-evenly">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: space-evenly" title="space-evenly">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">SPACE-EVENLY</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -236,11 +246,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: space-between">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: space-between" title="space-between">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">SPACE-BETWEEN</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -249,11 +259,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: space-around">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: space-around" title="space-around">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">SPACE-AROUND</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -262,11 +272,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: normal">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: normal" title="normal">
+    <div class="float" data-offset-y="40">FLT</div>
+    <div class="in-flow" data-offset-y="40"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="40">FLT</div>
       <span class="label">NORMAL</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -277,4 +287,3 @@
 
 <p>
   <button onclick="document.querySelector('style[title]').textContent = 'html { font-size: 12px; }'">Show Text</button>
-  <button onclick="test()" id="manual">Run Test (Manual Trigger)</button>

diff --git a/css/css-align/blocks/align-content-block-008.html b/css/css-align/blocks/align-content-block-008.html
index e9a861c..7d088d6 100644
--- a/css/css-align/blocks/align-content-block-008.html
+++ b/css/css-align/blocks/align-content-block-008.html

@@ -1,9 +1,11 @@
 <!DOCTYPE html>
-<html class="reftest-wait">
+<html>
 <title>CSS Box Alignment: align-content style change on large block container with floats</title>
 <link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block">
 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
-<link rel="match" href="align-content-block-004-ref.html">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
 
 <style title="Needed for automation; delete to review/debug">
   @import "/fonts/ahem.css";
@@ -33,13 +35,17 @@
   [style$="normal"       ] { align-content: unsafe end    !important; }
 </style>
 <script>
-  function test()
+  function doTest()
   {
     document.body.offsetHeight; // trigger layout
     document.getElementById('initial').type = 'text/plain'; // invalidate stylesheet
-    document.documentElement.removeAttribute("class");
+    checkLayout('.test');
+  }
+  window.onload = () => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(doTest);
+    });
   };
-  document.addEventListener("TestRendered", test);
   window.addEventListener("click", () => { document.getElementById('manual').style.display = "inline"; });
 </script>
 
@@ -70,14 +76,18 @@
   .label { color: black; font-weight: bold; }
 </style>
 
+<!--
+  Results should be same as align-content-block-004.html.
+-->
+
 <body>
 
 <div class="wrapper">
-  <div class="test" style="align-content: start">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: start" title="start">
+    <div class="float" data-offset-y="5">FLT</div>
+    <div class="in-flow" data-offset-y="15"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="15">FLT</div>
       <span class="label">START</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -86,11 +96,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: center">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: center" title="center">
+    <div class="float" data-offset-y="15">FLT</div>
+    <div class="in-flow" data-offset-y="25"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="25">FLT</div>
       <span class="label">CENTER</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -99,11 +109,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: end">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: end" title="end">
+    <div class="float" data-offset-y="25">FLT</div>
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="35">FLT</div>
       <span class="label">END</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -112,11 +122,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: baseline">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: baseline" title="baseline">
+    <div class="float" data-offset-y="5">FLT</div>
+    <div class="in-flow" data-offset-y="15"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="15">FLT</div>
       <span class="label">BASELINE</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -125,11 +135,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: last baseline">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: last baseline" title="last baseline">
+    <div class="float" data-offset-y="25">FLT</div>
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="35">FLT</div>
       <span class="label">LAST BASELINE</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -138,11 +148,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: flex-start">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: flex-start" title="flex-start">
+    <div class="float" data-offset-y="5">FLT</div>
+    <div class="in-flow" data-offset-y="15"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="15">FLT</div>
       <span class="label">FLEX-START</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -151,11 +161,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: flex-end">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: flex-end" title="flex-end">
+    <div class="float" data-offset-y="25">FLT</div>
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="35">FLT</div>
       <span class="label">FLEX-END</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -164,11 +174,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: unsafe start">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: unsafe start" title="unsafe start">
+    <div class="float" data-offset-y="5">FLT</div>
+    <div class="in-flow" data-offset-y="15"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="15">FLT</div>
       <span class="label">UNSAFE START</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -177,11 +187,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: unsafe center">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: unsafe center" title="unsafe center">
+    <div class="float" data-offset-y="15">FLT</div>
+    <div class="in-flow" data-offset-y="25"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="25">FLT</div>
       <span class="label">UNSAFE CENTER</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -190,11 +200,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: unsafe end">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: unsafe end" title="unsafe end">
+    <div class="float" data-offset-y="25">FLT</div>
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="35">FLT</div>
       <span class="label">UNSAFE END</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -203,11 +213,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: safe start">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: safe start" title="safe start">
+    <div class="float" data-offset-y="5">FLT</div>
+    <div class="in-flow" data-offset-y="15"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="15">FLT</div>
       <span class="label">SAFE START</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -216,11 +226,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: safe center">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: safe center" title="safe center">
+    <div class="float" data-offset-y="15">FLT</div>
+    <div class="in-flow" data-offset-y="25"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="25">FLT</div>
       <span class="label">SAFE CENTER</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -229,11 +239,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: safe end">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: safe end" title="safe end">
+    <div class="float" data-offset-y="25">FLT</div>
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="35">FLT</div>
       <span class="label">SAFE END</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -242,11 +252,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: space-evenly">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: space-evenly" title="space-evenly">
+    <div class="float" data-offset-y="15">FLT</div>
+    <div class="in-flow" data-offset-y="25"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="25">FLT</div>
       <span class="label">SPACE-EVENLY</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -255,11 +265,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: space-between">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: space-between" title="space-between">
+    <div class="float" data-offset-y="5">FLT</div>
+    <div class="in-flow" data-offset-y="15"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="15">FLT</div>
       <span class="label">SPACE-BETWEEN</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -268,11 +278,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: space-around">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: space-around" title="space-around">
+    <div class="float" data-offset-y="15">FLT</div>
+    <div class="in-flow" data-offset-y="25"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="25">FLT</div>
       <span class="label">SPACE-AROUND</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -281,11 +291,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: normal">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: normal" title="normal">
+    <div class="float" data-offset-y="10">FLT</div>
+    <div class="in-flow" data-offset-y="10"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="10">FLT</div>
       <span class="label">NORMAL</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -296,4 +306,4 @@
 
 <p>
   <button onclick="document.querySelector('style[title]').textContent = 'html { font-size: 12px; }'">Show Text</button>
-  <button onclick="test()" id="manual">Run Test (Manual Trigger)</button>
+</body>

diff --git a/css/css-align/blocks/align-content-block-009.html b/css/css-align/blocks/align-content-block-009.html
index 0b2e8ec..df45aa5 100644
--- a/css/css-align/blocks/align-content-block-009.html
+++ b/css/css-align/blocks/align-content-block-009.html

@@ -1,9 +1,11 @@
 <!DOCTYPE html>
-<html class="reftest-wait">
+<html>
 <title>CSS Box Alignment: align-content style change on small block container with floats</title>
 <link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block">
 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
-<link rel="match" href="align-content-block-005-ref.html">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
 
 <style title="Needed for automation; delete to review/debug">
   @import "/fonts/ahem.css";
@@ -33,13 +35,17 @@
   [style$="normal"       ] { align-content: unsafe end    !important; }
 </style>
 <script>
-  function test()
+  function doTest()
   {
     document.body.offsetHeight; // trigger layout
     document.getElementById('initial').type = 'text/plain'; // invalidate stylesheet
-    document.documentElement.removeAttribute("class");
+    checkLayout('.test');
+  }
+  window.onload = () => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(doTest);
+    });
   };
-  document.addEventListener("TestRendered", test);
   window.addEventListener("click", () => { document.getElementById('manual').style.display = "inline"; });
 </script>
 
@@ -70,12 +76,16 @@
   .label { color: black; font-weight: bold; }
 </style>
 
+<!--
+  Results should be same as align-content-block-005.html.
+-->
+
 <div class="wrapper">
-  <div class="test" style="align-content: start">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: start" title="start">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">START</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -84,11 +94,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: center">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: center" title="center">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">CENTER</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -97,11 +107,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: end">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: end" title="end">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">END</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -110,11 +120,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: baseline">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: baseline" title="baseline">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">BASELINE</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -123,11 +133,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: last baseline">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: last baseline" title="last baseline">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">LAST BASELINE</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -136,11 +146,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: flex-start">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: flex-start" title="flex-start">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">FLEX-START</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -149,11 +159,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: flex-end">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: flex-end" title="flex-end">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">FLEX-END</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -162,11 +172,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: unsafe start">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: unsafe start" title="unsafe start">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">UNSAFE START</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -175,11 +185,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: unsafe center">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: unsafe center" title="unsafe center">
+    <div class="float" data-offset-y="25">FLT</div>
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="35">FLT</div>
       <span class="label">UNSAFE CENTER</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -188,11 +198,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: unsafe end">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: unsafe end" title="unsafe end">
+    <div class="float" data-offset-y="15">FLT</div>
+    <div class="in-flow" data-offset-y="25"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="25">FLT</div>
       <span class="label">UNSAFE END</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -201,11 +211,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: safe start">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: safe start" title="safe start">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">SAFE START</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -214,11 +224,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: safe center">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: safe center" title="safe center">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">SAFE CENTER</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -227,11 +237,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: safe end">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: safe end" title="safe end">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">SAFE END</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -240,11 +250,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: space-evenly">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: space-evenly" title="space-evenly">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">SPACE-EVENLY</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -253,11 +263,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: space-between">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: space-between" title="space-between">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">SPACE-BETWEEN</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -266,11 +276,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: space-around">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: space-around" title="space-around">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">SPACE-AROUND</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -279,11 +289,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: normal">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: normal" title="normal">
+    <div class="float" data-offset-y="40">FLT</div>
+    <div class="in-flow" data-offset-y="40"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="40">FLT</div>
       <span class="label">NORMAL</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -294,4 +304,3 @@
 
 <p>
   <button onclick="document.querySelector('style[title]').textContent = 'html { font-size: 12px; }'">Show Text</button>
-  <button onclick="test()" id="manual">Run Test (Manual Trigger)</button>

diff --git a/css/css-align/blocks/align-content-block-010.html b/css/css-align/blocks/align-content-block-010.html
index ffb0e9c..f3ec7a4 100644
--- a/css/css-align/blocks/align-content-block-010.html
+++ b/css/css-align/blocks/align-content-block-010.html

@@ -1,9 +1,11 @@
 <!DOCTYPE html>
-<html class="reftest-wait">
+<html>
 <title>CSS Box Alignment: align-content content change in large block container with floats</title>
 <link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block">
 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
-<link rel="match" href="align-content-block-004-ref.html">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
 
 <style title="Needed for automation; delete to review/debug">
   @import "/fonts/ahem.css";
@@ -16,13 +18,17 @@
   .in-flow .float { height: 0; !important }
 </style>
 <script>
-  function test()
+  function doTest()
   {
     document.body.offsetHeight; // trigger layout
     document.getElementById('initial').type = 'text/plain'; // invalidate stylesheet
-    document.documentElement.removeAttribute("class");
+    checkLayout('.test');
+  }
+  window.onload = () => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(doTest);
+    });
   };
-  document.addEventListener("TestRendered", test);
   window.addEventListener("click", () => { document.getElementById('manual').style.display = "inline"; });
 </script>
 
@@ -53,14 +59,18 @@
   .label { color: black; font-weight: bold; }
 </style>
 
+<!--
+  Results should be same as align-content-block-004.html.
+-->
+
 <body>
 
 <div class="wrapper">
-  <div class="test" style="align-content: start">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: start" title="start">
+    <div class="float" data-offset-y="5">FLT</div>
+    <div class="in-flow" data-offset-y="15"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="15">FLT</div>
       <span class="label">START</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -69,11 +79,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: center">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: center" title="center">
+    <div class="float" data-offset-y="15">FLT</div>
+    <div class="in-flow" data-offset-y="25"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="25">FLT</div>
       <span class="label">CENTER</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -82,11 +92,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: end">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: end" title="end">
+    <div class="float" data-offset-y="25">FLT</div>
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="35">FLT</div>
       <span class="label">END</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -95,11 +105,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: baseline">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: baseline" title="baseline">
+    <div class="float" data-offset-y="5">FLT</div>
+    <div class="in-flow" data-offset-y="15"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="15">FLT</div>
       <span class="label">BASELINE</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -108,11 +118,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: last baseline">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: last baseline" title="last baseline">
+    <div class="float" data-offset-y="25">FLT</div>
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="35">FLT</div>
       <span class="label">LAST BASELINE</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -121,11 +131,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: flex-start">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: flex-start" title="flex-start">
+    <div class="float" data-offset-y="5">FLT</div>
+    <div class="in-flow" data-offset-y="15"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="15">FLT</div>
       <span class="label">FLEX-START</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -134,11 +144,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: flex-end">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: flex-end" title="flex-end">
+    <div class="float" data-offset-y="25">FLT</div>
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="35">FLT</div>
       <span class="label">FLEX-END</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -147,11 +157,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: unsafe start">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: unsafe start" title="unsafe start">
+    <div class="float" data-offset-y="5">FLT</div>
+    <div class="in-flow" data-offset-y="15"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="15">FLT</div>
       <span class="label">UNSAFE START</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -160,11 +170,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: unsafe center">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: unsafe center" title="unsafe center">
+    <div class="float" data-offset-y="15">FLT</div>
+    <div class="in-flow" data-offset-y="25"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="25">FLT</div>
       <span class="label">UNSAFE CENTER</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -173,11 +183,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: unsafe end">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: unsafe end" title="unsafe end">
+    <div class="float" data-offset-y="25">FLT</div>
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="35">FLT</div>
       <span class="label">UNSAFE END</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -186,11 +196,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: safe start">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: safe start" title="safe start">
+    <div class="float" data-offset-y="5">FLT</div>
+    <div class="in-flow" data-offset-y="15"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="15">FLT</div>
       <span class="label">SAFE START</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -199,11 +209,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: safe center">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: safe center" title="safe center">
+    <div class="float" data-offset-y="15">FLT</div>
+    <div class="in-flow" data-offset-y="25"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="25">FLT</div>
       <span class="label">SAFE CENTER</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -212,11 +222,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: safe end">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: safe end" title="safe end">
+    <div class="float" data-offset-y="25">FLT</div>
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="35">FLT</div>
       <span class="label">SAFE END</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -225,11 +235,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: space-evenly">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: space-evenly" title="space-evenly">
+    <div class="float" data-offset-y="15">FLT</div>
+    <div class="in-flow" data-offset-y="25"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="25">FLT</div>
       <span class="label">SPACE-EVENLY</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -238,11 +248,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: space-between">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: space-between" title="space-between">
+    <div class="float" data-offset-y="5">FLT</div>
+    <div class="in-flow" data-offset-y="15"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="15">FLT</div>
       <span class="label">SPACE-BETWEEN</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -251,11 +261,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: space-around">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: space-around" title="space-around">
+    <div class="float" data-offset-y="15">FLT</div>
+    <div class="in-flow" data-offset-y="25"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="25">FLT</div>
       <span class="label">SPACE-AROUND</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -264,11 +274,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: normal">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: normal" title="normal">
+    <div class="float" data-offset-y="10">FLT</div>
+    <div class="in-flow" data-offset-y="10"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="10">FLT</div>
       <span class="label">NORMAL</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -279,4 +289,4 @@
 
 <p>
   <button onclick="document.querySelector('style[title]').textContent = 'html { font-size: 12px; }'">Show Text</button>
-  <button onclick="test()" id="manual">Run Test (Manual Trigger)</button>
+</body>

diff --git a/css/css-align/blocks/align-content-block-011.html b/css/css-align/blocks/align-content-block-011.html
index 44b8d89..9210f5a 100644
--- a/css/css-align/blocks/align-content-block-011.html
+++ b/css/css-align/blocks/align-content-block-011.html

@@ -1,9 +1,11 @@
 <!DOCTYPE html>
-<html class="reftest-wait">
+<html>
 <title>CSS Box Alignment: align-content content change on small block container with floats</title>
 <link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block">
 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
-<link rel="match" href="align-content-block-005-ref.html">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
 
 <style title="Needed for automation; delete to review/debug">
   @import "/fonts/ahem.css";
@@ -16,13 +18,17 @@
   .in-flow .float { height: 0; !important }
 </style>
 <script>
-  function test()
+  function doTest()
   {
     document.body.offsetHeight; // trigger layout
     document.getElementById('initial').type = 'text/plain'; // invalidate stylesheet
-    document.documentElement.removeAttribute("class");
+    checkLayout('.test');
+  }
+  window.onload = () => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(doTest);
+    });
   };
-  document.addEventListener("TestRendered", test);
   window.addEventListener("click", () => { document.getElementById('manual').style.display = "inline"; });
 </script>
 
@@ -53,12 +59,16 @@
   .label { color: black; font-weight: bold; }
 </style>
 
+<!--
+  Results should be same as align-content-block-005.html.
+-->
+
 <div class="wrapper">
-  <div class="test" style="align-content: start">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: start" title="start">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">START</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -67,11 +77,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: center">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: center" title="center">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">CENTER</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -80,11 +90,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: end">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: end" title="end">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">END</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -93,11 +103,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: baseline">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: baseline" title="baseline">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">BASELINE</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -106,11 +116,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: last baseline">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: last baseline" title="last baseline">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">LAST BASELINE</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -119,11 +129,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: flex-start">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: flex-start" title="flex-start">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">FLEX-START</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -132,11 +142,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: flex-end">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: flex-end" title="flex-end">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">FLEX-END</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -145,11 +155,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: unsafe start">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: unsafe start" title="unsafe start">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">UNSAFE START</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -158,11 +168,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: unsafe center">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: unsafe center" title="unsafe center">
+    <div class="float" data-offset-y="25">FLT</div>
+    <div class="in-flow" data-offset-y="35"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="35">FLT</div>
       <span class="label">UNSAFE CENTER</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -171,11 +181,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: unsafe end">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: unsafe end" title="unsafe end">
+    <div class="float" data-offset-y="15">FLT</div>
+    <div class="in-flow" data-offset-y="25"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="25">FLT</div>
       <span class="label">UNSAFE END</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -184,11 +194,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: safe start">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: safe start" title="safe start">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">SAFE START</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -197,11 +207,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: safe center">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: safe center" title="safe center">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">SAFE CENTER</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -210,11 +220,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: safe end">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: safe end" title="safe end">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">SAFE END</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -223,11 +233,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: space-evenly">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: space-evenly" title="space-evenly">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">SPACE-EVENLY</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -236,11 +246,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: space-between">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: space-between" title="space-between">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">SPACE-BETWEEN</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -249,11 +259,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: space-around">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: space-around" title="space-around">
+    <div class="float" data-offset-y="35">FLT</div>
+    <div class="in-flow" data-offset-y="45"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="45">FLT</div>
       <span class="label">SPACE-AROUND</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -262,11 +272,11 @@
   </div>
 </div>
 <div class="wrapper">
-  <div class="test" style="align-content: normal">
-    <div class="float">FLT</div>
-    <div class="in-flow"></div>
+  <div class="test" style="align-content: normal" title="normal">
+    <div class="float" data-offset-y="40">FLT</div>
+    <div class="in-flow" data-offset-y="40"></div>
     <div class="in-flow">
-      <div class="float">FLT</div>
+      <div class="float" data-offset-y="40">FLT</div>
       <span class="label">NORMAL</span>
       <span class="abspos">ABS</span>
       <span class="relpos">REL</span>
@@ -277,4 +287,4 @@
 
 <p>
   <button onclick="document.querySelector('style[title]').textContent = 'html { font-size: 12px; }'">Show Text</button>
-  <button onclick="test()" id="manual">Run Test (Manual Trigger)</button>
+