Chromium Code Reviews| 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 |