Changes between Initial Version and Version 1 of CSSContainment


Ignore:
Timestamp:
Mar 29, 2021 6:43:11 AM (7 months ago)
Author:
rwlbuis@webkit.org
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • CSSContainment

    v1 v1  
     1= Containment =
     2
     3Here we describe changes needed for supporting various parts of CSS Containment [1].
     4
     5= Size Containment =
     6Size containment calculate size as if there's no content.
     7To implement size containment, we plan to add `shouldApplySizeContainment` to RenderObject to indicate if this object should be effective to `contain: size;`, according to [2].
     8
     9Then cooperating with the layout steps.
     101. Calculating the widths.
     11  Some object's width depends on the intrinsic size which effects the minPreferredLogicalWidth and maxPreferredLogicalWidth.
     12In this case, for size containment, we need to make the intrinsic size not effected by content. It is handled in `computeIntrinsicLogicalWidths()` which will calculate minLogicalWidth and maxLogicalWidth as if the content is empty.
     13
     14These objects include RenderReplace, RenderMenuList, RenderListBox, RenderTextControl,
     15RenderFileUploadControl, RenderGrid, RenderFlexibleBox, RenderBlockFlow and so on.
     162. Layout children.
     173. Calculating height.
     18  The logical height is changed while layout children. So at the beginning of calculate logical height, the logicalHeight is reset to the empty content height.
     19
     20For other layout algorithms, like grid, multicolumn and flex layout, we need to calculate the empty content size according to the algorithms.
     21
     22= Layout Containment =
     23
     24Layout containment limits the scope of layout, it makes the contained element opaque for layout purposes; nothing outside can affect its internal layout, and vice versa.
     25
     26The central method to check whether layout containment should apply to the element will be called 'shouldApplyLayoutContainment'. It will check the conditions from the spec [3], i.e. it generates a principal box, is not an internal table box (other than table-cell), not an internal ruby box and not a non-atomic inline-levelbox.
     27
     28Following the layout containment box algorithm [4]:
     29- The layout containment box establishes an independent formatting context. To implement this, RenderBox::createsNewFormattingContext will have to be adapted.
     30
     31- If the computed value of the overflow property is either visible or clip or a combination thereof, any overflow must be treated as ink overflow. Adjust LayoutBox::LayoutOverflowRectForPropagation to not add visual overflow if shouldApplyLayoutContainment is true, since in that case it will be treated as ink overflow.
     32
     33- The layout containment box establishes an absolute positioning containing block and a fixed positioning containing block. This needs changes in RenderElement::canContainFixedPositionObjects and RenderElement::canContainAbsolutelyPositionedObjects.
     34
     35- The layout containment box creates a stacking context. This requires an additional check in RenderLayer::shouldBeCSSStackingContext.
     36
     37- For the purpose of the vertical-align property, or any other property whose effects need to relate the position of the layout containment box's baseline to something other than its descendants, the containment box is treated as having no baseline. The cooperating methods baselinePosition, firstLineBaseline and inlineBlockBaseline will need to be adapted for various kind of renderers to support this.
     38
     39Layout contained elements act as relayout boundaries, so objectIsRelayoutBoundary should be changed in order
     40for RenderObject::markContainingBlocksForLayout to avoid marking the contained element ancestors.
     41
     42[1] https://www.w3.org/TR/css-contain-1/ [[br]]
     43[2] https://www.w3.org/TR/css-contain-1/#containment-size [[br]]
     44[3] https://www.w3.org/TR/css-contain-1/#containment-layout [[br]]
     45[4] https://www.w3.org/TR/css-contain-1/#layout-containment-box [[br]]