| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Test that overflow-x: hidden with a small viewport doesn't clip the controls when in a scrollable iframe</title> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../media-file.js"></script> |
| <script src="../media-controls.js"></script> |
| </head> |
| <style> |
| body { |
| overflow-x: hidden; |
| padding: 0; |
| margin: 0; |
| } |
| |
| .frame { |
| width: 800px; |
| position: absolute; |
| right: 0; |
| } |
| </style> |
| <body> |
| <iframe id="scrollableFrame" class="frame" frameBorder="0"></iframe> |
| <iframe id="noScrollFrame" class="frame" frameBorder="0" scrolling="no"></iframe> |
| </body> |
| <script> |
| test(_ => { |
| const expectedScrollableWidth = [ |
| "400px", |
| "800px", |
| "1200px", |
| ]; |
| |
| const expectedNoScrollWidth = [ |
| "400px", |
| "800px", |
| "800px", |
| ]; |
| |
| let scrollableDoc = document.getElementById('scrollableFrame').contentWindow.document; |
| let noScrollDoc = document.getElementById('noScrollFrame').contentWindow.document; |
| |
| addVideos(scrollableDoc); |
| addVideos(noScrollDoc); |
| |
| checkPanelWidths(scrollableDoc, expectedScrollableWidth); |
| checkPanelWidths(noScrollDoc, expectedNoScrollWidth); |
| |
| function addVideos(iframedoc) { |
| iframedoc.open(); |
| iframedoc.write('<video controls width=400></video>'); |
| iframedoc.write('<video controls width=800></video>'); |
| iframedoc.write('<video controls width=1200></video>'); |
| iframedoc.close(); |
| |
| let videos = iframedoc.querySelectorAll('video'); |
| for (let i=0; i < videos.length; ++i) { |
| videos[i].src = findMediaFile('video', 'content/test'); |
| } |
| } |
| |
| function checkPanelWidths(iframedoc, expectedWidths) { |
| let videos = iframedoc.querySelectorAll('video'); |
| for (let i=0; i < videos.length; ++i) { |
| let controls = mediaControlsButton(videos[i], 'panel'); |
| assert_equals(getComputedStyle(controls).width, expectedWidths[i]); |
| } |
| } |
| }); |
| </script> |
| </html> |
