Chromium Code Reviews Chromium Code Reviews
Issue 341523002:
Resolve percent lengths for abs. positioned tables against padding box. (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| 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 |
