video-in-scrollable-iframe-has-full-panel.html

<!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-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('<style>body { margin: 0 }</style>');
    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 = 'content/test.ogv';
    }
  }

  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>
chromium/third_party/blink/web_tests/media/controls/video-in-scrollable-iframe-has-full-panel.html
