third_party/WebKit/LayoutTests/fast/replaced/border-radius-clip-content-edge.html

   1 <!DOCTYPE html>
   2 <style>
   3   body {
   4     width: 600px;
   5   }
   6
   7   div {
   8     display: inline-block;
   9     margin: 20px;
  10   }
  11
  12   object, img, input[type="image"], canvas, embed, iframe {
  13     margin-top: 5px;
  14     border: 10px solid rgba(0, 0, 0, 0.5);
  15     padding: 5px;
  16     background-color: red;
  17     background-clip: content-box;
  18     border-radius: 100px 50px 10px;
  19     display: block;
  20     height: 100px;
  21     width: 100px;
  22   }
  23 </style>
  24
  25 <script>
  26 if (window.testRunner) {
  27     testRunner.dumpAsTextWithPixelResults();
  28     testRunner.setPluginsEnabled(false);
  29 }
  30 </script>
  31
  32 <body>
  33 <!-- Replaced elements with border-radius should clip to the content edge curve. -->
  34
  35 <div>
  36   <object data="resources/square-blue-100x100.png"></object>
  37 </div>
  38
  39 <div>
  40   <canvas id="testCanvas"></canvas>
  41   <script>
  42     var ctx = testCanvas.getContext('2d');
  43     ctx.fillStyle = "rgb(0,0,255)";
  44     ctx.fillRect(0, 0, 1000, 1000);
  45   </script>
  46 </div>
  47
  48 <div>
  49   <input type="image" src="resources/square-blue-100x100.png">
  50 </div>
  51
  52 <div>
  53   <img src="resources/square-blue-100x100.png">
  54 </div>
  55
  56 <div>
  57   <iframe src="resources/square-blue-100x100.png"></iframe>
  58 </div>
  59
  60 <div>
  61   <embed src="resources/square-blue-100x100.png"></embed>
  62 </div>
  63 </body>