third_party/WebKit/LayoutTests/css3/masking/clip-path-restore.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4 <style>
   5 body {
   6         margin: 0;
   7 }
   8 .circle-clip-path {
   9     width: 200px;
  10     height: 200px;
  11     background-color: green;
  12     -webkit-clip-path: circle(100px at 100px 100px);
  13 }
  14 .red-marker {
  15         /* We position a red dot behind, so that it is obvious when the test is failing. */
  16         position: absolute;
  17         top: 250px;
  18         left: 50px;
  19         width: 100px;
  20         height: 100px;
  21         background-color: red;
  22         border-radius: 50px;
  23 }
  24 </style>
  25 </head>
  26 <body>
  27 <!-- Testing that the clip-path of the first element doesn't clip the second element. You should see two green circles and no red. -->
  28 <div class="red-marker"></div>
  29 <div class="circle-clip-path"></div>
  30 <div class="circle-clip-path"></div>
  31 </body>
  32 </html>