sizes-auto-rendering-dynamic.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-dynamic.html - WPT Dashboard Interop Dashboard

<!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>