box-decoration-break-block-border-padding-ref.html (1527B)
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 <meta charset="utf-8"> 11 <style type="text/css"> 12 html,body { 13 color:black; background-color:white; font-size:16px; padding:10px; margin:0; 14 } 15 16 .inner { 17 border: 5px dashed blue; 18 height: 33px; 19 width: 40px; 20 background: lime; 21 background-clip: content-box; 22 margin-bottom: 12px; 23 } 24 25 .columns { 26 columns: 3; 27 width: 250px; 28 height: 50px; 29 background: grey; 30 margin-top: 2px; 31 } 32 33 .unbalanced { 34 column-fill: auto; 35 } 36 37 .inner.p { height:31px; padding:1px 3px 5px 7px; } 38 .unbalanced .inner { height:40px; margin-bottom: 0px;} 39 .unbalanced .inner.p { height:34px; } 40 </style> 41 </head> 42 <body> 43 44 <div class="columns"><div class="inner"></div><div class="inner"></div><div class="inner"></div></div> 45 <div class="columns unbalanced"><div class="inner"></div><div class="inner"></div><div class="inner" style="height:19px"></div></div> 46 <div class="columns"><div class="p inner"></div><div class="p inner"></div><div class="p inner"></div></div> 47 <div class="columns unbalanced"><div class="p inner"></div><div class="p inner"></div><div class="p inner" style="height:25px"></div></div> 48 49 </body> 50 </html>