<p dir="auto"><strong>Context:</strong></p>
<ul dir="auto">
<li>Playwright Version: 1.2.0</li>
<li>Operating System: Windows</li>
<li>Node version: 10/12/14</li>
<li>Browser: Webkit</li>
<li>Extra: Running as GitHub Action</li>
</ul>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Running one project: e2e
PASS browser: chromium e2e tests/e2e/example.test.js (17.677 s)
PASS browser: firefox e2e tests/e2e/example.test.js (12.755 s)
FAIL browser: webkit e2e tests/e2e/example.test.js (21.002 s)
  ● Example Tests › image snapshots

    Expected image to match or be a close match to snapshot but was 26.405261426690828% different from snapshot (243350.8893083827 differing pixels).
    See diff for details: D:\a\docsify\docsify\tests\e2e\__image_snapshots__\__diff_output__\example-test-js-example-tests-image-snapshots-1-webkit-diff.png

      280 |     // Viewport screenshot
      281 |     const screenshot1 = await page.screenshot();
    &gt; 282 |     expect(screenshot1).toMatchImageSnapshot();
          |                         ^
      283 | 
      284 |     // Full page screenshot
      285 |     const screenshot2 = await page.screenshot({ fullPage: true });

      at Object.&lt;anonymous&gt; (tests/e2e/example.test.js:282:25)

 › 1 snapshot failed."><pre class="notranslate"><code class="notranslate">Running one project: e2e
PASS browser: chromium e2e tests/e2e/example.test.js (17.677 s)
PASS browser: firefox e2e tests/e2e/example.test.js (12.755 s)
FAIL browser: webkit e2e tests/e2e/example.test.js (21.002 s)
  ● Example Tests › image snapshots

    Expected image to match or be a close match to snapshot but was 26.405261426690828% different from snapshot (243350.8893083827 differing pixels).
    See diff for details: D:\a\docsify\docsify\tests\e2e\__image_snapshots__\__diff_output__\example-test-js-example-tests-image-snapshots-1-webkit-diff.png

      280 |     // Viewport screenshot
      281 |     const screenshot1 = await page.screenshot();
    &gt; 282 |     expect(screenshot1).toMatchImageSnapshot();
          |                         ^
      283 | 
      284 |     // Full page screenshot
      285 |     const screenshot2 = await page.screenshot({ fullPage: true });

      at Object.&lt;anonymous&gt; (tests/e2e/example.test.js:282:25)

 › 1 snapshot failed.
</code></pre></div>
<p dir="auto"><strong>Image diff output from jest-image-snapshot</strong></p>
<p dir="auto">Chromium on macOS (top) vs Chromium on Windows (bottom)</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/442527/88346440-53600e00-cd16-11ea-83c3-e92fb3bb5516.png"><img src="https://user-images.githubusercontent.com/442527/88346440-53600e00-cd16-11ea-83c3-e92fb3bb5516.png" alt="example-test-js-example-tests-image-snapshots-1-webkit-diff" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>Describe the bug</strong></p>
<p dir="auto">We're running e2e tests using Chromium, Firefox, and Webkit on macOS, Ubuntu, and Windows, then using <a href="https://github.com/americanexpress/jest-image-snapshot">jest-image-snapshot</a> for image comparisons. Reference screenshots are generated on a variety of platforms as project maintainers use Linux, macOS, and Windows.</p>
<p dir="auto">Generally speaking, I can tweak jest-image-snapshot's threshold settings to allow screenshots to match despite the slight rendering differences across operating systems and browsers--except for Webkit on Windows. The reason is that Webkit on Windows renders text non-antialiased (see screenshot above) which results in a significant diff detection.</p>
<p dir="auto">I'm assuming non anti-aliased text rendering is a bug. If not, is there a launch argument we can use to force Webkit on Windows to render anti-aliased text?</p>
<p dir="auto"><strong>Context:</strong></p>
<ul dir="auto">
<li>Playwright Version: 1.1.1</li>
<li>Operating System: Windows</li>
<li>Browser: WebKit 1269</li>
</ul>
<p dir="auto"><strong>Bug description</strong><br>
When trying to test screenshots with webkit, I noticed that font rendering looks a bit weird and no font icons were rendered.<br>
The icon font rendering can be easily tested by starting the playwright webkit browser (eg. <code class="notranslate">AppData\Local\ms-playwright\webkit-1269\Playwright.exe</code>) directly and navigating for example to <a href="https://material.io/resources/icons" rel="nofollow">https://material.io/resources/icons</a><br>
An interesting behavior I could observe was that when I set <code class="notranslate">font-kerning: normal</code> on font icons (eg. on <code class="notranslate">.material-icons</code>), some icons appeared, some stayed hidden and some showed incorrect icons (eg. <code class="notranslate">keyboard_arrow_down</code> was rendered as <code class="notranslate">keyboard</code> icon only).</p>
<p dir="auto">Also it seems while <code class="notranslate">font-kerning: auto</code> seems to enable it by default in other browsers, this does not seem to happen at all in the playwright webkit.</p>
<p dir="auto">Without <code class="notranslate">font-kerning: normal</code><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/6547794/85049246-b4834780-b194-11ea-9a12-c1f3b1882bb8.png"><img src="https://user-images.githubusercontent.com/6547794/85049246-b4834780-b194-11ea-9a12-c1f3b1882bb8.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">With <code class="notranslate">font-kerning: normal</code><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/6547794/85049054-80a82200-b194-11ea-80ec-c23629c1badb.png"><img src="https://user-images.githubusercontent.com/6547794/85049054-80a82200-b194-11ea-80ec-c23629c1badb.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">How it should like like eg. in Chrome:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/6547794/85049159-94538880-b194-11ea-9349-f9788a8a5e56.png"><img src="https://user-images.githubusercontent.com/6547794/85049159-94538880-b194-11ea-9349-f9788a8a5e56.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">Any ideas on how to solve this?</p>