From 1b67a0f87930f199e87fbc04ebc78584260633c0 Mon Sep 17 00:00:00 2001 From: Traian Captan Date: Wed, 14 Jun 2023 17:49:43 -0700 Subject: [PATCH] Implement auto sizes for lazy-loaded img Auto Sizes allows developers to omit the sizes attribute (or set it to sizes=auto) for lazy loaded image elements with srcset. For this use case the image's width should be provided. The browser will use the layout width of the image in order to select the source url from the srcset. Spec PR: https://github.com/whatwg/html/pull/8008 WPT tests PR: https://github.com/web-platform-tests/wpt/pull/34427 Chrome Platform Status link: https://chromestatus.com/feature/5191555708616704 Intent to Prototype link: https://groups.google.com/a/chromium.org/g/blink-dev/c/AYoqvNluyeA R=pdr Bug: 1359051 Low-Coverage-Reason: For html_srcset_parser.cc, it should be covered by `image-srcset-cache.html` but there seems to be cov reporing problem. Change-Id: I8e9bc836e9582a9209db53d55e0edc96f90499f2 --- .../reference/sizes-auto-rendering-ref.html | 8 ++ .../the-img-element/sizes/sizes-auto-2.html | 121 ++++++++++++++++++ .../sizes/sizes-auto-rendering-2.html | 25 ++++ .../sizes/sizes-auto-rendering-3.html | 25 ++++ .../sizes/sizes-auto-rendering-dynamic.html | 31 +++++ .../sizes/sizes-auto-rendering.html | 26 ++++ .../the-img-element/sizes/sizes-auto.html | 6 +- 7 files changed, 238 insertions(+), 4 deletions(-) create mode 100644 html/semantics/embedded-content/the-img-element/sizes/reference/sizes-auto-rendering-ref.html create mode 100644 html/semantics/embedded-content/the-img-element/sizes/sizes-auto-2.html create mode 100644 html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-2.html create mode 100644 html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-3.html create mode 100644 html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-dynamic.html create mode 100644 html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering.html diff --git a/html/semantics/embedded-content/the-img-element/sizes/reference/sizes-auto-rendering-ref.html b/html/semantics/embedded-content/the-img-element/sizes/reference/sizes-auto-rendering-ref.html new file mode 100644 index 00000000000000..54b769f9b178dd --- /dev/null +++ b/html/semantics/embedded-content/the-img-element/sizes/reference/sizes-auto-rendering-ref.html @@ -0,0 +1,8 @@ + +Auto sizes rendering + + + diff --git a/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-2.html b/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-2.html new file mode 100644 index 00000000000000..0a7f50fca2bd79 --- /dev/null +++ b/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-2.html @@ -0,0 +1,121 @@ + +img parse a sizes attribute: sizes=auto + + + + +
+ + + +
+
+ diff --git a/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-2.html b/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-2.html new file mode 100644 index 00000000000000..102b8f75632b20 --- /dev/null +++ b/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-2.html @@ -0,0 +1,25 @@ + + +Auto sizes rendering + + + + + + + diff --git a/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-3.html b/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-3.html new file mode 100644 index 00000000000000..eaf1116b9b6ba7 --- /dev/null +++ b/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-3.html @@ -0,0 +1,25 @@ + + +Auto sizes rendering + + + + + + + diff --git a/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-dynamic.html b/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-dynamic.html new file mode 100644 index 00000000000000..fa747049e8e20e --- /dev/null +++ b/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-dynamic.html @@ -0,0 +1,31 @@ + + +Auto sizes dynamic rendering + + + + + + + diff --git a/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering.html b/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering.html new file mode 100644 index 00000000000000..25802235faece6 --- /dev/null +++ b/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering.html @@ -0,0 +1,26 @@ + + +Auto sizes rendering + + + + + + + diff --git a/html/semantics/embedded-content/the-img-element/sizes/sizes-auto.html b/html/semantics/embedded-content/the-img-element/sizes/sizes-auto.html index 41385edd33f1e7..a2d2710b933a9f 100644 --- a/html/semantics/embedded-content/the-img-element/sizes/sizes-auto.html +++ b/html/semantics/embedded-content/the-img-element/sizes/sizes-auto.html @@ -1,5 +1,6 @@ img parse a sizes attribute: sizes=auto +