computing-column-measure-1.html (2855B)
1 <!doctype html> 2 <script src='/resources/testharness.js'></script> 3 <script src='/resources/testharnessreport.js'></script> 4 <link rel='stylesheet' href='../support/base.css' /> 5 6 <link rel="author" title="Greg Whitworth" href="gwhit@microsoft.com" /> 7 <link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-column-measures" /> 8 <main> 9 <h1>Height Distribution</h1> 10 <h4>"Computing row measures"</h4> 11 <p>This is testing intermediate min-content height for span 2</p> 12 13 <hr/> 14 <table cellspacing="0" cellpadding="0"> 15 <tbody style="height: auto"> 16 <tr style="height: 10px"> 17 <td id="one" style="height: 1px"></td> 18 <td rowspan="2" style="height: 51px"></td> 19 </tr> 20 <tr style="height: 20px"> 21 <td style="height: 2px"></td> 22 </tr> 23 </tbody> 24 </table> 25 26 <table cellspacing="0" cellpadding="0"> 27 <tbody style="height: auto"> 28 <tr style="height: 10px"> 29 <td id="two" style="height: 1px"></td> 30 <td rowspan="2" style="height: 51px"></td> 31 </tr> 32 <tr style="height: auto"> 33 <td style="height: auto"></td> 34 </tr> 35 </tbody> 36 </table> 37 38 <table cellspacing="0" cellpadding="0"> 39 <tbody style="height: 51px"> 40 <tr style="height: 10px"> 41 <td id="three" style="height: 1px"></td> 42 <td rowspan="2" style="height: 51px"></td> 43 </tr> 44 <tr style="height: 20px"> 45 <td style="height: 2px"></td> 46 </tr> 47 </tbody> 48 </table> 49 50 <table cellspacing="0" cellpadding="0"> 51 <tbody style="height: 51px"> 52 <tr style="height: 10px"> 53 <td id="four" style="height: 1px"></td> 54 </tr> 55 <tr style="height: 20px"> 56 <td style="height: 2px"></td> 57 </tr> 58 </tbody> 59 </table> 60 61 </main> 62 63 <style> 64 table { margin-bottom: 10px; width: 50px; } 65 td { outline: 1px solid red; outline-offset: -1px; } 66 </style> 67 <script> 68 var i = 1; 69 generate_tests(assert_equals, [ 70 [ 71 "Checking intermediate min-content height for span 2 (1)", 72 document.getElementById('one').offsetHeight, 73 17 74 ], 75 [ 76 "Checking intermediate min-content height for span 2 (2)", 77 document.getElementById('two').offsetHeight, 78 51 79 ], 80 [ 81 "Checking intermediate min-content height for span 2 (3)", 82 document.getElementById('three').offsetHeight, 83 17 84 ], 85 [ 86 "Checking intermediate min-content height for span 2 (4)", 87 document.getElementById('four').offsetHeight, 88 17 89 ] 90 ]); 91 </script> 92 </html>