[csswg-drafts] [css-contain] containment vs baseline alignement

frivoal has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-contain] containment vs baseline alignement ==
I think the spec is a little bit unclear, and probably partially wrong, when it comes to the interaction of containment and baseline alignment.

* If a non-empty inline-block has size containment, how should it be aligned in the line box that contains it? The way I understand size containment, it is only supposed to affect the size of the element with containment, causing it to be sized as if it was empty. This would mean that unlike an empty inline-block where we align the bottom margin edge with the parent's baseline (see [CSS2 10.8](https://www.w3.org/TR/CSS22/visudet.html#propdef-vertical-align)), we would align the baseline of the box with the parent's baseline as we would do if the element had an explicit width and height of 0 instead of size containment.

  I am unsure about the meaning of what the spec currently says:

  > When laying out the containing element, it must be treated as having no contents.
  >
  > After layout of the element is complete, its contents must then be laid out into the containing element’s resolved size.

  I think it only implies what I said above, but I am not sure. I suggest clarifying by changing to:

  > When calculating the size of the containing element, it must be treated as having no contents.
  >
  > Then, its contents must then be laid out into the containing element’s resolved size.


* On the other hand, it seems to me that **layout** containment should negate the ability to do baseline alignment, otherwise, internal changes in the layout of the element would be able to affect it's surroundings. Therefore, I suggest we add this to the list of effects of layout containment:

  > For the purpose of the 'vertical-align' property, or any other property whose effects need to relate the position of the containing element's baseline to something other than its descendants, the containing element is treated as having no baseline.

  The "any other property" part is meant to catch things like [`box-snap`](https://drafts.csswg.org/css-line-grid/#propdef-box-snap).


This is not what the Blink implementation does: it turns off baseline alignment on size containment, not on layout containment (see [test case](https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!doctype%20html%3E%0A%3Cmeta%20charset%3D%22utf-8%22%3E%0A%3Cstyle%3E%0Adiv%20%7B%0A%09background%3A%20blue%3B%0A%09color%3A%20white%3B%0A%7D%0Aspan%20%7B%0A%09display%3A%20inline-block%3B%0A%09position%3Arelative%3B%0A%09width%3A%20100px%3B%0A%09height%3A%20100px%3B%0A%09background%3A%20orange%3B%0A%09color%3A%20black%3B%0A%09border%3A%201px%20solid%20gray%3B%0A%7D%0A%23cs%20%7B%20contain%3A%20size%3B%20%7D%0A%23cl%20%7B%20contain%3A%20layout%3B%20%7D%0A%23empty%3A%3Abefore%20%7B%0A%09content%3A%20%22empty%22%3B%0A%09position%3A%20absolute%3B%0A%7D%0A%0A%3C%2Fstyle%3E%0A%3Cdiv%3Einline%20content%20%3Cspan%20id%3Dempty%3E%3C%2Fspan%3E%3Cspan%20id%3Dcs%3Esize%20containment%3C%2Fspan%3E%3Cspan%20id%3Dcl%3Elayout%20containment%3C%2Fspan%3E%20inline%20content%3C%2Fdiv%3E%0A)).

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2995 using your GitHub account

Received on Tuesday, 7 August 2018 03:23:25 UTC