3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
8 <title>CSS Grid Test: Fragmentation with first grid row at top-of-page and Class C break opportunities
</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-004-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
;
32 grid-template-columns: 30px 30px 30px;
37 border-bottom-width: 10px;
38 height: 120px; /* 4px before/after first/last row are Class C break opportunities */
39 align-content: center
;
41 span
{ background:lime
; border:1px solid black
; }
42 x
{ display:block
; height:20px; }
48 <div class=
"columns" style=
"height: 122px/*fragmentainer ends in the end border*/">
49 <div style=
"background:grey">
51 <span style=
"grid-row:span 2"><x></x></span>
52 <span style=
"height:60px; background:cyan"><x></x></span>
54 <span style=
"align-self:end; background:pink"><x></x></span>
55 <span style=
"grid-row:1"><x></x></span>
58 <div class=
"columns" style=
"height: 122px/*fragmentainer ends in the end border*/">
59 <div style=
"background:grey">
63 <div class=
"columns" style=
"height: 90px/*fragmentainer ends in the last row*/">
64 <div style=
"background:grey">
66 <span style=
"grid-row:span 2"><x></x></span>
67 <span style=
"height:60px; background:cyan"><x></x></span>
68 <span style=
"align-self:end; background:pink"><x></x></span>
69 <span style=
"grid-row:1; height:60px"><x></x></span>
72 <div class=
"columns" style=
"height: 60px/*fragmentainer ends in the grid gap between the rows */">
73 <div style=
"background:grey">
75 <span style=
"grid-row:span 2"><x></x></span>
76 <span style=
"height:60px; background:cyan"><x></x></span>
77 <span style=
"align-self:end; background:pink"><x></x></span>
78 <span style=
"grid-row:1; height:60px"><x></x></span>
81 <!-- TODO XXX depends on bug 1238294
83 <div class="columns" style="height: 30px/*fragmentainer ends in the first row*/; margin-bottom:30px">
84 <div style="background:grey">
86 <span style="grid-row:span 2"><x></x></span>
87 <span style="height:60px; background:cyan"><x></x></span>
88 <span style="align-self:end; background:pink"><x></x></span>
89 <span style="grid-row:1; height:60px"><x></x></span>
92 <div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px">
93 <div style="background:grey">
95 <span style="grid-row:span 2"><x></x></span>
96 <span style="height:60px; background:cyan"><x></x></span>
97 <span style="align-self:end; background:pink"><x></x></span>
98 <span style="grid-row:1; height:60px"><x></x></span>
101 <div class="columns" style="height: 2px/*fragmentainer ends between the start border but before the first row */">
102 <div style="background:grey">
104 <span style="height:60px; background:cyan"><x></x></span>
105 <span style="grid-row:span 2"><x></x></span>
107 <span style="grid-row:1"><x></x></span>