[BUG] WebKit browser ignores padding for text nodes on MacOS #9092
Description
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:
while Webkit produces the incorrect result:
Note this does NOT reproduce using Safari on my machine, this is specific to Playwright's webkit browser.