-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Make ComputedValuesExt expose keywords for the sizing properties
This will allow callers to start obeying `min-content`, `max-content`, `fit-content` and `stretch` in follow-up patches. The old functionality is kept as deprecated methods that we should eventually remove. This patch has very little impact on the existing behavior, just some very minimal implementation of the keywords for css tables. This also overhauls fixed-layout-2.html since: - It had code that wasn't doing anything - It had wrong expecations in prose - The logic seemed broken in general - All browsers were failing one testcase Signed-off-by: Oriol Brufau <[email protected]>
- Loading branch information
1 parent
fdd3587
commit fd25aeb
Showing
1 changed file
with
104 additions
and
72 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,84 +1,116 @@ | ||
| <!doctype html> | ||
| <script src='/resources/testharness.js'></script> | ||
| <script src='/resources/testharnessreport.js'></script> | ||
| <link rel='stylesheet' href='./support/base.css' /> | ||
| <!DOCTYPE html> | ||
| <title>table-layout:fixed with various widths</title> | ||
| <link rel="author" title="Oriol Brufau" href="[email protected]"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-tables-3/#in-fixed-mode"> | ||
| <main> | ||
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10937"> | ||
| <link rel="stylesheet" href="./support/base.css"> | ||
|
|
||
| <h1>Fixed Layout</h1> | ||
| <p>Checks whether fixed layout is implemented properly (width is not definite)</p> | ||
| <style> | ||
| .wrapper { | ||
| width: 0; | ||
| } | ||
| x-table { | ||
| table-layout: fixed; | ||
| border-spacing: 0px; | ||
| } | ||
| x-td:first-child { | ||
| padding: 0; | ||
| background: cyan; | ||
| width: 50px; | ||
| height: 50px; | ||
| } | ||
| x-td + x-td { | ||
| padding: 0; | ||
| height: 50px; | ||
| } | ||
| x-td > div { | ||
| width: 100px; | ||
| } | ||
| </style> | ||
|
|
||
| <hr/> | ||
| <p>This should be a 100px-wide blue square:</p> | ||
| <p>Table-layout:fixed does not apply to width:auto tables</p> | ||
| <x-table style="table-layout: fixed; border-spacing: 0px"> | ||
| <x-tr> | ||
| <x-td style="padding: 0; background: blue; height: 100px;"><div style="width: 100px"></div></x-td> | ||
| <x-td style="padding: 0"></x-td> | ||
| </x-tr> | ||
| </x-table> | ||
| <main id="main"> | ||
| <h1>Fixed Layout</h1> | ||
| <p>Checks whether fixed layout is implemented properly</p> | ||
| </main> | ||
|
|
||
| <hr/> | ||
| <p>This should be a 100px-wide blue square:</p> | ||
| <p>Table-layout:fixed does not apply to width:max-content tables</p> | ||
| <x-table style="table-layout: fixed; width: max-content; border-spacing: 0px"> | ||
| <x-tr> | ||
| <x-td style="padding: 0; background: blue; height: 100px;"><div style="width: 100px"></div></x-td> | ||
| <x-td style="padding: 0"></x-td> | ||
| </x-tr> | ||
| <template id="template"> | ||
| <hr> | ||
| <p></p> | ||
| <p></p> | ||
| <div class="wrapper"> | ||
| <x-table> | ||
| <x-tr> | ||
| <x-td> | ||
| <div></div> | ||
| </x-td> | ||
| <x-td></x-td> | ||
| </x-tr> | ||
| </x-table> | ||
| </div> | ||
| </template> | ||
|
|
||
| <hr/> | ||
| <p>This should be a 100px-wide blue square:</p> | ||
| <p>Table-layout:fixed does apply to width:min-content/fit-content tables</p> | ||
| <x-table style="table-layout: fixed; width: fit-content; border-spacing: 0px"> | ||
| <x-tr> | ||
| <x-td style="padding: 0; background: blue; height: 50px;"><div style="width: 100px"></div></x-td> | ||
| <x-td style="padding: 0"></x-td> | ||
| </x-tr> | ||
| </x-table> | ||
| <x-table style="table-layout: fixed; width: min-content; border-spacing: 0px"> | ||
| <x-tr> | ||
| <x-td style="padding: 0; background: blue; height: 50px;width:100px;"><div style="width: 100px"></div></x-td> | ||
| <x-td style="padding: 0;height:50px"><div style="width: 100px"></div></x-td> | ||
| </x-tr> | ||
| </x-table> | ||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| <script> | ||
| let sizeData = { | ||
| "10px": true, | ||
| "100%": true, | ||
| "calc(10px + 100%)": true, | ||
| "auto": false, | ||
| "min-content": true, | ||
| "max-content": false, | ||
| "fit-content": true, | ||
| "calc-size(any, 10px + 100%)": true, | ||
|
|
||
| </main> | ||
| // These expectations are tentative, see https://github.com/w3c/csswg-drafts/issues/10937 | ||
| "fit-content(0)": true, | ||
| "stretch": true, | ||
|
|
||
| <script> | ||
| while(true) { | ||
| var xtd = document.querySelector('x-td[rowspan], x-td[colspan]'); if(!xtd) break; | ||
| var td = document.createElement('td'); for(var i = xtd.attributes.length; i--;) { td.setAttribute(xtd.attributes[i].name,xtd.attributes[i].value) } | ||
| xtd.parentNode.replaceChild(td,xtd); | ||
| // These are non-standard, expect the most popular behavior among the supporting implementations. | ||
| "-moz-available": true, | ||
| "-webkit-fill-available": true, | ||
| "intrinsic": false, | ||
| "min-intrinsic": false, | ||
| }; | ||
|
|
||
| function checkSize(size, allowsFixed) { | ||
| let fragment = template.content.cloneNode(true); | ||
| if (allowsFixed) { | ||
| fragment.querySelector("p").textContent = "This should be a 50x50 cyan square:"; | ||
| fragment.querySelector("p + p").textContent = "Table-layout:fixed does apply to width:" + size + " tables"; | ||
| } else { | ||
| fragment.querySelector("p").textContent = "This should be a 100x50 cyan rectangle:"; | ||
| fragment.querySelector("p + p").textContent = "Table-layout:fixed does NOT apply to width:" + size + " tables"; | ||
| } | ||
| let table = fragment.querySelector("x-table"); | ||
| table.style.width = size; | ||
| table.querySelector("div").textContent = size; | ||
| main.appendChild(fragment); | ||
|
|
||
| test(() => { | ||
| assert_equals( | ||
| getComputedStyle(table).tableLayout, | ||
| "fixed", | ||
| "The computed value is 'fixed' regardless of whether it applies" | ||
| ); | ||
| if (allowsFixed) { | ||
| assert_equals(table.offsetWidth, 50, "Table is in fixed mode"); | ||
| } else { | ||
| assert_equals(table.offsetWidth, 100, "Table is NOT in fixed mode"); | ||
| } | ||
| }, size); | ||
| } | ||
|
|
||
| generate_tests(assert_equals, [ | ||
| [ | ||
| "Table-layout:fixed is not applied when width is auto", | ||
| document.querySelector("x-table:nth-of-type(1) > x-tr:first-child > x-td:first-child").offsetWidth, | ||
| 100 | ||
| ], | ||
| [ | ||
| "Table-layout:fixed reports fixed when width is auto", | ||
| getComputedStyle(document.querySelector("x-table:nth-of-type(1)")).tableLayout, | ||
| 'fixed' | ||
| ], | ||
| [ | ||
| "Table-layout:fixed is not applied when width is max-content", | ||
| document.querySelector("x-table:nth-of-type(2) > x-tr:first-child > x-td:first-child").offsetWidth, | ||
| 100 | ||
| ], | ||
| [ | ||
| "Table-layout:fixed reports fixed when width is max-content", | ||
| getComputedStyle(document.querySelector("x-table:nth-of-type(2)")).tableLayout, | ||
| 'fixed' | ||
| ], | ||
| [ | ||
| "Table-layout:fixed is applied when width is min-content", | ||
| document.querySelector("x-table:nth-of-type(3) > x-tr:first-child > x-td:first-child").offsetWidth, | ||
| document.querySelector("x-table:nth-of-type(4) > x-tr:first-child > x-td:first-child").offsetWidth | ||
| ] | ||
| ]) | ||
| for (let [size, allowsFixed] of Object.entries(sizeData)) { | ||
| if (CSS.supports("width", size)) { | ||
| checkSize(size, allowsFixed); | ||
|
|
||
| // calc-size() should have the same behavior as its basis. | ||
| // https://drafts.csswg.org/css-values-5/#calc-size | ||
| let calcSize = "calc-size(" + size + ", size)"; | ||
| if (CSS.supports("width", calcSize)) { | ||
| checkSize(calcSize, allowsFixed); | ||
| } | ||
| } | ||
| } | ||
| </script> |