distribution-algo-min-content-specified-guess.html (1620B)
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: 50px; 18 } 19 </style> 20 <main> 21 <h1>Width Distribution</h1> 22 <h4>"Distribution Algorithm - min-content-specified guess"</h4> 23 <p>Tests that the size of the column as the spec states that if the cell is constrained then the 24 <a href="https://drafts.csswg.org/css-tables-3/#width-distribution-algorithm">Spec Text</a> 25 </p> 26 <x-table style="width: 50px; border: 1px solid black;"> 27 <x-tr> 28 <x-td id="one" style="width: 100px;"> 29 <span style="width: 75px;">Cell 2</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 75px due to its min-content size.', 46 document.getElementById('one').offsetWidth, 47 75 48 ] 49 ]); 50 </script> 51 </html>