Ladybird dropdown menu display issue

[jordanmartell0]

Hello, I'm a University of Utah student working on Ladybird as part of my final project for CS 4560 Web Browser Internals. While using the browser, I found a bug in how it displays the arrow of a dropdown menu in certain web pages (pictured below are how Chrome displays the arrow and how Ladybird displays the same arrow)

Chrome:

Ladybird:

I minimized the bug down to this simple html and css, which Chrome renders as a diagonal line and Ladybird renders as a solid box:

<style>
  .dropdown-arrow-icon{
      transform:rotate(-45deg);
      background:#202124;
      height:7px;
  }
</style>

<div class="dropdown-arrow-icon"></div>

Chrome:

Ladybird:

I am not really sure where to start as far as resolving this issue, but I am interested in taking a look and would appreciate any pointers on how to proceed. Thanks!

[kalenikaliaksandr]

we do not have support for rotation transform in CPU painter (used by default) yet https://github.com/SerenityOS/serenity/blob/master/Userland/Libraries/LibWeb/Painting/CommandExecutorCPU.cpp#L156

you could start from figuring if we can rotate a bitmap using LibGfx painter https://github.com/SerenityOS/serenity/blob/master/Userland/Libraries/LibGfx/Painter.cpp

[nico]

(@MacDue has some local branch for that I think, ref https://discord.com/channels/830522505605283862/830526926569209917/1224462326250344531)

[MacDue]

Yes, I have a prototype that I think would fix this which would rotate the actual draw call (and paint this via the path rasterizer). I've not got too far with the implementation yet, I've been a little busy, but if I get a branch going I'd be happy for some help in this area.

I would really like to avoid trying to do this by rotating bitmaps, because that's always going to introduce artifacts (and is fairly slow too, at least in LibGfx).

[OfficialPixelBrush]

Wasn't there a fast way to fake rotation? Something about skewing?

[MacDue]

Lot of work left to do, but this is how the reproducer looks with the new painter:

The branch is: https://github.com/MacDue/serenity/tree/new_painting_hacks, very WIP, and I've not had time to work on it much recently :pensive: