picture-in-picture-interstitial-sizing.html

<!DOCTYPE html>
<title>Check sizing classes are assigned to PiP intersitial</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>
<script src="utils.js"></script>
<body>
<video controls></video>
<script>
const testCases = [
  { width: "740px", expected: "sizing-small" },
  { width: "741px", expected: "sizing-medium" },
  { width: "1440px", expected: "sizing-medium" },
  { width: "1441px", expected: "sizing-large" }
];

const video = document.getElementsByTagName('video')[0];
enableTestMode(video);

function runSizingTest(t, num) {
  if (num >= testCases.length)
    t.done();

  const testCase = testCases[num];
  video.style.width = testCase.width;

  setTimeout(t.step_func(() => {
    const message = pictureInPictureInterstitialMessage(video);
    assert_equals(message.className, testCase.expected);

    num++;
    t.step(runSizingTest.bind(null, t, num));
  }), 10);
}

async_test((t) => {
  video.addEventListener('loadedmetadata', t.step_func(() => {
    video.addEventListener('enterpictureinpicture', t.step_func(() => {
      t.step(runSizingTest.bind(null, t, 0));
    }));

    clickPictureInPictureButton(video);
  }), { once: true });

  video.src = '../content/test.ogv';
});
</script>
chromium/third_party/blink/web_tests/media/picture-in-picture/picture-in-picture-interstitial-sizing.html
