Skip to content

Commit

Permalink
[M121] Switch AutoSizeLazyLoadedImages back to experimental
Browse files Browse the repository at this point in the history 
This change switches the AutoSizeLazyLoadedImages flag back to
experimental because of several bug reports for M121:
https://crbug.com/1521479
https://crbug.com/1522175
https://crbug.com/1522116
https://crbug.com/1522027

The issues reported are because of the change to auto sizes img
UA style rules defined in:
https://html.spec.whatwg.org/#img-contain-size

That was checked in with:
https://chromium-review.googlesource.com/c/chromium/src/+/5050963

Since several sites seem to be using `size=auto` without defining width
and height attributes for images, the UA style rule is applied causing
the images to not render as expected. To avoid this the UA style rule is reverted as well.

There is a note mentioned in the html spec addressing this:
https://html.spec.whatwg.org/#sizes-attributes
"In addition, it is strongly encouraged to specify dimensions using the
width and height attributes or with CSS. Without specified dimensions,
the image will likely render with 300x150 dimensions because
sizes="auto" implies contain-intrinsic-size: 300px 150px in the
Rendering section."

R=szager

(cherry picked from commit 815ec12)

Bug: 1522175
Change-Id: I5b4d04b0660528999196e5387beac2c3d63df277
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5241231
Reviewed-by: Stefan Zager <[email protected]>
Commit-Queue: Traian Captan <[email protected]>
Cr-Original-Commit-Position: refs/heads/main@{#1252944}
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5247310
Auto-Submit: Mason Freed <[email protected]>
Commit-Queue: Srinivas Sista <[email protected]>
Commit-Queue: Mason Freed <[email protected]>
Commit-Queue: Stefan Zager <[email protected]>
Cr-Commit-Position: refs/branch-heads/6167@{#1684}
Cr-Branched-From: 222e786-refs/heads/main@{#1233107}
  • Loading branch information
@tcaptan-cr
tcaptan-cr authored and Srinivas Sista committed Jan 29, 2024
1 parent 90d4d8e commit a585699
Show file tree
Hide file tree
Showing 4 changed files with 47 additions and 7 deletions.
7 changes: 5 additions & 2 deletions third_party/blink/renderer/core/css/parser/sizes_attribute_parser_test.cc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -220,8 +220,11 @@ TEST_F(SizesAttributeParserTest, AutoSizesNonLazyImg) {
ASSERT_TRUE(parser.IsAuto());
ASSERT_EQ(500, parser.Size());
}

TEST_F(SizesAttributeParserTest, AutoSizesLazyImgNoWidth) {
// TODO(tcaptan):
// Disabled the size check for images with no width for now because of:
// crbug.com/1522175
// Will re-enable or modify after the UA style sheet issue is resolved.
TEST_F(SizesAttributeParserTest, DISABLED_AutoSizesLazyImgNoWidth) {
SetBodyInnerHTML(R"HTML(
<img id="target" sizes="auto" loading="lazy">
)HTML");
Expand Down
5 changes: 0 additions & 5 deletions third_party/blink/renderer/core/html/resources/html.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,11 +156,6 @@ video, canvas, img {
overflow-clip-margin: content-box;
}

img:is([sizes="auto" i], [sizes^="auto," i]) {
contain: size !important;
contain-intrinsic-size: 300px 150px;
}

iframe, embed, object, fencedframe {
overflow: clip !important;
overflow-clip-margin: content-box !important;
Expand Down
22 changes: 22 additions & 0 deletions ...eb_tests/external/wpt/html/rendering/replaced-elements/images/img-sizes-auto-expected.txt
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,26 @@
This is a testharness.js-based test.
[FAIL] <img sizes="auto"> - contain
assert_equals: expected "size" but got "none"
[FAIL] <img sizes="auto"> - contain-intrinsic-size
assert_equals: expected "300px 150px" but got "none"
[FAIL] <img sizes="auto" width="10" height="20"> - contain
assert_equals: expected "size" but got "none"
[FAIL] <img sizes="auto" width="10" height="20"> - contain-intrinsic-size
assert_equals: expected "300px 150px" but got "none"
[FAIL] <img sizes="AuTo"> - contain
assert_equals: expected "size" but got "none"
[FAIL] <img sizes="AuTo"> - contain-intrinsic-size
assert_equals: expected "300px 150px" but got "none"
[FAIL] <img sizes="auto,xyz"> - contain
assert_equals: expected "size" but got "none"
[FAIL] <img sizes="auto,xyz"> - contain-intrinsic-size
assert_equals: expected "300px 150px" but got "none"
[FAIL] <img sizes="AuTo,xyz"> - contain
assert_equals: expected "size" but got "none"
[FAIL] <img sizes="AuTo,xyz"> - contain-intrinsic-size
assert_equals: expected "300px 150px" but got "none"
[FAIL] <img sizes="auto" class="test-important"> - contain
assert_equals: expected "size" but got "style"
[FAIL] <img sizes="auto" class="test-important"> - contain-intrinsic-size
assert_equals: expected "300px 150px" but got "30px 15px"
Harness: the test ran to completion.
Expand Down
20 changes: 20 additions & 0 deletions ...xternal/wpt/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-expected.txt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
This is a testharness.js-based test.
Found 8 FAIL, 0 TIMEOUT, 0 NOTRUN.
[FAIL] <img loading="lazy" sizes="auto" data-ref="ref2" srcset="/images/green-1x1.png?img14 50w, /images/green-16x16.png?img14 51w">
assert_equals: expected "http://web-platform.test:8001/images/green-16x16.png" but got "http://web-platform.test:8001/images/green-1x1.png"
[FAIL] <picture><source srcset="/images/green-1x1.png?picture14 50w, /images/green-16x16.png?picture14 51w"><img loading="lazy" sizes="auto" data-ref="ref2"></picture>
assert_equals: expected "http://web-platform.test:8001/images/green-16x16.png" but got "http://web-platform.test:8001/images/green-1x1.png"
[FAIL] <img loading="lazy" sizes="auto" style="min-inline-size: 10px" data-ref="ref2" srcset="/images/green-1x1.png?img25 50w, /images/green-16x16.png?img25 51w">
assert_equals: expected "http://web-platform.test:8001/images/green-16x16.png" but got "http://web-platform.test:8001/images/green-1x1.png"
[FAIL] <picture><source srcset="/images/green-1x1.png?picture25 50w, /images/green-16x16.png?picture25 51w"><img loading="lazy" sizes="auto" style="min-inline-size: 10px" data-ref="ref2"></picture>
assert_equals: expected "http://web-platform.test:8001/images/green-16x16.png" but got "http://web-platform.test:8001/images/green-1x1.png"
[FAIL] <img loading="lazy" sizes="auto" style="min-block-size: 10px; writing-mode: vertical-rl" data-ref="ref2" srcset="/images/green-1x1.png?img29 50w, /images/green-16x16.png?img29 51w">
assert_equals: expected "http://web-platform.test:8001/images/green-16x16.png" but got "http://web-platform.test:8001/images/green-1x1.png"
[FAIL] <picture><source srcset="/images/green-1x1.png?picture29 50w, /images/green-16x16.png?picture29 51w"><img loading="lazy" sizes="auto" style="min-block-size: 10px; writing-mode: vertical-rl" data-ref="ref2"></picture>
assert_equals: expected "http://web-platform.test:8001/images/green-16x16.png" but got "http://web-platform.test:8001/images/green-1x1.png"
[FAIL] <img loading="lazy" sizes="auto" style="position: absolute; left: 50%; right: 49%" data-ref="ref2" srcset="/images/green-1x1.png?img34 50w, /images/green-16x16.png?img34 51w">
assert_equals: expected "http://web-platform.test:8001/images/green-16x16.png" but got "http://web-platform.test:8001/images/green-1x1.png"
[FAIL] <picture><source srcset="/images/green-1x1.png?picture34 50w, /images/green-16x16.png?picture34 51w"><img loading="lazy" sizes="auto" style="position: absolute; left: 50%; right: 49%" data-ref="ref2"></picture>
assert_equals: expected "http://web-platform.test:8001/images/green-16x16.png" but got "http://web-platform.test:8001/images/green-1x1.png"
Harness: the test ran to completion.

0 comments on commit a585699

Please sign in to comment.