Giters

microsoft / playwright

Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.

Home Page:https://playwright.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[BUG] WebKit browser ignores padding for text nodes on MacOS

joshualoehr opened this issue · comments

commented

Context:

  • Playwright Version: 1.15.0 (also repros after downgrading to 1.14.1)
  • Operating System: macOS Big Sur 11.2.3 (does NOT repro on Windows or Ubuntu)
  • Node.js version: 12.13.0
  • Browser: WebKit
  • Extra: yarn

Code Snippet

Github repo with repro steps: https://github.com/joshualoehr/PlaywrightBugRepro

Describe the bug

Webkit browser on macOS seems to be ignoring padding for text nodes. Given this HTML:

<!DOCTYPE html>
<html>
    <body>
        <!-- Works fine -->
        <h1>Nested divs:</h1>
        <div><div>| No space on the left</div></div>
        <div style="margin-left: 20px"><div>| Only margin on the left</div></div>
        <div style="padding-left: 20px"><div>| Only padding on the left</div></div>
        <div style="margin-left: 20px; padding-left: 20px"><div>| Margin and padding on the left</div></div>

        <hr style="margin-top: 20px"/>

        <!-- Broken in webkit -->
        <h1>Text nodes only:</h1>
        <div>| No space on the left</div>
        <div style="margin-left: 20px">| Only margin on the left</div>
        <div style="padding-left: 20px">| Only padding on the left</div>
        <div style="margin-left: 20px; padding-left: 20px">| Margin and padding on the left</div>
    </body>
</html>

Chromium/Firefox produce the correct result:

image

while Webkit produces the incorrect result:

image

Note this does NOT reproduce using Safari on my machine, this is specific to Playwright's webkit browser.

commented

@joshualoehr thanks for your bug report, we identified the bug which came in due an incorrectly fixed merge-conflict and will ship it with 1.15.1 probably mid next week.

commented

Fixed in 1.15.1