From 054bcff38c741ff9d3b7cc1dd4615af15125dbcd Mon Sep 17 00:00:00 2001 From: Alison Maher Date: Wed, 6 Apr 2022 15:04:07 -0700 Subject: [PATCH] [FlexNG] Properly handle vertical writing modes when fragmenting Previously, we would check is_horizontal_flow_ to determine if we were handling a row/column flex container when fragmenting. This produced incorrect results when the container was in a vertical writing-mode. Instead, check is_column_. I chose two tests at random from each container type and updated the writing mode to make sure this is now working as expected. Bug: 660611 Change-Id: I5a6d9f401a8b44634c9b5ba035d55c588f3ae26c Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3573778 Reviewed-by: David Grogan Reviewed-by: Morten Stenshorne Commit-Queue: Alison Maher Cr-Commit-Position: refs/heads/main@{#989635} --- ...ti-line-column-flex-fragmentation-046.html | 51 +++++++++++++++++++ ...ti-line-column-flex-fragmentation-047.html | 36 +++++++++++++ ...multi-line-row-flex-fragmentation-056.html | 30 +++++++++++ ...multi-line-row-flex-fragmentation-057.html | 40 +++++++++++++++ ...le-line-column-flex-fragmentation-044.html | 20 ++++++++ ...le-line-column-flex-fragmentation-045.html | 41 +++++++++++++++ ...ingle-line-row-flex-fragmentation-030.html | 22 ++++++++ ...ingle-line-row-flex-fragmentation-031.html | 30 +++++++++++ 8 files changed, 270 insertions(+) create mode 100644 css/css-break/flexbox/multi-line-column-flex-fragmentation-046.html create mode 100644 css/css-break/flexbox/multi-line-column-flex-fragmentation-047.html create mode 100644 css/css-break/flexbox/multi-line-row-flex-fragmentation-056.html create mode 100644 css/css-break/flexbox/multi-line-row-flex-fragmentation-057.html create mode 100644 css/css-break/flexbox/single-line-column-flex-fragmentation-044.html create mode 100644 css/css-break/flexbox/single-line-column-flex-fragmentation-045.html create mode 100644 css/css-break/flexbox/single-line-row-flex-fragmentation-030.html create mode 100644 css/css-break/flexbox/single-line-row-flex-fragmentation-031.html diff --git a/css/css-break/flexbox/multi-line-column-flex-fragmentation-046.html b/css/css-break/flexbox/multi-line-column-flex-fragmentation-046.html new file mode 100644 index 00000000000000..f009b1a3e796f7 --- /dev/null +++ b/css/css-break/flexbox/multi-line-column-flex-fragmentation-046.html @@ -0,0 +1,51 @@ + + + Multi-line column flex fragmentation: early break inside columns w/ vertical + writing-mode. + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/css/css-break/flexbox/multi-line-column-flex-fragmentation-047.html b/css/css-break/flexbox/multi-line-column-flex-fragmentation-047.html new file mode 100644 index 00000000000000..a09eaea6b5ca6c --- /dev/null +++ b/css/css-break/flexbox/multi-line-column-flex-fragmentation-047.html @@ -0,0 +1,36 @@ + + + Multi-line column flex fragmentation: Tall margins with forced break and + vertical writing-mode. + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/css/css-break/flexbox/multi-line-row-flex-fragmentation-056.html b/css/css-break/flexbox/multi-line-row-flex-fragmentation-056.html new file mode 100644 index 00000000000000..0b71c13cce9bb6 --- /dev/null +++ b/css/css-break/flexbox/multi-line-row-flex-fragmentation-056.html @@ -0,0 +1,30 @@ + + + Multi-line row flex fragmentation: Item overflow and stretching w/ vertical + writing-mode. + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/css/css-break/flexbox/multi-line-row-flex-fragmentation-057.html b/css/css-break/flexbox/multi-line-row-flex-fragmentation-057.html new file mode 100644 index 00000000000000..c20e684b45290d --- /dev/null +++ b/css/css-break/flexbox/multi-line-row-flex-fragmentation-057.html @@ -0,0 +1,40 @@ + + + Multi-line row flex fragmentation with items in the same row ending layout + in different fragmentainers w/ vertical writing-mode. + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/css/css-break/flexbox/single-line-column-flex-fragmentation-044.html b/css/css-break/flexbox/single-line-column-flex-fragmentation-044.html new file mode 100644 index 00000000000000..2ef4c988ec5254 --- /dev/null +++ b/css/css-break/flexbox/single-line-column-flex-fragmentation-044.html @@ -0,0 +1,20 @@ + + + Tests that flex-items get pushed down due to a previous multicol flex-item + expanding as a result of fragmentation w/ vertical writing-mode. + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/css/css-break/flexbox/single-line-column-flex-fragmentation-045.html b/css/css-break/flexbox/single-line-column-flex-fragmentation-045.html new file mode 100644 index 00000000000000..f2d4d745fa2a76 --- /dev/null +++ b/css/css-break/flexbox/single-line-column-flex-fragmentation-045.html @@ -0,0 +1,41 @@ + + + Single-line column flex fragmentation: column balancing with forced break + w/ vertical writing-mode. + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/css/css-break/flexbox/single-line-row-flex-fragmentation-030.html b/css/css-break/flexbox/single-line-row-flex-fragmentation-030.html new file mode 100644 index 00000000000000..a70ad1473eaf27 --- /dev/null +++ b/css/css-break/flexbox/single-line-row-flex-fragmentation-030.html @@ -0,0 +1,22 @@ + + + Single-line row flex fragmentation: If the fragmentainer is out of space + but a flex row should break before if it has content w/ vertical + writing-mode. + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+
+
+
diff --git a/css/css-break/flexbox/single-line-row-flex-fragmentation-031.html b/css/css-break/flexbox/single-line-row-flex-fragmentation-031.html new file mode 100644 index 00000000000000..1bda683312ee42 --- /dev/null +++ b/css/css-break/flexbox/single-line-row-flex-fragmentation-031.html @@ -0,0 +1,30 @@ + + + Single-line row flex fragmentation: OOF static position and alignment + w/ vertical writing-mode. + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+
+
+
+