third_party/WebKit/LayoutTests/css3/masking/clip-path-inset-corners.html

   1 <!DOCTYPE html>
   2 <style>
   3 .container {
   4     width: 100px;
   5     height: 100px;
   6     background-color: red;
   7     display: inline-block;
   8 }
   9
  10 .clip {
  11     width: 100px;
  12     height: 100px;
  13     background-color: green;
  14 }
  15
  16 .test-top-left {
  17     -webkit-clip-path: inset(0 round 50px 0 0 0);
  18 }
  19
  20 .check-top-left {
  21     border-radius: 50px 0 0 0;
  22 }
  23
  24 .test-top-right {
  25     -webkit-clip-path: inset(0 round 0 50px 0 0);
  26 }
  27
  28 .check-top-right {
  29     border-radius: 0 50px 0 0;
  30 }
  31
  32 .test-bottom-right {
  33     -webkit-clip-path: inset(0 round 0 0 50px 0);
  34 }
  35
  36 .check-bottom-right {
  37     border-radius: 0 0 50px 0;
  38 }
  39
  40 .test-bottom-left {
  41     -webkit-clip-path: inset(0 round 0 0 0 50px);
  42 }
  43
  44 .check-bottom-left {
  45     border-radius: 0 0 0 50px;
  46 }
  47 </style>
  48 <body>
  49     <p>You should see 4 green squares each with one rounded corner. You should not see any red.</p>
  50     <div class="container check-top-left"><div class="clip test-top-left"></div></div>
  51     <div class="container check-top-right"><div class="clip test-top-right"></div></div>
  52     <br/>
  53     <div class="container check-bottom-left"><div class="clip test-bottom-left"></div></div>
  54     <div class="container check-bottom-right"><div class="clip test-bottom-right"></div></div>
  55 </body>