| <!DOCTYPE html> |
| <html> |
| <title>Test that sizing changes are reflected in CSS classes.</title> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../media-controls.js"></script> |
| <video controls width=200 preload=none></video> |
| <script> |
| async_test(t => { |
| const video = document.querySelector('video'); |
| const testCases = [ |
| { width: 500, expect: expectSmall }, |
| { width: 1441, expect: expectLarge }, |
| { width: 800, expect: expectMedium }, |
| { width: 2000, expect: expectLarge }, |
| { width: 0, expect: expectSmall }, |
| { width: 741, expect: expectMedium }, |
| { width: 308, expect: expectSmall }, |
| { width: 150, expect: expectSmall }, |
| ]; |
| |
| expectSmall(); |
| |
| runTestCase(0); |
| |
| function runTestCase(index) { |
| let test = testCases[index]; |
| video.width = test.width; |
| testRunner.layoutAndPaintAsyncThen(t.step_func(() => { |
| test.expect(); |
| let nextIndex = index + 1; |
| if (nextIndex === testCases.length) { |
| t.done(); |
| return; |
| } |
| runTestCase(nextIndex); |
| })); |
| } |
| |
| function expectSmall() { |
| checkControlsHasClass(video, 'sizing-small'); |
| checkControlsDoesNotHaveClasses(video, ['sizing-medium', 'sizing-large']); |
| } |
| |
| function expectMedium() { |
| checkControlsHasClass(video, 'sizing-medium'); |
| checkControlsDoesNotHaveClasses(video, ['sizing-small', 'sizing-large']); |
| } |
| |
| function expectLarge() { |
| checkControlsHasClass(video, 'sizing-large'); |
| checkControlsDoesNotHaveClasses(video, ['sizing-small', 'sizing-medium']); |
| } |
| }); |
| </script> |
| </html> |
