chromium/third_party/blink/web_tests/media/media-overflow-menu-positioning.html

<!DOCTYPE html>
<title>Overflow menu positioning</title>
<script src='../resources/testharness.js'></script>
<script src='../resources/testharnessreport.js'></script>
<script src="../resources/testdriver.js"></script>
<script src="../resources/testdriver-actions.js"></script>
<script src="../resources/testdriver-vendor.js"></script>
<script src='media-controls.js'></script>

<video controls id=first></video>
<video controls></video>
<video controls id=third></video>
<style> video { width: 200px; } </style>

<script>
const escapeKey = '\uE00C';
Array.from(document.querySelectorAll('video')).forEach(video => {
  enableTestMode(video);
  video.src = 'content/test.ogv';
});
async function videoReady(v) {
  if (v.readyState < /*HAVE_ENOUGH_DATA*/ 2) {
    await new Promise(resolve => v.addEventListener('loadeddata',resolve));
  }
}
promise_test(async t => {
  const firstVideo = document.getElementById('first');
  await videoReady(firstVideo);
  await new Promise(resolve => singleTapOnControl(overflowButton(firstVideo), resolve));
  const menu = overflowMenu(firstVideo);
  assert_not_equals(getComputedStyle(menu).display, 'none');
  // Overflow menu should be over the left-hand video element:
  assert_equals(menu.offsetLeft,4,'Menu should be over the left element');
  // Clean up:
  await test_driver.send_keys(firstVideo, escapeKey);
},'click the left/first element');

promise_test(async t => {
  const lastVideo = document.getElementById('third');
  await videoReady(lastVideo);
  await new Promise(resolve => singleTapOnControl(overflowButton(lastVideo), resolve));
  const menu = overflowMenu(lastVideo);
  assert_not_equals(getComputedStyle(menu).display, 'none');
  // Overflow menu should be over the right-hand video element:
  assert_equals(menu.offsetLeft,412,'Menu should be over the right element');
  // Clean up:
  await test_driver.send_keys(lastVideo, escapeKey);
},'click the third/right element');
</script>