Bug 290923 – View Transition break on inline parents with block children

• Status: NEW
• Component: New Bugs

[Sebastian Markbåge]

If you try to start a View Transition when a parent with `display: inline` and `view-transition-name` has a `display: block` child then it leads to a duplicate name error.

https://repro-view-transition-inline-bug.vercel.app/

This errors with: InvalidStateError: Multiple elements found with view-transition-name: hi

The most common way this would happen is with:

<a href="..."><div>...</div></a>

It should be treated as if it was `display: inline-block`. When that is explicitly specified, it works.

[Radar WebKit Bug Importer]

<rdar://problem/148432507>

[Tim Nguyen (:ntim)]

I think this started happening when we started iterating over renderers instead of elements in ViewTransition.cpp to get pseudo-element support.

[Matt Woodrow]

Putting a block level element inside of an inline causes the inline to be fragmented (see https://www.w3.org/TR/CSS2/visuren.html#img-anon-block, and this resolution in particular - https://github.com/w3c/csswg-drafts/issues/1477#issuecomment-380771705).

View transitions names should be skipped if the named element is fragmented (https://drafts.csswg.org/css-view-transitions/#view-transition-name-prop - If the element’s principal box is fragmented, skipped, or not rendered, this property has no effect.)

I think we should be silently ignoring `view-transition-name: hi`, and just running a transition on the root element.

[Matt Woodrow]

Pull request: https://github.com/WebKit/WebKit/pull/45228

[Matt Woodrow]

Pull request: https://github.com/WebKit/WebKit/pull/45929