[FlexNG] Simple multi-line row flex fragmentation
Add support for simple multi-line row flex fragmentation. In order to
get this case working, we needed to update when we consider an item
to have container separation in the case of rows (i.e. when the item's
row is not the first in a given fragmentainer).
There was also an issue in the NGFlexItemIterator when handling
break tokens in the multi-line case. More specifically, we won't know
the current item's index or line index ahead of time if we're
processing a break token. Move the calculation of |current_item_idx| and
|current_line_idx| to accommodate this case.
Bug: 660611
Change-Id: I67d5c59bd541cc42b22bb462ef840d55ce5ad67e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3319284
Reviewed-by: Morten Stenshorne <mstensho@chromium.org>
Commit-Queue: Alison Maher <almaher@microsoft.com>
Cr-Commit-Position: refs/heads/main@{#949292}
diff --git a/css/css-break/flexbox/multi-line-row-flex-fragmentation-001.html b/css/css-break/flexbox/multi-line-row-flex-fragmentation-001.html
new file mode 100644
index 0000000..ba6b010
--- /dev/null
+++ b/css/css-break/flexbox/multi-line-row-flex-fragmentation-001.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<title>
+ Simple multi-line row flex fragmentation.
+</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+ .multicol {
+ background: red;
+ column-count: 5;
+ column-fill:auto;
+ column-gap: 0px;
+ height: 100px;
+ width: 100px;
+ }
+ .flex {
+ display: flex;
+ flex-wrap: wrap;
+ height: 500px;
+ width: 20px;
+ }
+ .flex > div {
+ background: green;
+ height: 250px;
+ width: 10px;
+ }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="multicol">
+ <div class="flex">
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ </div>
+</div>
diff --git a/css/css-break/flexbox/multi-line-row-flex-fragmentation-002.html b/css/css-break/flexbox/multi-line-row-flex-fragmentation-002.html
new file mode 100644
index 0000000..62c1e31
--- /dev/null
+++ b/css/css-break/flexbox/multi-line-row-flex-fragmentation-002.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<title>
+ Multi-line row flex fragmentation with item overflow.
+</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+ .multicol {
+ column-count: 2;
+ column-fill:auto;
+ column-gap: 0px;
+ height: 100px;
+ width: 100px;
+ }
+ .flex {
+ display: flex;
+ flex-wrap: wrap;
+ height: 200px;
+ width: 50px;
+ }
+ .flex > div {
+ height: 100px;
+ width: 50px;
+ }
+ .flex > div > div {
+ background: green;
+ }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="multicol">
+ <div class="flex">
+ <div>
+ <div style="height: 100px;"></div>
+ <div style="height: 100px; background: red;"></div>
+ </div>
+ <div>
+ <div style="height: 100px;"></div>
+ </div>
+ </div>
+</div>
diff --git a/css/css-break/flexbox/multi-line-row-flex-fragmentation-003.html b/css/css-break/flexbox/multi-line-row-flex-fragmentation-003.html
new file mode 100644
index 0000000..4d1b7e1
--- /dev/null
+++ b/css/css-break/flexbox/multi-line-row-flex-fragmentation-003.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<title>
+ Multi-line row flex fragmentation intrinsic block size.
+</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+ .multicol {
+ background: red;
+ column-count: 4;
+ column-fill: auto;
+ column-gap: 0px;
+ height: 100px;
+ width: 100px;
+ }
+ .flex {
+ display: flex;
+ flex-wrap: wrap;
+ width: 25px;
+ background: green;
+ }
+ .flex > div {
+ width: 25px;
+ }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="multicol">
+ <div class="flex">
+ <div style="height: 50px;"></div>
+ <div style="height: 350px;"></div>
+ </div>
+</div>
diff --git a/css/css-break/flexbox/multi-line-row-flex-fragmentation-004.html b/css/css-break/flexbox/multi-line-row-flex-fragmentation-004.html
new file mode 100644
index 0000000..a004697
--- /dev/null
+++ b/css/css-break/flexbox/multi-line-row-flex-fragmentation-004.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>
+ Multi-line row flex fragmentation.
+</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+ .multicol {
+ background: red;
+ column-count: 5;
+ column-fill: auto;
+ column-gap: 0px;
+ height: 100px;
+ width: 100px;
+ }
+ .flex {
+ display: flex;
+ flex-wrap: wrap;
+ width: 20px;
+ }
+ .flex > div {
+ background: green;
+ width: 10px;
+ }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="multicol">
+ <div class="flex">
+ <div style="height: 150px;"></div>
+ <div style="height: 150px;"></div>
+ <div style="height: 350px;"></div>
+ <div style="height: 350px;"></div>
+ </div>
+</div>
diff --git a/css/css-break/flexbox/multi-line-row-flex-fragmentation-005.html b/css/css-break/flexbox/multi-line-row-flex-fragmentation-005.html
new file mode 100644
index 0000000..d1e4f97
--- /dev/null
+++ b/css/css-break/flexbox/multi-line-row-flex-fragmentation-005.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<title>
+ Multi-line row flex fragmentation with nested OOF.
+</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+ .multicol {
+ background: red;
+ column-count: 4;
+ column-fill: auto;
+ column-gap: 0px;
+ height: 100px;
+ width: 100px;
+ }
+ .flex {
+ display: flex;
+ flex-wrap: wrap;
+ position: relative;
+ height: 400px;
+ width: 25px;
+ }
+ .abs {
+ background: green;
+ position: absolute;
+ width: 25px;
+ top: 0;
+ bottom: 0;
+ }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="multicol">
+ <div class="flex">
+ <div>
+ <div class="abs"></div>
+ </div>
+ </div>
+</div>
diff --git a/css/css-break/flexbox/multi-line-row-flex-fragmentation-006.html b/css/css-break/flexbox/multi-line-row-flex-fragmentation-006.html
new file mode 100644
index 0000000..1b93be6
--- /dev/null
+++ b/css/css-break/flexbox/multi-line-row-flex-fragmentation-006.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>
+ Simple multi-line row flex fragmentation with items that stretch.
+</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+ .multicol {
+ background: red;
+ column-count: 4;
+ column-fill:auto;
+ column-gap: 0px;
+ height: 100px;
+ width: 100px;
+ }
+ .flex {
+ display: flex;
+ flex-wrap: wrap;
+ height: 400px;
+ width: 25px;
+ }
+ .flex > div {
+ background: green;
+ width: 25px;
+ }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="multicol">
+ <div class="flex">
+ <div></div>
+ <div></div>
+ </div>
+</div>
