Attachment 480533 Details for Bug 318918 – Patch

[patch] Patch

bug-318918-20260712052852.patch (text/plain), 120.24 KB, created by alan on 2026-07-12 05:28:53 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: alan

Created: 2026-07-12 05:28:53 PDT

Size: 120.24 KB

patch

obsolete

>From c062847c3838575cb11710daaf5a4bdd02b1bfb2 Mon Sep 17 00:00:00 2001
>From: Alan Baradlay <zalan@apple.com>
>Date: Wed, 8 Jul 2026 16:02:00 -0700
>Subject: [PATCH] [css-text-4] Implement the wrap-inside property
> https://bugs.webkit.org/show_bug.cgi?id=318918 rdar://181751564
>
>Reviewed by Antti Koivisto.
>
>Add the CSS Text Level 4 'wrap-inside' property (auto | avoid), gated behind the
>cssWrapInsideEnabled setting.
>
>'wrap-inside: avoid' suppresses soft wrap opportunities within an inline box: the
>line breaks before the box - keeping it together - rather than inside it, and
>breaks inside the box only as a last resort when there is no other break
>opportunity on the line. A 'wrap-inside: auto' box nested inside an 'avoid' box
>does not re-enable breaking, and breaks between sibling avoid boxes are preferred
>over breaks inside them.
>
>Whether content is inside an avoid box (the box's own value or inherited from an
>ancestor avoid box) is precomputed during style resolution as
>effectiveWrapInsideAvoid(), so inline layout reads a flat flag and never walks
>the box tree. It propagates only through inline boxes, so it does not cross into
>a block, inline-block or other independent formatting context child. The break
>decision is made by InlineContentBreaker: when the
>overflowing content is inside an avoid box and there is an earlier wrap
>opportunity, it asks the line builder to revert to the last wrap opportunity. The
>line builder records all wrap opportunities and, on such a revert, prefers the
>last one outside any avoid box; when every opportunity is inside an avoid box it
>reverts to the outermost such box - a break in an outer box is used before a
>break within an inner one - breaking inside the box only as a last resort when it
>is the only content on the line.
>
>* LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/all-prop-initial-xml-expected.txt:
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-auto-expected.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-auto-ref.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-auto.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-break-before-then-inside-expected.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-break-before-then-inside-ref.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-break-before-then-inside.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-forced-break-expected.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-forced-break-ref.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-forced-break.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-keeps-box-together-expected.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-keeps-box-together-ref.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-keeps-box-together.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-last-resort-expected.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-last-resort-ref.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-last-resort.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-auto-expected.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-auto-ref.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-auto.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-expected.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-ref.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nowrap-child-expected.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nowrap-child-ref.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nowrap-child.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nowrap-expected.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nowrap-ref.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nowrap.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-siblings-expected.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-siblings-ref.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-siblings.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-single-word-expected.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-single-word-ref.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-single-word.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-computed-expected.txt: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-computed.html: Added.
>* Source/WTF/Scripts/Preferences/UnifiedWebPreferences.yaml: Add cssWrapInsideEnabled.
>* Source/WebCore/css/CSSProperties.json: Add the wrap-inside property.
>* Source/WebCore/layout/formattingContexts/inline/AbstractLineBuilder.h: Add the WrapOpportunityList alias.
>* Source/WebCore/layout/formattingContexts/inline/InlineContentBreaker.cpp:
>(WebCore::Layout::InlineContentBreaker::processOverflowingContent const): Revert to the
>(WebCore::Layout::shouldRevertToEarlierWrapOpportunity):
>last wrap opportunity when overflowing content is inside a wrap-inside: avoid box.
>* Source/WebCore/layout/formattingContexts/inline/InlineLineBuilder.cpp:
>(WebCore::Layout::enclosingBoxForWrapOpportunity):
>(WebCore::Layout::wrapOpportunityToRevertTo): Prefer a wrap opportunity outside any avoid box; when
>all opportunities are inside avoid boxes, revert to the outermost one.
>(WebCore::Layout::LineBuilder::processLineBreakingResult):
>* Source/WebCore/rendering/style/RenderStyleConstants.cpp:
>(WebCore::operator<<):
>* Source/WebCore/rendering/style/RenderStyleConstants.h: Add the WrapInside enum.
>* Source/WebCore/style/StyleAdjuster.cpp:
>(WebCore::Style::Adjuster::adjust const): Compute effectiveWrapInsideAvoid.
>* Source/WebCore/style/computed/StyleComputedStyleBase+GettersInlines.h:
>(WebCore::Style::ComputedStyleBase::effectiveWrapInsideAvoid const):
>* Source/WebCore/style/computed/StyleComputedStyleBase+SettersInlines.h:
>(WebCore::Style::ComputedStyleBase::setEffectiveWrapInsideAvoid):
>* Source/WebCore/style/computed/StyleComputedStyleBase.h:
>* Source/WebCore/style/computed/data/StyleInheritedRareData.cpp:
>(WebCore::Style::InheritedRareData::InheritedRareData):
>(WebCore::Style::InheritedRareData::operator== const):
>(WebCore::Style::InheritedRareData::dumpDifferences const):
>* Source/WebCore/style/computed/data/StyleInheritedRareData.h: Store effectiveWrapInsideAvoid.
>* Source/WebCore/style/computed/data/StyleNonInheritedRareData.cpp:
>(WebCore::Style::NonInheritedRareData::NonInheritedRareData):
>(WebCore::Style::NonInheritedRareData::operator== const):
>(WebCore::Style::NonInheritedRareData::dumpDifferences const):
>* Source/WebCore/style/computed/data/StyleNonInheritedRareData.h: Store wrap-inside.
>* Source/WebCore/style/values/primitives/StyleKeyword+Mappings.h: Map the wrap-inside keywords.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-break-all-expected.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-break-all-ref.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-break-all.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-line-break-anywhere-expected.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-line-break-anywhere-ref.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-line-break-anywhere.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-overflow-wrap-expected.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-overflow-wrap-ref.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-overflow-wrap.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-block-child-expected.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-block-child-ref.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-block-child.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-block-child-expected.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-block-child-ref.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-block-child.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-flex-child-expected.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-flex-child-ref.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-flex-child.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-grid-child-expected.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-grid-child-ref.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-grid-child.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-table-child-expected.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-table-child-ref.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-table-child.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-deep-expected.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-deep-ref.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-deep.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-only-expected.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-only-ref.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-only.html: Added.
>* LayoutTests/platform/glib/imported/w3c/web-platform-tests/css/css-cascade/all-prop-initial-xml-expected.txt:
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-dynamic-expected.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-dynamic-ref.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-dynamic.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-removed-dynamic-expected.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-removed-dynamic-ref.html: Added.
>* LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-removed-dynamic.html: Added.
>* Source/WebCore/style/StyleDifference.cpp:
>* LayoutTests/imported/w3c/web-platform-tests/html/rendering/widgets/shadow-dom-expected.txt:
>---
> .../Preferences/UnifiedWebPreferences.yaml    | 15 ++++++
> Source/WebCore/css/CSSProperties.json         | 19 ++++++++
> .../inline/AbstractLineBuilder.h              |  4 +-
> .../inline/InlineContentBreaker.cpp           | 19 ++++++++
> .../inline/InlineLineBuilder.cpp              | 29 +++++++++++-
> .../rendering/style/RenderStyleConstants.cpp  |  9 ++++
> .../rendering/style/RenderStyleConstants.h    |  6 +++
> Source/WebCore/style/StyleAdjuster.cpp        |  6 +++
> Source/WebCore/style/StyleDifference.cpp      |  1 +
> .../StyleComputedStyleBase+GettersInlines.h   |  5 ++
> .../StyleComputedStyleBase+SettersInlines.h   |  5 ++
> .../style/computed/StyleComputedStyleBase.h   |  4 ++
> .../computed/data/StyleInheritedRareData.cpp  |  4 ++
> .../computed/data/StyleInheritedRareData.h    |  1 +
> .../data/StyleNonInheritedRareData.cpp        |  4 ++
> .../computed/data/StyleNonInheritedRareData.h |  1 +
> .../values/primitives/StyleKeyword+Mappings.h |  6 +++
> .../all-prop-initial-xml-expected.txt         |  1 +
> .../wrap-inside-auto-expected.html            |  8 ++++
> .../wrap-inside/wrap-inside-auto-ref.html     |  8 ++++
> .../wrap-inside/wrap-inside-auto.html         | 11 +++++
> ...rap-inside-avoid-block-child-expected.html |  8 ++++
> .../wrap-inside-avoid-block-child-ref.html    |  8 ++++
> .../wrap-inside-avoid-block-child.html        | 17 +++++++
> .../wrap-inside-avoid-break-all-expected.html |  8 ++++
> .../wrap-inside-avoid-break-all-ref.html      |  8 ++++
> .../wrap-inside-avoid-break-all.html          | 15 ++++++
> ...oid-break-before-then-inside-expected.html |  8 ++++
> ...de-avoid-break-before-then-inside-ref.html |  8 ++++
> ...inside-avoid-break-before-then-inside.html | 16 +++++++
> .../wrap-inside-avoid-dynamic-expected.html   |  8 ++++
> .../wrap-inside-avoid-dynamic-ref.html        |  8 ++++
> .../wrap-inside-avoid-dynamic.html            | 21 +++++++++
> ...ap-inside-avoid-forced-break-expected.html |  8 ++++
> .../wrap-inside-avoid-forced-break-ref.html   |  8 ++++
> .../wrap-inside-avoid-forced-break.html       | 12 +++++
> ...ide-avoid-inline-block-child-expected.html |  8 ++++
> ...p-inside-avoid-inline-block-child-ref.html |  8 ++++
> .../wrap-inside-avoid-inline-block-child.html | 17 +++++++
> ...side-avoid-inline-flex-child-expected.html |  8 ++++
> ...ap-inside-avoid-inline-flex-child-ref.html |  8 ++++
> .../wrap-inside-avoid-inline-flex-child.html  | 17 +++++++
> ...side-avoid-inline-grid-child-expected.html |  8 ++++
> ...ap-inside-avoid-inline-grid-child-ref.html |  8 ++++
> .../wrap-inside-avoid-inline-grid-child.html  | 17 +++++++
> ...ide-avoid-inline-table-child-expected.html |  8 ++++
> ...p-inside-avoid-inline-table-child-ref.html |  8 ++++
> .../wrap-inside-avoid-inline-table-child.html | 17 +++++++
> ...ide-avoid-keeps-box-together-expected.html |  8 ++++
> ...p-inside-avoid-keeps-box-together-ref.html |  8 ++++
> .../wrap-inside-avoid-keeps-box-together.html | 15 ++++++
> ...rap-inside-avoid-last-resort-expected.html |  8 ++++
> .../wrap-inside-avoid-last-resort-ref.html    |  8 ++++
> .../wrap-inside-avoid-last-resort.html        | 15 ++++++
> ...de-avoid-line-break-anywhere-expected.html |  8 ++++
> ...-inside-avoid-line-break-anywhere-ref.html |  8 ++++
> ...wrap-inside-avoid-line-break-anywhere.html | 15 ++++++
> ...rap-inside-avoid-nested-auto-expected.html |  8 ++++
> .../wrap-inside-avoid-nested-auto-ref.html    |  8 ++++
> .../wrap-inside-avoid-nested-auto.html        | 15 ++++++
> ...rap-inside-avoid-nested-deep-expected.html |  8 ++++
> .../wrap-inside-avoid-nested-deep-ref.html    |  8 ++++
> .../wrap-inside-avoid-nested-deep.html        | 16 +++++++
> .../wrap-inside-avoid-nested-expected.html    |  8 ++++
> ...rap-inside-avoid-nested-only-expected.html |  8 ++++
> .../wrap-inside-avoid-nested-only-ref.html    |  8 ++++
> .../wrap-inside-avoid-nested-only.html        | 16 +++++++
> .../wrap-inside-avoid-nested-ref.html         |  8 ++++
> .../wrap-inside/wrap-inside-avoid-nested.html | 12 +++++
> ...ap-inside-avoid-nowrap-child-expected.html |  8 ++++
> .../wrap-inside-avoid-nowrap-child-ref.html   |  8 ++++
> .../wrap-inside-avoid-nowrap-child.html       | 15 ++++++
> .../wrap-inside-avoid-nowrap-expected.html    |  8 ++++
> .../wrap-inside-avoid-nowrap-ref.html         |  8 ++++
> .../wrap-inside/wrap-inside-avoid-nowrap.html | 12 +++++
> ...p-inside-avoid-overflow-wrap-expected.html |  8 ++++
> .../wrap-inside-avoid-overflow-wrap-ref.html  |  8 ++++
> .../wrap-inside-avoid-overflow-wrap.html      | 15 ++++++
> ...inside-avoid-removed-dynamic-expected.html |  8 ++++
> ...wrap-inside-avoid-removed-dynamic-ref.html |  8 ++++
> .../wrap-inside-avoid-removed-dynamic.html    | 21 +++++++++
> .../wrap-inside-avoid-siblings-expected.html  |  8 ++++
> .../wrap-inside-avoid-siblings-ref.html       |  8 ++++
> .../wrap-inside-avoid-siblings.html           | 15 ++++++
> ...rap-inside-avoid-single-word-expected.html |  8 ++++
> .../wrap-inside-avoid-single-word-ref.html    |  8 ++++
> .../wrap-inside-avoid-single-word.html        | 11 +++++
> .../wrap-inside-computed-expected.txt         |  8 ++++
> .../wrap-inside/wrap-inside-computed.html     | 47 +++++++++++++++++++
> .../rendering/widgets/shadow-dom-expected.txt |  8 ++--
> .../all-prop-initial-xml-expected.txt         |  1 +
> 91 files changed, 918 insertions(+), 6 deletions(-)
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-auto-expected.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-auto-ref.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-auto.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-block-child-expected.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-block-child-ref.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-block-child.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-break-all-expected.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-break-all-ref.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-break-all.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-break-before-then-inside-expected.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-break-before-then-inside-ref.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-break-before-then-inside.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-dynamic-expected.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-dynamic-ref.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-dynamic.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-forced-break-expected.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-forced-break-ref.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-forced-break.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-block-child-expected.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-block-child-ref.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-block-child.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-flex-child-expected.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-flex-child-ref.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-flex-child.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-grid-child-expected.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-grid-child-ref.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-grid-child.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-table-child-expected.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-table-child-ref.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-table-child.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-keeps-box-together-expected.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-keeps-box-together-ref.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-keeps-box-together.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-last-resort-expected.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-last-resort-ref.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-last-resort.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-line-break-anywhere-expected.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-line-break-anywhere-ref.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-line-break-anywhere.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-auto-expected.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-auto-ref.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-auto.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-deep-expected.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-deep-ref.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-deep.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-expected.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-only-expected.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-only-ref.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-only.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-ref.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nowrap-child-expected.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nowrap-child-ref.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nowrap-child.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nowrap-expected.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nowrap-ref.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nowrap.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-overflow-wrap-expected.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-overflow-wrap-ref.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-overflow-wrap.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-removed-dynamic-expected.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-removed-dynamic-ref.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-removed-dynamic.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-siblings-expected.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-siblings-ref.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-siblings.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-single-word-expected.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-single-word-ref.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-single-word.html
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-computed-expected.txt
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-computed.html
>
>diff --git a/Source/WTF/Scripts/Preferences/UnifiedWebPreferences.yaml b/Source/WTF/Scripts/Preferences/UnifiedWebPreferences.yaml
>index 7e49e29ae834..b51fbc97024a 100644
>--- a/Source/WTF/Scripts/Preferences/UnifiedWebPreferences.yaml
>+++ b/Source/WTF/Scripts/Preferences/UnifiedWebPreferences.yaml
>@@ -1728,6 +1728,21 @@ CSSWordBreakAutoPhraseEnabled:
>     WebCore:
>       default: false
> 
>+CSSWrapInsideEnabled:
>+  type: bool
>+  status: preview
>+  category: css
>+  webcoreOnChange: setNeedsRecalcStyleInAllFrames
>+  humanReadableName: "CSS wrap-inside property"
>+  humanReadableDescription: "Enable the wrap-inside property, defined in CSS Text 4"
>+  defaultValue:
>+    WebKitLegacy:
>+      default: false
>+    WebKit:
>+      default: false
>+    WebCore:
>+      default: false
>+
> # FIXME: This is not relevent for WebKitLegacy, so should be excluded from WebKitLegacy entirely (though we should still set the default value to false when initializing settings).
> CacheAPIEnabled:
>   type: bool
>diff --git a/Source/WebCore/css/CSSProperties.json b/Source/WebCore/css/CSSProperties.json
>index 2bd391f29ee5..10dbf5d0bd46 100644
>--- a/Source/WebCore/css/CSSProperties.json
>+++ b/Source/WebCore/css/CSSProperties.json
>@@ -9192,6 +9192,25 @@
>                 "url": "https://www.w3.org/TR/css-text/#word-spacing-property"
>             }
>         },
>+        "wrap-inside": {
>+            "animation-type": "discrete",
>+            "initial": "auto",
>+            "values": [
>+                "auto",
>+                "avoid"
>+            ],
>+            "codegen-properties": {
>+                "settings-flag": "cssWrapInsideEnabled",
>+                "computed-style-storage-path": ["m_nonInheritedData", "rareData"],
>+                "computed-style-storage-kind": "enum",
>+                "computed-style-type": "WrapInside",
>+                "parser-grammar": "<<values>>"
>+            },
>+            "specification": {
>+                "category": "css-text",
>+                "url": "https://drafts.csswg.org/css-text-4/#wrap-inside"
>+            }
>+        },
>         "x": {
>             "animation-type": "by computed value",
>             "initial": "0px",
>diff --git a/Source/WebCore/layout/formattingContexts/inline/AbstractLineBuilder.h b/Source/WebCore/layout/formattingContexts/inline/AbstractLineBuilder.h
>index 3f0b7d5c1e9b..306b0cb36818 100644
>--- a/Source/WebCore/layout/formattingContexts/inline/AbstractLineBuilder.h
>+++ b/Source/WebCore/layout/formattingContexts/inline/AbstractLineBuilder.h
>@@ -40,6 +40,8 @@ struct LineInput {
>     InlineRect initialLogicalRect;
> };
> 
>+using WrapOpportunityList = Vector<const InlineItem*, 32>;
>+
> class AbstractLineBuilder {
> public:
>     virtual LineLayoutResult layoutInlineContent(const LineInput&, const std::optional<PreviousLine>&, bool isFirstFormattedLineCandidate) = 0;
>@@ -75,7 +77,7 @@ protected:
>     Line m_line;
>     InlineRect m_lineLogicalRect;
>     std::span<const InlineItem> m_inlineItemList;
>-    Vector<const InlineItem*, 32> m_wrapOpportunityList;
>+    WrapOpportunityList m_wrapOpportunityList;
>     std::optional<InlineTextItem> m_partialLeadingTextItem;
>     std::optional<PreviousLine> m_previousLine { };
>     bool m_isFirstFormattedLineCandidate { false };
>diff --git a/Source/WebCore/layout/formattingContexts/inline/InlineContentBreaker.cpp b/Source/WebCore/layout/formattingContexts/inline/InlineContentBreaker.cpp
>index 2f884fdb8ea2..1c48dc1682bc 100644
>--- a/Source/WebCore/layout/formattingContexts/inline/InlineContentBreaker.cpp
>+++ b/Source/WebCore/layout/formattingContexts/inline/InlineContentBreaker.cpp
>@@ -157,6 +157,19 @@ static inline InlineContentBreaker::PartialRun firstCharacterBreakRespectingLine
>     return { breakPosition, breakWidth };
> }
> 
>+static bool shouldRevertToEarlierWrapOpportunity(const InlineContentBreaker::LineStatus& lineStatus, const InlineContentBreaker::ContinuousContent::RunList& runs, size_t overflowingRunIndex)
>+{
>+    // https://drafts.csswg.org/css-text-4/#wrap-inside
>+    // 'wrap-inside: avoid' suppresses the soft wrap opportunities inside the box, including those introduced by
>+    // word-break: break-all and line-break: anywhere. Breaking inside the box is only a last resort, so when there
>+    // is an earlier wrap opportunity to fall back to, revert to it rather than ending the line inside the box.
>+    if (!lineStatus.hasWrapOpportunityAtPreviousPosition)
>+        return false;
>+    auto& overflowingBox = runs[overflowingRunIndex].inlineItem.layoutBox();
>+    auto& styleToUse = overflowingBox.isInlineBox() ? overflowingBox.style() : overflowingBox.parent().style();
>+    return styleToUse.effectiveWrapInsideAvoid();
>+}
>+
> InlineContentBreaker::Result InlineContentBreaker::processOverflowingContent(const ContinuousContent& continuousContent, const LineStatus& lineStatus) const
> {
>     ASSERT(!continuousContent.runs().isEmpty());
>@@ -210,6 +223,8 @@ InlineContentBreaker::Result InlineContentBreaker::processOverflowingContent(con
>             overflowingRunIndex = overflowingContent.runIndex;
>             if (!overflowingContent.breakingPosition)
>                 return { };
>+            if (shouldRevertToEarlierWrapOpportunity(lineStatus, continuousContent.runs(), overflowingRunIndex))
>+                return Result { Result::Action::RevertToLastWrapOpportunity, IsEndOfLine::Yes };
>             auto trailingContent = overflowingContent.breakingPosition->trailingContent;
>             if (!trailingContent) {
>                 // We tried to break the content but the available space can't even accommodate the first glyph.
>@@ -274,6 +289,10 @@ InlineContentBreaker::Result InlineContentBreaker::processOverflowingContent(con
>     // If we are not allowed to break this overflowing content, we still need to decide whether keep it or wrap it to the next line.
>     if (!lineStatus.hasContent)
>         return { Result::Action::Keep, IsEndOfLine::No };
>+
>+    if (shouldRevertToEarlierWrapOpportunity(lineStatus, continuousContent.runs(), overflowingRunIndex))
>+        return { Result::Action::RevertToLastWrapOpportunity, IsEndOfLine::Yes };
>+
>     // Now either wrap this content over to the next line or revert back to an earlier wrapping opportunity, or not wrap at all.
>     auto shouldWrapUnbreakableContentToNextLine = [&] {
>         // The individual runs in this continuous content don't break, let's check if we are allowed to wrap this content to next line (e.g. pre would prevent us from wrapping).
>diff --git a/Source/WebCore/layout/formattingContexts/inline/InlineLineBuilder.cpp b/Source/WebCore/layout/formattingContexts/inline/InlineLineBuilder.cpp
>index 03bd28ee7065..29f3bfff0672 100644
>--- a/Source/WebCore/layout/formattingContexts/inline/InlineLineBuilder.cpp
>+++ b/Source/WebCore/layout/formattingContexts/inline/InlineLineBuilder.cpp
>@@ -1723,6 +1723,33 @@ void LineBuilder::commitCandidateContent(LineCandidate& lineCandidate, std::opti
>     }
> }
> 
>+static const InlineItem& NODELETE wrapOpportunityToRevertTo(const WrapOpportunityList& wrapOpportunityList)
>+{
>+    ASSERT(!wrapOpportunityList.isEmpty());
>+    auto enclosingBoxForWrapOpportunity = [](auto& wrapOpportunity) -> const Box& {
>+        // Inline boxes set the wrapping rules for their content and not for themselves, so the box that encloses a wrap
>+        // opportunity is the inline box its trailing content belongs to.
>+        auto& layoutBox = wrapOpportunity.layoutBox();
>+        return layoutBox.isInlineBox() ? layoutBox : layoutBox.parent();
>+    };
>+
>+    // https://drafts.csswg.org/css-text-4/#wrap-inside
>+    // Prefer the last wrap opportunity that is outside any wrap-inside: avoid box.
>+    for (auto* wrapOpportunity : wrapOpportunityList | std::views::reverse) {
>+        if (!enclosingBoxForWrapOpportunity(*wrapOpportunity).style().effectiveWrapInsideAvoid())
>+            return *wrapOpportunity;
>+    }
>+    // Every opportunity is inside an avoid box, so we must break within one. "A break in an outer box must be used
>+    // before a break within an inner box", so revert to the last opportunity sitting directly in an outermost avoid box
>+    // - one whose enclosing box is not itself inside another avoid box.
>+    for (auto* wrapOpportunity : wrapOpportunityList | std::views::reverse) {
>+        if (!enclosingBoxForWrapOpportunity(*wrapOpportunity).parent().style().effectiveWrapInsideAvoid())
>+            return *wrapOpportunity;
>+    }
>+    // The outermost avoid box is the only content on the line; break inside it as a last resort.
>+    return *wrapOpportunityList.last();
>+}
>+
> LineBuilder::Result LineBuilder::processLineBreakingResult(LineCandidate& lineCandidate, const InlineItemRange& layoutRange, const InlineContentBreaker::Result& lineBreakingResult)
> {
>     auto& candidateRuns = lineCandidate.inlineContent.continuousContent().runs();
>@@ -1780,7 +1807,7 @@ LineBuilder::Result LineBuilder::processLineBreakingResult(LineCandidate& lineCa
>         ASSERT(lineBreakingResult.isEndOfLine == InlineContentBreaker::IsEndOfLine::Yes);
>         // Not only this content can't be placed on the current line, but we even need to revert the line back to an earlier position.
>         ASSERT(!m_wrapOpportunityList.isEmpty());
>-        return { InlineContentBreaker::IsEndOfLine::Yes, { rebuildLineWithInlineContent(layoutRange, *m_wrapOpportunityList.last()), true } };
>+        return { InlineContentBreaker::IsEndOfLine::Yes, { rebuildLineWithInlineContent(layoutRange, wrapOpportunityToRevertTo(m_wrapOpportunityList)), true } };
>     case InlineContentBreaker::Result::Action::RevertToLastNonOverflowingWrapOpportunity:
>         ASSERT(lineBreakingResult.isEndOfLine == InlineContentBreaker::IsEndOfLine::Yes);
>         ASSERT(!m_wrapOpportunityList.isEmpty());
>diff --git a/Source/WebCore/rendering/style/RenderStyleConstants.cpp b/Source/WebCore/rendering/style/RenderStyleConstants.cpp
>index 59f89928b533..4c50ccd0f323 100644
>--- a/Source/WebCore/rendering/style/RenderStyleConstants.cpp
>+++ b/Source/WebCore/rendering/style/RenderStyleConstants.cpp
>@@ -1159,6 +1159,15 @@ TextStream& operator<<(TextStream& ts, TextWrapStyle style)
>     return ts;
> }
> 
>+TextStream& operator<<(TextStream& ts, WrapInside wrapInside)
>+{
>+    switch (wrapInside) {
>+    case WrapInside::Auto: ts << "auto"_s; break;
>+    case WrapInside::Avoid: ts << "avoid"_s; break;
>+    }
>+    return ts;
>+}
>+
> TextStream& operator<<(TextStream& ts, TextBoxTrim textBoxTrim)
> {
>     switch (textBoxTrim) {
>diff --git a/Source/WebCore/rendering/style/RenderStyleConstants.h b/Source/WebCore/rendering/style/RenderStyleConstants.h
>index cd20bd6fa8ab..56ad054f80fc 100644
>--- a/Source/WebCore/rendering/style/RenderStyleConstants.h
>+++ b/Source/WebCore/rendering/style/RenderStyleConstants.h
>@@ -806,6 +806,11 @@ enum class TextWrapStyle : uint8_t {
>     Stable
> };
> 
>+enum class WrapInside : bool {
>+    Auto,
>+    Avoid
>+};
>+
> enum class ImageRendering : uint8_t {
>     Auto = 0,
>     OptimizeSpeed,
>@@ -1218,6 +1223,7 @@ WTF::TextStream& operator<<(WTF::TextStream&, TextOverflow);
> WTF::TextStream& operator<<(WTF::TextStream&, TextSecurity);
> WTF::TextStream& operator<<(WTF::TextStream&, TextWrapMode);
> WTF::TextStream& operator<<(WTF::TextStream&, TextWrapStyle);
>+WTF::TextStream& operator<<(WTF::TextStream&, WrapInside);
> WTF::TextStream& operator<<(WTF::TextStream&, TextBoxTrim);
> WTF::TextStream& operator<<(WTF::TextStream&, TextEdgeOver);
> WTF::TextStream& operator<<(WTF::TextStream&, TextEdgeUnder);
>diff --git a/Source/WebCore/style/StyleAdjuster.cpp b/Source/WebCore/style/StyleAdjuster.cpp
>index 1a1b0d9d6a5f..c76c95b36638 100644
>--- a/Source/WebCore/style/StyleAdjuster.cpp
>+++ b/Source/WebCore/style/StyleAdjuster.cpp
>@@ -728,6 +728,12 @@ void Adjuster::adjust(Style::ComputedStyle& style) const
> 
>     style.setIsEffectivelyTransparent(style.opacity().isTransparent() || m_parentStyle.isEffectivelyTransparent());
> 
>+    // https://drafts.csswg.org/css-text-4/#wrap-inside
>+    // wrap-inside is not inherited, but its "avoid" effect applies to soft wrap opportunities within the box's own inline
>+    // formatting context. Propagate it from an inline box to its in-flow content.
>+    bool isInlineBox = style.display() == DisplayType::InlineFlow || style.display() == DisplayType::InlineRuby || style.display() == DisplayType::RubyBase;
>+    style.setEffectiveWrapInsideAvoid(style.wrapInside() == WrapInside::Avoid || (isInlineBox && m_parentStyle.effectiveWrapInsideAvoid()));
>+
>     if (RefPtr element = dynamicDowncast<SVGElement>(m_element))
>         adjustSVGElementStyle(style, *element);
> 
>diff --git a/Source/WebCore/style/StyleDifference.cpp b/Source/WebCore/style/StyleDifference.cpp
>index fc7d4fcd1864..62a80d4227db 100644
>--- a/Source/WebCore/style/StyleDifference.cpp
>+++ b/Source/WebCore/style/StyleDifference.cpp
>@@ -349,6 +349,7 @@ public:
>     #endif
>             || a.wordBreak != b.wordBreak
>             || a.overflowWrap != b.overflowWrap
>+            || a.effectiveWrapInsideAvoid != b.effectiveWrapInsideAvoid
>             || a.nbspMode != b.nbspMode
>             || a.lineBreak != b.lineBreak
>             || a.textSecurity != b.textSecurity
>diff --git a/Source/WebCore/style/computed/StyleComputedStyleBase+GettersInlines.h b/Source/WebCore/style/computed/StyleComputedStyleBase+GettersInlines.h
>index 1c99221aa91c..731bf74960b5 100644
>--- a/Source/WebCore/style/computed/StyleComputedStyleBase+GettersInlines.h
>+++ b/Source/WebCore/style/computed/StyleComputedStyleBase+GettersInlines.h
>@@ -154,6 +154,11 @@ inline bool ComputedStyleBase::isEffectivelyTransparent() const
>     return m_inheritedRareData->effectivelyTransparent;
> }
> 
>+inline bool ComputedStyleBase::effectiveWrapInsideAvoid() const
>+{
>+    return m_inheritedRareData->effectiveWrapInsideAvoid;
>+}
>+
> inline bool ComputedStyleBase::insideDefaultButton() const
> {
>     return m_inheritedRareData->insideDefaultButton;
>diff --git a/Source/WebCore/style/computed/StyleComputedStyleBase+SettersInlines.h b/Source/WebCore/style/computed/StyleComputedStyleBase+SettersInlines.h
>index e5cc9edb4383..dce232102569 100644
>--- a/Source/WebCore/style/computed/StyleComputedStyleBase+SettersInlines.h
>+++ b/Source/WebCore/style/computed/StyleComputedStyleBase+SettersInlines.h
>@@ -113,6 +113,11 @@ inline void ComputedStyleBase::setIsEffectivelyTransparent(bool effectivelyTrans
>     SET(m_inheritedRareData, effectivelyTransparent, effectivelyTransparent);
> }
> 
>+inline void ComputedStyleBase::setEffectiveWrapInsideAvoid(bool effectiveWrapInsideAvoid)
>+{
>+    SET(m_inheritedRareData, effectiveWrapInsideAvoid, effectiveWrapInsideAvoid);
>+}
>+
> inline void ComputedStyleBase::setEventListenerRegionTypes(OptionSet<EventListenerRegionType> eventListenerTypes)
> {
>     SET(m_inheritedRareData, eventListenerRegionTypes, eventListenerTypes);
>diff --git a/Source/WebCore/style/computed/StyleComputedStyleBase.h b/Source/WebCore/style/computed/StyleComputedStyleBase.h
>index 99f205cc0eef..c731cc3350a7 100644
>--- a/Source/WebCore/style/computed/StyleComputedStyleBase.h
>+++ b/Source/WebCore/style/computed/StyleComputedStyleBase.h
>@@ -185,6 +185,7 @@ enum class WhiteSpace : uint8_t;
> enum class WhiteSpaceCollapse : uint8_t;
> enum class WindRule : bool;
> enum class WordBreak : uint8_t;
>+enum class WrapInside : bool;
> 
> struct BorderData;
> struct BorderValue;
>@@ -538,6 +539,9 @@ public:
>     inline bool isEffectivelyTransparent() const; // This or any ancestor has opacity 0.
>     inline void setIsEffectivelyTransparent(bool);
> 
>+    inline bool effectiveWrapInsideAvoid() const; // This box or any ancestor has wrap-inside: avoid.
>+    inline void setEffectiveWrapInsideAvoid(bool);
>+
>     // No setter. Set via `ComputedStyleProperties::setDisplay()`.
>     inline constexpr Display originalDisplay() const;
> 
>diff --git a/Source/WebCore/style/computed/data/StyleInheritedRareData.cpp b/Source/WebCore/style/computed/data/StyleInheritedRareData.cpp
>index 6b2b85981428..b36c5956902b 100644
>--- a/Source/WebCore/style/computed/data/StyleInheritedRareData.cpp
>+++ b/Source/WebCore/style/computed/data/StyleInheritedRareData.cpp
>@@ -125,6 +125,7 @@ InheritedRareData::InheritedRareData()
>     , hasExplicitlySetStrokeColor(false)
>     , effectiveInert(false)
>     , effectivelyTransparent(false)
>+    , effectiveWrapInsideAvoid(false)
>     , isInSubtreeWithBlendMode(false)
>     , isForceHidden(false)
>     , usedContentVisibility(static_cast<unsigned>(ContentVisibility::Visible))
>@@ -231,6 +232,7 @@ inline InheritedRareData::InheritedRareData(const InheritedRareData& o)
>     , hasExplicitlySetStrokeColor(o.hasExplicitlySetStrokeColor)
>     , effectiveInert(o.effectiveInert)
>     , effectivelyTransparent(o.effectivelyTransparent)
>+    , effectiveWrapInsideAvoid(o.effectiveWrapInsideAvoid)
>     , isInSubtreeWithBlendMode(o.isInSubtreeWithBlendMode)
>     , isForceHidden(o.isForceHidden)
>     , usedContentVisibility(o.usedContentVisibility)
>@@ -340,6 +342,7 @@ bool InheritedRareData::operator==(const InheritedRareData& o) const
>         && eventListenerRegionTypes == o.eventListenerRegionTypes
>         && effectiveInert == o.effectiveInert
>         && effectivelyTransparent == o.effectivelyTransparent
>+        && effectiveWrapInsideAvoid == o.effectiveWrapInsideAvoid
>         && usedContentVisibility == o.usedContentVisibility
>         && insideDefaultButton == o.insideDefaultButton
>         && insideSubmitButton == o.insideSubmitButton
>@@ -457,6 +460,7 @@ void InheritedRareData::dumpDifferences(TextStream& ts, const InheritedRareData&
> 
>     LOG_IF_DIFFERENT_WITH_CAST(bool, effectiveInert);
>     LOG_IF_DIFFERENT_WITH_CAST(bool, effectivelyTransparent);
>+    LOG_IF_DIFFERENT_WITH_CAST(bool, effectiveWrapInsideAvoid);
> 
>     LOG_IF_DIFFERENT_WITH_CAST(bool, isInSubtreeWithBlendMode);
>     LOG_IF_DIFFERENT_WITH_CAST(bool, isForceHidden);
>diff --git a/Source/WebCore/style/computed/data/StyleInheritedRareData.h b/Source/WebCore/style/computed/data/StyleInheritedRareData.h
>index bfd467eaec42..b643d719b929 100644
>--- a/Source/WebCore/style/computed/data/StyleInheritedRareData.h
>+++ b/Source/WebCore/style/computed/data/StyleInheritedRareData.h
>@@ -217,6 +217,7 @@ public:
>     PREFERRED_TYPE(bool) unsigned hasExplicitlySetStrokeColor : 1;
>     PREFERRED_TYPE(bool) unsigned effectiveInert : 1;
>     PREFERRED_TYPE(bool) unsigned effectivelyTransparent : 1;
>+    PREFERRED_TYPE(bool) unsigned effectiveWrapInsideAvoid : 1; // This box or an ancestor has wrap-inside: avoid.
>     PREFERRED_TYPE(bool) unsigned isInSubtreeWithBlendMode : 1;
>     PREFERRED_TYPE(bool) unsigned isForceHidden : 1;
>     PREFERRED_TYPE(ContentVisibility) unsigned usedContentVisibility : 2;
>diff --git a/Source/WebCore/style/computed/data/StyleNonInheritedRareData.cpp b/Source/WebCore/style/computed/data/StyleNonInheritedRareData.cpp
>index d96037905a9d..31c94928c1c9 100644
>--- a/Source/WebCore/style/computed/data/StyleNonInheritedRareData.cpp
>+++ b/Source/WebCore/style/computed/data/StyleNonInheritedRareData.cpp
>@@ -125,6 +125,7 @@ NonInheritedRareData::NonInheritedRareData()
>     , positionTryOrder(static_cast<unsigned>(ComputedStyle::initialPositionTryOrder()))
>     , positionVisibility(ComputedStyle::initialPositionVisibility().toRaw())
>     , fieldSizing(static_cast<unsigned>(ComputedStyle::initialFieldSizing()))
>+    , wrapInside(static_cast<unsigned>(ComputedStyle::initialWrapInside()))
>     , nativeAppearanceDisabled(static_cast<unsigned>(false))
> #if HAVE(CORE_MATERIAL)
>     , appleVisualEffect(static_cast<unsigned>(ComputedStyle::initialAppleVisualEffect()))
>@@ -233,6 +234,7 @@ inline NonInheritedRareData::NonInheritedRareData(const NonInheritedRareData& o)
>     , positionTryOrder(o.positionTryOrder)
>     , positionVisibility(o.positionVisibility)
>     , fieldSizing(o.fieldSizing)
>+    , wrapInside(o.wrapInside)
>     , nativeAppearanceDisabled(o.nativeAppearanceDisabled)
> #if HAVE(CORE_MATERIAL)
>     , appleVisualEffect(o.appleVisualEffect)
>@@ -348,6 +350,7 @@ bool NonInheritedRareData::operator==(const NonInheritedRareData& o) const
>         && positionTryOrder == o.positionTryOrder
>         && positionVisibility == o.positionVisibility
>         && fieldSizing == o.fieldSizing
>+        && wrapInside == o.wrapInside
>         && nativeAppearanceDisabled == o.nativeAppearanceDisabled
> #if HAVE(CORE_MATERIAL)
>         && appleVisualEffect == o.appleVisualEffect
>@@ -507,6 +510,7 @@ void NonInheritedRareData::dumpDifferences(TextStream& ts, const NonInheritedRar
>     LOG_IF_DIFFERENT_WITH_CAST(OverflowAnchor, overflowAnchor);
>     LOG_IF_DIFFERENT_WITH_CAST(PositionTryOrder, positionTryOrder);
>     LOG_IF_DIFFERENT_WITH_CAST(FieldSizing, fieldSizing);
>+    LOG_IF_DIFFERENT_WITH_CAST(WrapInside, wrapInside);
> 
>     LOG_IF_DIFFERENT_WITH_CAST(bool, nativeAppearanceDisabled);
> 
>diff --git a/Source/WebCore/style/computed/data/StyleNonInheritedRareData.h b/Source/WebCore/style/computed/data/StyleNonInheritedRareData.h
>index 47ec3e37fae9..179bdc1b7c62 100644
>--- a/Source/WebCore/style/computed/data/StyleNonInheritedRareData.h
>+++ b/Source/WebCore/style/computed/data/StyleNonInheritedRareData.h
>@@ -240,6 +240,7 @@ public:
>     PREFERRED_TYPE(PositionTryOrder) unsigned positionTryOrder : 3;
>     PREFERRED_TYPE(PositionVisibility) unsigned positionVisibility : 5;
>     PREFERRED_TYPE(FieldSizing) unsigned fieldSizing : 1;
>+    PREFERRED_TYPE(WrapInside) unsigned wrapInside : 1;
>     PREFERRED_TYPE(bool) unsigned nativeAppearanceDisabled : 1;
> #if HAVE(CORE_MATERIAL)
>     PREFERRED_TYPE(AppleVisualEffect) unsigned appleVisualEffect : 5;
>diff --git a/Source/WebCore/style/values/primitives/StyleKeyword+Mappings.h b/Source/WebCore/style/values/primitives/StyleKeyword+Mappings.h
>index 77fd4f851147..441bf149281b 100644
>--- a/Source/WebCore/style/values/primitives/StyleKeyword+Mappings.h
>+++ b/Source/WebCore/style/values/primitives/StyleKeyword+Mappings.h
>@@ -1447,6 +1447,12 @@ DEFINE_TO_FROM_CSS_VALUE_ID_FUNCTIONS
> #undef TYPE
> #undef FOR_EACH
> 
>+#define TYPE WrapInside
>+#define FOR_EACH(CASE) CASE(Auto) CASE(Avoid)
>+DEFINE_TO_FROM_CSS_VALUE_ID_FUNCTIONS
>+#undef TYPE
>+#undef FOR_EACH
>+
> #define TYPE TextEmphasisFill
> #define FOR_EACH(CASE) CASE(Filled) CASE(Open)
> DEFINE_TO_FROM_CSS_VALUE_ID_FUNCTIONS
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/all-prop-initial-xml-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/all-prop-initial-xml-expected.txt
>index 1ba82c0506ca..82a9b315974e 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/all-prop-initial-xml-expected.txt
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/all-prop-initial-xml-expected.txt
>@@ -402,6 +402,7 @@ PASS width
> PASS will-change
> PASS word-break
> PASS word-spacing
>+PASS wrap-inside
> PASS writing-mode
> PASS x
> PASS y
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-auto-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-auto-expected.html
>new file mode 100644
>index 000000000000..6bd0df22a25f
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-auto-expected.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: auto allows breaking inside the box (control)</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>XX YY<br>ZZ</div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-auto-ref.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-auto-ref.html
>new file mode 100644
>index 000000000000..6bd0df22a25f
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-auto-ref.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: auto allows breaking inside the box (control)</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>XX YY<br>ZZ</div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-auto.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-auto.html
>new file mode 100644
>index 000000000000..40bdeeacf3df
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-auto.html
>@@ -0,0 +1,11 @@
>+<!DOCTYPE html> 
>+<meta charset="utf-8">
>+<title>wrap-inside: auto allows breaking inside the box (control)</title>
>+<link rel="help" href="https://drafts.csswg.org/css-text-4/#wrap-inside">
>+<link rel="match" href="wrap-inside-auto-ref.html">
>+<meta name="assert" content="With the initial 'wrap-inside: auto' the box breaks internally just like normal content: 'XX YY' / 'ZZ'. This is the counterpart to wrap-inside-avoid-keeps-box-together.html.">
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>XX <span style="wrap-inside: auto">YY ZZ</span></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-block-child-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-block-child-expected.html
>new file mode 100644
>index 000000000000..4048c362cc00
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-block-child-expected.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid does not propagate into a block-level child</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div><div>WW<br>XX YY</div></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-block-child-ref.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-block-child-ref.html
>new file mode 100644
>index 000000000000..4048c362cc00
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-block-child-ref.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid does not propagate into a block-level child</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div><div>WW<br>XX YY</div></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-block-child.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-block-child.html
>new file mode 100644
>index 000000000000..e1643c05963f
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-block-child.html
>@@ -0,0 +1,17 @@
>+<!DOCTYPE html> 
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid does not propagate into a block-level child</title>
>+<link rel="help" href="https://drafts.csswg.org/css-text-4/#wrap-inside">
>+<link rel="match" href="wrap-inside-avoid-block-child-ref.html">
>+<meta name="assert" content="The 'avoid' effect of an inline box does not propagate across a formatting context boundary: a block-level child does not inherit the effective avoid, so its own content wraps normally and only its explicit inner avoid box is kept together.">
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+
>+<div><span style="wrap-inside: avoid"><div>WW <span style="wrap-inside: avoid">XX YY</span></div></span></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-break-all-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-break-all-expected.html
>new file mode 100644
>index 000000000000..643bbd610f37
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-break-all-expected.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid suppresses word-break: break-all opportunities inside the box</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 90px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>XX<br>YYYY</div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-break-all-ref.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-break-all-ref.html
>new file mode 100644
>index 000000000000..643bbd610f37
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-break-all-ref.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid suppresses word-break: break-all opportunities inside the box</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 90px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>XX<br>YYYY</div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-break-all.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-break-all.html
>new file mode 100644
>index 000000000000..0b6e4ee08135
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-break-all.html
>@@ -0,0 +1,15 @@
>+<!DOCTYPE html> 
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid suppresses word-break: break-all opportunities inside the box</title>
>+<link rel="help" href="https://drafts.csswg.org/css-text-4/#wrap-inside">
>+<link rel="match" href="wrap-inside-avoid-break-all-ref.html">
>+<meta name="assert" content="'word-break: break-all' adds soft wrap opportunities within the box, but 'wrap-inside: avoid' suppresses them: the line breaks before the box rather than mid-word, when there is a break opportunity outside the box.">
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 90px; font: 20px/20px Ahem; color: green; }
>+</style>
>+
>+<div>XX <span style="wrap-inside: avoid; word-break: break-all">YYYY</span></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-break-before-then-inside-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-break-before-then-inside-expected.html
>new file mode 100644
>index 000000000000..3962160b9454
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-break-before-then-inside-expected.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid breaks before the box, then inside it as a last resort</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 90px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>X<br>AA<br>BB</div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-break-before-then-inside-ref.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-break-before-then-inside-ref.html
>new file mode 100644
>index 000000000000..3962160b9454
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-break-before-then-inside-ref.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid breaks before the box, then inside it as a last resort</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 90px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>X<br>AA<br>BB</div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-break-before-then-inside.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-break-before-then-inside.html
>new file mode 100644
>index 000000000000..5a78a1162b86
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-break-before-then-inside.html
>@@ -0,0 +1,16 @@
>+<!DOCTYPE html> 
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid breaks before the box, then inside it as a last resort</title>
>+<link rel="help" href="https://drafts.csswg.org/css-text-4/#wrap-inside">
>+<link rel="match" href="wrap-inside-avoid-break-before-then-inside-ref.html">
>+<meta name="assert" content="'wrap-inside: avoid' breaks before the box even though box content would otherwise fit on the first line, then breaks the box internally on the next line because it alone does not fit: 'X' / 'AA' / 'BB'.">
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 90px; font: 20px/20px Ahem; color: green; }
>+</style>
>+
>+<div>X <span style="wrap-inside: avoid">AA BB</span></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-dynamic-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-dynamic-expected.html
>new file mode 100644
>index 000000000000..ac9f128977db
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-dynamic-expected.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid triggers relayout when set dynamically</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>XX<br>YY ZZ</div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-dynamic-ref.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-dynamic-ref.html
>new file mode 100644
>index 000000000000..ac9f128977db
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-dynamic-ref.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid triggers relayout when set dynamically</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>XX<br>YY ZZ</div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-dynamic.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-dynamic.html
>new file mode 100644
>index 000000000000..1633adc82488
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-dynamic.html
>@@ -0,0 +1,21 @@
>+<!DOCTYPE html> 
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid triggers relayout when set dynamically</title>
>+<link rel="help" href="https://drafts.csswg.org/css-text-4/#wrap-inside">
>+<link rel="match" href="wrap-inside-avoid-dynamic-ref.html">
>+<meta name="assert" content="Changing wrap-inside to 'avoid' on an already-laid-out inline box re-runs line layout: the box that used to break inside is now kept together by breaking before it.">
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+
>+<div>XX <span id="target">YY ZZ</span></div>
>+<script>
>+    // Force layout in the initial (auto) state so the change below must trigger a relayout.
>+    document.body.offsetTop;
>+    document.getElementById("target").style.wrapInside = "avoid";
>+</script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-forced-break-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-forced-break-expected.html
>new file mode 100644
>index 000000000000..dbc26701655b
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-forced-break-expected.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid does not suppress forced line breaks</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 200px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>AA<br>BB</div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-forced-break-ref.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-forced-break-ref.html
>new file mode 100644
>index 000000000000..dbc26701655b
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-forced-break-ref.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid does not suppress forced line breaks</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 200px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>AA<br>BB</div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-forced-break.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-forced-break.html
>new file mode 100644
>index 000000000000..e6cae9675288
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-forced-break.html
>@@ -0,0 +1,12 @@
>+<!DOCTYPE html> 
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid does not suppress forced line breaks</title>
>+<link rel="help" href="https://drafts.csswg.org/css-text-4/#wrap-inside">
>+<link rel="match" href="wrap-inside-avoid-forced-break-ref.html">
>+<meta name="assert" content="'wrap-inside: avoid' only suppresses soft wrap opportunities; a forced break (br) inside the box is still honored even though the box would otherwise fit on one line.">
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 200px; font: 20px/20px Ahem; color: green; }
>+</style>
>+
>+<div><span style="wrap-inside: avoid">AA<br>BB</span></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-block-child-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-block-child-expected.html
>new file mode 100644
>index 000000000000..0cb3ee070746
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-block-child-expected.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid does not propagate into an inline-block child</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div><span style="display: inline-block; width: 110px">WW<br>XX YY</span></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-block-child-ref.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-block-child-ref.html
>new file mode 100644
>index 000000000000..0cb3ee070746
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-block-child-ref.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid does not propagate into an inline-block child</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div><span style="display: inline-block; width: 110px">WW<br>XX YY</span></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-block-child.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-block-child.html
>new file mode 100644
>index 000000000000..ba2aed28c98b
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-block-child.html
>@@ -0,0 +1,17 @@
>+<!DOCTYPE html> 
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid does not propagate into an inline-block child</title>
>+<link rel="help" href="https://drafts.csswg.org/css-text-4/#wrap-inside">
>+<link rel="match" href="wrap-inside-avoid-inline-block-child-ref.html">
>+<meta name="assert" content="The 'avoid' effect of an inline box does not propagate across a formatting context boundary: an inline-block child does not inherit the effective avoid, so its own content wraps normally and only its explicit inner avoid box is kept together.">
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+
>+<div><span style="wrap-inside: avoid"><span style="display: inline-block; width: 110px">WW <span style="wrap-inside: avoid">XX YY</span></span></span></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-flex-child-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-flex-child-expected.html
>new file mode 100644
>index 000000000000..7e8c269f5db8
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-flex-child-expected.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid does not propagate into an inline-flex child</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div><span style="display: inline-flex"><div>WW<br>XX YY</div></span></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-flex-child-ref.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-flex-child-ref.html
>new file mode 100644
>index 000000000000..7e8c269f5db8
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-flex-child-ref.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid does not propagate into an inline-flex child</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div><span style="display: inline-flex"><div>WW<br>XX YY</div></span></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-flex-child.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-flex-child.html
>new file mode 100644
>index 000000000000..d5fc9c7d1f84
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-flex-child.html
>@@ -0,0 +1,17 @@
>+<!DOCTYPE html> 
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid does not propagate into an inline-flex child</title>
>+<link rel="help" href="https://drafts.csswg.org/css-text-4/#wrap-inside">
>+<link rel="match" href="wrap-inside-avoid-inline-flex-child-ref.html">
>+<meta name="assert" content="The 'avoid' effect of an inline box does not propagate across a formatting context boundary: an inline-flex child does not inherit the effective avoid, so the content of its flex item wraps normally and only its explicit inner avoid box is kept together.">
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+
>+<div><span style="wrap-inside: avoid"><span style="display: inline-flex"><div>WW <span style="wrap-inside: avoid">XX YY</span></div></span></span></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-grid-child-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-grid-child-expected.html
>new file mode 100644
>index 000000000000..459f19b11b8d
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-grid-child-expected.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid does not propagate into an inline-grid child</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div><span style="display: inline-grid"><div>WW<br>XX YY</div></span></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-grid-child-ref.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-grid-child-ref.html
>new file mode 100644
>index 000000000000..459f19b11b8d
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-grid-child-ref.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid does not propagate into an inline-grid child</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div><span style="display: inline-grid"><div>WW<br>XX YY</div></span></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-grid-child.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-grid-child.html
>new file mode 100644
>index 000000000000..916489d020cd
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-grid-child.html
>@@ -0,0 +1,17 @@
>+<!DOCTYPE html> 
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid does not propagate into an inline-grid child</title>
>+<link rel="help" href="https://drafts.csswg.org/css-text-4/#wrap-inside">
>+<link rel="match" href="wrap-inside-avoid-inline-grid-child-ref.html">
>+<meta name="assert" content="The 'avoid' effect of an inline box does not propagate across a formatting context boundary: an inline-grid child does not inherit the effective avoid, so the content of its grid item wraps normally and only its explicit inner avoid box is kept together.">
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+
>+<div><span style="wrap-inside: avoid"><span style="display: inline-grid"><div>WW <span style="wrap-inside: avoid">XX YY</span></div></span></span></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-table-child-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-table-child-expected.html
>new file mode 100644
>index 000000000000..402d13e98a0c
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-table-child-expected.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid does not propagate into an inline-table child</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div><span style="display: inline-table"><div>WW<br>XX YY</div></span></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-table-child-ref.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-table-child-ref.html
>new file mode 100644
>index 000000000000..402d13e98a0c
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-table-child-ref.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid does not propagate into an inline-table child</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div><span style="display: inline-table"><div>WW<br>XX YY</div></span></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-table-child.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-table-child.html
>new file mode 100644
>index 000000000000..44c7b5c6410f
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-inline-table-child.html
>@@ -0,0 +1,17 @@
>+<!DOCTYPE html> 
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid does not propagate into an inline-table child</title>
>+<link rel="help" href="https://drafts.csswg.org/css-text-4/#wrap-inside">
>+<link rel="match" href="wrap-inside-avoid-inline-table-child-ref.html">
>+<meta name="assert" content="The 'avoid' effect of an inline box does not propagate across a formatting context boundary: an inline-table child does not inherit the effective avoid, so the content of its cell wraps normally and only its explicit inner avoid box is kept together.">
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+
>+<div><span style="wrap-inside: avoid"><span style="display: inline-table"><div>WW <span style="wrap-inside: avoid">XX YY</span></div></span></span></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-keeps-box-together-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-keeps-box-together-expected.html
>new file mode 100644
>index 000000000000..ae042ef3690a
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-keeps-box-together-expected.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid keeps an inline box together by breaking before it</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>XX<br>YY ZZ</div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-keeps-box-together-ref.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-keeps-box-together-ref.html
>new file mode 100644
>index 000000000000..ae042ef3690a
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-keeps-box-together-ref.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid keeps an inline box together by breaking before it</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>XX<br>YY ZZ</div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-keeps-box-together.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-keeps-box-together.html
>new file mode 100644
>index 000000000000..bd9b8c53be60
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-keeps-box-together.html
>@@ -0,0 +1,15 @@
>+<!DOCTYPE html> 
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid keeps an inline box together by breaking before it</title>
>+<link rel="help" href="https://drafts.csswg.org/css-text-4/#wrap-inside">
>+<link rel="match" href="wrap-inside-avoid-keeps-box-together-ref.html">
>+<meta name="assert" content="With 'wrap-inside: avoid' the line breaks before the box rather than inside it, when there is a break opportunity outside the box.">
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+
>+<div>XX <span style="wrap-inside: avoid">YY ZZ</span></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-last-resort-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-last-resort-expected.html
>new file mode 100644
>index 000000000000..d6fd51f13616
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-last-resort-expected.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid breaks inside the box as a last resort</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 70px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>YY<br>ZZ</div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-last-resort-ref.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-last-resort-ref.html
>new file mode 100644
>index 000000000000..d6fd51f13616
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-last-resort-ref.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid breaks inside the box as a last resort</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 70px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>YY<br>ZZ</div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-last-resort.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-last-resort.html
>new file mode 100644
>index 000000000000..19bfa616b167
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-last-resort.html
>@@ -0,0 +1,15 @@
>+<!DOCTYPE html> 
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid breaks inside the box as a last resort</title>
>+<link rel="help" href="https://drafts.csswg.org/css-text-4/#wrap-inside">
>+<link rel="match" href="wrap-inside-avoid-last-resort-ref.html">
>+<meta name="assert" content="With 'wrap-inside: avoid' the box is still broken internally when it alone does not fit and there is no other break opportunity on the line.">
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 70px; font: 20px/20px Ahem; color: green; }
>+</style>
>+
>+<div><span style="wrap-inside: avoid">YY ZZ</span></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-line-break-anywhere-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-line-break-anywhere-expected.html
>new file mode 100644
>index 000000000000..1934def737c2
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-line-break-anywhere-expected.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid suppresses line-break: anywhere opportunities inside the box</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 90px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>XX<br>YYYY</div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-line-break-anywhere-ref.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-line-break-anywhere-ref.html
>new file mode 100644
>index 000000000000..1934def737c2
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-line-break-anywhere-ref.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid suppresses line-break: anywhere opportunities inside the box</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 90px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>XX<br>YYYY</div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-line-break-anywhere.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-line-break-anywhere.html
>new file mode 100644
>index 000000000000..27fc0955d980
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-line-break-anywhere.html
>@@ -0,0 +1,15 @@
>+<!DOCTYPE html> 
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid suppresses line-break: anywhere opportunities inside the box</title>
>+<link rel="help" href="https://drafts.csswg.org/css-text-4/#wrap-inside">
>+<link rel="match" href="wrap-inside-avoid-line-break-anywhere-ref.html">
>+<meta name="assert" content="'line-break: anywhere' adds a soft wrap opportunity around every character within the box, but 'wrap-inside: avoid' suppresses them: the line breaks before the box rather than mid-word, when there is a break opportunity outside the box.">
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 90px; font: 20px/20px Ahem; color: green; }
>+</style>
>+
>+<div>XX <span style="wrap-inside: avoid; line-break: anywhere">YYYY</span></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-auto-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-auto-expected.html
>new file mode 100644
>index 000000000000..43e06f7e7aed
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-auto-expected.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: a nested wrap-inside: auto box inside an avoid box is still avoided</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>X<br>Y Z W</div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-auto-ref.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-auto-ref.html
>new file mode 100644
>index 000000000000..43e06f7e7aed
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-auto-ref.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: a nested wrap-inside: auto box inside an avoid box is still avoided</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>X<br>Y Z W</div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-auto.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-auto.html
>new file mode 100644
>index 000000000000..4fd8b8e4ffbf
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-auto.html
>@@ -0,0 +1,15 @@
>+<!DOCTYPE html> 
>+<meta charset="utf-8">
>+<title>wrap-inside: a nested wrap-inside: auto box inside an avoid box is still avoided</title>
>+<link rel="help" href="https://drafts.csswg.org/css-text-4/#wrap-inside">
>+<link rel="match" href="wrap-inside-avoid-nested-auto-ref.html">
>+<meta name="assert" content="wrap-inside: auto on a box nested inside a wrap-inside: avoid box does not re-enable breaking: the whole outer box is kept together, so the line breaks before it.">
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+
>+<div>X <span style="wrap-inside: avoid">Y <span style="wrap-inside: auto">Z W</span></span></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-deep-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-deep-expected.html
>new file mode 100644
>index 000000000000..e6afcca1fdad
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-deep-expected.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: three nested avoid boxes break in the outermost box first</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>A<br>B C D</div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-deep-ref.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-deep-ref.html
>new file mode 100644
>index 000000000000..e6afcca1fdad
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-deep-ref.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: three nested avoid boxes break in the outermost box first</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>A<br>B C D</div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-deep.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-deep.html
>new file mode 100644
>index 000000000000..78d38e3a352c
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-deep.html
>@@ -0,0 +1,16 @@
>+<!DOCTYPE html> 
>+<meta charset="utf-8">
>+<title>wrap-inside: three nested avoid boxes break in the outermost box first</title>
>+<link rel="help" href="https://drafts.csswg.org/css-text-4/#wrap-inside">
>+<link rel="match" href="wrap-inside-avoid-nested-deep-ref.html">
>+<meta name="assert" content="With three nested wrap-inside: avoid boxes and no break outside them, a break in an outer box must be used before a break within an inner box, so the line breaks in the outermost box: 'A' / 'B C D'.">
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+
>+<div><span style="wrap-inside: avoid">A <span style="wrap-inside: avoid">B <span style="wrap-inside: avoid">C D</span></span></span></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-expected.html
>new file mode 100644
>index 000000000000..1f4e42199972
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-expected.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: a wrap-inside: avoid box nested inside another avoid box is kept together</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>X<br>Y Z W</div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-only-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-only-expected.html
>new file mode 100644
>index 000000000000..dda6a2822649
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-only-expected.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: nested avoid boxes with no break outside them break in the outer box first</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>WW<br>XX YY</div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-only-ref.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-only-ref.html
>new file mode 100644
>index 000000000000..dda6a2822649
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-only-ref.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: nested avoid boxes with no break outside them break in the outer box first</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>WW<br>XX YY</div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-only.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-only.html
>new file mode 100644
>index 000000000000..9f3b938cc1b7
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-only.html
>@@ -0,0 +1,16 @@
>+<!DOCTYPE html> 
>+<meta charset="utf-8">
>+<title>wrap-inside: nested avoid boxes with no break outside them break in the outer box first</title>
>+<link rel="help" href="https://drafts.csswg.org/css-text-4/#wrap-inside">
>+<link rel="match" href="wrap-inside-avoid-nested-only-ref.html">
>+<meta name="assert" content="When every break opportunity on the line is inside a wrap-inside: avoid box, a break in an outer box must be used before a break within an inner box: the line breaks before the inner box rather than inside it.">
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+
>+<div><span style="wrap-inside: avoid">WW <span style="wrap-inside: avoid">XX YY</span></span></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-ref.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-ref.html
>new file mode 100644
>index 000000000000..1f4e42199972
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested-ref.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: a wrap-inside: avoid box nested inside another avoid box is kept together</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>X<br>Y Z W</div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested.html
>new file mode 100644
>index 000000000000..26d49a84416a
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nested.html
>@@ -0,0 +1,12 @@
>+<!DOCTYPE html> 
>+<meta charset="utf-8">
>+<title>wrap-inside: a wrap-inside: avoid box nested inside another avoid box is kept together</title>
>+<link rel="help" href="https://drafts.csswg.org/css-text-4/#wrap-inside">
>+<link rel="match" href="wrap-inside-avoid-nested-ref.html">
>+<meta name="assert" content="When a 'wrap-inside: avoid' box is nested inside another 'wrap-inside: avoid' box, the whole outer box is kept together and the line breaks before it.">
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+
>+<div>X <span style="wrap-inside: avoid">Y <span style="wrap-inside: avoid">Z W</span></span></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nowrap-child-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nowrap-child-expected.html
>new file mode 100644
>index 000000000000..7fd90a5739fd
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nowrap-child-expected.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid breaks before an unbreakable child as a last resort</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>AA<br><span style="white-space: nowrap">BB CC</span></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nowrap-child-ref.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nowrap-child-ref.html
>new file mode 100644
>index 000000000000..7fd90a5739fd
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nowrap-child-ref.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid breaks before an unbreakable child as a last resort</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>AA<br><span style="white-space: nowrap">BB CC</span></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nowrap-child.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nowrap-child.html
>new file mode 100644
>index 000000000000..7f006f6f4ba2
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nowrap-child.html
>@@ -0,0 +1,15 @@
>+<!DOCTYPE html> 
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid breaks before an unbreakable child as a last resort</title>
>+<link rel="help" href="https://drafts.csswg.org/css-text-4/#wrap-inside">
>+<link rel="match" href="wrap-inside-avoid-nowrap-child-ref.html">
>+<meta name="assert" content="When a 'wrap-inside: avoid' box does not fit and its overflowing part cannot wrap (white-space: nowrap), the box breaks at the last soft wrap opportunity inside it - before the unbreakable child - as a last resort.">
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+
>+<div><span style="wrap-inside: avoid">AA <span style="white-space: nowrap">BB CC</span></span></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nowrap-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nowrap-expected.html
>new file mode 100644
>index 000000000000..13e378a3c138
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nowrap-expected.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid does not break when line breaking is prohibited by white-space: nowrap</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 70px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div><span style="white-space: nowrap">YY ZZ</span></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nowrap-ref.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nowrap-ref.html
>new file mode 100644
>index 000000000000..13e378a3c138
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nowrap-ref.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid does not break when line breaking is prohibited by white-space: nowrap</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 70px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div><span style="white-space: nowrap">YY ZZ</span></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nowrap.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nowrap.html
>new file mode 100644
>index 000000000000..b99b39fcd197
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-nowrap.html
>@@ -0,0 +1,12 @@
>+<!DOCTYPE html> 
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid does not break when line breaking is prohibited by white-space: nowrap</title>
>+<link rel="help" href="https://drafts.csswg.org/css-text-4/#wrap-inside">
>+<link rel="match" href="wrap-inside-avoid-nowrap-ref.html">
>+<meta name="assert" content="When 'white-space: nowrap' prohibits line breaking within the box, 'wrap-inside: avoid' cannot break it even as a last resort; the box overflows on a single line.">
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 70px; font: 20px/20px Ahem; color: green; }
>+</style>
>+
>+<div><span style="wrap-inside: avoid; white-space: nowrap">YY ZZ</span></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-overflow-wrap-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-overflow-wrap-expected.html
>new file mode 100644
>index 000000000000..8237ee1d88ae
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-overflow-wrap-expected.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid defers an overflow-wrap: anywhere break to a break opportunity outside the box</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 90px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>XX<br>YYYY</div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-overflow-wrap-ref.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-overflow-wrap-ref.html
>new file mode 100644
>index 000000000000..8237ee1d88ae
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-overflow-wrap-ref.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid defers an overflow-wrap: anywhere break to a break opportunity outside the box</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 90px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>XX<br>YYYY</div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-overflow-wrap.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-overflow-wrap.html
>new file mode 100644
>index 000000000000..f322836f49b7
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-overflow-wrap.html
>@@ -0,0 +1,15 @@
>+<!DOCTYPE html> 
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid defers an overflow-wrap: anywhere break to a break opportunity outside the box</title>
>+<link rel="help" href="https://drafts.csswg.org/css-text-4/#wrap-inside">
>+<link rel="match" href="wrap-inside-avoid-overflow-wrap-ref.html">
>+<meta name="assert" content="'overflow-wrap: anywhere' breaks at an arbitrary point only as a last resort. With 'wrap-inside: avoid' and a break opportunity outside the box, the line breaks before the box rather than mid-word inside it.">
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 90px; font: 20px/20px Ahem; color: green; }
>+</style>
>+
>+<div>XX <span style="wrap-inside: avoid; overflow-wrap: anywhere">YYYY</span></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-removed-dynamic-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-removed-dynamic-expected.html
>new file mode 100644
>index 000000000000..60db16ce8852
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-removed-dynamic-expected.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: removing 'avoid' triggers relayout when reset dynamically</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>XX YY<br>ZZ</div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-removed-dynamic-ref.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-removed-dynamic-ref.html
>new file mode 100644
>index 000000000000..60db16ce8852
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-removed-dynamic-ref.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: removing 'avoid' triggers relayout when reset dynamically</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>XX YY<br>ZZ</div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-removed-dynamic.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-removed-dynamic.html
>new file mode 100644
>index 000000000000..383fba39c183
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-removed-dynamic.html
>@@ -0,0 +1,21 @@
>+<!DOCTYPE html> 
>+<meta charset="utf-8">
>+<title>wrap-inside: removing 'avoid' triggers relayout when reset dynamically</title>
>+<link rel="help" href="https://drafts.csswg.org/css-text-4/#wrap-inside">
>+<link rel="match" href="wrap-inside-avoid-removed-dynamic-ref.html">
>+<meta name="assert" content="Resetting wrap-inside from 'avoid' back to 'auto' on an already-laid-out inline box re-runs line layout: the box that was kept together now breaks inside again.">
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 110px; font: 20px/20px Ahem; color: green; }
>+</style>
>+
>+<div>XX <span id="target" style="wrap-inside: avoid">YY ZZ</span></div>
>+<script>
>+    // Force layout in the initial (avoid) state so the change below must trigger a relayout.
>+    document.body.offsetTop;
>+    document.getElementById("target").style.wrapInside = "auto";
>+</script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-siblings-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-siblings-expected.html
>new file mode 100644
>index 000000000000..919a07b42e5e
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-siblings-expected.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid keeps sibling avoid boxes intact by breaking between them</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 170px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>AA BB<br>CC DD</div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-siblings-ref.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-siblings-ref.html
>new file mode 100644
>index 000000000000..919a07b42e5e
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-siblings-ref.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid keeps sibling avoid boxes intact by breaking between them</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 170px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>AA BB<br>CC DD</div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-siblings.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-siblings.html
>new file mode 100644
>index 000000000000..a29d2012b1c2
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-siblings.html
>@@ -0,0 +1,15 @@
>+<!DOCTYPE html> 
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid keeps sibling avoid boxes intact by breaking between them</title>
>+<link rel="help" href="https://drafts.csswg.org/css-text-4/#wrap-inside">
>+<link rel="match" href="wrap-inside-avoid-siblings-ref.html">
>+<meta name="assert" content="With two sibling 'wrap-inside: avoid' boxes, the line breaks between the boxes rather than inside the second one.">
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 170px; font: 20px/20px Ahem; color: green; }
>+</style>
>+
>+<div><span style="wrap-inside: avoid">AA BB</span> <span style="wrap-inside: avoid">CC DD</span></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-single-word-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-single-word-expected.html
>new file mode 100644
>index 000000000000..b55ae7dc85c6
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-single-word-expected.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid does not introduce break opportunities</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 60px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>AAAA</div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-single-word-ref.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-single-word-ref.html
>new file mode 100644
>index 000000000000..b55ae7dc85c6
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-single-word-ref.html
>@@ -0,0 +1,8 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid does not introduce break opportunities</title>
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 60px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div>AAAA</div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-single-word.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-single-word.html
>new file mode 100644
>index 000000000000..f8bd3a8d4237
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-avoid-single-word.html
>@@ -0,0 +1,11 @@
>+<!DOCTYPE html> 
>+<meta charset="utf-8">
>+<title>wrap-inside: avoid does not introduce break opportunities</title>
>+<link rel="help" href="https://drafts.csswg.org/css-text-4/#wrap-inside">
>+<link rel="match" href="wrap-inside-avoid-single-word-ref.html">
>+<meta name="assert" content="'wrap-inside: avoid' only removes/deprioritizes existing soft wrap opportunities; it never creates them. A single unbreakable word overflows exactly as without the property.">
>+<link rel="stylesheet" href="/fonts/ahem.css">
>+<style>
>+    div { width: 60px; font: 20px/20px Ahem; color: green; }
>+</style>
>+<div><span style="wrap-inside: avoid">AAAA</span></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-computed-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-computed-expected.txt
>new file mode 100644
>index 000000000000..2044cdec59e6
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-computed-expected.txt
>@@ -0,0 +1,8 @@
>+
>+PASS wrap-inside initial computed value is 'auto'
>+PASS wrap-inside: auto
>+PASS wrap-inside: avoid
>+PASS wrap-inside ignores invalid values
>+PASS wrap-inside is not inherited
>+PASS wrap-inside: inherit resolves to the parent value
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-computed.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-computed.html
>new file mode 100644
>index 000000000000..e538d96e7f71
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-text/wrap-inside/wrap-inside-computed.html
>@@ -0,0 +1,47 @@
>+<!DOCTYPE html> 
>+<meta charset="utf-8">
>+<title>CSS Text: parsing and computed value of wrap-inside</title>
>+<link rel="help" href="https://drafts.csswg.org/css-text-4/#wrap-inside">
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+<div id="target"></div>
>+<div id="parent" style="wrap-inside: avoid"><div id="child"></div></div>
>+<script>
>+function computedValueFor(value) {
>+    var target = document.getElementById("target");
>+    target.style.wrapInside = "";
>+    target.style.wrapInside = value;
>+    return getComputedStyle(target).wrapInside;
>+}
>+
>+test(function() {
>+    assert_equals(computedValueFor(""), "auto");
>+}, "wrap-inside initial computed value is 'auto'");
>+
>+test(function() {
>+    assert_equals(computedValueFor("auto"), "auto");
>+}, "wrap-inside: auto");
>+
>+test(function() {
>+    assert_equals(computedValueFor("avoid"), "avoid");
>+}, "wrap-inside: avoid");
>+
>+test(function() {
>+    var target = document.getElementById("target");
>+    target.style.wrapInside = "avoid";
>+    target.style.wrapInside = "bogus";
>+    assert_equals(target.style.wrapInside, "avoid");
>+}, "wrap-inside ignores invalid values");
>+
>+test(function() {
>+    // wrap-inside is not inherited: the child computes the initial value even though its parent is 'avoid'.
>+    assert_equals(getComputedStyle(document.getElementById("child")).wrapInside, "auto");
>+}, "wrap-inside is not inherited");
>+
>+test(function() {
>+    // The 'inherit' keyword still explicitly pulls the parent's 'avoid' value.
>+    var child = document.getElementById("child");
>+    child.style.wrapInside = "inherit";
>+    assert_equals(getComputedStyle(child).wrapInside, "avoid");
>+}, "wrap-inside: inherit resolves to the parent value");
>+</script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/html/rendering/widgets/shadow-dom-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/html/rendering/widgets/shadow-dom-expected.txt
>index 44b490fbd3c6..2ce64b1235b1 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/html/rendering/widgets/shadow-dom-expected.txt
>+++ b/LayoutTests/imported/w3c/web-platform-tests/html/rendering/widgets/shadow-dom-expected.txt
>@@ -1,9 +1,9 @@
> 
> 
>-FAIL <video controls=""></video> has a shadow tree with no slots assert_equals: child should be outside the flat tree expected 0 but got 445
>-FAIL <video></video> has a shadow tree with no slots assert_equals: child should be outside the flat tree expected 0 but got 445
>-FAIL <audio></audio> has a shadow tree with no slots assert_equals: child should be outside the flat tree expected 0 but got 445
>-FAIL <audio controls=""></audio> has a shadow tree with no slots assert_equals: child should be outside the flat tree expected 0 but got 446
>+FAIL <video controls=""></video> has a shadow tree with no slots assert_equals: child should be outside the flat tree expected 0 but got 446
>+FAIL <video></video> has a shadow tree with no slots assert_equals: child should be outside the flat tree expected 0 but got 446
>+FAIL <audio></audio> has a shadow tree with no slots assert_equals: child should be outside the flat tree expected 0 but got 446
>+FAIL <audio controls=""></audio> has a shadow tree with no slots assert_equals: child should be outside the flat tree expected 0 but got 447
> PASS <select></select> has a shadow tree with slot
> PASS <select multiple=""></select> has a shadow tree with slot
> PASS <select size="4"></select> has a shadow tree with slot
>diff --git a/LayoutTests/platform/glib/imported/w3c/web-platform-tests/css/css-cascade/all-prop-initial-xml-expected.txt b/LayoutTests/platform/glib/imported/w3c/web-platform-tests/css/css-cascade/all-prop-initial-xml-expected.txt
>index e61e3b28eb8e..94fa6630dca5 100644
>--- a/LayoutTests/platform/glib/imported/w3c/web-platform-tests/css/css-cascade/all-prop-initial-xml-expected.txt
>+++ b/LayoutTests/platform/glib/imported/w3c/web-platform-tests/css/css-cascade/all-prop-initial-xml-expected.txt
>@@ -402,6 +402,7 @@ PASS width
> PASS will-change
> PASS word-break
> PASS word-spacing
>+PASS wrap-inside
> PASS writing-mode
> PASS x
> PASS y

Actions: View | Formatted Diff | Diff

Attachments on bug 318918: 480444 | 480448 | 480451 | 480460 | 480465 | 480473 | 480482 | 480527 | 480533 | 480582