box-decoration-break-block-border-padding.html 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  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. .inner {
  18. box-decoration-break: clone;
  19. border: 5px dashed blue;
  20. height: 99px;
  21. width: 40px;
  22. background: lime;
  23. background-clip: content-box;
  24. }
  25. .columns {
  26. -moz-columns: 3;
  27. width: 250px;
  28. height: 50px;
  29. background: grey;
  30. margin-top: 2px;
  31. }
  32. .unbalanced {
  33. -moz-column-fill: auto;
  34. }
  35. .inner.p { height:93px; padding:1px 3px 5px 7px; }
  36. </style>
  37. </head>
  38. <body>
  39. <div class="columns"><div class="inner"></div></div>
  40. <div class="columns unbalanced"><div class="inner"></div></div>
  41. <div class="columns"><div class="p inner"></div></div>
  42. <div class="columns unbalanced"><div class="p inner"></div></div>
  43. </body>
  44. </html>