box-decoration-break-bug-1249913-ref.html (1891B)
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>Reference: '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 <style type="text/css"> 11 body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } 12 13 p { height: 27px; width: 100px; margin:0; background:lime; } 14 .border { border:3px solid black; } 15 .outline { outline:3px solid brown; } 16 .shadow { box-shadow: 2px 2px 0 0 blue; } 17 18 .columns { 19 -ms-columns: 2; 20 -webkit-columns: 2; 21 columns: 2; 22 -ms-column-fill: auto; 23 -webkit-column-fill: auto; 24 column-fill: auto; 25 width:500px; 26 height:30px; 27 border:solid silver; 28 margin: 2px 0; 29 } 30 31 .columns div { height: 10px; } 32 33 x { height: 27px; width: 100px; margin:0; background:lime; display:block; } 34 y { height: 23px; width: 100px; margin:0; background:lime; display:block; } 35 36 </style> 37 </head> 38 <body> 39 40 <div class="columns"><div class="border"><p></p><y></y></div></div> 41 <div class="columns"><div class="outline"><p style="height:30px"></p><y style="height:20px"></y></div></div> 42 <div class="columns"><div class="shadow"><p style="height:30px"></p><y style="height:20px"></y></div></div> 43 <div class="columns"><div class="border outline"><p></p><y></y></div></div> 44 <div class="columns"><div class="border shadow"><p></p><y></y></div></div> 45 46 <div class="columns"><div class="border"><x></x><y></y></div></div> 47 <div class="columns"><div class="outline"><x></x><y></y></div></div> 48 <div class="columns"><div class="shadow"><x></x><y></y></div></div> 49 <div class="columns"><div class="border outline"><x></x><y></y></div></div> 50 <div class="columns"><div class="border shadow"><x></x><y></y></div></div> 51 52 </body> 53 </html>