3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
8 <title>CSS Grid Test: Fragmentation of height:auto grid, not top-of-page, box-decoration-break:clone
</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-016-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;
36 box-decoration-break: clone
;
39 span
{ background:lime
; border:1px solid black
; }
40 x
{ display:block
; height:20px; }
46 <div class=
"columns" style=
"height: 130px/*fragmentainer ends in the end border*/">
47 <div style=
"padding-top:10px; background:grey">
49 <span style=
"grid-row:span 2"><x></x></span>
50 <span style=
"height:60px; background:cyan"><x></x></span>
52 <span style=
"align-self:end; background:pink"><x></x></span>
53 <span style=
"grid-row:1"><x></x></span>
56 <div class=
"columns" style=
"height: 18px/*fragmentainer ends in the end border*/">
57 <div style=
"padding-top:10px; background:grey">
61 <div class=
"columns" style=
"height: 20px/*fragmentainer ends in the end border*/">
62 <div style=
"padding-top:10px; background:grey">
63 <div class=
"grid" style=
"height:1px/*creates a Class C break opportunity at the end*/">
66 <div class=
"columns" style=
"height: 20px/*fragmentainer ends in the end border*/">
67 <div style=
"padding-top:10px; background:grey">
68 <div class=
"grid" style=
"height:2px/*creates a Class C break opportunity at the end*/">
71 <div class=
"columns" style=
"height: 100px/*fragmentainer ends in the last row*/">
72 <div style=
"padding-top:10px; background:grey">
74 <span style=
"grid-row:span 2"><x></x></span>
75 <span style=
"height:60px; background:cyan"><x></x></span>
76 <span style=
"align-self:end; background:pink"><x></x></span>
77 <span style=
"grid-row:1; height:60px"><x></x></span>
80 <div class=
"columns" style=
"height: 70px/*fragmentainer ends in the grid gap between the rows */">
81 <div style=
"padding-top:10px; background:grey">
83 <span style=
"grid-row:span 2"><x></x></span>
84 <span style=
"height:60px; background:cyan"><x></x></span>
85 <span style=
"align-self:end; background:pink"><x></x></span>
86 <span style=
"grid-row:1; height:60px"><x></x></span>
89 <div class=
"columns" style=
"height: 40px/*fragmentainer ends in the first row*/; margin-bottom:30px">
90 <div style=
"padding-top:10px; background:grey">
92 <span style=
"grid-row:span 2"><x></x></span>
93 <span style=
"height:60px; background:cyan"><x></x></span>
94 <span style=
"align-self:end; background:pink"><x></x></span>
95 <span style=
"grid-row:1; height:60px"><x></x></span>
98 <div class=
"columns" style=
"height: 13px/*fragmentainer ends in the grid start border */; margin-bottom:60px">
99 <div style=
"padding-top:10px; background:grey">
101 <span style=
"grid-row:span 2"><x></x></span>
102 <span style=
"height:60px; background:cyan"><x></x></span>
103 <span style=
"align-self:end; background:pink"><x></x></span>
104 <span style=
"grid-row:1; height:60px"><x></x></span>
107 <div class=
"columns" style=
"height: 8px/*fragmentainer ends above the grid*/; margin-bottom:60px">
108 <div style=
"padding-top:10px; background:grey">
110 <span style=
"grid-row:span 2"><x></x></span>
111 <span style=
"height:60px; background:cyan"><x></x></span>
112 <span style=
"align-self:end; background:pink"><x></x></span>
113 <span style=
"grid-row:1; height:60px"><x></x></span>
116 <div class=
"columns" style=
"height: 0px/*zero height fragmentainer*/; margin-bottom:60px">
117 <div style=
"padding-top:10px; background:grey">
119 <span style=
"grid-row:span 2"><x></x></span>
120 <span style=
"height:60px; background:cyan"><x></x></span>
121 <span style=
"align-self:end; background:pink"><x></x></span>
122 <span style=
"grid-row:1; height:60px"><x></x></span>