| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Test that overflow-x: hidden with a large viewport doesn't clip the controls when rotated</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 style="transform:rotate(180deg)"></video> |
| <video controls width=1200></video> |
| <video controls width=1200 style="transform:rotate(90deg)"></video> |
| <video controls width=1200 style="transform:rotate(30deg)"></video> |
| </body> |
| <script> |
| test(_ => { |
| const expectedWidth = [ |
| "400px", // Smaller than viewport so fully visible. |
| "800px", // Larger than viewport and horizontal so width=viewport_width. |
| "1200px", // Larger than viewport but vertical so fully visible anyway :). |
| "1004.14px", // Larger than viewport but angled so we'll see more than |
| // viewport but less than full. |
| ]; |
| |
| 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> |
