- From: fantasai via GitHub <sysbot+gh@w3.org>
- Date: Fri, 31 Jul 2020 07:22:32 +0000
- To: public-css-archive@w3.org
fantasai has just created a new issue for https://github.com/w3c/csswg-drafts:
== [css-grid-1] Intrinsic contributions across spanning items and fractional flex items ==
Was writing tests for #4783 and noticed both Chrome and Firefox failing the `0fr auto` variant of the tests. So I poked around and found that when spanning a track with an fr value >= 1, none of the item's contribution gets incorporated into an inflexible intrinsic track, but if the fr value is < 1, then the excluded proportion of the item's contribution does in fact get incorporated into the intrinsic track.
[See testcase](http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Chtml%20lang%3Den%3E%0A%3Cmeta%20charset%3D%22utf-8%22%3E%0A%3Ctitle%3ECSS%20Grid%20Layout%20Test%3A%20grid-template-columns%20intrinsic%20across%202%20tracks%3C%2Ftitle%3E%0A%3Clink%20rel%3D%22help%22%20href%3D%22https%3A%2F%2Fwww.w3.org%2FTR%2Fcss-grid-1%2F%23algo-content%22%3E%0A%3Clink%20rel%3D%22stylesheet%22%20type%3D%22text%2Fcss%22%20href%3D%22%2Ffonts%2Fahem.css%22%20%2F%3E%0A%3Cstyle%3E%0A%20%20.container%20%7B%0A%20%20%20%20display%3A%20grid%3B%0A%20%20%20%20border%3A%20solid%20silver%3B%0A%20%20%20%20color%3A%20gray%3B%0A%20%20%20%20float%3A%20left%3B%0A%20%20%20%20margin%3A%201em%202em%3B%0A%20%20%20%20font%3A%2012px%2F1%20Ahem%3B%0A%20%20%7D%0A%20%20.test%20%7B%20grid-column%3A%201%20%2F%20-1%3B%20%7D%0A%0A%20%20%2F*%20Make%20columns%20visible%20*%2F%0A%20%20span%20%7B%20border-bottom%3A%20solid%20orange%3B%20grid-row%3A%202%3B%7D%0A%20%20span%20%2B%20span%20%7B%20border-color%3A%20teal%3B%20%7D%0A%0A%20%20%2F*%20Annotations%20for%20easier%20inspection%20of%20sub-tests%20*%2F%0A%20%20.container%3Ahover%3A%3Abefore%20%7B%0A%20%20%20%20content%3A%20attr(style)%3B%0A%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20top%3A%200.1em%3B%20left%3A%200.1em%3B%0A%20%20%20%20font-family%3A%20sans-serif%3B%0A%20%20%20%20color%3A%20black%3B%0A%20%20%7D%0A%3C%2Fstyle%3E%0A%0A%3Cdiv%20class%3D%22container%22%20style%3D%22grid-template-columns%3A%200fr%20auto%22%3E%0A%20%20%3Cdiv%20class%3D%22test%22%3EAAA%3C%2Fdiv%3E%0A%20%20%3Cspan%3E%3C%2Fspan%3E%3Cspan%3E%3C%2Fspan%3E%0A%3C%2Fdiv%3E%0A%0A%3Cdiv%20class%3D%22container%22%20style%3D%22grid-template-columns%3A%200.5fr%20auto%22%3E%0A%20%20%3Cdiv%20class%3D%22test%22%3EAAA%3C%2Fdiv%3E%0A%20%20%3Cspan%3E%3C%2Fspan%3E%3Cspan%3E%3C%2Fspan%3E%0A%3C%2Fdiv%3E%0A%0A%3Cdiv%20class%3D%22container%22%20style%3D%22grid-template-columns%3A%201fr%20auto%22%3E%0A%20%20%3Cdiv%20class%3D%22test%22%3EAAA%3C%2Fdiv%3E%0A%20%20%3Cspan%3E%3C%2Fspan%3E%3Cspan%3E%3C%2Fspan%3E%0A%3C%2Fdiv%3E%0A%0A%3Cdiv%20class%3D%22container%22%20style%3D%22grid-template-columns%3A%200fr%20auto%3B%20width%3A%203em%3B%22%3E%0A%20%20%3Cdiv%20class%3D%22test%22%3EAAA%3C%2Fdiv%3E%0A%20%20%3Cspan%3E%3C%2Fspan%3E%3Cspan%3E%3C%2Fspan%3E%0A%3C%2Fdiv%3E%0A%0A%3Cdiv%20class%3D%22container%22%20style%3D%22grid-template-columns%3A%200.5fr%20auto%3B%20width%3A%203em%3B%22%3E%0A%20%20%3Cdiv%20class%3D%22test%22%3EAAA%3C%2Fdiv%3E%0A%20%20%3Cspan%3E%3C%2Fspan%3E%3Cspan%3E%3C%2Fspan%3E%0A%3C%2Fdiv%3E%0A%0A%3Cdiv%20class%3D%22container%22%20style%3D%22grid-template-columns%3A%201fr%20auto%3B%20width%3A%203em%3B%22%3E%0A%20%20%3Cdiv%20class%3D%22test%22%3EAAA%3C%2Fdiv%3E%0A%20%20%3Cspan%3E%3C%2Fspan%3E%3Cspan%3E%3C%2Fspan%3E%0A%3C%2Fdiv%3E%0A%0A) (simplified code below)
Do we want to spec this behavior? Or update implementations to exclude the spanned item’s contribution completely from intrinsic tracks, even when fr < 1?
```html
<!DOCTYPE html>
<style>
.container {
display: grid;
border: solid silver;
font: 12px/1 Ahem;
}
.test { grid-column: 1 / -1; }
/* Make columns visible */
span { border-bottom: solid orange; }
span + span { border-color: teal; }
</style>
<div class="container" style="grid-template-columns: 0fr auto">
<div class="test">AAA</div>
<span></span><span></span>
</div>
<div class="container" style="grid-template-columns: 0.5fr auto">
<div class="test">AAA</div>
<span></span><span></span>
</div>
<div class="container" style="grid-template-columns: 1fr auto">
<div class="test">AAA</div>
<span></span><span></span>
</div>
```
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5375 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 31 July 2020 07:22:40 UTC