Force size containment for auto-sizes #9493

zcorpan · 2023-07-06T12:54:24Z

The 'concrete object size ignoring natural dimensions' concept was not implementable. This change makes sizes=auto required on img to use auto-sizes (still optional on source) and forces size containment so that the image size is the same before and after an image has loaded, to prevent double downloads.

Fixes #9448.

At least two implementers are interested (and none opposed):
- Chromium
- Gecko
Tests are written and can be reviewed and commented upon at:
- HTML: test UA styles for <img sizes=auto> web-platform-tests/wpt#41817
- https://chromium-review.googlesource.com/c/chromium/src/+/5064461
Implementation bugs are filed:
- Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=1359051
- Gecko: https://bugzilla.mozilla.org/show_bug.cgi?id=1819581
- WebKit: https://bugs.webkit.org/show_bug.cgi?id=253143
- Deno (only for timers, structured clone, base64 utils, channel messaging, module resolution, web workers, and web storage): N/A
- Node.js (only for timers, structured clone, base64 utils, channel messaging, and module resolution): N/A
MDN issue is filed: Document img auto-sizes mdn/content#30596

(See WHATWG Working Mode: Changes for more details.)

/embedded-content.html ( diff )
/images.html ( diff )
/rendering.html ( diff )

source

joemcgill · 2023-07-21T21:02:52Z

This may be somewhat off-topic (please feel free to redirect me, if so) but one aspect of the parsing algorithm is still unclear to me. If a platform (e.g. WordPress) generated image markup that looks like this (note the omission of a loading="lazy" attribute):

<img src="200.jpg" width="200" height="200" srcset="200.jpg 200w, 400.jpg 400w, 600.jpg 600w" sizes="auto, 200px" />

Would the omission of the loading attribute cause sizes to be calculates as the default 100vw value, would the 200px value be respected, or would size containment come into play? I would hope that the the "200px" value would be respected in this case so that platforms could add auto to the beginning of a sizes and dynamically decide whether to add a loading attribute while constructing the markup. In other words, if auto can't be applied because the image is not being lazy loaded, then the browser should respect the next items in the media condition.

zcorpan · 2023-08-29T16:51:01Z

@joemcgill right now, the intent is that auto would be returned by the "parse a sizes attribute" algorithm, and evaluate to 100vw. But I can see that falling back to the next value can be useful. I'll file a new issue.

See whatwg/html#9493

The 'concrete object size ignoring natural dimensions' concept was not implementable. This change makes `sizes=auto` required on `img` to use auto-sizes (still optional on `source`) and forces size containment so that the image size is the same before and after an image has loaded, to prevent double downloads. Fixes #9448.

zcorpan · 2023-09-05T11:31:56Z

I wrote tests for the UA stylesheet in web-platform-tests/wpt#41817

I pushed 1b6f84a to fix #9648 and #9649. Still need to write tests for the sizes parser changes.

foolip · 2023-09-08T09:53:47Z

@zcorpan any idea why PR preview is failing here? What's the best way to retry it?

foolip

I've done an editorial review and tried to ensure this PR does what it claims, but I have not gone through the history of #9448 to understand this deeply. I trust that prospective implementers will evaluate the implementability when reviewing this.

source

Fixes #9648, fixes #9649

Also update tests in size-auto to match spec update: whatwg/html#9493 Spec: https://html.spec.whatwg.org/#parsing-a-sizes-attribute https://whatpr.org/html/9493/images.html#parsing-a-sizes-attribute R=pdr Bug: 1359051 Change-Id: I77ecbfef3a5a63101929f67025699550cc7f6413

source

Also update tests in size-auto to match spec update: whatwg/html#9493 Spec: https://html.spec.whatwg.org/#parsing-a-sizes-attribute https://whatpr.org/html/9493/images.html#parsing-a-sizes-attribute R=pdr Bug: 1359051 Change-Id: I77ecbfef3a5a63101929f67025699550cc7f6413

tcaptan-cr

LGTM

Also update tests in size-auto to match spec update: whatwg/html#9493 Spec: https://html.spec.whatwg.org/#parsing-a-sizes-attribute https://whatpr.org/html/9493/images.html#parsing-a-sizes-attribute R=pdr Bug: 1359051 Change-Id: I77ecbfef3a5a63101929f67025699550cc7f6413

zcorpan · 2023-11-30T12:41:08Z

@tcaptan-cr has implemented this in Chromium and created remaining tests, see https://bugs.chromium.org/p/chromium/issues/detail?id=1359051

I believe this is ready to merge!

foolip

I've reviewed the changes since #9493 (review)

See whatwg/html#9493

Also update tests in size-auto to match spec update: whatwg/html#9493 Spec: https://html.spec.whatwg.org/#parsing-a-sizes-attribute https://whatpr.org/html/9493/images.html#parsing-a-sizes-attribute R=pdr Bug: 1359051 Change-Id: I77ecbfef3a5a63101929f67025699550cc7f6413

Also update tests in size-auto to match spec update: whatwg/html#9493 Spec: https://html.spec.whatwg.org/#parsing-a-sizes-attribute https://whatpr.org/html/9493/images.html#parsing-a-sizes-attribute R=pdr Bug: 1359051 Change-Id: I77ecbfef3a5a63101929f67025699550cc7f6413 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5064461 Commit-Queue: Traian Captan <tcaptan@chromium.org> Reviewed-by: Philip Rogers <pdr@chromium.org> Cr-Commit-Position: refs/heads/main@{#1231380}

Also update tests in size-auto to match spec update: whatwg/html#9493 Spec: https://html.spec.whatwg.org/#parsing-a-sizes-attribute https://whatpr.org/html/9493/images.html#parsing-a-sizes-attribute R=pdr Bug: 1359051 Change-Id: I77ecbfef3a5a63101929f67025699550cc7f6413 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5064461 Commit-Queue: Traian Captan <tcaptan@chromium.org> Reviewed-by: Philip Rogers <pdr@chromium.org> Cr-Commit-Position: refs/heads/main@{#1231380}

…>, a=testonly Automatic update from web-platform-tests HTML: test UA styles for <img sizes=auto> See whatwg/html#9493 -- wpt-commits: 0f673999acbd28c5584e03f61da96a30e38ac092 wpt-pr: 41817

…stonly Automatic update from web-platform-tests Add auto sizes wpt rendering tests Also update tests in size-auto to match spec update: whatwg/html#9493 Spec: https://html.spec.whatwg.org/#parsing-a-sizes-attribute https://whatpr.org/html/9493/images.html#parsing-a-sizes-attribute R=pdr Bug: 1359051 Change-Id: I77ecbfef3a5a63101929f67025699550cc7f6413 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5064461 Commit-Queue: Traian Captan <tcaptan@chromium.org> Reviewed-by: Philip Rogers <pdr@chromium.org> Cr-Commit-Position: refs/heads/main@{#1231380} -- wpt-commits: 5904d197e1d4318c4fefb12bf406c921fbd123f3 wpt-pr: 43385

…>, a=testonly Automatic update from web-platform-tests HTML: test UA styles for <img sizes=auto> See whatwg/html#9493 -- wpt-commits: 0f673999acbd28c5584e03f61da96a30e38ac092 wpt-pr: 41817

…stonly Automatic update from web-platform-tests Add auto sizes wpt rendering tests Also update tests in size-auto to match spec update: whatwg/html#9493 Spec: https://html.spec.whatwg.org/#parsing-a-sizes-attribute https://whatpr.org/html/9493/images.html#parsing-a-sizes-attribute R=pdr Bug: 1359051 Change-Id: I77ecbfef3a5a63101929f67025699550cc7f6413 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5064461 Commit-Queue: Traian Captan <tcaptan@chromium.org> Reviewed-by: Philip Rogers <pdr@chromium.org> Cr-Commit-Position: refs/heads/main@{#1231380} -- wpt-commits: 5904d197e1d4318c4fefb12bf406c921fbd123f3 wpt-pr: 43385

…>, a=testonly Automatic update from web-platform-tests HTML: test UA styles for <img sizes=auto> See whatwg/html#9493 -- wpt-commits: 0f673999acbd28c5584e03f61da96a30e38ac092 wpt-pr: 41817 UltraBlame original commit: fdb4314a7244387e3eab803734be403fd4d82471

…stonly Automatic update from web-platform-tests Add auto sizes wpt rendering tests Also update tests in size-auto to match spec update: whatwg/html#9493 Spec: https://html.spec.whatwg.org/#parsing-a-sizes-attribute https://whatpr.org/html/9493/images.html#parsing-a-sizes-attribute R=pdr Bug: 1359051 Change-Id: I77ecbfef3a5a63101929f67025699550cc7f6413 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5064461 Commit-Queue: Traian Captan <tcaptanchromium.org> Reviewed-by: Philip Rogers <pdrchromium.org> Cr-Commit-Position: refs/heads/main{#1231380} -- wpt-commits: 5904d197e1d4318c4fefb12bf406c921fbd123f3 wpt-pr: 43385 UltraBlame original commit: 5a6d84b529aebea9ea7277cc8a9aed89a7d2e349

…>, a=testonly Automatic update from web-platform-tests HTML: test UA styles for <img sizes=auto> See whatwg/html#9493 -- wpt-commits: 0f673999acbd28c5584e03f61da96a30e38ac092 wpt-pr: 41817 UltraBlame original commit: fdb4314a7244387e3eab803734be403fd4d82471

…stonly Automatic update from web-platform-tests Add auto sizes wpt rendering tests Also update tests in size-auto to match spec update: whatwg/html#9493 Spec: https://html.spec.whatwg.org/#parsing-a-sizes-attribute https://whatpr.org/html/9493/images.html#parsing-a-sizes-attribute R=pdr Bug: 1359051 Change-Id: I77ecbfef3a5a63101929f67025699550cc7f6413 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5064461 Commit-Queue: Traian Captan <tcaptanchromium.org> Reviewed-by: Philip Rogers <pdrchromium.org> Cr-Commit-Position: refs/heads/main{#1231380} -- wpt-commits: 5904d197e1d4318c4fefb12bf406c921fbd123f3 wpt-pr: 43385 UltraBlame original commit: 5a6d84b529aebea9ea7277cc8a9aed89a7d2e349

…>, a=testonly Automatic update from web-platform-tests HTML: test UA styles for <img sizes=auto> See whatwg/html#9493 -- wpt-commits: 0f673999acbd28c5584e03f61da96a30e38ac092 wpt-pr: 41817 UltraBlame original commit: fdb4314a7244387e3eab803734be403fd4d82471

…stonly Automatic update from web-platform-tests Add auto sizes wpt rendering tests Also update tests in size-auto to match spec update: whatwg/html#9493 Spec: https://html.spec.whatwg.org/#parsing-a-sizes-attribute https://whatpr.org/html/9493/images.html#parsing-a-sizes-attribute R=pdr Bug: 1359051 Change-Id: I77ecbfef3a5a63101929f67025699550cc7f6413 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5064461 Commit-Queue: Traian Captan <tcaptanchromium.org> Reviewed-by: Philip Rogers <pdrchromium.org> Cr-Commit-Position: refs/heads/main{#1231380} -- wpt-commits: 5904d197e1d4318c4fefb12bf406c921fbd123f3 wpt-pr: 43385 UltraBlame original commit: 5a6d84b529aebea9ea7277cc8a9aed89a7d2e349

…>, a=testonly Automatic update from web-platform-tests HTML: test UA styles for <img sizes=auto> See whatwg/html#9493 -- wpt-commits: 0f673999acbd28c5584e03f61da96a30e38ac092 wpt-pr: 41817

…stonly Automatic update from web-platform-tests Add auto sizes wpt rendering tests Also update tests in size-auto to match spec update: whatwg/html#9493 Spec: https://html.spec.whatwg.org/#parsing-a-sizes-attribute https://whatpr.org/html/9493/images.html#parsing-a-sizes-attribute R=pdr Bug: 1359051 Change-Id: I77ecbfef3a5a63101929f67025699550cc7f6413 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5064461 Commit-Queue: Traian Captan <tcaptan@chromium.org> Reviewed-by: Philip Rogers <pdr@chromium.org> Cr-Commit-Position: refs/heads/main@{#1231380} -- wpt-commits: 5904d197e1d4318c4fefb12bf406c921fbd123f3 wpt-pr: 43385

…>, a=testonly Automatic update from web-platform-tests HTML: test UA styles for <img sizes=auto> See whatwg/html#9493 -- wpt-commits: 0f673999acbd28c5584e03f61da96a30e38ac092 wpt-pr: 41817

…stonly Automatic update from web-platform-tests Add auto sizes wpt rendering tests Also update tests in size-auto to match spec update: whatwg/html#9493 Spec: https://html.spec.whatwg.org/#parsing-a-sizes-attribute https://whatpr.org/html/9493/images.html#parsing-a-sizes-attribute R=pdr Bug: 1359051 Change-Id: I77ecbfef3a5a63101929f67025699550cc7f6413 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5064461 Commit-Queue: Traian Captan <tcaptan@chromium.org> Reviewed-by: Philip Rogers <pdr@chromium.org> Cr-Commit-Position: refs/heads/main@{#1231380} -- wpt-commits: 5904d197e1d4318c4fefb12bf406c921fbd123f3 wpt-pr: 43385

…>, a=testonly Automatic update from web-platform-tests HTML: test UA styles for <img sizes=auto> See whatwg/html#9493 -- wpt-commits: 0f673999acbd28c5584e03f61da96a30e38ac092 wpt-pr: 41817 UltraBlame original commit: 5e6766903b9d6ff31473311f3e87774095251eda

…stonly Automatic update from web-platform-tests Add auto sizes wpt rendering tests Also update tests in size-auto to match spec update: whatwg/html#9493 Spec: https://html.spec.whatwg.org/#parsing-a-sizes-attribute https://whatpr.org/html/9493/images.html#parsing-a-sizes-attribute R=pdr Bug: 1359051 Change-Id: I77ecbfef3a5a63101929f67025699550cc7f6413 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5064461 Commit-Queue: Traian Captan <tcaptanchromium.org> Reviewed-by: Philip Rogers <pdrchromium.org> Cr-Commit-Position: refs/heads/main{#1231380} -- wpt-commits: 5904d197e1d4318c4fefb12bf406c921fbd123f3 wpt-pr: 43385 UltraBlame original commit: 4b7ff7848d33231d5746355ea34056b07ac6ed1d

…>, a=testonly Automatic update from web-platform-tests HTML: test UA styles for <img sizes=auto> See whatwg/html#9493 -- wpt-commits: 0f673999acbd28c5584e03f61da96a30e38ac092 wpt-pr: 41817 UltraBlame original commit: 5e6766903b9d6ff31473311f3e87774095251eda

…stonly Automatic update from web-platform-tests Add auto sizes wpt rendering tests Also update tests in size-auto to match spec update: whatwg/html#9493 Spec: https://html.spec.whatwg.org/#parsing-a-sizes-attribute https://whatpr.org/html/9493/images.html#parsing-a-sizes-attribute R=pdr Bug: 1359051 Change-Id: I77ecbfef3a5a63101929f67025699550cc7f6413 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5064461 Commit-Queue: Traian Captan <tcaptanchromium.org> Reviewed-by: Philip Rogers <pdrchromium.org> Cr-Commit-Position: refs/heads/main{#1231380} -- wpt-commits: 5904d197e1d4318c4fefb12bf406c921fbd123f3 wpt-pr: 43385 UltraBlame original commit: 4b7ff7848d33231d5746355ea34056b07ac6ed1d

…>, a=testonly Automatic update from web-platform-tests HTML: test UA styles for <img sizes=auto> See whatwg/html#9493 -- wpt-commits: 0f673999acbd28c5584e03f61da96a30e38ac092 wpt-pr: 41817 UltraBlame original commit: 5e6766903b9d6ff31473311f3e87774095251eda

…stonly Automatic update from web-platform-tests Add auto sizes wpt rendering tests Also update tests in size-auto to match spec update: whatwg/html#9493 Spec: https://html.spec.whatwg.org/#parsing-a-sizes-attribute https://whatpr.org/html/9493/images.html#parsing-a-sizes-attribute R=pdr Bug: 1359051 Change-Id: I77ecbfef3a5a63101929f67025699550cc7f6413 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5064461 Commit-Queue: Traian Captan <tcaptanchromium.org> Reviewed-by: Philip Rogers <pdrchromium.org> Cr-Commit-Position: refs/heads/main{#1231380} -- wpt-commits: 5904d197e1d4318c4fefb12bf406c921fbd123f3 wpt-pr: 43385 UltraBlame original commit: 4b7ff7848d33231d5746355ea34056b07ac6ed1d

zcorpan mentioned this pull request Jul 6, 2023

auto-sizes concrete object size ignoring natural dimensions is not implementable #9448

Closed

johannesodland reviewed Jul 6, 2023

View reviewed changes

source Outdated Show resolved Hide resolved

joemcgill mentioned this pull request Jul 25, 2023

Module Proposal: auto-sizes for lazy-loaded images WordPress/performance#791

Closed

This was referenced Aug 29, 2023

Auto-sizes: fall back to next value in sizes if the image is not lazy-loading #9648

Closed

Auto-sizes: parsing of auto in sizes is bogus #9649

Closed

zcorpan added a commit to web-platform-tests/wpt that referenced this pull request Sep 5, 2023

HTML: test UA styles for <img sizes=auto>

9553012

See whatwg/html#9493

zcorpan mentioned this pull request Sep 5, 2023

HTML: test UA styles for <img sizes=auto> web-platform-tests/wpt#41817

Merged

zcorpan force-pushed the zcorpan/auto-sizes-implementable branch from bdf7972 to e90b823 Compare September 5, 2023 09:35

foolip reviewed Sep 8, 2023

View reviewed changes

source Show resolved Hide resolved

source Show resolved Hide resolved

source Show resolved Hide resolved

source Show resolved Hide resolved

source Show resolved Hide resolved

source Show resolved Hide resolved

Fix bugs in source parser

5ee976b

Fixes #9648, fixes #9649

zcorpan force-pushed the zcorpan/auto-sizes-implementable branch from 1b6f84a to 5ee976b Compare October 3, 2023 14:44

zcorpan added 2 commits October 3, 2023 16:46

Typos

8db2f2d

Fix the note claiming 0x0 dimensions

4a5fffe

chromium-wpt-export-bot mentioned this pull request Nov 28, 2023

Add auto sizes wpt rendering tests web-platform-tests/wpt#43385

Merged

tcaptan-cr reviewed Nov 28, 2023

View reviewed changes

source Show resolved Hide resolved

This was referenced Nov 28, 2023

Support <img sizes=auto> and <source sizes=auto> validator/validator#1396

Open

Document img auto-sizes mdn/content#30596

Open

tcaptan-cr reviewed Nov 29, 2023

View reviewed changes

foolip approved these changes Nov 30, 2023

View reviewed changes

zcorpan merged commit 193c67d into main Nov 30, 2023
2 checks passed

zcorpan deleted the zcorpan/auto-sizes-implementable branch November 30, 2023 12:59

zcorpan added a commit to web-platform-tests/wpt that referenced this pull request Nov 30, 2023

HTML: test UA styles for <img sizes=auto>

0f67399

See whatwg/html#9493

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Force size containment for auto-sizes #9493

Force size containment for auto-sizes #9493

zcorpan commented Jul 6, 2023 •

edited by pr-preview bot

joemcgill commented Jul 21, 2023

zcorpan commented Aug 29, 2023

zcorpan commented Sep 5, 2023

foolip commented Sep 8, 2023

foolip left a comment

tcaptan-cr left a comment

zcorpan commented Nov 30, 2023

foolip left a comment

Force size containment for auto-sizes #9493

Force size containment for auto-sizes #9493

Conversation

zcorpan commented Jul 6, 2023 • edited by pr-preview bot

joemcgill commented Jul 21, 2023

zcorpan commented Aug 29, 2023

zcorpan commented Sep 5, 2023

foolip commented Sep 8, 2023

foolip left a comment

Choose a reason for hiding this comment

tcaptan-cr left a comment

Choose a reason for hiding this comment

zcorpan commented Nov 30, 2023

foolip left a comment

Choose a reason for hiding this comment

zcorpan commented Jul 6, 2023 •

edited by pr-preview bot