From 19dcd5bd2290ddd672402f5437e8c2165b8bfb69 Mon Sep 17 00:00:00 2001
From: Marco Castelluccio <mcastelluccio@mozilla.com>
Date: Sat, 16 Dec 2023 00:32:42 +0000
Subject: [PATCH] Bug 1866970 [wpt PR 43385] - Add auto sizes wpt rendering
 tests, a=testonly

Automatic update from web-platform-tests
Add auto sizes wpt rendering tests

Also update tests in size-auto to match spec update:
https://github.com/whatwg/html/pull/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
---
 .../reference/sizes-auto-rendering-ref.html   |  71 +++++
 .../sizes/sizes-auto-rendering-2.html         | 202 ++++++++++++
 .../sizes/sizes-auto-rendering-3.html         | 202 ++++++++++++
 .../sizes/sizes-auto-rendering-dynamic.html   | 298 ++++++++++++++++++
 .../sizes/sizes-auto-rendering.html           | 209 ++++++++++++
 .../the-img-element/sizes/sizes-auto.html     | 188 +++++++++--
 6 files changed, 1141 insertions(+), 29 deletions(-)
 create mode 100644 testing/web-platform/tests/html/semantics/embedded-content/the-img-element/sizes/reference/sizes-auto-rendering-ref.html
 create mode 100644 testing/web-platform/tests/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-2.html
 create mode 100644 testing/web-platform/tests/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-3.html
 create mode 100644 testing/web-platform/tests/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-dynamic.html
 create mode 100644 testing/web-platform/tests/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering.html

diff --git a/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/sizes/reference/sizes-auto-rendering-ref.html b/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/sizes/reference/sizes-auto-rendering-ref.html
new file mode 100644
index 000000000000..f14ee8a99bcf
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/sizes/reference/sizes-auto-rendering-ref.html
@@ -0,0 +1,71 @@
+<
+!
+doctype
+html
+>
+<
+title
+>
+Auto
+sizes
+rendering
+<
+/
+title
+>
+<
+link
+rel
+=
+"
+help
+"
+href
+=
+"
+https
+:
+/
+/
+html
+.
+spec
+.
+whatwg
+.
+org
+/
+multipage
+/
+images
+.
+html
+#
+sizes
+-
+attributes
+"
+>
+<
+img
+src
+=
+"
+/
+images
+/
+green
+.
+png
+"
+width
+=
+"
+33
+"
+height
+=
+"
+13
+"
+>
diff --git a/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-2.html b/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-2.html
new file mode 100644
index 000000000000..bccfd88ae7ce
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-2.html
@@ -0,0 +1,202 @@
+<
+!
+doctype
+html
+>
+<
+html
+class
+=
+"
+reftest
+-
+wait
+"
+>
+<
+title
+>
+Auto
+sizes
+rendering
+<
+/
+title
+>
+<
+link
+rel
+=
+"
+help
+"
+href
+=
+"
+https
+:
+/
+/
+html
+.
+spec
+.
+whatwg
+.
+org
+/
+multipage
+/
+images
+.
+html
+#
+sizes
+-
+attributes
+"
+>
+<
+link
+rel
+=
+"
+match
+"
+href
+=
+"
+reference
+/
+sizes
+-
+auto
+-
+rendering
+-
+ref
+.
+html
+"
+>
+<
+script
+src
+=
+"
+/
+common
+/
+rendering
+-
+utils
+.
+js
+"
+>
+<
+/
+script
+>
+<
+script
+src
+=
+"
+/
+common
+/
+reftest
+-
+wait
+.
+js
+"
+>
+<
+/
+script
+>
+<
+img
+id
+=
+"
+testImg
+"
+loading
+=
+"
+lazy
+"
+sizes
+=
+"
+auto
+"
+width
+=
+"
+33
+"
+height
+=
+"
+13
+"
+>
+<
+script
+>
+function
+imageLoaded
+(
+)
+{
+waitForAtLeastOneFrame
+(
+)
+.
+then
+(
+takeScreenshot
+)
+;
+}
+testImg
+.
+addEventListener
+(
+'
+load
+'
+imageLoaded
+)
+;
+testImg
+.
+setAttribute
+(
+'
+srcset
+'
+/
+images
+/
+red
+.
+png
+10w
+/
+images
+/
+green
+.
+png
+100w
+)
+;
+<
+/
+script
+>
diff --git a/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-3.html b/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-3.html
new file mode 100644
index 000000000000..92d56391ec4f
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-3.html
@@ -0,0 +1,202 @@
+<
+!
+doctype
+html
+>
+<
+html
+class
+=
+"
+reftest
+-
+wait
+"
+>
+<
+title
+>
+Auto
+sizes
+rendering
+<
+/
+title
+>
+<
+link
+rel
+=
+"
+help
+"
+href
+=
+"
+https
+:
+/
+/
+html
+.
+spec
+.
+whatwg
+.
+org
+/
+multipage
+/
+images
+.
+html
+#
+sizes
+-
+attributes
+"
+>
+<
+link
+rel
+=
+"
+match
+"
+href
+=
+"
+reference
+/
+sizes
+-
+auto
+-
+rendering
+-
+ref
+.
+html
+"
+>
+<
+script
+src
+=
+"
+/
+common
+/
+rendering
+-
+utils
+.
+js
+"
+>
+<
+/
+script
+>
+<
+script
+src
+=
+"
+/
+common
+/
+reftest
+-
+wait
+.
+js
+"
+>
+<
+/
+script
+>
+<
+img
+id
+=
+"
+testImg
+"
+loading
+=
+"
+lazy
+"
+sizes
+=
+"
+auto
+"
+width
+=
+"
+33
+"
+height
+=
+"
+13
+"
+>
+<
+script
+>
+function
+imageLoaded
+(
+)
+{
+waitForAtLeastOneFrame
+(
+)
+.
+then
+(
+takeScreenshot
+)
+;
+}
+testImg
+.
+addEventListener
+(
+'
+load
+'
+imageLoaded
+)
+;
+testImg
+.
+setAttribute
+(
+'
+srcset
+'
+/
+images
+/
+green
+.
+png
+100w
+/
+images
+/
+red
+.
+png
+1000w
+)
+;
+<
+/
+script
+>
diff --git a/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-dynamic.html b/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-dynamic.html
new file mode 100644
index 000000000000..b09566caf853
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-dynamic.html
@@ -0,0 +1,298 @@
+<
+!
+doctype
+html
+>
+<
+html
+class
+=
+"
+reftest
+-
+wait
+"
+>
+<
+title
+>
+Auto
+sizes
+dynamic
+rendering
+<
+/
+title
+>
+<
+link
+rel
+=
+"
+help
+"
+href
+=
+"
+https
+:
+/
+/
+html
+.
+spec
+.
+whatwg
+.
+org
+/
+multipage
+/
+images
+.
+html
+#
+sizes
+-
+attributes
+"
+>
+<
+link
+rel
+=
+"
+match
+"
+href
+=
+"
+reference
+/
+sizes
+-
+auto
+-
+rendering
+-
+ref
+.
+html
+"
+>
+<
+script
+src
+=
+"
+/
+common
+/
+rendering
+-
+utils
+.
+js
+"
+>
+<
+/
+script
+>
+<
+script
+src
+=
+"
+/
+common
+/
+reftest
+-
+wait
+.
+js
+"
+>
+<
+/
+script
+>
+<
+img
+id
+=
+"
+testImg
+"
+loading
+=
+"
+lazy
+"
+sizes
+=
+"
+auto
+"
+width
+=
+"
+1
+"
+height
+=
+"
+13
+"
+>
+<
+script
+>
+function
+secondImageLoaded
+(
+)
+{
+waitForAtLeastOneFrame
+(
+)
+.
+then
+(
+takeScreenshot
+)
+;
+}
+function
+firstImageLoaded
+(
+)
+{
+const
+expected
+=
+'
+red
+.
+png
+'
+;
+if
+(
+!
+testImg
+.
+currentSrc
+.
+endsWith
+(
+'
+red
+.
+png
+'
+)
+)
+{
+const
+fail_msg
+=
+FAIL
+:
+currentSrc
+is
+{
+testImg
+.
+currentSrc
+}
+expected
+{
+expected
+}
+.
+;
+document
+.
+body
+.
+textContent
+=
+fail_msg
+;
+takeScreenshot
+(
+)
+;
+}
+testImg
+.
+addEventListener
+(
+'
+load
+'
+secondImageLoaded
+)
+;
+testImg
+.
+style
+.
+width
+=
+'
+33px
+'
+;
+}
+testImg
+.
+addEventListener
+(
+'
+load
+'
+firstImageLoaded
+{
+once
+:
+true
+}
+)
+;
+testImg
+.
+setAttribute
+(
+'
+srcset
+'
+/
+images
+/
+fail
+.
+gif
+1000w
+/
+images
+/
+green
+.
+png
+100w
+/
+images
+/
+red
+.
+png
+10w
+)
+;
+<
+/
+script
+>
diff --git a/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering.html b/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering.html
new file mode 100644
index 000000000000..c3347a3a3a30
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering.html
@@ -0,0 +1,209 @@
+<
+!
+doctype
+html
+>
+<
+html
+class
+=
+"
+reftest
+-
+wait
+"
+>
+<
+title
+>
+Auto
+sizes
+rendering
+<
+/
+title
+>
+<
+link
+rel
+=
+"
+help
+"
+href
+=
+"
+https
+:
+/
+/
+html
+.
+spec
+.
+whatwg
+.
+org
+/
+multipage
+/
+images
+.
+html
+#
+sizes
+-
+attributes
+"
+>
+<
+link
+rel
+=
+"
+match
+"
+href
+=
+"
+reference
+/
+sizes
+-
+auto
+-
+rendering
+-
+ref
+.
+html
+"
+>
+<
+script
+src
+=
+"
+/
+common
+/
+rendering
+-
+utils
+.
+js
+"
+>
+<
+/
+script
+>
+<
+script
+src
+=
+"
+/
+common
+/
+reftest
+-
+wait
+.
+js
+"
+>
+<
+/
+script
+>
+<
+img
+id
+=
+"
+testImg
+"
+loading
+=
+"
+lazy
+"
+sizes
+=
+"
+auto
+"
+width
+=
+"
+33
+"
+height
+=
+"
+13
+"
+>
+<
+script
+>
+function
+imageLoaded
+(
+)
+{
+waitForAtLeastOneFrame
+(
+)
+.
+then
+(
+takeScreenshot
+)
+;
+}
+testImg
+.
+addEventListener
+(
+'
+load
+'
+imageLoaded
+)
+;
+testImg
+.
+setAttribute
+(
+'
+srcset
+'
+/
+images
+/
+fail
+.
+gif
+10w
+/
+images
+/
+green
+.
+png
+100w
+/
+images
+/
+red
+.
+png
+1000w
+)
+;
+<
+/
+script
+>
diff --git a/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/sizes/sizes-auto.html b/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/sizes/sizes-auto.html
index d13fe399a632..46d33f42d22e 100644
--- a/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/sizes/sizes-auto.html
+++ b/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/sizes/sizes-auto.html
@@ -20,6 +20,43 @@
 title
 >
 <
+link
+rel
+=
+"
+help
+"
+href
+=
+"
+https
+:
+/
+/
+html
+.
+spec
+.
+whatwg
+.
+org
+/
+multipage
+/
+images
+.
+html
+#
+parse
+-
+a
+-
+sizes
+-
+attribute
+"
+>
+<
 script
 src
 =
@@ -660,9 +697,20 @@
 '
 :
 '
-ref1
+ref2
 '
 }
+/
+/
+no
+sizes
+:
+'
+auto
+'
+-
+>
+100vw
 {
 loading
 :
@@ -683,9 +731,20 @@
 '
 :
 '
-ref1
+ref2
 '
 }
+/
+/
+no
+sizes
+:
+'
+auto
+'
+-
+>
+100vw
 {
 loading
 :
@@ -714,11 +773,11 @@
 /
 /
 no
-specified
-width
--
->
-0
+sizes
+:
+'
+auto
+'
 -
 >
 100vw
@@ -749,9 +808,20 @@
 '
 :
 '
-ref1
+ref2
 '
 }
+/
+/
+no
+sizes
+:
+'
+auto
+'
+-
+>
+100vw
 {
 loading
 :
@@ -871,15 +941,9 @@
 '
 :
 '
-ref2
+ref1
 '
 }
-/
-/
-0
--
->
-100vw
 {
 loading
 :
@@ -905,15 +969,9 @@
 '
 :
 '
-ref2
+ref1
 '
 }
-/
-/
-0
--
->
-100vw
 {
 loading
 :
@@ -938,14 +996,13 @@
 /
 /
 no
-specified
 width
 -
 >
-0
--
->
-100vw
+UA
+default
+of
+300px
 {
 loading
 :
@@ -1301,9 +1358,19 @@
 '
 :
 '
-ref1
+ref2
 '
 }
+/
+/
+no
+width
+-
+>
+UA
+default
+of
+300px
 {
 loading
 :
@@ -1457,9 +1524,19 @@
 '
 :
 '
-ref1
+ref2
 '
 }
+/
+/
+no
+width
+-
+>
+UA
+default
+of
+300px
 {
 loading
 :
@@ -1911,6 +1988,59 @@
 sizes
 '
 :
+/
+/
+Authors
+have
+to
+specify
+sizes
+=
+"
+auto
+"
+on
+the
+img
+to
+use
+auto
+-
+sizes
+.
+if
+(
+obj
+[
+attr
+]
+.
+toLowerCase
+(
+)
+.
+startsWith
+(
+"
+auto
+"
+)
+)
+{
+img
+.
+setAttribute
+(
+attr
+obj
+[
+attr
+]
+)
+;
+break
+;
+}
 case
 '
 type