paint-controls-webkit-appearance-none-custom-bg.html

<!DOCTYPE html>
<html>
<title>Test that player controls are painted correctly with -webkit-appearance: none; and a custom background.</title>
<script src="../media-controls.js"></script>
<style>
video::-webkit-media-controls-play-button {
  -webkit-appearance: none;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGEAAAArCAIAAADnp3H+AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AMREiYUszPbTwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAABOSURBVGje7dAxAQAACAOgaXKj28DbAyJQmXBrBY4cOXLkyJEjHDly5MiRI0eOcOTIkSNHjhzhyJEjR44cOXKEI0eOHDly5AhHjhw5emMB9PAA1iv0hcsAAAAASUVORK5CYII=");
}
</style>
<video controls width=400></video>
<script>
  var video = document.querySelector('video');
  enableTestMode(video);

  video.requestVideoFrameCallback(() => {
    if (window.testRunner)
      testRunner.notifyDone();
  });

  video.src = "../content/counting.ogv";

  if (window.testRunner)
    testRunner.waitUntilDone();
</script>
</html>

chromium/third_party/blink/web_tests/media/controls/paint-controls-webkit-appearance-none-custom-bg.html