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; | |
Julien - ping for review
2014/06/17 20:57:42
Do we really need some relative float?
| |
10 margin: 10px; | |
11 } | |
12 | |
13 div span.tbl { | |
14 display: block; | |
15 background-color: skyblue; | |
16 position: absolute; | |
17 width: 50%; | |
18 height: 50%; | |
19 } | |
20 | |
21 div:nth-child(1) span.tbl { left: 0; top: 0; } | |
22 div:nth-child(2) span.tbl { right: 0; top: 0; } | |
23 div:nth-child(3) span.tbl { right: 0; bottom: 0; } | |
24 div:nth-child(4) span.tbl { left: 0; bottom: 0; } | |
Julien - ping for review
2014/06/17 20:57:43
I prefer to use simple selectors (class, id) when
andersr
2014/06/18 05:42:40
Yes, that's true.
I think you mentioned this in a
| |
25 | |
26 hr { clear: left; } | |
27 | |
28 #vertical > div { | |
29 -webkit-writing-mode: vertical-lr; | |
30 } | |
31 | |
32 </style> | |
33 <p>Tests that percent lengths of an absolutely positioned table is resolved | |
34 against the <em>padding box</em> of the parent. PASS if, for each row below:</p> | |
35 <ul> | |
36 <li>There is a blue <em>50px square</em> in each box.</li> | |
37 <li>The blue square appears in these corners (in order): top-left, top-right , bottom-right, bottom-left.</li> | |
38 </ul> | |
39 <p>Note that "abc" appears in the squares just to indicate the writing mode for the row.</p> | |
40 <hr> | |
41 <section id="horizontal"> | |
42 <div><span class="tbl"><span class="cell">abc</span></span></div> | |
43 <div><span class="tbl"><span class="cell">abc</span></span></div> | |
44 <div><span class="tbl"><span class="cell">abc</span></span></div> | |
45 <div><span class="tbl"><span class="cell">abc</span></span></div> | |
46 </section> | |
47 <hr> | |
48 <section id="vertical"> | |
49 <div><span class="tbl"><span class="cell">abc</span></span></div> | |
50 <div><span class="tbl"><span class="cell">abc</span></span></div> | |
51 <div><span class="tbl"><span class="cell">abc</span></span></div> | |
52 <div><span class="tbl"><span class="cell">abc</span></span></div> | |
53 </section> | |
OLD | NEW |