grid-fragmentation-006-ref.html (3879B)
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 of height:auto grid, not top-of-page, item break-inside:avoid</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 grid-template-columns: 30px 30px 30px; 31 grid-auto-rows: 30px; 32 grid-gap: 12px; 33 border:5px solid; 34 align-content: space-evenly; 35 } 36 span { background:lime; border:1px solid black; } 37 x { display:block; height:20px; } 38 39 i { display:block; height:10px; margin-top:7px; background:blue; } 40 .t { border-bottom-width:0; } 41 .b { border-top-width:0; } 42 .br1 { height:94px; border-width:5px; border-top-style:solid; } 43 44 </style> 45 </head> 46 <body> 47 48 <div class="columns" style="height: 110px/*trigger IsInlineBreakBefore() for the item*/"> 49 <div style="padding-top:30px; background:grey"> 50 <div class="grid"> 51 <span><i></i><i></i><i></i><i></i><i></i><i></i><x></x></span> 52 </div> 53 </div></div> 54 55 <div class="columns" style="height: 70px/*item will be INCOMPLETE*/"> 56 <div style="background:grey"> 57 <div class="grid"> 58 <span><i></i><i></i><i></i><i></i><i></i><i></i><x></x></span> 59 </div> 60 </div></div> 61 62 <div class="columns" style="height: 100px/*item will be INCOMPLETE*/"> 63 <div style="background:grey"> 64 <div class="grid"> 65 <span style="grid-row:span 2"><i></i><i></i><i></i><i></i><i></i><i></i><x></x></span> 66 </div> 67 </div></div> 68 69 <!-- bug 1415301 70 <div class="columns" style="height: 140px/*trigger IsInlineBreakBefore() for the item*/"> 71 <div style="padding-top:30px; background:grey"> 72 <div class="grid"> 73 <span style="grid-row:span 3"><x></x></span> 74 <span style="grid-row:span 2"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><x></x></span></div> 75 </div></div> 76 --> 77 78 <div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item*/"> 79 <div style="padding-top:1px; background:grey"> 80 <div class="grid t" style="grid-auto-rows: 50px; height:50px;"> 81 <span class="t" style="grid-row:span 2; height:49px; overflow:hidden"><i></i><i></i><i></i><x></x></span> 82 </div> 83 <div style="height:44px"></div> 84 <div class="grid b" style="grid-auto-rows: 50px; height:50px;"> 85 <span class="b" style="grid-row:span 2; height:11px; overflow:hidden"><i style="margin-top:0;height:2px"></i><x></x></span> 86 </div> 87 </div></div> 88 89 <div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item*/"> 90 <div style="padding-top:1px; background:grey"> 91 <div class="br1"></div> 92 <div class="grid b" style="grid-auto-rows: 50px; height:116px;"> 93 <span style="grid-row:span 2; height:60px"><i></i><i></i><i></i><x></x></span> 94 </div> 95 </div></div> 96 97 <div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item*/"> 98 <div style="padding-top:1px; background:grey"> 99 <div class="br1"></div> 100 <div class="grid b" style="grid-auto-rows: 50px; height:116px; grid-gap:0;"> 101 <span style="grid-row:span 2; height:60px"><i></i><i></i><i></i><x></x></span> 102 </div> 103 </div></div> 104 105 <div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item*/"> 106 <div style="padding-top:1px; background:grey"> 107 <div class="br1"></div> 108 <div class="grid b" style="grid-auto-rows: 50px; height:116px; grid-gap:0;"> 109 <span style="height:100px; background:pink"><x></x></span> 110 <span style="grid-row:span 2; height:60px"><i></i><i></i><i></i><x></x></span> 111 </div> 112 </div></div> 113 114 115 </body> 116 </html>