resizing-changes-css-class.html | Explore in Territory

<!DOCTYPE html>
<html>
<title>Test that sizing changes are reflected in CSS classes.</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<script src="../media-controls.js"></script>
<video controls width=200 preload=none></video>
<script>
async_test(t => {
  const video = document.querySelector('video');
  const testCases = [
    { width: 500, expect: expectSmall },
    { width: 1441, expect: expectLarge },
    { width: 800, expect: expectSmall },
    { width: 2000, expect: expectLarge },
    { width: 0, expect: expectSmall },
    { width: 741, expect: expectSmall },
    { width: 308, expect: expectSmall },
    { width: 150, expect: expectSmall },
  ];

  expectSmall();

  runTestCase(0);

  function runTestCase(index) {
    let test = testCases[index];
    video.width = test.width;
    runAfterLayoutAndPaint(t.step_func(() => {
      test.expect();
      let nextIndex = index + 1;
      if (nextIndex === testCases.length) {
        t.done();
        return;
      }
      runTestCase(nextIndex);
    }));
  }

  function expectSmall() {
    checkControlsHasClass(video, 'sizing-small');
    checkControlsDoesNotHaveClass(video, 'sizing-large');
  }

  function expectLarge() {
    checkControlsHasClass(video, 'sizing-large');
    checkControlsDoesNotHaveClass(video, 'sizing-small');
  }

});
</script>
</html>
chromium/third_party/blink/web_tests/media/controls/resizing-changes-css-class.html
