file_img_picture_preload.html

<!DOCTYPE html>

<html>

<!--

  Helper for test_img_picture_preload.htm. Can be merged in to the test file

 when dom.image.{picture,srcset} are removed and we don't need to do pref

 flipping before the load.

  https://bugzilla.mozilla.org/show_bug.cgi?id=1067345

-->

<head>

  <title>Test for Bug 1067345</title>

</head>

<body onload="afterLoad();">

  <script type="text/javascript">

    var is = window.parent.is;

    var ok = window.parent.ok;

    var SimpleTest = window.parent.SimpleTest;

    // Called with number of requests made

    var notifyTestFinished = window.parent.childTestFinished;

    var currentDPI = window.parent.currentDPI;

    // This script is intentionally blocking the images below from

    // loading. It issues sync XHRs to the sjs to wait for the files

    // to be requested before unblocking DOM creation, then asserts

    // that the same sources were selected by the preloader and the

    // real DOM.

    // Number of images to wait for before unblocking load

    const EXPECTED_PRELOADS = 11;

    function busyWait(waitms) {

      var start = Date.now();

      while (Date.now() < start + waitms);

    // Send sync XHRs asking the sjs what images it's seen until we

    // see EXPECTED_PRELOADS images. (If this test is timing out, you broke

    // the preloader)

    var preloadedImages = [];

    while (preloadedImages.length < EXPECTED_PRELOADS) {

      var request = new XMLHttpRequest();

      request.open("GET", "./file_img_picture_preload.sjs?status", false);

      request.send(null);

      is(request.status, 200, "Getting status from sjs helper should succeed");

      if (request.status === 200) {

        preloadedImages = JSON.parse(request.responseText);

    // Ensure the DOM is still blocked on us before proceeding

    is(document.querySelector("img"), null, "No <img> elements should exist yet");

  </script>

  <!-- All images below will be checked, use sources of the format

       ./file_img_picture_preload.sjs?imgName:sourceName

       Update numImages when adding or removing images below -->

  <!-- Basic src -->

  <img id="img1"

       src="./file_img_picture_preload.sjs?img1:source1">

  <!-- Basic srcset, no src -->

  <img id="img2"

       srcset="./file_img_picture_preload.sjs?img2:source1, ./file_img_picture_preload.sjs?img2:source2 2x, ./file_img_picture_preload.sjs?img2:source3 0.5x">

  <!-- srcset + src, srcset should shadow entirley -->

  <img id="img3"

       srcset="./file_img_picture_preload.sjs?img3:source1, ./file_img_picture_preload.sjs?img3:source2 2x, ./file_img_picture_preload.sjs?img3:source3 0.5x">

  <!-- Ditto with sizes selector -->

  <img id="img4"

       sizes="50vw"

       srcset="./file_img_picture_preload.sjs?img4:source1 500w, ./file_img_picture_preload.sjs?img4:source2 200w, ./file_img_picture_preload.sjs?img4:source3 5w">

  <!-- Default source shouldn't be selected -->

  <img id="img5"

       srcset="./file_img_picture_preload.sjs?img5:source1, ./file_img_picture_preload.sjs?img5:source2 2x"

       src="./file_img_picture_preload.sjs?img5:source3">

  <!-- Default source should be the 1x source, but srcset for others -->

  <img id="img6"

       srcset="./file_img_picture_preload.sjs?img6:source1 0.5x, ./file_img_picture_preload.sjs?img6:source2 2x"

       src="./file_img_picture_preload.sjs?img6:source3">

  <!-- Ensure we skip various invalid sources -->

  <picture>

    <source type="image/png">

    <source type="image/png" srcset="">

    <source media="(min-width: 1px)">

    <source media="(min-width: 1px)" srcset=" ">

    <source type="invalid/x-bogus-type" srcset="./file_img_picture_preload.sjs?img7:source1">

    <source media="(unknown-query-value-thing: 1000something)" srcset="./file_img_picture_preload.sjs?img7:source2">

    <source media="(unknown-query-value-thing: 1000something)" srcset="bogus ./file_img_picture_preload.sjs?img7:source3 ./file_img_picture_preload.sjs?img7:source4">

    <img id="img7" src="./file_img_picture_preload.sjs?img7:source5">

  </picture>

  <!-- Should select matching sources with known type, and shouldn't select later sources that have closer densities-->

  <picture>

    <source type="invalid/x-unsupported-image-type" srcset="./file_img_picture_preload.sjs?img8:source1">

    <source type="image/png" srcset="./file_img_picture_preload.sjs?img8:source2 2x">

    <source type="image/png" srcset="./file_img_picture_preload.sjs?img8:source3 1x">

    <img id="img8" src="./file_img_picture_preload.sjs?img8:source4" srcset="./file_img_picture_preload.sjs?img8:source5 2x">

  </picture>

  <!-- Should select matching sources by media, and shouldn't select later sources that have closer densities -->

  <picture>

    <source media="(bogusxx)" srcset="./file_img_picture_preload.sjs?img9:source1">

    <source media="(minimum-width: 1px)" srcset="./file_img_picture_preload.sjs?img9:source2 2x">

    <source media="(max-resolution: 0.5dppx)" srcset="./file_img_picture_preload.sjs?img9:source3 1x">

    <source media="(min-resolution: 2dppx)" srcset="./file_img_picture_preload.sjs?img9:source4 1x">

    <source media="(min-resolution: 1dppx)" srcset="./file_img_picture_preload.sjs?img9:source5 1x">

    <source media="(min-resolution: 1dppx)" srcset="./file_img_picture_preload.sjs?img9:source6 2x">

    <img id="img9" src="./file_img_picture_preload.sjs?img9:source7" srcset="./file_img_picture_preload.sjs?img9:source8 2x">

  </picture>

  <!-- Make sure we consider sizes properly in sources -->

  <picture>

    <source type="image/png"

            sizes="10px"

            srcset="./file_img_picture_preload.sjs?img10:source1 10w, ./file_img_picture_preload.sjs?img10:source2 20w">

    <img id="img10" src="./file_img_picture_preload.sjs?img10:source3">

  </picture>

  <!-- Make sure we consider sizes properly -->

  <img id="img11" sizes="10px"

       srcset="./file_img_picture_preload.sjs?img11:source1 10w, ./file_img_picture_preload.sjs?img11:source2 20w"

       src="./file_img_picture_preload.sjs?img11:source3">

  <script type="text/javascript">

    function afterLoad() {

      // All images should have picked a source of the format

      // imgName:sourceName, ensure we have one source per image and

      // that it was preloaded.

      is(preloadedImages.length, EXPECTED_PRELOADS,

         "Should have exactly " + EXPECTED_PRELOADS + " preloaded URLs");

      // Split "imgName:source" sources we saw preload by img name

      var preloadByName = {};

      for (var preload of preloadedImages) {

        var split = preload.split(":");

        // Ensure we didn't preload two sources for the same image

        ok(preloadByName[split[0]] === undefined,

           "Should not have queried multiple sources for " + split[0] +

           " (got " + split[1] + ", already had " + preloadByName[split[0]] + ")");

        preloadByName[split[0]] = split[1];

      // Check all images, ensure each one had a preload

      var images = document.querySelectorAll("img");

      for (var img of images) {

        var imgName = img.id;

        if (img.currentSrc) {

          split = img.currentSrc.split("?")[1].split(":");

          is(split[0], imgName,

             "image " + imgName + " source matches element id");

          is(split[1], preloadByName[imgName],

             "image " + imgName + " source should match preloaded source");

          // Remove from array

          delete preloadByName[imgName];

        } else {

          // img loaded nothing

          is(preloadByName[imgName], null,

             "Should not have preloaded anything for image " + imgName);

      notifyTestFinished(preloadedImages.length);

  </script>

</body>

</html>

Source code

Revision control

Copy as Markdown

Other Tools