Repository navigation
[css-grid] Static position should use content-box, not padding-box #3020
Description
Tab and I just noticed that while every other layout mode uses the content box of the static position containing block to set the static position, grid uses the padding box.
We suspect this was an error and we should fix this. Anyone have a different opinion?
Spec: https://drafts.csswg.org/css-grid-1/#static-position
Testcase: http://software.hixie.ch/utilities/js/live-dom-viewer/saved/6105
<!DOCTYPE html>
<style>
.abspos { position: absolute; border: 4px solid rgba(0,0,0,.4) }
.container { float: left; border: solid; padding: 2em; width: 10em; height: 6em; background: yellow content-box }
</style>
<div class=container style="display: grid;"><span class=abspos></span>grid</div>
<div class=container style="display: flex;"><span class=abspos></span>flex</div>
<div class=container style="display: block;"><span class=abspos></span>block</div>
Activity
css-meeting-bot commentedon Aug 22, 2018
The Working Group just discussed
Static position should use content-box, not padding-box, and agreed to the following:RESOLVED: align grid layout static position as content box rather then padding.The full IRC log of that discussion
<dael> Topic: Static position should use content-box, not padding-box<dael> github: https://github.com//issues/3020
<dael> Rossen: TabAtkins and fantasai noticed this while reviewing Grid and they asked if we should s tick to this or align to everything else. Opinions?
<dael> Rossen: TabAtkins is calling in
<dael> fantasai: I imagine he'sin favor
<TabAtkins> ^_^
<dbaron> makes sense to me
<dael> Rossen: We can resolve to align grid layout static position as content box rather then padding. Objections?
<dael> RESOLVED: align grid layout static position as content box rather then padding.
mrego commentedon Sep 18, 2018
Regarding tests there is http://w3c-test.org/css/css-grid/abspos/absolute-positioning-grid-container-parent-001.html
MatsPalmgren commentedon Sep 18, 2018
@mrego FYI, there's also a bunch of tests under css/vendor-imports/mozilla/mozilla-central-reftests/align3/ they are all updated now.
mrego commentedon Sep 18, 2018
@MatsPalmgren thanks for the info, probably we should import those in Chromium/WebKit too.
[css-grid] Static position should use content-box, not padding-box
[css-grid] Static position should use content-box, not padding-box
mrego commentedon Sep 19, 2018
@MatsPalmgren one question about the tests. I see tests for self and content alignment in the case of flexboxes, but only for self alignment in the case of grid layout. Why?
For example, I'm wondering if for grid layout the following two examples. Should they have the same output (the abspos element should be horizontally and vertically centered)?
MatsPalmgren commentedon Dec 16, 2018
I don't know, but many of our Grid tests are in a separate folder. There should be some content-alignment tests there. (We want to convert these to WPT tests and upstream them eventually. Just lack of resources that it hasn't happened yet...)
Note that the grid container is not an abs.pos. containing block in your examples, so §9.2 applies. In particular:
In your first example (self-alignment), css-align says "use the box’s static position rectangle", i.e. "By default, the static position rectangle of the child of a grid container corresponds to the content edges of the grid container.", so that's what leads to the first abs.pos. being centered in the content-box.
In the second case (content-alignment), it's the grid of the grid-container that is aligned, but since the abs.pos. box isn't grid-aligned at all it's not affected by that. If you add
position:relativeto the container the child is still not affected by content-alignment since it's not anchored to any line in the grid (given that all its lines areauto). If you additionally addgrid-area:1/1/1/1to the abs.pos. item to anchor it with the top-left of the grid it's still not centered because a grid with zero tracks is special: "If there are no grid tracks (the explicit grid is empty, and no tracks were created in the implicit grid), the sole grid line in each axis is aligned with the start edge of the grid container.". This makes sense because the alignment subjects are the tracks (not lines) and with no tracks content-distribution doesn't apply. If you add a track, e.g.grid:0/0, then line 1 should be centered by content-alignment and then you can use self-alignment to align the item relative to that grid-area.So this example should display the same as your first example: