OLD | NEW |
---|---|
(Empty) | |
1 <!doctype html> | |
2 <style> | |
3 div { | |
4 position: relative; | |
5 border: 5px solid black; | |
6 height: 60px; | |
7 width: 60px; | |
8 padding: 20px; | |
9 float: left; | |
10 margin: 10px; | |
11 } | |
12 | |
13 div span.tbl { | |
14 display: table; | |
15 background-color: skyblue; | |
16 position: absolute; | |
17 width: 50%; | |
18 height: 50%; | |
19 } | |
20 | |
21 div span.cell { | |
22 display: table-cell; | |
23 } | |
24 | |
25 div:nth-child(1) span.tbl { left: 0; top: 0; } | |
26 div:nth-child(2) span.tbl { right: 0; top: 0; } | |
27 div:nth-child(3) span.tbl { right: 0; bottom: 0; } | |
28 div:nth-child(4) span.tbl { left: 0; bottom: 0; } | |
29 | |
30 hr { clear: left; } | |
31 | |
32 #vertical > div { | |
33 -webkit-writing-mode: vertical-lr; | |
34 } | |
35 | |
36 </style> | |
37 <p>Tests that percent lengths of an absolutely positioned table is resolved | |
38 against the <em>padding box</em> of the parent. PASS if, for each row below:</p> | |
39 <ul> | |
40 <li>There is a blue <em>50px square</em> in each box.</li> | |
41 <li>The blue square appears in these corners (in order): top-left, top-right , bottom-right, bottom-left.</li> | |
42 </ul> | |
43 <p>Note that "abc" appears in the squares just to indicate the writing mode for the row.</p> | |
44 <hr> | |
45 <section id="horizontal"> | |
46 <div><span class="tbl"><span class="cell">abc</span></span></div> | |
47 <div><span class="tbl"><span class="cell">abc</span></span></div> | |
48 <div><span class="tbl"><span class="cell">abc</span></span></div> | |
49 <div><span class="tbl"><span class="cell">abc</span></span></div> | |
Julien - ping for review
2014/06/17 20:57:43
This test would probably be better as a check-layo
andersr
2014/06/18 05:42:40
OK, that makes sense, I'll use that instead.
| |
50 </section> | |
51 <hr> | |
52 <section id="vertical"> | |
53 <div><span class="tbl"><span class="cell">abc</span></span></div> | |
54 <div><span class="tbl"><span class="cell">abc</span></span></div> | |
55 <div><span class="tbl"><span class="cell">abc</span></span></div> | |
56 <div><span class="tbl"><span class="cell">abc</span></span></div> | |
57 </section> | |
OLD | NEW |