grid-fragmentation-015-ref.html (3986B)
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: Fragmentation edge cases</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> 10 <style type="text/css"> 11 html,body { 12 color:black; background-color:white; font-size:16px; padding:0; margin:0; 13 } 14 body { overflow:hidden; } 15 16 .columns { 17 position:relative; 18 -ms-columns: 5; 19 -webkit-columns: 5; 20 columns: 5; 21 -ms-column-fill: auto; 22 -webkit-column-fill: auto; 23 column-fill: auto; 24 border: 2px solid salmon; 25 margin-bottom: 5px; 26 } 27 28 .grid { 29 display: grid; 30 height: 90px; 31 grid-template-columns: 30px 30px; 32 grid-auto-rows: 30px; 33 grid-gap: 12px; 34 border:5px solid; 35 } 36 span { background:lime; border:1px solid black; } 37 x { display:block; height:20px; } 38 .break-before { page-break-before:always; break-before:always; } 39 .break-after { page-break-after:always; break-after:always; } 40 41 </style> 42 </head> 43 <body> 44 45 <!-- grid wrapped in inline --> 46 <div class="columns" style="height: 40px"> 47 <div style="padding-top:2px; background:grey"> 48 <div class="grid"> 49 <span style="grid-row:span 2"><x></x></span> 50 <span><x></x></span> 51 <span><x></x></span> 52 </div></div></div> 53 54 <!-- grid wrapped in inline with orthogonal writing-mode --> 55 <div class="columns" style="width: 40px; height:40px;"> 56 <div style="padding-top:2px; background:grey"> 57 <div class="grid" style="overflow:hidden; writing-mode:vertical-lr"> 58 <span style="grid-row:span 2;"><x></x></span> 59 <span><x></x></span> 60 <span><x></x></span> 61 </div></div></div> 62 63 <!-- grid wrapped in overflow:hidden block --> 64 <div class="columns" style="height: 40px; margin-top:70px"> 65 <div style="padding-top:2px; background:grey"> 66 <div class="grid" style="overflow:hidden"> 67 <span style="grid-row:span 2"><x></x></span> 68 <span><x></x></span> 69 <span><x></x></span> 70 </div></div></div> 71 72 <!-- grid wrapped in FIELDSET block --> 73 <div class="columns" style="height: 40px; margin-top:70px"> 74 <div style="padding-top:2px; background:grey"> 75 <div style="border:none; padding:0; margin:0"> 76 <div class="grid"> 77 <span style="grid-row:span 2"><x></x></span> 78 <span><x></x></span> 79 <span><x></x></span> 80 </div></div></div></div> 81 82 <!-- grid wrapped in FIELDSET inline --> 83 <div class="columns" style="height: 40px; margin-left:200px"> 84 <div style="padding-top:2px; background:grey"> 85 <div style="display:inline-block; border:none; padding:0; margin:0"> 86 <div class="grid"> 87 <span style="grid-row:span 2"><x></x></span> 88 <span><x></x></span> 89 <span><x></x></span> 90 </div></div></div></div> 91 92 <!-- grid wrapped in FIELDSET overflow:hidden block --> 93 <div class="columns" style="height: 40px; margin-left:400px"> 94 <div style="padding-top:2px; background:grey"> 95 <div style="display:block; overflow:hidden; border:none; padding:0; margin:0; width:min-content"> 96 <div class="grid"> 97 <span style="grid-row:span 2"><x></x></span> 98 <span><x></x></span> 99 <span><x></x></span> 100 </div></div></div></div> 101 102 <!-- grid with orthogonal writing-mode to fragmentainer --> 103 <div class="columns" style="height: 40px; margin-top:70px"> 104 <div style="padding-top:2px; background:grey"> 105 <y> 106 <div class="grid" style="overflow:hidden; writing-mode:vertical-lr"> 107 <span style="grid-row:span 2"><x></x></span> 108 <span><x></x></span> 109 <span><x></x></span> 110 </div></y></div></div> 111 112 <!-- vertical grid and fragmentainer with intermediary horizontal writing-mode inline --> 113 <!-- XXX bug 1242660: remove the visibility:hidden DIV when we know what the rendering should be --> 114 <div style="visibility:hidden"> 115 <div class="columns" style="width: 50px; writing-mode:vertical-lr; margin-top:70px"> 116 <div style="padding-top:2px; background:grey"> 117 <y style="writing-mode:horizontal-lr"> 118 <div class="grid" style="writing-mode:vertical-lr"> 119 <span style="grid-row:span 2"><x></x></span> 120 <span><x></x></span> 121 <span><x></x></span> 122 </div></y></div></div> 123 </div> 124 125 </body> 126 </html>