chromium/third_party/blink/web_tests/fast/dom/HTMLImageElement/image-picture-in-template.html

<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<script src="resources/currentSrcHelper.js"></script>
<script>
    jsTestIsAsync = true;

    addEventListener("load", function() {
        shouldBe('document.getElementById("canary").clientWidth', '75');
        shouldBe('currentSrcFileName("canary")', '"blue_rect.jpg?0"');
        shouldNotBe('document.querySelector("#clone img").currentSrc.indexOf("image-set-2x")', '-1');
        shouldBe('document.querySelector("#clone img").currentSrc.indexOf("blue_rect")', '-1');
        shouldNotBe('document.querySelector("#import img").currentSrc.indexOf("image-set-2x")', '-1');
        shouldBe('document.querySelector("#import img").currentSrc.indexOf("blue_rect")', '-1');
        finishJSTest();
    }, false);
</script>
<!-- A canary image to see that the test is actually working -->
<img id="canary" src="resources/blue_rect.jpg?0">
<!-- simple picture construct -->
<template>
    <picture>
        <source media="(max-width: 400px)" sizes="400px" srcset="../../hidpi/resources/image-set-1x.png?1 400w, ../../hidpi/resources/image-set-2x.png?1 800w,
            resources/image-set-4x.png?1 1600w">
        <source media="(max-width: 800px)" sizes="800px" srcset="../../hidpi/resources/image-set-1x.png?2 400w, ../../hidpi/resources/image-set-2x.png?2 800w,
            resources/image-set-4x.png?2 1600w">
        <source media="(max-width: 1600px)" sizes="1600px" srcset="../../hidpi/resources/image-set-1x.png?3 400w, ../../hidpi/resources/image-set-2x.png?3 800w,
            resources/image-set-4x.png?3 1600w">
        <img src="resources/blue_rect.jpg?1">
    </picture>
</template>
<div id="clone"></div>
<div id="import"></div>
<script>
    var t = document.querySelector('template');

    document.querySelector('#clone').appendChild(t.content.cloneNode(true));
    document.querySelector('#import').appendChild(document.importNode(t.content, true));
</script>