Re-import css/css-flexbox WPT

https://bugs.webkit.org/show_bug.cgi?id=260408
rdar://114109350

Reviewed by Sammy Gill.

Upstream commit: web-platform-tests/wpt@2887e32

* LayoutTests/TestExpectations:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/dynamic-align-self-001-expected.xht: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/dynamic-align-self-001.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/w3c-import.log:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-items-baseline-row-vert-expected.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-items-baseline-row-vert-ref.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-self-006-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-self-010-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-multicol-001-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-multicol-001.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-multicol-002-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-multicol-002.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-multicol-003-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-multicol-003.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-table-001.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-table-002.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-table-003.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/w3c-import.log:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/animation/discrete-no-interpolation-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/animation/discrete-no-interpolation.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/animation/w3c-import.log:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/button-column-wrap-crash.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/column-intrinsic-size-aspect-ratio-crash-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/contain-size-layout-abspos-flex-container-crash-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/dynamic-orthogonal-flex-item-expected.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/dynamic-orthogonal-flex-item.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/fieldset-as-container-justify-center.tentative-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/fieldset-as-container-justify-center.tentative.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-017-expected.xht: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-017.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-direction-column-001-visual-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-direction-column-reverse-001-visual-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-direction-column-reverse-002-visual-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-direction-row-001-visual-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-direction-row-002-visual-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-direction-row-reverse-001-visual-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-direction-row-reverse-002-visual-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-order-from-lowest-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-safe-overflow-position-002-expected.xht: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-safe-overflow-position-002.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-safe-overflow-position-003-expected.xht: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-safe-overflow-position-003.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-safe-overflow-position-004-expected.xht: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-safe-overflow-position-004.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-safe-overflow-position-005-expected.xht: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-safe-overflow-position-005.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-safe-overflow-position-006-expected.xht: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-safe-overflow-position-006.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-019-expected.xht: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-019.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-020-expected.xht: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-020.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-021-expected.xht: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-021.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/grandchild-span-height-expected.xht: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/grandchild-span-height.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/grid-flex-item-007-expected.xht: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/grid-flex-item-007.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/inline-flexbox-absurd-block-size-crash.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/inline-flexbox-vertical-rl-image-flexitem-crash-print-expected-mismatch.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/inline-flexbox-vertical-rl-image-flexitem-crash-print.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/auto-min-size-001-expected.xht: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/auto-min-size-001.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/col-wrap-010-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/col-wrap-010.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/col-wrap-011-expected.xht: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/col-wrap-011.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/col-wrap-012-expected.xht: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/col-wrap-012.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/col-wrap-013-expected.xht: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/col-wrap-013.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/col-wrap-014-expected.xht: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/col-wrap-014.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/col-wrap-015-expected.xht: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/col-wrap-015.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/col-wrap-016-expected.xht: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/col-wrap-016.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/col-wrap-017-expected.xht: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/col-wrap-017.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/col-wrap-018-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/col-wrap-018.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/col-wrap-019-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/col-wrap-019.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/row-001.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/row-005-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/row-005.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/row-compat-001-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/row-compat-001.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/row-use-cases-001-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/row-use-cases-001.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/row-wrap-002.tentative-expected.xht: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/row-wrap-002.tentative.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/w3c-import.log:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/justify-content-007-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/justify-content-007.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/justify-content_center-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/justify-content_flex-end-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/justify-content_flex-start-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/justify-content_space-around-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/justify-content_space-between-001-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/order-001-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/parsing/flex-flow-valid-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/parsing/flex-flow-valid.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-padding-003-expected.xht: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-padding-003.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-padding-004-expected.xht: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-padding-004.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-flex-item-max-content-expected.xht: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-flex-item-max-content.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/w3c-import.log:
* LayoutTests/platform/ios/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-multicol-003-expected.txt: Added.
* LayoutTests/platform/ios/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/row-use-cases-001-expected.txt: Added.

Canonical link: https://commits.webkit.org/267061@main

LayoutTests/TestExpectations

@@ -1499,7 +1499,6 @@ webkit.org/b/136754 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-safe
 webkit.org/b/210243 imported/w3c/web-platform-tests/css/css-flexbox/percentage-size-quirks-002.html [ Failure ]
 webkit.org/b/136754 imported/w3c/web-platform-tests/css/css-flexbox/scrollbars-no-margin.html [ ImageOnlyFailure ]
 imported/w3c/web-platform-tests/css/css-flexbox/fieldset-baseline-alignment.html [ ImageOnlyFailure ]
-webkit.org/b/116117 imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/row-001.html [ ImageOnlyFailure ]
 webkit.org/b/116117 imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/row-002.html [ ImageOnlyFailure ]
 webkit.org/b/116117 imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/row-003.html [ ImageOnlyFailure ]
 webkit.org/b/116117 imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/row-004.html [ ImageOnlyFailure ]
@@ -4458,6 +4457,14 @@ webkit.org/b/212046 imported/w3c/web-platform-tests/css/css-flexbox/percentage-h
 webkit.org/b/212046 imported/w3c/web-platform-tests/css/css-flexbox/scrollbars-auto.html [ ImageOnlyFailure ]
 webkit.org/b/212046 imported/w3c/web-platform-tests/css/css-flexbox/scrollbars.html [ ImageOnlyFailure ]
 
+imported/w3c/web-platform-tests/css/css-flexbox/dynamic-orthogonal-flex-item.html [ ImageOnlyFailure ]
+imported/w3c/web-platform-tests/css/css-flexbox/gap-019.html [ ImageOnlyFailure ]
+imported/w3c/web-platform-tests/css/css-flexbox/grid-flex-item-007.html [ ImageOnlyFailure ]
+imported/w3c/web-platform-tests/css/css-flexbox/inline-flexbox-vertical-rl-image-flexitem-crash-print.html [ ImageOnlyFailure ]
+imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/col-wrap-013.html [ ImageOnlyFailure ]
+imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-size/col-wrap-014.html [ ImageOnlyFailure ]
+imported/w3c/web-platform-tests/css/css-flexbox/percentage-padding-003.html [ ImageOnlyFailure ]
+
 # text-combine-upright bugs
 webkit.org/b/234704 imported/w3c/web-platform-tests/css/css-writing-modes/text-combine-upright-layout-rules-001.html [ ImageOnlyFailure ]
 webkit.org/b/164510 imported/w3c/web-platform-tests/css/css-writing-modes/text-combine-upright-line-breaking-rules-001.html [ ImageOnlyFailure ]

LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/dynamic-align-self-001-expected.xht

@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: green;
+  height: 100px;
+  width: 100px;
+  }
+  ]]></style>
+ </head>
+ <body>
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+  <div></div>
+ </body>
+</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/dynamic-align-self-001.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://crbug.com/1306037">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert"
+  content="Abspos child of a flexbox moves after script changes its alignment.">
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  #parent {
+    position: relative;
+    display: flex;
+    width: 200px;
+    height: 200px;
+  }
+
+  #child {
+    display: flex;
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    background-color: green;
+    align-self: end;
+  }
+
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+</p>
+
+<div id=reference-overlapped-red></div>
+
+<div id="parent">
+  <div id="child"></div>
+</div>
+
+<script>
+  document.body.offsetTop;
+  child.style.alignSelf = 'start';
+</script>

LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/w3c-import.log

@@ -27,6 +27,8 @@ List of files:
 /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vrl-rtl-expected.xht
 /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vrl-rtl.html
 /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-descendent-001.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/dynamic-align-self-001-expected.xht
+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/dynamic-align-self-001.html
 /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001.html
 /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-001.html
 /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-002.html

LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-items-baseline-row-vert-expected.html

@@ -27,7 +27,6 @@
   background: cyan;
   width: 40px;
   height: 40px;
-  writing-mode: horizontal-tb;
 }
 #target > :nth-child(4) {
   background: lime;

LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-items-baseline-row-vert-ref.html

@@ -27,7 +27,6 @@
   background: cyan;
   width: 40px;
   height: 40px;
-  writing-mode: horizontal-tb;
 }
 #target > :nth-child(4) {
   background: lime;

LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-multicol-001-expected.txt

@@ -0,0 +1,60 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+PASS .target > * 1
+PASS .target > * 2
+FAIL .target > * 3 assert_equals:
+<div data-offset-y="100"><span></span></div>
+offsetTop expected 100 but got 250
+PASS .target > * 4
+FAIL .target > * 5 assert_equals:
+<div data-offset-y="30"><span></span></div>
+offsetTop expected 30 but got 20
+PASS .target > * 6
+FAIL .target > * 7 assert_equals:
+<div data-offset-y="140"><span></span></div>
+offsetTop expected 140 but got 50
+PASS .target > * 8
+PASS .target > * 9
+PASS .target > * 10
+PASS .target > * 11
+PASS .target > * 12
+

LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-multicol-001.html

@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7639">
+<style>
+.target {
+  display: flex;
+  inline-size: 100px;
+  position: relative;
+  line-height: 0;
+  padding: 10px;
+}
+.target > div {
+  background: hotpink;
+  font-size: 20px;
+}
+.multicol {
+  columns: 3;
+  column-fill: auto;
+  padding: 10px;
+  border: solid 10px;
+}
+.multicol > div {
+  break-inside: avoid;
+  break-before: column;
+  break-after: column;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<!-- Three columns, largest in the middle. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="20"><span></span></div>
+  <div class="multicol" data-offset-y="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="100"><span></span></div>
+  <div class="multicol" data-offset-y="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<!-- Start spanning element. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="30"><span></span></div>
+  <div class="multicol" data-offset-y="10">
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="140"><span></span></div>
+  <div class="multicol" data-offset-y="10">
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<!-- End spanning element. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="20"><span></span></div>
+  <div class="multicol" data-offset-y="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="140"><span></span></div>
+  <div class="multicol" data-offset-y="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>