box-decoration-break-bug-1249913.html (1810B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>'box-decoration-break' with child overflow</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1249913"> 10 <link rel="help" href="https://drafts.csswg.org/css-break/#break-decoration"> 11 <link rel="match" href="box-decoration-break-bug-1249913-ref.html"> 12 <style type="text/css"> 13 body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } 14 15 p { height: 50px; width: 100px; margin:0; background:lime; } 16 .clone { height: 10px; box-decoration-break:clone; } 17 .border { border:3px solid black; } 18 .outline { outline:3px solid brown; } 19 .shadow { box-shadow: 2px 2px 0 0 blue; } 20 21 .columns { 22 -ms-columns: 2; 23 -webkit-columns: 2; 24 columns: 2; 25 -ms-column-fill: auto; 26 -webkit-column-fill: auto; 27 column-fill: auto; 28 width:500px; 29 height:30px; 30 border:solid silver; 31 margin: 2px 0; 32 } 33 34 .columns div { height: 10px; } 35 36 </style> 37 </head> 38 <body> 39 40 <div class="columns"><div class="clone border"><p></p></div></div> 41 <div class="columns"><div class="clone outline"><p></p></div></div> 42 <div class="columns"><div class="clone shadow"><p></p></div></div> 43 <div class="columns"><div class="clone border outline"><p></p></div></div> 44 <div class="columns"><div class="clone border shadow"><p></p></div></div> 45 46 <div class="columns"><div class="border"><p></p></div></div> 47 <div class="columns"><div class="outline"><p></p></div></div> 48 <div class="columns"><div class="shadow"><p></p></div></div> 49 <div class="columns"><div class="border outline"><p></p></div></div> 50 <div class="columns"><div class="border shadow"><p></p></div></div> 51 52 </body> 53 </html>