commit 2b3d0b0c4a0d1f83321d24dc728477a9e0b85404
parent dc528958325e08e3d5bf0f3a15e764a9289adbc5
Author: Javier Contreras Tenorio <javiercon@microsoft.com>
Date: Thu, 9 Oct 2025 20:31:00 +0000
Bug 1992116 [wpt PR 55142] - [gap-decoration] Fix 2 flex tests that were not testing as intended, a=testonly
Automatic update from web-platform-tests
[gap-decoration] Fix 2 flex tests that were not testing as intended
This CL fixes two flex tests that were meant to test that we paint
gaps confirming to the collapsing border model (more info on the
original CL:6442638). It seems that these tests were wrong, they were
set up incorrectly and didnt even have a row/column gap.
This CL fixes them so they are actually testing what we want them
to test.
Bug: 357648037
Change-Id: I2f13a07b9b63299b3f3c589d32cd48e7c103133c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6995363
Reviewed-by: Alison Maher <almaher@microsoft.com>
Commit-Queue: Javier Contreras <javiercon@microsoft.com>
Cr-Commit-Position: refs/heads/main@{#1522567}
--
wpt-commits: 3ccc3a878c3fd47a5f350e31e743a1fbc0220ece
wpt-pr: 55142
Diffstat:
4 files changed, 26 insertions(+), 30 deletions(-)
diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-017-ref.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-017-ref.html
@@ -9,15 +9,14 @@
#flexbox {
border: 2px solid rgb(96 139 168);
display: flex;
- column-gap: 20px;
- width: 120px;
- height: 170px;
+ row-gap: 20px;
+ width: 50px;
+ height: 190px;
flex-wrap: wrap;
flex-direction: column;
- column-rule-style: solid;
- column-rule-color: red;
- column-rule-width: 20px;
- column-rule-style: ridge;
+ row-rule-color: red;
+ row-rule-width: 20px;
+ row-rule-style: ridge;
}
.items {
diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-017.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-017.html
@@ -1,6 +1,6 @@
<!DOCTYPE html>
<title>
- CSS Gap Decorations: column-rule-style inset should paint as ridge.
+ CSS Gap Decorations: row-rule-style inset should paint as ridge.
</title>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#column-row-rule-style">
<link rel="match" href="flex-gap-decorations-017-ref.html">
@@ -13,15 +13,14 @@
#flexbox {
border: 2px solid rgb(96 139 168);
display: flex;
- column-gap: 20px;
- width: 120px;
- height: 170px;
+ row-gap: 20px;
+ width: 50px;
+ height: 190px;
flex-wrap: wrap;
flex-direction: column;
- column-rule-style: solid;
- column-rule-color: red;
- column-rule-width: 20px;
- column-rule-style: inset;
+ row-rule-color: red;
+ row-rule-width: 20px;
+ row-rule-style: inset;
}
.items {
diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-018-ref.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-018-ref.html
@@ -9,15 +9,14 @@
#flexbox {
border: 2px solid rgb(96 139 168);
display: flex;
- column-gap: 20px;
- width: 120px;
- height: 170px;
+ row-gap: 20px;
+ width: 50px;
+ height: 190px;
flex-wrap: wrap;
flex-direction: column;
- column-rule-style: solid;
- column-rule-color: red;
- column-rule-width: 20px;
- column-rule-style: groove;
+ row-rule-color: red;
+ row-rule-width: 20px;
+ row-rule-style: groove;
}
.items {
diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-018.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-018.html
@@ -1,6 +1,6 @@
<!DOCTYPE html>
<title>
- CSS Gap Decorations: column-rule-style outset should paint as groove.
+ CSS Gap Decorations: row-rule-style outset should paint as groove.
</title>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#column-row-rule-style">
<link rel="match" href="flex-gap-decorations-018-ref.html">
@@ -13,15 +13,14 @@
#flexbox {
border: 2px solid rgb(96 139 168);
display: flex;
- column-gap: 20px;
- width: 120px;
- height: 170px;
+ row-gap: 20px;
+ width: 50px;
+ height: 190px;
flex-wrap: wrap;
flex-direction: column;
- column-rule-style: solid;
- column-rule-color: red;
- column-rule-width: 20px;
- column-rule-style: outset;
+ row-rule-color: red;
+ row-rule-width: 20px;
+ row-rule-style: outset;
}
.items {
