fixed-layout-2.html (2970B)
1 <!DOCTYPE html> 2 <title>table-layout:fixed with various widths</title> 3 <link rel="author" title="Oriol Brufau" href="obrufau@igalia.com"> 4 <link rel="help" href="https://drafts.csswg.org/css-tables-3/#in-fixed-mode"> 5 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10937"> 6 <meta name="assert" content="Fixed table layout is triggered except when inline-size is auto or max-content."> 7 <link rel="stylesheet" href="./support/base.css"> 8 9 <style> 10 .wrapper { 11 width: 0; 12 } 13 x-table { 14 table-layout: fixed; 15 border-spacing: 0px; 16 } 17 x-td:first-child { 18 padding: 0; 19 background: cyan; 20 width: 50px; 21 height: 50px; 22 } 23 x-td + x-td { 24 padding: 0; 25 height: 50px; 26 } 27 x-td > div { 28 width: 100px; 29 } 30 </style> 31 32 <main id="main"> 33 <h1>Fixed Layout</h1> 34 <p>Checks whether fixed layout is implemented properly</p> 35 </main> 36 37 <template id="template"> 38 <hr> 39 <p></p> 40 <p></p> 41 <div class="wrapper"> 42 <x-table> 43 <x-tr> 44 <x-td> 45 <div></div> 46 </x-td> 47 <x-td></x-td> 48 </x-tr> 49 </x-table> 50 </div> 51 </template> 52 53 <script src="/resources/testharness.js"></script> 54 <script src="/resources/testharnessreport.js"></script> 55 <script> 56 let sizes = [ 57 "10px", 58 "100%", 59 "calc(10px + 100%)", 60 "auto", 61 "min-content", 62 "max-content", 63 "fit-content", 64 "calc-size(any, 10px + 100%)", 65 "fit-content(0)", 66 "stretch", 67 "contain", 68 69 // These are non-standard sizes. 70 "-moz-available", 71 "-webkit-fill-available", 72 "intrinsic", 73 "min-intrinsic", 74 ]; 75 76 function checkSize(size, allowsFixed) { 77 let fragment = template.content.cloneNode(true); 78 if (allowsFixed) { 79 fragment.querySelector("p").textContent = "This should be a 50x50 cyan square:"; 80 fragment.querySelector("p + p").textContent = "Table-layout:fixed does apply to width:" + size + " tables"; 81 } else { 82 fragment.querySelector("p").textContent = "This should be a 100x50 cyan rectangle:"; 83 fragment.querySelector("p + p").textContent = "Table-layout:fixed does NOT apply to width:" + size + " tables"; 84 } 85 let table = fragment.querySelector("x-table"); 86 table.style.width = size; 87 table.querySelector("div").textContent = size; 88 main.appendChild(fragment); 89 90 test(() => { 91 assert_equals( 92 getComputedStyle(table).tableLayout, 93 "fixed", 94 "The computed value is 'fixed' regardless of whether it applies" 95 ); 96 if (allowsFixed) { 97 assert_equals(table.offsetWidth, 50, "Table is in fixed mode"); 98 } else { 99 assert_equals(table.offsetWidth, 100, "Table is NOT in fixed mode"); 100 } 101 }, size); 102 } 103 104 for (let size of sizes) { 105 if (CSS.supports("width", size)) { 106 let allowsFixed = size !== "auto" && size !== "max-content"; 107 checkSize(size, allowsFixed); 108 109 // calc-size() should trigger fixed table layout. 110 // https://drafts.csswg.org/css-values-5/#calc-size 111 let calcSize = "calc-size(" + size + ", size)"; 112 if (CSS.supports("width", calcSize)) { 113 checkSize(calcSize, true); 114 } 115 } 116 } 117 </script>