absolute-tables-002.html (1718B)
1 <!doctype html> 2 <script src='/resources/testharness.js'></script> 3 <script src='/resources/testharnessreport.js'></script> 4 <script src='/resources/check-layout-th.js'></script> 5 <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> 6 <link rel="help" href="https://www.w3.org/TR/css-tables-3/#used-width-of-table"> 7 <meta name="assert" content="When sizing and positioning abspos tables, the intrinsic width is obeyed when the intrinsic width is larger than specified width" /> 8 <style> 9 .cb { 10 position: relative; 11 height: 200px; 12 width: 200px; 13 outline: 2px dashed lightblue; 14 } 15 16 .table { 17 background-color: orange; 18 position: absolute; 19 width: 50px; 20 right: 0px; 21 } 22 23 .cell { 24 border: 1px solid green; 25 width: 100px; 26 } 27 28 .cell > div { 29 width: 200px; 30 } 31 32 .vertical { writing-mode: vertical-lr; } 33 .horizontal { writing-mode: horizontal-tb; } 34 </style> 35 36 <output id="log"></output> 37 38 <main> 39 <div class="cb"> 40 <table class="table" data-expected-width=208 data-offset-x="-8"> 41 <tr> 42 <td class="cell"> 43 <div></div> 44 </td> 45 </tr> 46 </table> 47 </div> 48 <div class="cb vertical"> 49 <table class="table horizontal" data-expected-width=208 data-offset-x="-8"> 50 <tr> 51 <td class="cell"> 52 <div></div> 53 </td> 54 </tr> 55 </table> 56 </div> 57 <div class="cb"> 58 <table class="table vertical" data-expected-width=208 data-offset-x="-8"> 59 <tr> 60 <td class="cell"> 61 <div></div> 62 </td> 63 </tr> 64 </table> 65 </div> 66 <div class="cb vertical"> 67 <table class="table vertical" data-expected-width=208 data-offset-x="-8"> 68 <tr> 69 <td class="cell"> 70 <div></div> 71 </td> 72 </tr> 73 </table> 74 </div> 75 </main> 76 <script> 77 checkLayout(".table"); 78 </script>