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