| <!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; |
| } |
| ::-webkit-scrollbar { |
| width: 0px; |
| height: 0px; |
| } |
| </style> |
| <body> |
| <video controls width=400></video> |
| <video controls width=800></video> |
| <video controls width=1200></video> |
| <video controls width=600 style='padding: 300px'></video> |
| </body> |
| <script> |
| test(_ => { |
| const expectedWidth = [ |
| "400px", |
| "800px", |
| "800px", |
| "500px", |
| ]; |
| |
| var videos = document.querySelectorAll('video'); |
| for (var i=0; i < videos.length; ++i) { |
| videos[i].src = 'content/test.ogv'; |
| } |
| |
| var forceLayout = document.body.offsetHeight; |
| |
| for (var i=0; i < videos.length; ++i) { |
| var controls = mediaControlsButton(videos[i], 'panel'); |
| assert_equals(getComputedStyle(controls).width, expectedWidth[i]); |
| } |
| }); |
| </script> |
| </html> |