video-poster.html | Explore in Territory

<!DOCTYPE html>
<title>Test video poster with different dimensions.</title>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<body>
<script>
var posterInfo = [
    {
        description: "Testing poster null, with 'width' and 'height' attributes.",
        url: null, reflectedUrl: "", expectedWidth: 320, expectedHeight: 240, setSize: true
    },
    {
        description: "Testing 25x25 poster 'content/greenbox.png', size should equal image size.",
        url: "content/greenbox.png", expectedWidth: 25, expectedHeight: 25
    },
    {
        description: "Testing poster '', with NO 'width' or 'height' attributes so size should be <video> default.",
        url: "", reflectedUrl: "video-poster.html", expectedWidth: 300, expectedHeight: 150
    },
    {
        description: "Testing 76x103 poster 'content/abe.png', size should equal image size.",
        url: "content/abe.png", expectedWidth: 76, expectedHeight: 103
    },
    {
        description: "Testing 300x150 poster 'content/bogus.png', invalid url so size should revert to <video> default.",
        url: "content/bogus.png", expectedWidth: 300, expectedHeight: 150
    },
    {
        description: "Testing poster '', with only a 'width' attribute so size should have the same aspect ratio as <video> default.",
        url: "", reflectedUrl: "video-poster.html", expectedWidth: 600, expectedHeight: 300, widthAttr: 600
    },
    {
        description: "Testing 152x206 poster 'content/abe.png', with only a 'width' attribute so size should equal a scaled up image size with the same aspect ratio as the original image.",
        url: "content/abe.png", expectedWidth: 152, expectedHeight: 206, widthAttr: 152
    },
    {
        description: "Testing 600x300 poster 'content/bogus.png', invalid url w/ width attribute so size should have the same aspect ratio as <video> default.",
        url: "content/bogus.png", expectedWidth: 600, expectedHeight: 300, widthAttr: 600
    }
];

posterInfo.forEach(function(poster) {
    async_test(function(t) {
        var video = document.createElement("video");

        video.onerror = t.unreached_func(
            "Poster errors shouldn't surface on video element");
        video.onload = t.unreached_func(
            "Poster load events shouldn't surface on video element");

        document.body.appendChild(video);
        if (poster.setSize) {
            video.setAttribute("width", "320");
            video.setAttribute("height", "240");
        } else {
            video.poster = poster.url;
        }
        if (poster.widthAttr)
            video.width = poster.widthAttr;

        let cycleEventLoop = t.step_func(_=> {
            setTimeout(t.step_func_done(testPoster), 0);
        });
        if (poster.url) {
            var image = document.createElement("img");
            image.src = poster.url;
            document.body.appendChild(image);
            if (image.src.indexOf("bogus") > 0) {
                image.onerror = t.step_func(cycleEventLoop);
            } else {
                image.onload = t.step_func(cycleEventLoop);
            }
        } else {
            cycleEventLoop();
        }

        function testPoster() {
            assert_equals(video.getAttribute("poster"), poster.url);
            var url = video.poster.substr(video.poster.lastIndexOf("/media/") + 7);
            assert_equals(url, (poster.hasOwnProperty("reflectedUrl") ? poster.reflectedUrl : poster.url));
            assert_equals(video.clientWidth, poster.expectedWidth);
            assert_equals(video.clientHeight, poster.expectedHeight);
        }
    }, poster.description);
});
</script>
chromium/third_party/blink/web_tests/media/video-poster.html
