OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <script src="../../resources/check-layout.js"></script> | 2 <script src="../../resources/check-layout.js"></script> |
3 <p>Given a parent block with a forced break before, and with an empty collapse-t
hrough child | 3 <p>Given a parent block with a forced break before, and with an empty collapse-t
hrough child |
4 followed by a child with a top margin, check that the parent block still end
s up at the exact | 4 followed by a child with a top margin, check that the parent block is affect
ed by the top |
5 top of the next column. The collapse-through child prevents us from correctl
y estimating the | 5 margin of its second child. The collapse-through child prevents us from corr
ectly estimating |
6 logical top of the parent initially.</p> | 6 the logical top of the parent initially.</p> |
7 <p>Below there should be a yellow box. Inside it there should be a bottom-left a
ligned blue box and | 7 <p>Below there should be a yellow box. There should be no red. In the first colu
mn, the word |
8 a top-center aligned green box.</p> | 8 "first" should be seen once. In the second column, the word "second" should
be seen twice. In the |
| 9 third column, the word "third" should be seen twice.</p> |
9 <div id="test" style="position:relative; -webkit-columns:3; -webkit-column-gap:1
0px; column-fill:auto; width:620px; height:90px; line-height:20px; background:ye
llow;"> | 10 <div id="test" style="position:relative; -webkit-columns:3; -webkit-column-gap:1
0px; column-fill:auto; width:620px; height:90px; line-height:20px; background:ye
llow;"> |
10 <br> | 11 <br> |
11 <br> | 12 <br> |
12 <br> | 13 <br> |
13 <div style="padding-top:4px; background:blue;" data-offset-x="0" data-offset
-y="60" data-expected-height="110"> | 14 <div style="margin-bottom:300px;">first</div> |
14 <div style="-webkit-column-break-before:always; background:red;" data-of
fset-x="210" data-offset-y="0" data-expected-height="80"> | 15 <div style="-webkit-column-break-before:always; background:red;" data-offset
-x="210" data-offset-y="45" data-expected-height="85"> |
15 <div data-offset-x="210" data-offset-y="0" data-expected-height="0">
</div> | 16 <div data-offset-x="210" data-offset-y="45" data-expected-height="0" sty
le="background:red;"></div> |
16 <div style="margin-top:50px; background:green;" data-offset-x="210"
data-offset-y="0" data-expected-height="80"> | 17 <div style="margin-top:45px; background:yellow;" data-offset-x="210" dat
a-offset-y="45" data-expected-height="85"> |
17 <br><br><br><br> | 18 second<br>second<br>third<br>third<br> |
18 </div> | |
19 </div> | 19 </div> |
20 </div> | 20 </div> |
21 </div> | 21 </div> |
22 <script> | 22 <script> |
23 checkLayout("#test"); | 23 checkLayout("#test"); |
24 </script> | 24 </script> |
OLD | NEW |