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 0000000000000..f14ee8a99bcf1
--- /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 0000000000000..bccfd88ae7ce5
--- /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 0000000000000..92d56391ec4f6
--- /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 0000000000000..b09566caf8539
--- /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 0000000000000..c3347a3a3a306
--- /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 d13fe399a6322..46d33f42d22e2 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