commit 96c69b32024578f4b5b07f3f1e7c3a1a827c3bf7
parent c9238faf3519b744a3f40ef50a1789bbbc559a63
Author: Daniel Holbert <dholbert@cs.stanford.edu>
Date: Fri, 14 Nov 2025 01:13:53 +0000
Bug 1999886: Add a WPT to expect that fieldset and button are allowed to be a subgrid. r=layout-reviewers,emilio
This new WPT is forked from independent-formatting-context.html, and it should
ultimately be merged into that WPT; but let's wait a few months to do that,
since that test is part of interop-2025, and it's not worth it to move the
interop-2025 goalposts and (slightly) impact browser scores for this edge case
(since Chromium fails the fieldset portion of the new test). I filed
https://bugzilla.mozilla.org/show_bug.cgi?id=2000014 to merge the tests
once interop-2025 is over.
Differential Revision: https://phabricator.services.mozilla.com/D272395
Diffstat:
2 files changed, 117 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/independent-formatting-context-fieldset-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/independent-formatting-context-fieldset-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Reference: subgrid is allowed on fieldset and button</title>
+ <link rel="author" title="Daniel Holbert" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1999886">
+ <!-- TODO(dholbert): This file should ultimately be merged into
+ independent-formatting-context-ref.html; see
+ https://bugzilla.mozilla.org/show_bug.cgi?id=2000014 -->
+ <style>
+
+html,body {
+ font:16px/1 monospace; padding:0; margin:0; line-height: 0;
+}
+
+.grid {
+ display: inline-block;
+ background-color: green;
+ width: 100px;
+ height: 100px;
+ margin-right: 20px;
+ margin-bottom: 20px;
+ vertical-align: top;
+}
+
+ </style>
+</head>
+<body>
+
+<div class="grid">
+</div>
+
+<div class="grid">
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/independent-formatting-context-fieldset.html b/testing/web-platform/tests/css/css-grid/subgrid/independent-formatting-context-fieldset.html
@@ -0,0 +1,77 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Test: subgrid is allowed on fieldset and button</title>
+ <link rel="author" title="Daniel Holbert" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1999886">
+ <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-listing">
+ <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-fieldset-and-legend-elements">
+ <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#button-layout-2">
+ <link rel="match" href="independent-formatting-context-fieldset-ref.html">
+ <!-- TODO(dholbert): This file should ultimately be merged into
+ independent-formatting-context.html; see
+ https://bugzilla.mozilla.org/show_bug.cgi?id=2000014 -->
+ <style>
+
+html,body {
+ font:16px/1 monospace; padding:0; margin:0; line-height: 0;
+}
+
+fieldset, button {
+ /* Reset the default margin/border/padding, so that we can use our
+ simple regular-div mockup in reference case. (Note, it's important
+ that this come before the .grid {...} rule, so that we don't reset its
+ cosmetic margin-right/margin-bottom decls.) */
+ margin: 0;
+ border: 0;
+ padding: 0;
+ appearance: none;
+}
+.grid {
+ position: relative;
+ display: inline-grid;
+ grid-template-rows: 0px 100px;
+ width: 100px;
+ margin-right: 20px;
+ margin-bottom: 20px;
+ vertical-align: top;
+}
+
+.subgrid {
+ display: grid;
+ grid-template-rows: subgrid;
+ grid-row: 1 / 3;
+ width: 100px;
+ height: 100px;
+ background-color: red;
+}
+
+.second {
+ grid-row: 2;
+ background-color: green;
+}
+
+ </style>
+</head>
+<body>
+
+<!-- 'fieldset' and 'button' can both be styled as a grid/inline-grid, and
+ that doesn't necessarily create an independent formatting context.
+ So they are both eligible to be a subgrid.-->
+<div class="grid">
+ <fieldset class="subgrid">
+ <div class="second"></div>
+ </fieldset>
+</div>
+
+<div class="grid">
+ <button class="subgrid">
+ <div class="second"></div>
+ </button>
+</div>
+
+</body>
+</html>
