commit 9a86a2f7054caaefa6b45d351651109deb872a42
parent 9c5ef3f5e111c199ec1a3a92a398e951831e7c6f
Author: Peng Zhou <zhoupeng.1996@bytedance.com>
Date: Wed, 7 Jan 2026 09:19:20 +0000
Bug 2008574 [wpt PR 56990] - Fix layout of fallback img elements with max-size and flow-root, a=testonly
Automatic update from web-platform-tests
Fix layout of fallback img elements with max-size and flow-root
Fallback img elements (e.g. broken src with empty alt) should consider
max-width and max-height during layout. Fix Blink to clamp their used
size accordingly.
Also switch the affected layout handling from inline-block to flow-root
to match Firefox and Safari.
Existing tests have been rebaselined. The change from inline-block to
flow-root affects the baseline alignment of the fallback content,
resulting in expected layout differences.
Bug: 40788530, 40830128
Change-Id: Ie51a2aacc95b4383b4788531b4a609183ff2856c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7317113
Commit-Queue: Peng Zhou <zhoupeng.1996@bytedance.com>
Reviewed-by: Fredrik Söderquist <fs@opera.com>
Cr-Commit-Position: refs/heads/main@{#1564405}
--
wpt-commits: 7b719c8e6d53932de28fe43bd5354aa4405e91df
wpt-pr: 56990
Diffstat:
3 files changed, 78 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/images/image-fallback-respect-max-width-ref.html b/testing/web-platform/tests/html/rendering/replaced-elements/images/image-fallback-respect-max-width-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Image fallback respect max-width</title>
+<style>
+ div {
+ max-width: 200px;
+ }
+ img {
+ width: 200px;
+ height: auto;
+ }
+</style>
+<body>
+ <div>
+ <img src="" width="10000" height="100">
+ <img src="" width="10000" height="100"
+ alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit.">
+ <img src="" width="1000" height="100">
+ </div>
+</body>
diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/images/image-fallback-respect-max-width.html b/testing/web-platform/tests/html/rendering/replaced-elements/images/image-fallback-respect-max-width.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Image fallback respect max-width</title>
+<link rel="author" href="mailto:zhoupeng.1996@bytedance.com">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#images-3">
+<link rel="match" href="image-fallback-respect-max-width-ref.html">
+<style>
+ div {
+ max-width: 200px;
+ }
+ img {
+ max-width: 100%;
+ height: auto;
+ }
+</style>
+<body>
+ <div>
+ <img src="" width="10000" height="100">
+ <img src="" width="10000" height="100"
+ alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit.">
+ <img src="" width="1000" height="100">
+ </div>
+</body>
diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/images/img-fallback-baseline-alignment.html b/testing/web-platform/tests/html/rendering/replaced-elements/images/img-fallback-baseline-alignment.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Image fallback baseline alignment</title>
+<link rel="author" href="mailto:zhoupeng.1996@bytedance.com">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#images-3">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+ div {
+ background: red;
+ line-height: 200px;
+ width: 100px;
+ }
+ img {
+ border-right: solid 30px black;
+ width: 30px;
+ height: 30px;
+ }
+</style>
+<body>
+ <div>
+ <img src="">
+ </div>
+ <script>
+ async_test(t => {
+ const img = document.querySelector('img');
+ const div = document.querySelector('div');
+ img.src = '';
+ img.onerror = t.step_func_done(() => {
+ assert_greater_than(img.offsetTop, div.offsetTop);
+ assert_less_than(img.offsetTop + img.offsetHeight, div.offsetTop + div.offsetHeight);
+ });
+ });
+ </script>
+</body>
