third_party/WebKit/LayoutTests/fast/borders/border-radius-mask-video-shadow.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         box-shadow: 0 0 8px 8px red;
  11         margin: 10px;
  12         transform: translateZ(0);
  13       }
  14     </style>
  15     <script>
  16       if (window.testRunner) {
  17         testRunner.waitUntilDone();
  18       }
  19       function canPlay() {
  20         setTimeout(function() {
  21           if (window.testRunner)
  22             testRunner.notifyDone();
  23           }, 0);
  24       }
  25     </script>
  26   </head>
  27     <body>
  28       <h3>It passes if:</h3>
  29       <ul>
  30         <li>the video content has rounded corners (top left and bottom right)</li>
  31         <li>the remaining space is gray and has same rounded corners as video content</li>
  32         <li>has box shadow around the video element</li>
  33       </ul>
  34       <video src='../../media/resources/frame_size_change.webm' oncanplaythrough='canPlay();'></video>
  35    </body>
  36 </html>