| OLD | NEW |
|---|
| 1 <html> | 1 <!DOCTYPE html> |
| 2 <head> | 2 <title>Test video poster with different dimensions.</title> |
| 3 <title><video> element with poster size test</title> | 3 <script src="../resources/testharness.js"></script> |
| 4 <!-- TODO(foolip): Convert test to testharness.js. crbug.com/588956 | 4 <script src="../resources/testharnessreport.js"></script> |
| 5 (Please avoid writing new tests using video-test.js) --> | 5 <body> |
| 6 <script src=video-test.js></script> | 6 <script> |
| 7 <script> | 7 var posterInfo = [ |
| 8 var posterInfo = | 8 { |
| 9 { | 9 description: "Testing poster null, with 'width' and 'height' attributes.
", |
| 10 current:0, | 10 url: null, reflectedUrl: "", expectedWidth: 320, expectedHeight: 240, se
tSize: true |
| 11 posters: | 11 }, |
| 12 [ | 12 { |
| 13 { | 13 description: "Testing 25x25 poster 'content/greenbox.png', size should e
qual image size.", |
| 14 description:", with 'width' and 'height' attributes", | 14 url: "content/greenbox.png", expectedWidth: 25, expectedHeight: 25 |
| 15 url:null, | 15 }, |
| 16 reflectedUrl:"", | 16 { |
| 17 width:320, | 17 description: "Testing poster '', with NO 'width' or 'height' attributes
so size should be <video> default.", |
| 18 height:240 | 18 url: "", reflectedUrl: "video-poster.html", expectedWidth: 300, expected
Height: 150 |
| 19 }, | 19 }, |
| 20 { | 20 { |
| 21 description:", size should equal image size", | 21 description: "Testing 76x103 poster 'content/abe.png', size should equal
image size.", |
| 22 url:"content/greenbox.png", | 22 url: "content/abe.png", expectedWidth: 76, expectedHeight: 103 |
| 23 width:25, | 23 }, |
| 24 height:25 | 24 { |
| 25 }, | 25 description: "Testing 300x150 poster 'content/bogus.png', invalid url so
size should revert to <video> default.", |
| 26 { | 26 url: "content/bogus.png", expectedWidth: 300, expectedHeight: 150 |
| 27 description:", with NO 'width' or 'height' attributes so
size should be <video> default", | 27 }, |
| 28 url:"", | 28 { |
| 29 reflectedUrl:"video-poster.html", | 29 description: "Testing poster '', with only a 'width' attribute so size s
hould have the same aspect ratio as <video> default.", |
| 30 width:300, | 30 url: "", reflectedUrl: "video-poster.html", expectedWidth: 600, expected
Height: 300, widthAttr: 600 |
| 31 height:150 | 31 }, |
| 32 }, | 32 { |
| 33 { | 33 description: "Testing 152x206 poster 'content/abe.png', with only a 'wid
th' attribute so size should equal a scaled up image size with the same aspect r
atio as the original image.", |
| 34 description:", size should equal image size", | 34 url: "content/abe.png", expectedWidth: 152, expectedHeight: 206, widthAt
tr: 152 |
| 35 url:"content/abe.png", | 35 }, |
| 36 width:76, | 36 { |
| 37 height:103 | 37 description: "Testing 600x300 poster 'content/bogus.png', invalid url w/
width attribute so size should have the same aspect ratio as <video> default.", |
| 38 }, | 38 url: "content/bogus.png", expectedWidth: 600, expectedHeight: 300, width
Attr: 600 |
| 39 { | 39 } |
| 40 description:", invalid url so size should revert to <
video> default", | 40 ]; |
| 41 url:"content/bogus.png", | |
| 42 width:300, | |
| 43 height:150 | |
| 44 }, | |
| 45 { | |
| 46 description:", with only a 'width' attribute so size sho
uld have the same aspect ratio as <video> default", | |
| 47 url:"", | |
| 48 reflectedUrl:"video-poster.html", | |
| 49 width:600, | |
| 50 height:300, | |
| 51 widthAttr: 600 | |
| 52 }, | |
| 53 { | |
| 54 description:", with only a 'width' attribute so size sho
uld equal a scaled up image size with the same aspect ratio as the original imag
e", | |
| 55 url:"content/abe.png", | |
| 56 width:152, | |
| 57 height:206, | |
| 58 widthAttr: 152 | |
| 59 }, | |
| 60 { | |
| 61 description:", invalid url w/ width attribute so size sh
ould have the same aspect ratio as <video> default", | |
| 62 url:"content/bogus.png", | |
| 63 width:600, | |
| 64 height:300, | |
| 65 widthAttr: 600 | |
| 66 }, | |
| 67 ] | |
| 68 }; | |
| 69 | 41 |
| 70 // Wait for |video| to have the |expectedWidth| and |expectedHeight| | 42 posterInfo.forEach(function(poster) { |
| 71 // and invoke |callback()|. | 43 async_test(function(t) { |
| 72 function listenForWidthAndHeight(expectedWidth, expectedHeight, call
back) { | 44 var video = document.createElement("video"); |
| 73 if (video.clientWidth == expectedWidth && video.clientHeight == ex
pectedHeight) { | 45 document.body.appendChild(video); |
| 74 callback(); | 46 if (poster.setSize) { |
| 75 } else { | 47 video.setAttribute("width", "320"); |
| 76 // This uses a 20ms sleep loop to accomplish the wait, since the | 48 video.setAttribute("height", "240"); |
| 77 // standard specifies no events that fire on poster load or erro
r. | 49 } else { |
| 78 window.setTimeout(listenForWidthAndHeight, 20, expectedWidth, ex
pectedHeight, callback); | 50 video.poster = poster.url; |
| 79 } | 51 } |
| 80 } | 52 if (poster.widthAttr) |
| 53 video.width = poster.widthAttr; |
| 54 if (poster.url) { |
| 55 var image = document.createElement("img"); |
| 56 image.src = poster.url; |
| 57 document.body.appendChild(image); |
| 58 if (image.src.indexOf("bogus") > 0) |
| 59 image.onerror = t.step_func_done(testPoster); |
| 60 else |
| 61 image.onload = t.step_func_done(testPoster); |
| 62 } else { |
| 63 setTimeout(t.step_func_done(testPoster), 0); |
| 64 } |
| 81 | 65 |
| 82 function testPoster() | 66 function testPoster() { |
| 83 { | 67 assert_equals(video.getAttribute("poster"), poster.url); |
| 84 var temp = document.body.offsetWidth; | 68 var url = video.poster.substr(video.poster.lastIndexOf("/media/") +
7); |
| 85 var poster = posterInfo.posters[posterInfo.current]; | 69 assert_equals(url, (poster.hasOwnProperty("reflectedUrl") ? poster.r
eflectedUrl : poster.url)); |
| 86 | 70 assert_equals(video.clientWidth, poster.expectedWidth); |
| 87 var size = poster.url ? (" " + poster.width + "x" + poster.heigh
t) : ""; | 71 assert_equals(video.clientHeight, poster.expectedHeight); |
| 88 var urlStr = typeof(poster.url) == "string" ? ("'" + poster.url
+ "'") : 'null'; | 72 } |
| 89 var desc = "<b>Testing" + size + " poster <em>"+ urlStr + "</em>
" + poster.description + ".</b>"; | 73 }, poster.description); |
| 90 consoleWrite(desc); | 74 }); |
| 91 | 75 </script> |
| 92 testExpected("video.getAttribute('poster')", poster.url); | |
| 93 testExpected("relativeURL(video.poster)", poster.hasOwnProperty(
"reflectedUrl") ? poster.reflectedUrl : poster.url); | |
| 94 testExpected("video.clientWidth", poster.width); | |
| 95 testExpected("video.clientHeight", poster.height); | |
| 96 | |
| 97 // Remove width/height attributes if present | |
| 98 if (video.width) | |
| 99 video.removeAttribute('width'); | |
| 100 if (video.height) | |
| 101 video.removeAttribute('height'); | |
| 102 | |
| 103 posterInfo.current++; | |
| 104 consoleWrite(""); | |
| 105 if (posterInfo.current >= posterInfo.posters.length) { | |
| 106 endTest(); | |
| 107 return; | |
| 108 } | |
| 109 var currentPoster = posterInfo.posters[posterInfo.current]; | |
| 110 | |
| 111 if (currentPoster.widthAttr) | |
| 112 video.width = currentPoster.widthAttr; | |
| 113 | |
| 114 var url = currentPoster.url; | |
| 115 var desc = "<b>Setting poster to <em>\""+ url + "\"</em></b>"; | |
| 116 consoleWrite(desc); | |
| 117 video.poster = url; | |
| 118 listenForWidthAndHeight(currentPoster.width, currentPoster.heigh
t, testPoster); | |
| 119 } | |
| 120 | |
| 121 function unexpectedEvent(evt) | |
| 122 { | |
| 123 consoleWrite(""); | |
| 124 failTest("Unexpected '" + evt.type + "' event fired!"); | |
| 125 } | |
| 126 | |
| 127 function setup() | |
| 128 { | |
| 129 document.addEventListener("error", unexpectedEvent); | |
| 130 document.addEventListener("load", unexpectedEvent); | |
| 131 findMediaElement(); | |
| 132 testPoster(); | |
| 133 } | |
| 134 </script> | |
| 135 </head> | |
| 136 | |
| 137 <body> | |
| 138 <video controls width=320 height=240></video> | |
| 139 <p>Test <video> element with and without a poster.</p> | |
| 140 <script>setup();</script> | |
| 141 </body> | |
| 142 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2130383003:
Convert video-poster* tests to testharness.js (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master