distribution-algo-2.html (1928B)
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/#width-distribution" /> 8 9 <style> 10 x-table span { 11 display: inline-block; 12 background: green; 13 height: 100px; 14 } 15 </style> 16 <main> 17 <h1>Width Distribution</h1> 18 <h4>"Distribution Algorithm"</h4> 19 <p>Tests the first step that all cells get their min content guess which is that 20 of their min content 21 <a href="https://drafts.csswg.org/css-tables-3/#width-distribution">Spec Text</a> 22 </p> 23 <x-table id="one"> 24 <x-tr> 25 <x-td id="two"> 26 <span style="width: 100px;"></span> 27 </x-td> 28 <x-td id="three"> 29 <span style="width: 200px"></span> 30 </x-td> 31 </x-tr> 32 </x-table> 33 </main> 34 35 <script> 36 while(true) { 37 var xtd = document.querySelector('x-td[rowspan], x-td[colspan]'); if(!xtd) break; 38 var td = document.createElement('td'); for(var i = xtd.attributes.length; i--;) { td.setAttribute(xtd.attributes[i].name,xtd.attributes[i].value) } 39 xtd.parentNode.replaceChild(td,xtd); 40 } 41 42 var i = 1; 43 generate_tests(assert_equals, [ 44 [ 45 'The box should be 300px since that is the size of the content', 46 document.getElementById('one').offsetWidth, 47 300 48 ], 49 [ 50 'The first cell is 100px wide due to its content\'s size', 51 document.getElementById('two').offsetWidth, 52 100 53 ], 54 [ 55 'The first cell is 200px wide due to its content\'s size', 56 document.getElementById('three').offsetWidth, 57 200 58 ] 59 ]); 60 </script> 61 </html>