| <!DOCTYPE html> |
| <html> |
| <script> |
| internals.settings.setViewportEnabled(true); |
| internals.settings.setViewportMetaEnabled(true); |
| </script> |
| <head> |
| <title>Test that overflow-x: hidden with a large viewport doesn't clip the controls</title> |
| <meta name='viewport' content='width=800'> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../media-controls.js"></script> |
| </head> |
| <style> |
| body { |
| overflow-x: hidden; |
| } |
| </style> |
| <body> |
| <video controls width=400 style='padding: 900px'></video> |
| <video controls width=800 style='padding: 900px'></video> |
| <video controls width=1200 style='padding: 900px'></video> |
| <video controls width=600 style='padding: 900px'></video> |
| </body> |
| <script> |
| test(_ => { |
| var videos = document.querySelectorAll('video'); |
| for (var video, i = 0; video = videos[i]; ++i) { |
| video.src = '../content/test.ogv'; |
| } |
| |
| var forceLayout = document.body.offsetHeight; |
| |
| assert_equals(getComputedStyle(mediaControlsButton(videos[0], 'panel')).width, '400px'); |
| assert_equals(getComputedStyle(mediaControlsButton(videos[1], 'panel')).width, '800px'); |
| assert_equals(getComputedStyle(mediaControlsButton(videos[2], 'panel')).width, '1200px'); |
| assert_equals(getComputedStyle(mediaControlsButton(videos[3], 'panel')).width, '600px'); |
| }); |
| </script> |
| </html> |
