3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
8 <title>CSS Grid Test: Fragmentation of a height:auto definite max-height grid, forced break growing min-content row
</title>
9 <link rel=
"author" title=
"Mats Palmgren" href=
"https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
10 <link rel=
"help" href=
"https://drafts.csswg.org/css-grid/#pagination">
11 <link rel=
"match" href=
"grid-fragmentation-024-ref.html">
12 <style type=
"text/css">
14 color:black
; background-color:white
; font-size:16px; padding:0; margin:0;
16 body
{ overflow:hidden
; }
23 -ms-column-fill: auto
;
24 -webkit-column-fill: auto
;
26 border: 2px solid salmon
;
33 grid-template-columns: 30px 30px 30px;
39 span
{ background:lime
; border:1px solid black
; }
40 x
{ display:block
; height:20px; }
41 .avoid-break { page-break-inside:avoid
; break-inside:avoid
; }
43 i
{ display:block
; height:10px; margin-top:7px; background:blue
; }
48 <div class=
"columns" style=
"height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/">
49 <div style=
"padding-top:1px; background:grey">
50 <div class=
"grid" style=
"grid-template-rows: min-content 50px; grid-gap:0;">
51 <span style=
"height:50px"><i style=
"height:60px"></i><x></x></span>
52 <span class=
"avoid-break" style=
"height:60px"><i></i><i></i><i></i><x></x></span>
53 <span style=
"grid-row:2"><x></x></span>
57 <div class=
"columns" style=
"height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/">
58 <div style=
"padding-top:1px; background:grey">
59 <div class=
"grid" style=
"grid-template-rows: min-content 50px; grid-gap:0;">
60 <span style=
"height:50px"><i style=
"height:60px"></i><x></x></span>
61 <span class=
"avoid-break" style=
"height:60px"><i></i><i></i><i></i><x></x></span>
62 <span style=
"grid-row:1/span 2"><x></x></span>
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: min-content 50px; grid-gap:0;">
69 <span style=
"height:50px"><i style=
"height:60px"></i><x></x></span>
70 <span class=
"avoid-break" style=
"height:60px"><i></i><i></i><i></i><x></x></span>
71 <span style=
"grid-row:1/span 4"><x></x></span>
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" style=
"grid-template-rows: 5px min-content 50px;">
78 <span style=
"grid-row:2; height:50px"><x></x><i style=
"height:60px"></i></span>
79 <span class=
"avoid-break" style=
"grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
80 <span style=
"grid-row:1/span 5"><x></x></span>
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: 5px min-content 50px;">
87 <span style=
"grid-row:1/span 5"><x></x></span>
88 <span style=
"grid-row:2; height:50px"><x></x><i style=
"height:60px"></i></span>
89 <span class=
"avoid-break" style=
"grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
93 <div class=
"columns" style=
"height: 100px/*trigger IsInlineBreakBefore() for the item: grow row 2*/">
94 <div style=
"padding-top:1px; background:grey">
95 <div class=
"grid" style=
"grid-template-rows: 50px min-content 50px; grid-gap:0;">
96 <span style=
"grid-row:2/span 2"><x></x></span>
97 <span style=
"grid-row:2; height:50px"><i style=
"height:60px"></i><x></x></span>
98 <span class=
"avoid-break" style=
"grid-row:2; height:60px"><i></i><i></i><i></i><x></x></span>
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" style=
"grid-template-rows: min-content 50px; grid-gap:0;">
105 <span style=
"height:50px"><i style=
"height:60px"></i><x></x></span>
106 <span class=
"avoid-break" style=
"height:60px"><i></i><i></i><i></i><x></x></span>
107 <span style=
"grid-row:1/span 4"><x></x></span>
108 <span style=
"grid-row:4"><x></x></span>
112 <div class=
"columns" style=
"height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/">
113 <div style=
"padding-top:1px; background:grey">
114 <div class=
"grid" style=
"grid-template-rows: 5px min-content 50px;">
115 <span style=
"grid-row:2; height:50px"><x></x><i style=
"height:60px"></i></span>
116 <span class=
"avoid-break" style=
"grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
117 <span style=
"grid-row:1/span 5"><x></x></span>
118 <span style=
"grid-row:5"><x></x></span>