commit 0bb89a9e15868449c22bf50db0addaa0110ea02b
parent a716c30e8f170cee00ca806e3b258f06526b2a5e
Author: Ting-Yu Lin <tlin@mozilla.com>
Date: Sat, 22 Nov 2025 23:32:00 +0000
Bug 1994083 - Add WPTs for abspos fragmentation in vertical-rl writing-mode. r=dholbert
These tests verify that `.container`'s border-start is subtracted correctly when
computing the abspos containing block size, which is critical to position abspos
element in vertical-rl writing-mode.
Differential Revision: https://phabricator.services.mozilla.com/D272403
Diffstat:
4 files changed, 80 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/meta/css/css-break/out-of-flow-in-multicolumn-118.html.ini b/testing/web-platform/meta/css/css-break/out-of-flow-in-multicolumn-118.html.ini
@@ -0,0 +1,2 @@
+[out-of-flow-in-multicolumn-118.html]
+ prefs: [layout.abspos.fragmentainer-aware-positioning.enabled: true]
diff --git a/testing/web-platform/meta/css/css-break/out-of-flow-in-multicolumn-119.html.ini b/testing/web-platform/meta/css/css-break/out-of-flow-in-multicolumn-119.html.ini
@@ -0,0 +1,3 @@
+[out-of-flow-in-multicolumn-119.html]
+ expected: FAIL
+ bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1999862
diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-118.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-118.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<title>CSS Break Test: Fragmentation of abspos element in a vertical-rl multicol container</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-position-3/#abspos-breaking">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+
+<style>
+.multicol {
+ writing-mode: vertical-rl;
+ block-size: 100px;
+ inline-size: 100px;
+ column-count: 2;
+ column-fill: auto;
+ column-gap: 0;
+ background: red;
+}
+.container {
+ position: relative;
+ border-block: 20px solid green;
+ block-size: 160px;
+}
+
+.abspos {
+ position: absolute;
+ inline-size: 100%;
+ block-size: 160px;
+ background: green;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="multicol">
+ <div class="container">
+ <div class="abspos"></div>
+ </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-119.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-119.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<title>CSS Break Test: Fragmentation of abspos element in a vertical-rl multicol container</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-position-3/#abspos-breaking">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+
+<style>
+.multicol {
+ writing-mode: vertical-rl;
+ block-size: 100px;
+ inline-size: 100px;
+ column-count: 2;
+ column-fill: auto;
+ column-gap: 0;
+ background: red;
+}
+.container {
+ display: flex;
+ position: relative;
+ border-block: 20px solid green;
+ block-size: 160px;
+}
+
+.abspos {
+ position: absolute;
+ inline-size: 100%;
+ block-size: 160px;
+ background: green;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="multicol">
+ <div class="container">
+ <div class="abspos"></div>
+ </div>
+</div>
