Add CSS containment features

[foolip]

No description provided.

[foolip]

The situation seems to be this:

• Size, layout and paint containment shipped together in all browsers
• Style containment came later in Firefox. It didn't work with quotes in Chrome initially, and still doesn't in Safari.
• Inline-size containment is a later addition in all browsers

https://caniuse.com/css-containment seems to cover initial support for the contain property, which means size/layout/paint containment.

The way I've split it in this PR is like the above bullet points. Another way of splitting it would be to have the 5 types of containment as individual features, and later do a composite feature for them.

I need some expert feedback to decide on how to best represent this to web developers. @vmpstr how do you think this is best structured so that web developer can understand it?

[vmpstr]

FWIW, I think style containment was marked as at-risk for a while, which is why it came later.

I have a slight preference for splitting all of the features separately. But if that's too verbose, then the structure you have seems fine: we have a "base initial set", which is size layout and paint, and then we have individual things that were added later

[ddbeck]

I had a go at describing these features.

[ddbeck]

Suggested change

	description: "The `contain: style` CSS declaration TODO."
	description: "The `contain: style` CSS declaration prevents counter (`counter-increment` and `counter-set`) and quotation styles (`content` property quote values) from applying beyond the element's descendants. This permits the browser to avoid slower rendering calculations.

[foolip]

@danielsakhapov I think you know about this, can you say if the description of this feature is accurate?

[danielsakhapov]

I'd say it prevents modifying counters and quotes values outside the element's descendants, but doesn't prevent accessing the value

[foolip]

This is a little bit hard to understand. Do web developers use style containment because they care about counters and quotes, or do they really use it because it makes stuff faster without them knowing why? If so, maybe we should say that it makes stuff faster, and that the side effect is on counters and quotes.

[ddbeck]

How about this, to shift the emphasis to something like "go faster, at a specific expense"?

Suggested change

	description: "The `contain: style` CSS declaration TODO."
	description: "The `contain: style` CSS declaration permits the browser to avoid slower layout calculations by preventing modification to counter (`counter-increment` and `counter-set`) and quotation styles (`content` property quote values) beyond the element's descendants.

[ddbeck]

Suggested change

	description: "The `contain: inline-size` CSS declaration TODO."
	description: "The `contain: inline-size` CSS declaration prevents the element's inline size from being set by the element's contents. This permits the browser to avoid slower rendering calculations."

[foolip]

Do you think "layout calculations" would work just as well? To me, rendering is a larger process that also includes painting pixels.

[ddbeck]

Precision is good! Though I suspect for developers it's a case of "divs go brrr."

Suggested change

	description: "The `contain: inline-size` CSS declaration TODO."
	description: "The `contain: inline-size` CSS declaration prevents the element's inline size from being set by the element's contents. This permits the browser to avoid slower layout calculations."

[ddbeck]

Another take on this, to avoid the circular description:

Suggested change

	description: "The `contain: inline-size` CSS declaration TODO."
	description: "The `contain: inline-size` CSS declaration prevents the element's inline dimension from being set by the element's contents. This permits the browser to avoid slower layout calculations."

[foolip]

I have a slight preference for splitting all of the features separately.

I think we should go with that. We could later consider a composite feature for the whole contain CSS property if it stops getting new functionality.

[ddbeck]

Had another go at descriptions.

[ddbeck]

Suggested change

	description: "The `contain: layout` CSS declaration TODO."
	description: "The `contain: layout` CSS declaration isolates the inside of an element such that it cannot affect the layout of the rest of the page or be affected by the rest of the page. This permits the browser to avoid slower layout calculations."

[ddbeck]

Suggested change

	description: "The `contain: paint` CSS declaration TODO."
	description: "The `contain: paint` CSS declaration prevents an element's descendants from being drawn outside the boundaries of the containing element, with any overflow clipped. This permits the browser to avoid slower painting calculations."

[ddbeck]

Suggested change

	description: "The `contain: size` CSS declaration TODO."
	description: "The `contain: size` CSS declaration sets an element's dimensions exclusively by its `height` and `width` properties, ignoring its contents and descendants. This permits the browser to avoid slower layout calculations."

[ddbeck]

Another take on this, to avoid the circular description:

Suggested change

	description: "The `contain: inline-size` CSS declaration TODO."
	description: "The `contain: inline-size` CSS declaration prevents the element's inline dimension from being set by the element's contents. This permits the browser to avoid slower layout calculations."