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..3b54201725e61f84b59f67a3efef45caaf984061 |
--- /dev/null |
+++ b/LayoutTests/fast/table/absolute-table-percent-lengths.html |
@@ -0,0 +1,48 @@ |
+<!doctype html> |
+<style> |
+ div { |
+ position: relative; |
+ border: 5px solid black; |
+ height: 60px; |
+ width: 60px; |
+ padding: 20px; |
+ margin: 10px; |
+ } |
+ |
+ .tbl { |
+ display: table; |
+ background-color: skyblue; |
+ position: absolute; |
+ width: 50%; |
+ height: 50%; |
+ } |
+ |
+ .cell { display: table-cell; } |
+ |
+ .topleft { left: 0; top: 0; } |
+ .topright { right: 0; top: 0; } |
+ .bottomright { right: 0; bottom: 0; } |
+ .bottomleft { left: 0; bottom: 0; } |
+ |
+ .vertical { -webkit-writing-mode: vertical-lr; } |
+ |
+</style> |
+<script src="../../resources/check-layout.js"></script> |
+<p>Tests that percent lengths of an absolutely positioned table is resolved |
+against the <em>padding box</em> of the parent. |
+<hr> |
+<output id="output"></output> |
+<hr> |
+<div><span class="tbl topleft" data-expected-client-width=50 data-expected-client-height=50><span class="cell">abc</span></span></div> |
+<div><span class="tbl topright" data-expected-client-width=50 data-expected-client-height=50><span class="cell">abc</span></span></div> |
+<div><span class="tbl bottomright" data-expected-client-width=50 data-expected-client-height=50><span class="cell">abc</span></span></div> |
+<div><span class="tbl bottomleft" data-expected-client-width=50 data-expected-client-height=50><span class="cell">abc</span></span></div> |
+ |
+<div class="vertical"><span class="tbl topleft" data-expected-client-width=50 data-expected-client-height=50><span class="cell">abc</span></span></div> |
+<div class="vertical"><span class="tbl topright" data-expected-client-width=50 data-expected-client-height=50><span class="cell">abc</span></span></div> |
+<div class="vertical"><span class="tbl bottomright" data-expected-client-width=50 data-expected-client-height=50><span class="cell">abc</span></span></div> |
+<div class="vertical"><span class="tbl bottomleft" data-expected-client-width=50 data-expected-client-height=50><span class="cell">abc</span></span></div> |
+ |
+<script> |
+ checkLayout(".tbl", output); |
+</script> |