src/third_party/WebKit/LayoutTests/fast/borders/border-radius-mask-video-ratio.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <style>
   5       video {
   6         background-color: gray;
   7         width: 500px;
   8         height: 225px;
   9         border-radius: 200px 0px 100px 0px;
  10         transform: translateZ(0);
  11       }
  12     </style>
  13     <script>
  14       if (window.testRunner) {
  15         testRunner.waitUntilDone();
  16       }
  17       function canPlay() {
  18         setTimeout(function() {
  19           if (window.testRunner)
  20             testRunner.notifyDone();
  21           }, 0);
  22       }
  23     </script>
  24   </head>
  25     <body>
  26       <h3>It passes if:</h3>
  27       <ul>
  28         <li>the video content has rounded corners (top left and bottom right)</li>
  29         <li>the remaining space is gray and has same rounded corners as video content</li>
  30       </ul>
  31       <video src='../../media/resources/frame_size_change.webm' oncanplaythrough='canPlay();'></video>
  32    </body>
  33 </html>