controls-styling.html | Explore in Territory

<html>
<head>
    <script src="media-file.js"></script>
    <script src="video-paint-test.js"></script>
    <script src="media-controls.js"></script>
    <style>
    .override {
        letter-spacing: 30px;
        word-spacing: 30px;
        line-height: 100px;
        text-transform: capitalize;
        text-indent: 10px;
        text-shadow: red 1px 1px 1px;
        text-decoration: underline;
        color: blue;
    }
    </style>
</head>
<body onload="setVideoSrcAndWaitForFirstFrame('content/test.ogv')">
<p>The look of the controls should not change.</p>
<div class="override">
    <video controls></video>
</div>
<video controls></video>
</body>
<script>
  const videos = document.getElementsByTagName('video');
  for (var i = 0; i < videos.length; ++i) {
    enableTestMode(videos[i]);
  }
</script>
</html>

chromium/third_party/blink/web_tests/media/controls-styling.html