| <!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"); |
| 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; |
| 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_done(testPoster); |
| else |
| image.onload = t.step_func_done(testPoster); |
| } else { |
| setTimeout(t.step_func_done(testPoster), 0); |
| } |
| |
| 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> |
