auto-sizes-image-use-counter.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<title>The auto-sizes use-counters work properly</title>
<script src="resources/common.js"></script>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
</head>
<body>
<script>
  // The UseCounter ID.
  const kViewportDependentLazyLoadedImageWithSizesAttribute = 4351;
  const kViewportDependentLazyLoadedImageWithoutSizesAttribute = 4381;

  const clearUseCounter = () => {
    internals.clearUseCounter(document, kViewportDependentLazyLoadedImageWithSizesAttribute);
    internals.clearUseCounter(document, kViewportDependentLazyLoadedImageWithoutSizesAttribute);
  }

  const double_raf = () => {
    return new Promise(r => requestAnimationFrame(
                            () => requestAnimationFrame(r)));
  }

  const test_picture = async (lazy, sizes) => {
    clearUseCounter();
    const img = new Image();
    const picture = document.createElement("picture");
    const source = document.createElement("source");
    source.srcset = "square100.png 100w";
    source.type = "image/png";
    if (lazy) {
      img.loading = "lazy";
    }
    if (sizes) {
      source.sizes = "90vw";
    }
    document.body.appendChild(picture);
    picture.appendChild(source);
    picture.appendChild(img);

    await double_raf();

    assert_equals(internals.isUseCounted(document,
                 kViewportDependentLazyLoadedImageWithSizesAttribute),
                 lazy && sizes,
                 'ViewportDependentLazyLoadedImageWithSizesAttribute is not set'
                 + ' for non-matching picture. '
                 + `|lazy| is ${lazy} and |sizes| is ${sizes}.`);
    assert_equals(internals.isUseCounted(document,
                 kViewportDependentLazyLoadedImageWithoutSizesAttribute),
                 lazy && !sizes,
                 'ViewportDependentLazyLoadedImageWithoutSizesAttribute is not'
                 + ' set for non-matching picture. '
                 + `|lazy| is ${lazy} and |sizes| is ${sizes}.`);
  }

  const test_image = async (lazy, sizes) => {
    clearUseCounter();
    const img = new Image();
    img.srcset = "square100.png 100w";
    if (lazy) {
      img.loading = "lazy";
    }
    if (sizes) {
      img.sizes = "90vw";
    }
    document.body.appendChild(img);

    await double_raf();

    assert_equals(internals.isUseCounted(document,
                 kViewportDependentLazyLoadedImageWithSizesAttribute),
                 lazy && sizes,
                 'ViewportDependentLazyLoadedImageWithSizesAttribute'
                 + ' is not set for non-matching image.');
    assert_equals(internals.isUseCounted(document,
                 kViewportDependentLazyLoadedImageWithoutSizesAttribute),
                 lazy && !sizes,
                 'ViewportDependentLazyLoadedImageWithoutSizesAttribute'
                 + ' is not set for non-matching image.');
  }

  const combinations = [
    [/*lazy=*/false, /*sizes=*/false],
    [/*lazy=*/false, /*sizes=*/true],
    [/*lazy=*/true, /*sizes=*/false],
    [/*lazy=*/true, /*sizes=*/true],
  ];

  for (let [lazy, sizes] of combinations) {
    promise_test(t => {
      return test_image(lazy, sizes);
    }, `${document.title}, img, |lazy| is ${lazy} and |sizes| is ${sizes}.`);
  }

  for (let [lazy, sizes] of combinations) {
    promise_test(t => {
      return test_picture(lazy, sizes);
    }, `${document.title}, picture, |lazy| is ${lazy} and |sizes| is ${sizes}.`);
  }
</script>
</body>
</html>
chromium/third_party/blink/web_tests/http/tests/auto-sizes-image-use-counter.html
