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| Index: LayoutTests/fast/table/absolute-table-percent-lengths.html |
| diff --git a/LayoutTests/fast/table/absolute-table-percent-lengths.html b/LayoutTests/fast/table/absolute-table-percent-lengths.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..48490b7db0a1f434d3c7469cef6aa7cfb24f89d7 |
| --- /dev/null |
| +++ b/LayoutTests/fast/table/absolute-table-percent-lengths.html |
| @@ -0,0 +1,57 @@ |
| +<!doctype html> |
| +<style> |
| + div { |
| + position: relative; |
| + border: 5px solid black; |
| + height: 60px; |
| + width: 60px; |
| + padding: 20px; |
| + float: left; |
| + margin: 10px; |
| + } |
| + |
| + div span.tbl { |
| + display: table; |
| + background-color: skyblue; |
| + position: absolute; |
| + width: 50%; |
| + height: 50%; |
| + } |
| + |
| + div span.cell { |
| + display: table-cell; |
| + } |
| + |
| + div:nth-child(1) span.tbl { left: 0; top: 0; } |
| + div:nth-child(2) span.tbl { right: 0; top: 0; } |
| + div:nth-child(3) span.tbl { right: 0; bottom: 0; } |
| + div:nth-child(4) span.tbl { left: 0; bottom: 0; } |
| + |
| + hr { clear: left; } |
| + |
| + #vertical > div { |
| + -webkit-writing-mode: vertical-lr; |
| + } |
| + |
| +</style> |
| +<p>Tests that percent lengths of an absolutely positioned table is resolved |
| +against the <em>padding box</em> of the parent. PASS if, for each row below:</p> |
| +<ul> |
| + <li>There is a blue <em>50px square</em> in each box.</li> |
| + <li>The blue square appears in these corners (in order): top-left, top-right, bottom-right, bottom-left.</li> |
| +</ul> |
| +<p>Note that "abc" appears in the squares just to indicate the writing mode for the row.</p> |
| +<hr> |
| +<section id="horizontal"> |
| + <div><span class="tbl"><span class="cell">abc</span></span></div> |
| + <div><span class="tbl"><span class="cell">abc</span></span></div> |
| + <div><span class="tbl"><span class="cell">abc</span></span></div> |
| + <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.
|
| +</section> |
| +<hr> |
| +<section id="vertical"> |
| + <div><span class="tbl"><span class="cell">abc</span></span></div> |
| + <div><span class="tbl"><span class="cell">abc</span></span></div> |
| + <div><span class="tbl"><span class="cell">abc</span></span></div> |
| + <div><span class="tbl"><span class="cell">abc</span></span></div> |
| +</section> |
