layout/reftests/css-break/box-decoration-break-block-border-padding.html

   1 <!DOCTYPE HTML>
   2 <!--
   3      Any copyright is dedicated to the Public Domain.
   4      http://creativecommons.org/publicdomain/zero/1.0/
   5 -->
   6 <html>
   7 <head>
   8   <title>Testcase for box-decoration-break:clone, block border+padding</title>
   9   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=988653">
  10   <link rel="help" href="http://dev.w3.org/csswg/css-break/#break-decoration">
  11   <link rel="match" href="box-decoration-break-block-border-padding-ref.html">
  12   <meta charset="utf-8">
  13   <style type="text/css">
  14     html,body {
  15       color:black; background-color:white; font-size:16px; padding:10px; margin:0;
  16     }
  17
  18     .inner {
  19       box-decoration-break: clone;
  20       border: 5px dashed blue;
  21       height: 99px;
  22       width: 40px;
  23       background: lime;
  24       background-clip: content-box;
  25     }
  26
  27     .columns {
  28       columns: 3;
  29       width: 250px;
  30       height: 50px;
  31       background: grey;
  32       margin-top: 2px;
  33     }
  34
  35     .unbalanced {
  36       column-fill: auto;
  37     }
  38
  39     .inner.p { height:93px; padding:1px 3px 5px 7px; }
  40   </style>
  41 </head>
  42 <body>
  43
  44 <div class="columns"><div class="inner"></div></div>
  45 <div class="columns unbalanced"><div class="inner"></div></div>
  46 <div class="columns"><div class="p inner"></div></div>
  47 <div class="columns unbalanced"><div class="p inner"></div></div>
  48
  49 </body>
  50 </html>