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