Bug 266532 – [macOS] Form controls with visual overflow and `writing-mode: vertical-rl` do not fully repaint

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Anne van Kesteren]

Created attachment 469084 [details]
screenshot

While testing https://github.com/WebKit/WebKit/pull/21741 (bug 266347) I found an issue for this input:

data:text/html,<input%20type=checkbox%20switch%20style=width:10px;height:10px;writing-mode:vertical-rl>

I also tested it with writing-mode set on a parent:

data:text/html,<p%20style=writing-mode:vertical-rl><input%20type=checkbox%20switch%20style=width:10px;height:10px>

In both cases a repaint issue occurs.

This happens because of the flipForWritingModeCall() call in RenderBox::computeVisibleRectsInContainer():

    if (isWritingModeRoot()) {
        if (!isOutOfFlowPositioned() || !context.dirtyRectIsFlipped) {
            flipForWritingMode(adjustedRects);
            context.dirtyRectIsFlipped = true;
        }
    }

It incorrectly adjusts the x offset obtained from RenderThemeMac::adjustRepaintRect() at some earlier point. Removing the call to flipForWritingMode() here fixes the issue. In fact, making flipForWritingMode() a no-op fixes the issue, but I have not run all tests to see if that is the solution. I would appreciate some advice from a layout expert as I'm out of my depth.

I've attached a screenshot from the broken rendering. I'm not sure how to reproduce this without vertical switch support. Perhaps Aditya can think of another themed element with a similar issue.

[Ahmad Saleem]

I have seen Blink patch from 2014 / 2015 touching this function and removing 'OutOfFlow' condition. Although, we have added 'dirtyRect' context so I think we can remove it as well. I will try to find it, it might have failing test case as well.

[Ahmad Saleem]

Reference - https://src.chromium.org/viewvc/blink?view=revision&revision=177870

[Anne van Kesteren]

That's a nice find!

However, with that patch you'd still hit my issue. Because for my issue isWritingModeRoot() has to be true, and as it happens both isOutOfFlowPositioned() and context.dirtyRectIsFlipped are false.

[Anne van Kesteren]

This reproduces on macOS WebKit main

1. data:text/html,<input%20type=checkbox%20switch%20style=width:10px;height:10px;writing-mode:vertical-rl>
2. Click the switch in the top left corner.

The cause is vertical-rl, it does not reproduce with vertical-lr.

[Anne van Kesteren]

It seems this is a regression.

data:text/html,<input%20type=checkbox%20style=width:5px;height:5px;writing-mode:vertical-rl>

works fine in earlier releases.

[Radar WebKit Bug Importer]

<rdar://problem/120066970>

[Aditya Keerthi]

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

[EWS]

Committed 272799@main (5cf446ee596f): <https://commits.webkit.org/272799@main>

Reviewed commits have been landed. Closing PR #22516 and removing active labels.