third_party/WebKit/LayoutTests/fast/css/background-clip-radius-values.html

   1 <html>
   2 <head>
   3 <title>Testing Background clip values</title>
   4 <style type="text/css">
   5 div {
   6     display:inline-block;
   7     border: 10px solid rgba(128, 64, 64, 0.4);
   8     border-radius: 10px 30px;
   9     background-color:green;
  10     width: 100px;
  11     height: 100px;
  12     padding: 10px;
  13     margin: 10px;
  14 }
  15
  16 .content-box {
  17    background-clip: content-box;
  18 }
  19 .padding-box {
  20    background-clip: padding-box;
  21 }
  22 .border-box {
  23    background-clip: border-box;
  24 }
  25
  26 .tl {
  27     border-top-left-radius: 500px;
  28 }
  29
  30 .tr {
  31     border-top-right-radius: 500px;
  32 }
  33
  34 .bl {
  35     border-bottom-left-radius: 500px;
  36 }
  37
  38 .br {
  39     border-bottom-right-radius: 500px;
  40 }
  41
  42 .bigradii {
  43     border-top-left-radius: 130px 50px;
  44     border-bottom-left-radius: 50px 50px;
  45     border-top-right-radius: 10px 50px;
  46     border-bottom-right-radius: 50px 50px;
  47 }
  48 </style>
  49 <script>
  50 if (window.testRunner)
  51     testRunner.dumpAsTextWithPixelResults();
  52 </script>
  53 </head>
  54 <body>
  55 <div class="content-box"></div>
  56 <div class="padding-box"></div>
  57 <div class="content-box tl br"></div>
  58 <div class="padding-box tl br"></div>
  59 <br>
  60 <div class="content-box tr bl"></div>
  61 <div class="padding-box tr bl"></div>
  62 <div class="content-box tl"></div>
  63 <div class="padding-box br"></div>
  64 <br>
  65 <div class="content-box tr"></div>
  66 <div class="padding-box bl"></div>
  67 <div class="content-box bigradii"></div>
  68 <div class="padding-box bigradii"></div>
  69 </body>
  70 </html>