testing/web-platform/tests/css/css-backgrounds/background-clip-padding-box-with-border-radius.html

   1 <!DOCTYPE html>
   2 <html>
   3 <!-- Submitted from TestTWF Paris -->
   4 <head>
   5
   6 <title>CSS Backgrounds and Borders Test: background-clip: padding-box with border-radius</title>
   7 <link rel="author" title="Lea Verou" href="http://lea.verou.me" />
   8 <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" />
   9 <link rel="help" href="http://www.w3.org/TR/css3-background/#corner-shaping" />
  10 <meta name="flags" content="" />
  11 <meta name="assert" content="Backgrounds clipped to the padding box should follow the padding box curve, which should be equal to the outer border radius minus the corresponding border thickness." />
  12 <style>
  13 div {
  14         position: absolute;
  15 }
  16
  17 .container {
  18         position: relative;
  19         width: 140px;
  20         height: 140px;
  21         margin: 10px;
  22 }
  23
  24 .ref {
  25         top: 10px;
  26         left: 10px;
  27         height: 140px;
  28         width: 140px;
  29         border-radius: 30px;
  30 }
  31
  32 .test {
  33         width: 100px;
  34         height: 100px;
  35         padding: 20px;
  36         border: 10px solid transparent;
  37         border-radius: 40px;
  38         background-clip: padding-box;
  39 }
  40
  41 .behind {
  42         background-color: red;
  43 }
  44
  45 .top {
  46         background-color: green;
  47 }
  48
  49 .ref.top {
  50         width: 144px;
  51         height: 144px;
  52         left: 8px;
  53         top: 8px;
  54 }
  55
  56 .test.top {
  57         width: 104px;
  58         height: 104px;
  59         left: -2px;
  60         top: -2px;
  61 }
  62 </style>
  63
  64 </head>
  65 <body>
  66
  67 <p>Test passes if there are two filled green rounded squares and <strong>no red</strong>.</p>
  68 <div class="container">
  69   <div class="test behind"></div>
  70   <div class="ref top"></div>
  71 </div>
  72
  73 <div class="container">
  74   <div class="ref behind"></div>
  75   <div class="test top"></div>
  76 </div>
  77
  78 </body>
  79 </html>