testing/web-platform/tests/css/css-masking/mask-image/mask-clip-7-ref.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8">
   5     <meta content="ahem" name="flags">
   6     <link rel="stylesheet" href="/fonts/ahem.css" />
   7     <style>
   8       div.mask {
   9         background-color: purple;
  10         width: 40px;
  11         height: 20px;
  12         border-radius: 5px;
  13         position: relative;
  14       }
  15       span.mask {
  16         font: 20px/1 Ahem;
  17         line-height: 20px;
  18         color: purple;
  19         border-radius: 5px;
  20         position: relative;
  21       }
  22       .unclipped-child {
  23         position: absolute;
  24         top: -6px;
  25         left: -6px;
  26         width: 52px;
  27         height: 32px;
  28         background: purple;
  29       }
  30     </style>
  31   </head>
  32   <body>
  33     <div class="mask"><div class="unclipped-child"></div></div>
  34     <br>
  35     <span class="mask">XX<span class="unclipped-child"></span></span>
  36   </body>
  37 </html>