[Bug]: Some screenshot unit tests have different results for Firefox and Chrome with WebDriver BiDi because of the quirks mode

[lutien]

Version

1.50.0

Steps to reproduce

Run the following Playwright unit tests for Firefox and Chrome with WebDriver BiDi:

• page/elementhandle-screenshot.spec.ts :: should work for an element with an offset
• page/elementhandle-screenshot.spec.ts :: should work with a rotated element.

Expected behavior

Tests pass for both Chrome and Firefox.

Actual behavior

Tests pass for Chrome.
Tests fail for Firefox, because Firefox throws an error when attempting to take a screenshot.

Additional context

In this case, both unit tests try to take a screenshot of an element which is part of a page running in quirks mode. It's known that Firefox and Chrome have different default browser styles in this mode. Relevant to these tests, the height of the body results in being 0 in Firefox (for Chrome it equals the viewport height). In the screenshot algorithm, we try to take a screenshot of the intersection between the document and the element, but since the document height is 0 it leads to the height of the intersection rectangle having the height 0 as well and this requires per spec to be an error case. That's why Firefox throws an error here.

I see 3 solutions here:

• add DOCTYPE to the test content to eliminate the browser style differences
• have an exception in the test, expecting that Firefox with BiDi will throw an error in the test
• Pavel suggestion here, adding the DOCTYPE on the client side.

Environment

System:
    OS: macOS 15.1.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 1.41 GB / 64.00 GB
  Binaries:
    Node: 21.2.0 - ~/.nvm/versions/node/v21.2.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v21.2.0/bin/npm
    pnpm: 7.12.2 - /opt/homebrew/bin/pnpm
  IDEs:
    VSCode: 1.96.3 - /usr/local/bin/code
  Languages:
    Bash: 3.2.57 - /bin/bash

[yury-s]

In the screenshot algorithm, we try to take a screenshot of the intersection between the document and the element, but since the document height is 0 it leads to the height of the intersection rectangle having the height 0 as well and this requires per spec to be an error case. That's why Firefox throws an error here.

It seems the algorithm needs to be revisited. From the user's perspective, the element is visible and unobstructed, so capturing a screenshot of it is a valid use case. A full-page screenshot would include the element, so this behavior feels inconsistent.

add DOCTYPE to the test content to eliminate the browser style differences
have an exception in the test, expecting that Firefox with BiDi will throw an error in the test

Adjusting the test would only mask the problem while the end user will still be affected. I don't think we should be changing the tests just for the sake of making them pass in Bidi. The same test passes with Juggler today, so it shouldn't be a fundamental technical problem to make it work in Bidi.