<!
DOCTYPE HTML >
<!-- Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/
<
html ><
head >
<
meta charset=
"utf-8" >
<
title >CSS Grid Test: Fragmentation of height:auto grid, forced break growing min-content row<
/title >link rel="author" title ="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096 " >link rel="help" href="https://drafts.csswg.org/css-grid/#pagination " >link rel="match" href="grid-fragmentation-007-ref.html" >style type="text/css" >html ,body {body { overflow:hidden; }span { background:lime; border:1px solid black; }style >head >body >div class="columns" style ="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/" >div style ="padding-top:1px; background:grey" >div class="grid" style ="grid-template-rows: min-content 50px; grid-gap:0;" >span style ="height:50px" ><i style ="height:60px" ></i><x></x></span >span class="avoid-break" style ="height:60px" ><i></i><i></i><i></i><x></x></span >span style ="grid-row:2" ><x></x></span >div >div ></div >div class="columns" style ="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/" >div style ="padding-top:1px; background:grey" >div class="grid" style ="grid-template-rows: min-content 50px; grid-gap:0;" >span style ="height:50px" ><i style ="height:60px" ></i><x></x></span >span class="avoid-break" style ="height:60px" ><i></i><i></i><i></i><x></x></span >span style ="grid-row:1/span 2" ><x></x></span >div >div ></div >div class="columns" style ="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/" >div style ="padding-top:1px; background:grey" >div class="grid" style ="grid-template-rows: min-content 50px; grid-gap:0;" >span style ="height:50px" ><i style ="height:60px" ></i><x></x></span >span class="avoid-break" style ="height:60px" ><i></i><i></i><i></i><x></x></span >span style ="grid-row:1/span 4" ><x></x></span >div >div ></div >div class="columns" style ="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/" >div style ="padding-top:1px; background:grey" >div class="grid" style ="grid-template-rows: 5px min-content 50px;" >span style ="grid-row:2; height:50px" ><x></x><i style ="height:60px" ></i></span >span class="avoid-break" style ="grid-row:2; height:60px" ><x></x><i></i><i></i><i></i></span >span style ="grid-row:1/span 5" ><x></x></span >div >div ></div >div class="columns" style ="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/" >div style ="padding-top:1px; background:grey" >div class="grid" style ="grid-template-rows: 5px min-content 50px;" >span style ="grid-row:1/span 5" ><x></x></span >span style ="grid-row:2; height:50px" ><x></x><i style ="height:60px" ></i></span >span class="avoid-break" style ="grid-row:2; height:60px" ><x></x><i></i><i></i><i></i></span >div >div ></div >div class="columns" style ="height: 100px/*trigger IsInlineBreakBefore() for the item: grow row 2*/" >div style ="padding-top:1px; background:grey" >div class="grid" style ="grid-template-rows: 50px min-content 50px; grid-gap:0;" >span style ="grid-row:2/span 2" ><x></x></span >span style ="grid-row:2; height:50px" ><i style ="height:60px" ></i><x></x></span >span class="avoid-break" style ="grid-row:2; height:60px" ><i></i><i></i><i></i><x></x></span >div >div ></div >body >html > Messung V0.5 C=90 H=98 G=94
¤ Dauer der Verarbeitung: 0.2 Sekunden
¤ *© Formatika GbR, Deutschland
