| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <script src=../media-file.js></script> | 2 <title>Test that the cue root is not constrained by the controls/overlay.</title
> |
| 3 <!-- TODO(philipj): Convert test to testharness.js. crbug.com/588956 | 3 <script src="../media-file.js"></script> |
| 4 (Please avoid writing new tests using video-test.js) --> | 4 <script src="../media-controls.js"></script> |
| 5 <script src=../video-test.js></script> | 5 <script src="../../resources/testharness.js"></script> |
| 6 <script src=../media-controls.js></script> | 6 <script src="../../resources/testharnessreport.js"></script> |
| 7 <style> | 7 <style> |
| 8 /* Enforce a max width on the controls enclosure, so | 8 /* Enforce a max width on the controls enclosure, so |
| 9 * that it doesn't fill the entire player width. | 9 * that it doesn't fill the entire player width. |
| 10 */ | 10 */ |
| 11 video::-webkit-media-controls-enclosure { | 11 video::-webkit-media-controls-enclosure { |
| 12 max-width: 800px; | 12 max-width: 800px; |
| 13 } | 13 } |
| 14 </style> | |
| 15 <script> | |
| 16 var controlsContainer; | |
| 17 var cueRoot; | |
| 18 | 14 |
| 19 window.onload = function() { | |
| 20 consoleWrite("Test that the cue root is not constrained by the controls/over
lay."); | |
| 21 findMediaElement(); | |
| 22 video.src = findMediaFile('video', '../content/test'); | |
| 23 waitForEvent('seeked', function() { | |
| 24 // The width of the controls depends on UA style, so verify that our ass
umption holds. | |
| 25 controlsContainer = mediaControlsButton(video, "panel"); | |
| 26 testExpected("parseFloat(getComputedStyle(controlsContainer).width)", "8
00", "<="); | |
| 27 | |
| 28 cueRoot = textTrackDisplayElement(video); | |
| 29 testExpected("parseFloat(getComputedStyle(cueRoot).width)", "800", ">"); | |
| 30 endTest(); | |
| 31 }); | |
| 32 waitForEventOnce('canplaythrough', function() { | |
| 33 video.currentTime = 2; | |
| 34 }); | |
| 35 }; | |
| 36 </script> | |
| 37 <style> | |
| 38 video { | 15 video { |
| 39 width: 2000px; | 16 width: 2000px; |
| 40 height: 750px; | 17 height: 750px; |
| 41 } | 18 } |
| 42 </style> | 19 </style> |
| 43 <video controls> | 20 <video> |
| 44 <track src="captions-webvtt/long-word.vtt" default> | 21 <track src="captions-webvtt/long-word.vtt" default> |
| 45 </video> | 22 </video> |
| 23 <script> |
| 24 async_test(function(t) { |
| 25 var video = document.querySelector("video"); |
| 26 video.src = findMediaFile("video", "../content/test"); |
| 27 |
| 28 video.onseeked = t.step_func_done(function() { |
| 29 // The width of the controls depends on UA style, so verify that our ass
umption holds. |
| 30 var controlsContainer = mediaControlsButton(video, "panel"); |
| 31 assert_true(parseFloat(getComputedStyle(controlsContainer).width) <= 800
); |
| 32 |
| 33 var cueRoot = textTrackDisplayElement(video); |
| 34 assert_true(parseFloat(getComputedStyle(cueRoot).width) > 800); |
| 35 }); |
| 36 |
| 37 video.currentTime = 2; |
| 38 }); |
| 39 </script> |
| OLD | NEW |