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 000000000000000..54b769f9b178ddf
--- /dev/null
+++ b/html/semantics/embedded-content/the-img-element/sizes/reference/sizes-auto-rendering-ref.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<title>Auto sizes rendering</title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/images.html#sizes-attributes">
+<meta name="assert" content="auto sizes rendering">
+<img
+  src="/images/green.png"
+  width="100px"
+>
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 000000000000000..102b8f75632b201
--- /dev/null
+++ b/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-2.html
@@ -0,0 +1,25 @@
+<!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>
+<meta name="assert" content="auto sizes rendering">
+<img
+  id="testImg"
+  loading="lazy"
+  srcset="
+    /images/red.png 50w,
+    /images/green.png 100w
+  "
+  sizes="auto"
+  width="100px"
+>
+<script>
+  function imageLoaded() {
+    waitForAtLeastOneFrame().then(takeScreenshot);
+  }
+
+  testImg.addEventListener('load', imageLoaded);
+</script>
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 000000000000000..eaf1116b9b6ba76
--- /dev/null
+++ b/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-3.html
@@ -0,0 +1,25 @@
+<!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>
+<meta name="assert" content="auto sizes rendering">
+<img
+  id="testImg"
+  loading="lazy"
+  srcset="
+    /images/green.png 100w,
+    /images/red.png 200w
+  "
+  sizes="auto"
+  width="100px"
+>
+<script>
+  function imageLoaded() {
+    waitForAtLeastOneFrame().then(takeScreenshot);
+  }
+
+  testImg.addEventListener('load', imageLoaded);
+</script>
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 000000000000000..fa747049e8e20e0
--- /dev/null
+++ b/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-dynamic.html
@@ -0,0 +1,31 @@
+<!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>
+<meta name="assert" content="auto sizes dynamic rendering">
+<img
+  id="testImg"
+  loading="lazy"
+  srcset="
+    /images/fail.gif 200w,
+    /images/green.png 100w,
+    /images/red.png 50w
+  "
+  sizes="auto"
+  width="50px"
+>
+<script>
+  function secondImageLoaded() {
+    waitForAtLeastOneFrame().then(takeScreenshot);
+  }
+
+  function firstImageLoaded() {
+    testImg.addEventListener('load', secondImageLoaded);
+    testImg.style.width = '100px';
+  }
+
+  testImg.addEventListener('load', firstImageLoaded, {once: true});
+</script>
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 000000000000000..25802235faece62
--- /dev/null
+++ b/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering.html
@@ -0,0 +1,26 @@
+<!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>
+<meta name="assert" content="auto sizes rendering">
+<img
+  id="testImg"
+  loading="lazy"
+  srcset="
+    /images/fail.gif 50w,
+    /images/green.png 100w,
+    /images/red.png 200w
+  "
+  sizes="auto"
+  width="100px"
+>
+<script>
+  function imageLoaded() {
+    waitForAtLeastOneFrame().then(takeScreenshot);
+  }
+
+  testImg.addEventListener('load', imageLoaded);
+</script>
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 41385edd33f1e7c..d176ec5e19ec609 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 @@
 <!doctype html>
 <title>img parse a sizes attribute: sizes=auto</title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/images.html#parse-a-sizes-attribute">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <style>
