Morten Stenshorne
127aa5a44e
Automatic update from web-platform-tests Add `column-height` to `columns` shorthand. Reset `column-wrap`. Add `column-height` to the `columns` shorthand, as resolved here: https://github.com/w3c/csswg-drafts/issues/12050#issuecomment-3160860557 The new syntax is: `[ <'column-width'> || <'column-count'> ] [ / <'column-height'> ]?`. Additionally the `columns` shorthand now resets the `column-wrap` property to its initial value. The new serialization code for `columns` also strips extraneous `auto` keywords, so that e.g. `columns:auto` gets serialized as `columns:auto`, not `columns:auto auto`, so that round-tripping no longer fails in CSSParserImplTest.AllPropertiesCanParseImportant. This fix also affects other tests, so that their expectations had to be updated. Furthermore, since new longhands are added to the `columns` shorthand, specifying only `column-count` and `column-width` now will result in an empty string from getPropertyValue("columns"), since two longhands are missing. Tests had to be updated because of this as well. All behind runtime flag MulticolColumnWrapping. Generated with gemini-cli assistance #ai-assisted (except for tests - they are handwritten) Bug: 436847954, 403183884 Change-Id: Iaf56d1fd0320d5df50228c58fb6669647c8728e9 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6850512 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Morten Stenshorne <mstensho@chromium.org> Cr-Commit-Position: refs/heads/main@{#1503842} -- wpt-commits: 5ae9376d335f6d27e128e53f54c24e13ede65bd3 wpt-pr: 54423
47 lines
2.2 KiB
HTML
47 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSS Multi-column Layout: getComputedStyle().columns</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-columns">
|
|
<link rel="help" href="https://drafts.csswg.org/css-multicol-2/#propdef-columns">
|
|
<meta name="assert" content="The 'columns' shorthand property computes to the correct serialization of its component values, with lengths made absolute.">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/css/support/computed-testcommon.js"></script>
|
|
<div id="target"></div>
|
|
<style>
|
|
#target {
|
|
font-size: 40px;
|
|
}
|
|
</style>
|
|
<script>
|
|
test_computed_value("columns", "auto");
|
|
|
|
test_computed_value("columns", "0.25em", "10px");
|
|
test_computed_value("columns", "2", "2");
|
|
test_computed_value("columns", "0.25em 2", "10px 2");
|
|
test_computed_value("columns", "2 0.25em", "10px 2");
|
|
test_computed_value("columns", "0.25em auto", "10px");
|
|
test_computed_value("columns", "auto 0.25em", "10px");
|
|
test_computed_value("columns", "2 auto", "2");
|
|
test_computed_value("columns", "auto 2", "2");
|
|
|
|
test_computed_value("columns", "auto / 2.5em", "auto / 100px");
|
|
test_computed_value("columns", "0.25em / 2.5em", "10px / 100px");
|
|
test_computed_value("columns", "2 / 2.5em", "2 / 100px");
|
|
test_computed_value("columns", "0.25em 2 / 2.5em", "10px 2 / 100px");
|
|
test_computed_value("columns", "2 0.25em / 2.5em", "10px 2 / 100px");
|
|
test_computed_value("columns", "0.25em auto / 2.5em", "10px / 100px");
|
|
test_computed_value("columns", "auto 0.25em / 2.5em", "10px / 100px");
|
|
test_computed_value("columns", "2 auto / 2.5em", "2 / 100px");
|
|
test_computed_value("columns", "auto 2 / 2.5em", "2 / 100px");
|
|
|
|
test_computed_value("columns", "auto / auto", "auto");
|
|
test_computed_value("columns", "0.25em / auto", "10px");
|
|
test_computed_value("columns", "2 / auto", "2");
|
|
test_computed_value("columns", "0.25em 2 / auto", "10px 2");
|
|
test_computed_value("columns", "2 0.25em / auto", "10px 2");
|
|
test_computed_value("columns", "0.25em auto / auto", "10px");
|
|
test_computed_value("columns", "auto 0.25em / auto", "10px");
|
|
test_computed_value("columns", "2 auto / auto", "2");
|
|
test_computed_value("columns", "auto 2 / auto", "2");
|
|
</script>
|