Attachment #451349 for bug #236354

View Details Raw Unified Return to Bug 236354



2022-02-09  Antti Koivisto  <antti@apple.com>

        [CSS Container Queries] Implement inline-size containment
        https://bugs.webkit.org/show_bug.cgi?id=236354

        Reviewed by NOBODY (OOPS!).

        "Giving an element inline-size containment applies size containment to the inline-axis sizing
        of its principal box. This means the inline-axis intrinsic sizes of the principal box are
        determined as if the element had no content."

        https://drafts.csswg.org/css-contain-3/#containment-inline-size

        * rendering/RenderBlockFlow.cpp:
        (WebCore::RenderBlockFlow::computeInlinePreferredLogicalWidths const):

        Compute inline axis preferred width as if the block had no content.

        * rendering/style/RenderStyle.cpp:
        (WebCore::RenderStyle::effectiveContainment const):
        * rendering/style/RenderStyleConstants.h:

        For completeness, add an enum value for inline-size containment. It can only be set by 'container'
        property for now.

        * style/StyleScope.cpp:
        (WebCore::Style::Scope::updateQueryContainerState):

        Ignore block axis for inline-size containers.

2022-02-08  Antti Koivisto  <antti@apple.com>

        [CSS Container Queries] Track query containers so they can be invalidated on size change

Lines 4081-4086 static inline LayoutUnit preferredWidth(LayoutUnit preferredWidth, float result) a/Source/WebCore/rendering/RenderBlockFlow.cpp_sec1
- a/Source/WebCore/rendering/RenderBlockFlow.cpp +5 lines
4081		4081
4082	void RenderBlockFlow::computeInlinePreferredLogicalWidths(LayoutUnit& minLogicalWidth, LayoutUnit& maxLogicalWidth) const	4082	void RenderBlockFlow::computeInlinePreferredLogicalWidths(LayoutUnit& minLogicalWidth, LayoutUnit& maxLogicalWidth) const
4083	{	4083	{
		4084	// "The inline-axis intrinsic sizes of the principal box are determined as if the element had no content."
		4085	// https://drafts.csswg.org/css-contain-3/#containment-inline-size
		4086	if (style().effectiveContainment().contains(Containment::InlineSize))
		4087	return;
		4088
4084	#if ENABLE(LAYOUT_FORMATTING_CONTEXT)	4089	#if ENABLE(LAYOUT_FORMATTING_CONTEXT)
4085	if (const_cast<RenderBlockFlow&>(*this).tryComputePreferredWidthsUsingModernPath(minLogicalWidth, maxLogicalWidth))	4090	if (const_cast<RenderBlockFlow&>(*this).tryComputePreferredWidthsUsingModernPath(minLogicalWidth, maxLogicalWidth))
4086	return;	4091	return;



        containment.add({ Containment::Layout, Containment::Style, Containment::Size });
        break;
    case ContainerType::InlineSize:
        containment.add({ Containment::Layout, Containment::Style, Containment::InlineSize });
        containment.add({ Containment::Layout, Containment::Style });
        break;
    };




};

enum class Containment : uint8_t {
    Layout      = 1 << 0,
    Paint       = 1 << 1,
    Size        = 1 << 2,
    InlineSize  = 1 << 3,
    Style       = 1 << 4,
};

enum class ContainerType : uint8_t {



        auto* containerElement = containerRenderer.element();
        if (!containerElement)
            continue;
        
        auto size = containerRenderer.logicalSize();

        auto sizeChanged = [&](LayoutSize oldSize) {
            switch (containerRenderer.style().containerType()) {
            case ContainerType::InlineSize:
                return size.width() != oldSize.width();
            case ContainerType::Size:
                return size != oldSize;
            case ContainerType::None:
                ASSERT_NOT_REACHED();
                return false;
            }
        };

        auto it = previousStates.find(*containerElement);
        bool changed = it == previousStates.end() || sizeChanged(it->value);
        if (changed)
            changedContainers.append(containerElement);
        m_queryContainerStates.add(*containerElement, size);



2022-02-09  Antti Koivisto  <antti@apple.com>

        [CSS Container Queries] Implement inline-size containment
        https://bugs.webkit.org/show_bug.cgi?id=236354

        Reviewed by NOBODY (OOPS!).

        * web-platform-tests/css/css-contain/container-queries/container-type-containment-expected.txt:

2022-02-08  Antoine Quint  <graouts@webkit.org>

        [web-animations] additive and accumulation interpolation does not work correctly with implicit 0% and 100% keyframes

Lines 2-8 AA a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-type-containment-expected.txt_sec1
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-type-containment-expected.txt -1 / +1 lines
2	A	2	A
3		3
4	PASS container-type:inline-size turns on layout containment	4	PASS container-type:inline-size turns on layout containment
5	FAIL container-type:inline-size turns on inline-size containment assert_equals: expected 0 but got 12	5	PASS container-type:inline-size turns on inline-size containment
6	PASS container-type:size turns on full size containment	6	PASS container-type:size turns on full size containment
7	PASS container-type:inline/size turns on style containment	7	PASS container-type:inline/size turns on style containment
8		8

Return to Bug 236354

Lines 2835-2842 OptionSet<Containment> RenderStyle::effectiveContainment() const a/Source/WebCore/rendering/style/RenderStyle.cpp_sec1
- a/Source/WebCore/rendering/style/RenderStyle.cpp -2 / +1 lines
2835	containment.add({ Containment::Layout, Containment::Style, Containment::Size });	2835	containment.add({ Containment::Layout, Containment::Style, Containment::Size });
2836	break;	2836	break;
2837	case ContainerType::InlineSize:	2837	case ContainerType::InlineSize:
2838	// FIXME: Support inline-size containment.	2838	containment.add({ Containment::Layout, Containment::Style, Containment::InlineSize });
2839	containment.add({ Containment::Layout, Containment::Style });
2840	break;	2839	break;
2841	};	2840	};
2842		2841

Lines 1225-1234 enum class MathStyle : uint8_t { a/Source/WebCore/rendering/style/RenderStyleConstants.h_sec1
- a/Source/WebCore/rendering/style/RenderStyleConstants.h -4 / +5 lines
1225	};	1225	};
1226		1226
1227	enum class Containment : uint8_t {	1227	enum class Containment : uint8_t {
1228	Layout = 1 << 0,	1228	Layout = 1 << 0,
1229	Paint = 1 << 1,	1229	Paint = 1 << 1,
1230	Size = 1 << 2,	1230	Size = 1 << 2,
1231	Style = 1 << 3,	1231	InlineSize = 1 << 3,
		1232	Style = 1 << 4,
1232	};	1233	};
1233		1234
1234	enum class ContainerType : uint8_t {	1235	enum class ContainerType : uint8_t {

Lines 797-805 bool Scope::updateQueryContainerState() a/Source/WebCore/style/StyleScope.cpp_sec1
- a/Source/WebCore/style/StyleScope.cpp -2 / +16 lines
797	auto* containerElement = containerRenderer.element();	797	auto* containerElement = containerRenderer.element();
798	if (!containerElement)	798	if (!containerElement)
799	continue;	799	continue;
800	auto size = containerRenderer.size();	800
		801	auto size = containerRenderer.logicalSize();
		802
		803	auto sizeChanged = [&](LayoutSize oldSize) {
		804	switch (containerRenderer.style().containerType()) {
		805	case ContainerType::InlineSize:
		806	return size.width() != oldSize.width();
		807	case ContainerType::Size:
		808	return size != oldSize;
		809	case ContainerType::None:
		810	ASSERT_NOT_REACHED();
		811	return false;
		812	}
		813	};
		814
801	auto it = previousStates.find(*containerElement);	815	auto it = previousStates.find(*containerElement);
802	bool changed = it == previousStates.end() \|\| it->value != size;	816	bool changed = it == previousStates.end() \|\| sizeChanged(it->value);
803	if (changed)	817	if (changed)
804	changedContainers.append(containerElement);	818	changedContainers.append(containerElement);
805	m_queryContainerStates.add(*containerElement, size);	819	m_queryContainerStates.add(*containerElement, size);

Lines 1-3 a/Source/WebCore/ChangeLog_sec1
- a/Source/WebCore/ChangeLog +30 lines
		1	2022-02-09 Antti Koivisto <antti@apple.com>
		2
		3	[CSS Container Queries] Implement inline-size containment
		4	https://bugs.webkit.org/show_bug.cgi?id=236354
		5
		6	Reviewed by NOBODY (OOPS!).
		7
		8	"Giving an element inline-size containment applies size containment to the inline-axis sizing
		9	of its principal box. This means the inline-axis intrinsic sizes of the principal box are
		10	determined as if the element had no content."
		11
		12	https://drafts.csswg.org/css-contain-3/#containment-inline-size
		13
		14	* rendering/RenderBlockFlow.cpp:
		15	(WebCore::RenderBlockFlow::computeInlinePreferredLogicalWidths const):
		16
		17	Compute inline axis preferred width as if the block had no content.
		18
		19	* rendering/style/RenderStyle.cpp:
		20	(WebCore::RenderStyle::effectiveContainment const):
		21	* rendering/style/RenderStyleConstants.h:
		22
		23	For completeness, add an enum value for inline-size containment. It can only be set by 'container'
		24	property for now.
		25
		26	* style/StyleScope.cpp:
		27	(WebCore::Style::Scope::updateQueryContainerState):
		28
		29	Ignore block axis for inline-size containers.
		30
1	2022-02-08 Antti Koivisto <antti@apple.com>	31	2022-02-08 Antti Koivisto <antti@apple.com>
2		32
3	[CSS Container Queries] Track query containers so they can be invalidated on size change	33	[CSS Container Queries] Track query containers so they can be invalidated on size change

Lines 1-3 a/LayoutTests/imported/w3c/ChangeLog_sec1
- a/LayoutTests/imported/w3c/ChangeLog +9 lines
		1	2022-02-09 Antti Koivisto <antti@apple.com>
		2
		3	[CSS Container Queries] Implement inline-size containment
		4	https://bugs.webkit.org/show_bug.cgi?id=236354
		5
		6	Reviewed by NOBODY (OOPS!).
		7
		8	* web-platform-tests/css/css-contain/container-queries/container-type-containment-expected.txt:
		9
1	2022-02-08 Antoine Quint <graouts@webkit.org>	10	2022-02-08 Antoine Quint <graouts@webkit.org>
2		11
3	[web-animations] additive and accumulation interpolation does not work correctly with implicit 0% and 100% keyframes	12	[web-animations] additive and accumulation interpolation does not work correctly with implicit 0% and 100% keyframes