- From: Mats Palmgren via GitHub <sysbot+gh@w3.org>
- Date: Sat, 26 Nov 2016 23:49:31 +0000
- To: public-css-archive@w3.org
No, `stretch` stretches _without_ preserving the ratio, `normal` stretches _with_ preserved ratio. I would summarize what we have implemented as: 1. `place-self:normal normal ` (default) - stretches the item with preserved intrinsic ratio to fill the grid area in one axis without overflowing the other 2. `place-self:stretch stretch` - stretches the item to fill the grid area in both axis (the ratio is **not** preserved, unless the grid area happens to have the same ratio) 3. Otherwise, if `stretch` is one of the values, stretching occurs to fill the grid area in that axis. If the value in the other axis is `normal` it is resized to preserve the ratio (may overflow in that axis) 4. Otherwise, If `normal` is one of the values, stretching occurs to fill that axis, the other axis is resized to preserve the ratio (it may overflow in that axis) IOW, the intrinsic ratio is preserved if at least one of the values is `normal`. It gets more complicated when one or both axis also has min-/max-size constraints. I think we're following the CSS2 rules[1] there -- we're re-using the code that already implements that. The stretching occurs _before_ applying those rules. [1] the "Constraint Violations" table at the end of §10.4: https://www.w3.org/TR/CSS22/visudet.html#propdef-max-width Also, when the track max-sizing functions are definite, clamping the item to fit the grid area (per §6.6 in CSS Grid https://drafts.csswg.org/css-grid/#min-size-auto) also affects the above rules (the "may overflow..." above should not be allowed when clamping in that axis IMO, but let's sort out the clamping effect on this in https://github.com/w3c/csswg-drafts/issues/767) Here's a couple of testcases to illustrate our stretching behavior (I intentionally avoided any §6.6 clamping in these tests): Testcase for growing an image to fill a larger grid area: https://people-mozilla.org/~mpalmgren/tests/grid/grid-item-image-grow.html Screenshot of Firefox rendering: https://people-mozilla.org/~mpalmgren/tests/grid/grid-item-image-grow-firefox.png Testcase for shrinking an image to fit a smaller grid area: https://people-mozilla.org/~mpalmgren/tests/grid/grid-item-image-shrink.html Screenshot of Firefox rendering: https://people-mozilla.org/~mpalmgren/tests/grid/grid-item-image-shrink-firefox.png (You need a Nightly build for these tests to display correctly: https://nightly.mozilla.org/ ) -- GitHub Notification of comment by MatsPalmgren Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/523#issuecomment-263092995 using your GitHub account
Received on Saturday, 26 November 2016 23:49:38 UTC