Treat 'height:stretch' (and aliases) as able to resolve against quirks-mode body height.

dholbert · moz-wptsync-bot · commit c8418c0e90a9 · 2025-11-21T00:38:51.000Z
This patch lets 'stretch' block-sizes get opted in so they can resolve against the result of `CalcQuirkContainingBlockHeight()`. That's where we handle the "html element fills the viewport" and "body element fills the html element" quirks-mode behaviors explained here: https://quirks.spec.whatwg.org/#the-html-element-fills-the-viewport-quirk https://quirks.spec.whatwg.org/#the-body-element-fills-the-html-element-quirk This makes us match the behavior that other browsers have been shipping (with 'stretch' in Chrome as well as its '-webkit-fill-available' alias in Chrome and Safari), and we're aware of at least one site that depends on this behavior (tracked in bug 1886566). Differential Revision: https://phabricator.services.mozilla.com/D273323 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1989365 gecko-commit: 2cb11aff2f457ec44347183a1d116c8fbd9c45c9 gecko-reviewers: TYLin, layout-reviewers
diff --git a/css/css-sizing/stretch/stretch-quirk-001-ref.html b/css/css-sizing/stretch/stretch-quirk-001-ref.html
@@ -0,0 +1,28 @@
+<!-- no doctype, to trigger quirks mode -->
+<meta charset="utf-8">
+<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+<title>CSS Reference Case</title>
+<style>
+  body {
+    margin: 0;
+  }
+  body > * {
+    box-sizing: border-box;
+    height: 100vh;
+
+    /* The rest of these styles are just for cosmetics & consistency: */
+    width: 40px;
+    border: 5px solid blue;
+    vertical-align: top;
+    margin: 0 10px 0 0;
+    background: cyan;
+  }
+</style>
+<body>
+  <div style="display: inline-block">IB</div>
+  <canvas></canvas>
+  <iframe></iframe>
+  <button>B</button>
+  <input value="i">
+  <textarea></textarea>
+</body>
diff --git a/css/css-sizing/stretch/stretch-quirk-001.html b/css/css-sizing/stretch/stretch-quirk-001.html
@@ -0,0 +1,38 @@
+<!-- no doctype, to trigger quirks mode -->
+<meta charset="utf-8">
+<title>
+  CSS Test: 'stretch' heights can resolve against body height, with
+  quirks-mode body-fills-html-which-fills-viewport behavior
+</title>
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#sizing-values">
+<link rel="help" href="https://quirks.spec.whatwg.org/#the-html-element-fills-the-viewport-quirk">
+<link rel="help" href="https://quirks.spec.whatwg.org/#the-body-element-fills-the-html-element-quirk">
+<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+<link rel="match" href="stretch-quirk-001-ref.html">
+<meta name="assert"
+      content="In quirks mode, the body's automatic height should be considered definite for the purposes of 'stretch' resolution on its children">
+<style>
+  body {
+    margin: 0;
+  }
+  body > * {
+    box-sizing: border-box;
+    height: -webkit-fill-available;
+    height: stretch;
+
+    /* The rest of these styles are just for cosmetics & consistency: */
+    width: 40px;
+    border: 5px solid blue;
+    vertical-align: top;
+    margin: 0 10px 0 0;
+    background: cyan;
+  }
+</style>
+<body>
+  <div style="display: inline-block">IB</div>
+  <canvas></canvas>
+  <iframe></iframe>
+  <button>B</button>
+  <input value="i">
+  <textarea></textarea>
+</body>
