commit c282a86027fbc9821cdd6cd825a9965e9a2d51cd
parent 1cf92926b224218c5826fb6232277bc442ad8b5c
Author: Javier Contreras Tenorio <javiercon@microsoft.com>
Date: Wed, 19 Nov 2025 04:57:34 +0000
Bug 2000939 [wpt PR 56099] - [gap-decorations] Tests cases with orthogonal items, a=testonly
Automatic update from web-platform-tests
[gap-decorations] Tests cases with orthogonal items
This CL adds tests for flex and multicol with orthogonal items.
It doesn't add one with rule-break for multicol because due to some
recent issues with the spec, it is unclear what the behavior we want
will be.
Bug: 357648037
Change-Id: Ibbbec8cad7a4d796d191cf5ca6d3c295737cda03
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7169205
Commit-Queue: Javier Contreras <javiercon@microsoft.com>
Reviewed-by: Alison Maher <almaher@microsoft.com>
Cr-Commit-Position: refs/heads/main@{#1546714}
--
wpt-commits: 7a878642a795b15cd13e6b5e760425f6e1827906
wpt-pr: 56099
Diffstat:
6 files changed, 309 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-031-ref.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-031-ref.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
+<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
+<style>
+ body {
+ margin: 0px;
+ }
+
+ #flexbox>* {
+ background-color: rgb(96 139 168 / 0.2);
+ }
+
+ #flexbox {
+ display: flex;
+ column-gap: 10px;
+ row-gap: 30px;
+ height: 130px;
+ width: 230px;
+ flex-wrap: wrap;
+ align-content: center;
+ }
+
+ .items {
+ width: 70px;
+ height: 50px;
+ writing-mode: vertical-rl;
+ }
+
+ .row-rule {
+ position: absolute;
+ height: 30px;
+ width: 70px;
+ background: blue;
+ top: 50px;
+ }
+
+ .col-rule {
+ position: absolute;
+ width: 10px;
+ height: 50px;
+ background: red;
+ }
+</style>
+
+<div class="row-rule" style="left: 0px;"></div>
+<div class="row-rule" style="left: 80px;"></div>
+<div class="row-rule" style="left: 160px;"></div>
+
+<div class="col-rule" style="left: 70px;"></div>
+<div class="col-rule" style="left: 70px; top: 80px;"></div>
+<div class="col-rule" style="left: 150px;"></div>
+<div class="col-rule" style="left: 150px; top: 80px;"></div>
+
+<div id="flexbox">
+ <div class="items">One</div>
+ <div class="items">Two</div>
+ <div class="items">Three</div>
+ <div class="items">Four</div>
+ <div class="items">Five</div>
+ <div class="items">Six</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-031.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-031.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<title>
+ CSS Gap Decorations: flex column and row gaps are painted with rule break intersection and orthogonal items.
+</title>
+<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
+<link rel="match" href="flex-gap-decorations-031-ref.html">
+<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
+<style>
+ body {
+ margin: 0px;
+ }
+
+ #flexbox>* {
+ background-color: rgb(96 139 168 / 0.2);
+ }
+
+ #flexbox {
+ display: flex;
+ column-gap: 10px;
+ column-rule: 10px solid red;
+ column-rule-break: intersection;
+ column-rule-inset: 0;
+ row-gap: 30px;
+ row-rule: 30px solid blue;
+ row-rule-break: intersection;
+ row-rule-inset: 0;
+ height: 130px;
+ width: 230px;
+ flex-wrap: wrap;
+ align-content: center;
+ }
+
+ .items {
+ width: 70px;
+ height: 50px;
+ writing-mode: vertical-rl;
+ }
+</style>
+
+<div id="flexbox">
+ <div class="items">One</div>
+ <div class="items">Two</div>
+ <div class="items">Three</div>
+ <div class="items">Four</div>
+ <div class="items">Five</div>
+ <div class="items">Six</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-032-ref.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-032-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
+<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
+<style>
+ body {
+ margin: 0px;
+ }
+
+ #flexbox>* {
+ background-color: rgb(96 139 168 / 0.2);
+ }
+
+ #flexbox {
+ display: flex;
+ column-gap: 10px;
+ row-gap: 30px;
+ height: 130px;
+ width: 230px;
+ flex-wrap: wrap;
+ align-content: center;
+ }
+
+ .items {
+ width: 70px;
+ height: 50px;
+ writing-mode: vertical-rl;
+ }
+
+ .row-rule {
+ position: absolute;
+ height: 30px;
+ width: 230px;
+ background: blue;
+ top: 50px;
+ }
+
+ .col-rule {
+ position: absolute;
+ width: 10px;
+ height: 130px;
+ background: red;
+ }
+</style>
+
+
+<div class="col-rule" style="left: 70px;"></div>
+<div class="col-rule" style="left: 150px;"></div>
+
+<div class="row-rule" style="left: 0px;"></div>
+
+<div id="flexbox">
+ <div class="items">One</div>
+ <div class="items">Two</div>
+ <div class="items">Three</div>
+ <div class="items">Four</div>
+ <div class="items">Five</div>
+ <div class="items">Six</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-032.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-032.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<title>
+ CSS Gap Decorations: flex column and row gaps are painted with orthogonal items.
+</title>
+<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
+<link rel="match" href="flex-gap-decorations-032-ref.html">
+<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
+<style>
+ body {
+ margin: 0px;
+ }
+
+ #flexbox>* {
+ background-color: rgb(96 139 168 / 0.2);
+ }
+
+ #flexbox {
+ display: flex;
+ column-gap: 10px;
+ column-rule: 10px solid red;
+ row-gap: 30px;
+ row-rule: 30px solid blue;
+ height: 130px;
+ width: 230px;
+ flex-wrap: wrap;
+ align-content: center;
+ }
+
+ .items {
+ width: 70px;
+ height: 50px;
+ writing-mode: vertical-rl;
+ }
+</style>
+
+<div id="flexbox">
+ <div class="items">One</div>
+ <div class="items">Two</div>
+ <div class="items">Three</div>
+ <div class="items">Four</div>
+ <div class="items">Five</div>
+ <div class="items">Six</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-024-ref.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-024-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
+<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
+<style>
+ body {
+ margin: 0px;
+ }
+
+ .container {
+ width: 200px;
+ height: 150px;
+ column-count: 3;
+ column-width: 60px;
+ column-height: 70px;
+ column-gap: 10px;
+ row-gap: 10px;
+ column-wrap: wrap;
+ }
+
+ .items {
+ background: rgb(96 139 168 / 0.2);
+ height: 70px;
+ width: 60px;
+ margin: 0px;
+ writing-mode: vertical-rl;
+ }
+
+ .col-rule {
+ position: absolute;
+ top: 0px;
+ height: 150px;
+ width: 10px;
+ background: blue;
+ }
+
+ .row-rule {
+ position: absolute;
+ height: 10px;
+ width: 200px;
+ background: gold;
+ left: 0px;
+ top: 70px;
+ }
+</style>
+
+<div class="col-rule" style="left: 60px;"></div>
+<div class="col-rule" style="left: 130px;"></div>
+
+<div class="row-rule"></div>
+
+<div class="container">
+ <div class="items"></div>
+ <div class="items"></div>
+ <div class="items"></div>
+ <div class="items"></div>
+ <div class="items"></div>
+ <div class="items"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-024.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-024.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<title>
+ CSS Gap Decorations: Multicolumn gap decorations painted with column-wrap and orthogonal items.
+</title>
+<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
+<link rel="match" href="multicol-gap-decorations-024-ref.html">
+<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
+<style>
+ body {
+ margin: 0px;
+ }
+
+ .container {
+ width: 200px;
+ height: 150px;
+ column-count: 3;
+ column-width: 60px;
+ column-height: 70px;
+ column-gap: 10px;
+ row-gap: 10px;
+ column-rule: 10px solid blue;
+ row-rule: 10px solid gold;
+ column-wrap: wrap;
+ }
+
+ .items {
+ background: rgb(96 139 168 / 0.2);
+ height: 70px;
+ width: 60px;
+ margin: 0px;
+ writing-mode: vertical-rl;
+ }
+</style>
+
+<div class="container">
+ <div class="items"></div>
+ <div class="items"></div>
+ <div class="items"></div>
+ <div class="items"></div>
+ <div class="items"></div>
+ <div class="items"></div>
+</div>
