commit 9f1dfb4308428358cc3e95b0af4ab42c092d3321
parent 8b59d4bcb6a77a368f3dea48f7d262113c1ad2ed
Author: Sam Davis Omekara Jr. <samomekarajr@microsoft.com>
Date: Tue, 14 Oct 2025 22:22:58 +0000
Bug 1993180 [wpt PR 55286] - [Gap Decorations]: Fix crash when painting flex cross gaps, a=testonly
Automatic update from web-platform-tests
[Gap Decorations]: Fix crash when painting flex cross gaps
This change fixes a crash that occurs while painting cross gaps for
flex. The issue was caused by the incorrect assumption that cross gaps
always end at the next main gap. However, there can be multiple main
gaps without a corresponding "cross gap before." The fix modifies the
logic to move the `main_gap_running_index` to the next main gap that
has a cross gap before, instead of moving it forward by one.
Bug: 449500189
Change-Id: Icc1277bda7676f9c39131abe6fc4cea34e4c8e89
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7013989
Reviewed-by: Javier Contreras <javiercon@microsoft.com>
Commit-Queue: Sam Davis Omekara <samomekarajr@microsoft.com>
Reviewed-by: Alison Maher <almaher@microsoft.com>
Cr-Commit-Position: refs/heads/main@{#1526446}
--
wpt-commits: 8944eee6b7b816cb93086ac7eb3b6ca26b2dcab1
wpt-pr: 55286
Diffstat:
2 files changed, 125 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-036-ref.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-036-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
+<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com">
+<style>
+ body {
+ margin: 0px;
+ }
+ #flexbox {
+ border: 2px solid rgb(96 139 168);
+ display: flex;
+ column-gap: 10px;
+ row-gap: 10px;
+ width: 170px;
+ flex-wrap: wrap;
+ }
+ .items {
+ background-color: rgb(96 139 168 / 0.2);
+ flex-shrink: 1;
+ width: 50px;
+ height: 50px;
+ }
+ #four {
+ width: 100px;
+ padding-inline-start: 20px;
+ }
+ .row-gap {
+ margin: 0px;
+ padding: 0px;
+ height: 10px;
+ width: 170px;
+ position: absolute;
+ background: blue;
+ }
+ .column-gap {
+ display: flex;
+ flex-direction: column;
+ row-gap: 70px;
+ height: 170px;
+ top: 2px;
+ width: 10px;
+ position: absolute;
+ }
+ .column {
+ background: red;
+ width: 10px;
+ height: 50px;
+ }
+</style>
+<div id="flexbox">
+ <div class="items">One</div>
+ <div class="items">Two</div>
+ <div class="items">Three</div>
+ <div class="items" id="four">Four</div>
+ <div class="items">Five</div>
+ <div class="items">Six</div>
+ <div class="items">Seven</div>
+ <div class="items">Eight</div>
+</div>
+
+<div id="columns1" style="left: 52px;" class="column-gap">
+ <div id="c1" class="column"></div>
+ <div id="c2" class="column"></div>
+</div>
+
+<div id="columns2" style="left: 112px;" class="column-gap">
+ <div id="c1" class="column"></div>
+ <div id="c2" class="column"></div>
+</div>
+
+<div id="row1" class="row-gap" style="top: 52px; left: 2px;">
+</div>
+
+<div id="row2" class="row-gap" style="top: 112px; left: 2px;">
+</div>
+
+<div id="row3" class="row-gap" style="top: 172px; left: 2px;">
+</div>
diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-036.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-036.html
@@ -0,0 +1,48 @@
+<html>
+<title>
+ CSS Gap Decorations: flex column and row gaps are painted with intersection column rule break.
+</title>
+<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
+<link rel="match" href="flex-gap-decorations-036-ref.html">
+<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com">
+<style>
+ body {
+ margin: 0px;
+ }
+ #flexbox {
+ border: 2px solid rgb(96 139 168);
+ display: flex;
+ column-gap: 10px;
+ row-gap: 10px;
+ row-rule-style: solid;
+ row-rule-color: blue;
+ row-rule-width: 10px;
+ column-rule-break: intersection;
+ column-rule-style: solid;
+ column-rule-color: red;
+ column-rule-width: 10px;
+ column-rule-outset: 0;
+ width: 170px;
+ flex-wrap: wrap;
+ }
+ .items {
+ background-color: rgb(96 139 168 / 0.2);
+ flex-shrink: 1;
+ width: 50px;
+ height: 50px;
+ }
+ #four {
+ width: 100px;
+ padding-inline-start: 20px;
+ }
+</style>
+<div id="flexbox">
+ <div class="items">One</div>
+ <div class="items">Two</div>
+ <div class="items">Three</div>
+ <div class="items" id="four">Four</div>
+ <div class="items">Five</div>
+ <div class="items">Six</div>
+ <div class="items">Seven</div>
+ <div class="items">Eight</div>
+</div>
