media-controls-overflow-visible.html

<!DOCTYPE html>
<html>
<script>
  internals.settings.setViewportEnabled(true);
  internals.settings.setViewportMetaEnabled(true);
</script>
<head>
<title>Test that no overflow with a small viewport clips the controls</title>
<meta name='viewport' content='width=300'>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script src="media-controls.js"></script>
</head>
<body>
  <video controls width=400></video>
  <video controls width=800></video>
  <video controls width=1200></video>
  <video controls width=600 style='padding: 100px'></video>
</body>
<script>
test(_ => {
  const expectedWidth = [
    "400px",
    "800px",
    "1200px",
    "600px",
  ];

  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>
chromium/third_party/blink/web_tests/media/media-controls-overflow-visible.html
