third_party/WebKit/LayoutTests/fast/table/absolute-table-percent-lengths.html

   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         margin: 10px;
  10     }
  11
  12     .tbl {
  13         display: table;
  14         background-color: skyblue;
  15         position: absolute;
  16         width: 50%;
  17         height: 50%;
  18     }
  19
  20     .cell { display: table-cell; }
  21
  22     .topleft { left: 0; top: 0; }
  23     .topright { right: 0; top: 0; }
  24     .bottomright { right: 0; bottom: 0; }
  25     .bottomleft { left: 0; bottom: 0; }
  26
  27     .vertical  { -webkit-writing-mode: vertical-lr; }
  28
  29 </style>
  30 <script src="../../resources/check-layout.js"></script>
  31 <p>Tests that percent lengths of an absolutely positioned table is resolved
  32 against the <em>padding box</em> of the parent.
  33 <hr>
  34 <output id="output"></output>
  35 <hr>
  36 <div><span class="tbl topleft" data-expected-client-width=50 data-expected-client-height=50><span class="cell">abc</span></span></div>
  37 <div><span class="tbl topright" data-expected-client-width=50 data-expected-client-height=50><span class="cell">abc</span></span></div>
  38 <div><span class="tbl bottomright" data-expected-client-width=50 data-expected-client-height=50><span class="cell">abc</span></span></div>
  39 <div><span class="tbl bottomleft" data-expected-client-width=50 data-expected-client-height=50><span class="cell">abc</span></span></div>
  40
  41 <div class="vertical"><span class="tbl topleft" data-expected-client-width=50 data-expected-client-height=50><span class="cell">abc</span></span></div>
  42 <div class="vertical"><span class="tbl topright" data-expected-client-width=50 data-expected-client-height=50><span class="cell">abc</span></span></div>
  43 <div class="vertical"><span class="tbl bottomright" data-expected-client-width=50 data-expected-client-height=50><span class="cell">abc</span></span></div>
  44 <div class="vertical"><span class="tbl bottomleft" data-expected-client-width=50 data-expected-client-height=50><span class="cell">abc</span></span></div>
  45
  46 <script>
  47     checkLayout(".tbl", output);
  48 </script>