test: add iframe screenshot tests (#2495)

Author: dgozman

test/assets/grid-iframe-in-shadow.html

@@ -0,0 +1,16 @@
+<style>
+  body, html {
+    margin: 0;
+  }
+</style>
+<script>
+window.addEventListener('DOMContentLoaded', () => {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const shadow = container.attachShadow({mode: 'open'});
+  const iframe = document.createElement('iframe');
+  iframe.src = './grid.html';
+  iframe.style.cssText = 'width: 300px; height: 300px; margin: 0; padding: 0; border: 0;';
+  shadow.appendChild(iframe);
+});
+</script>

test/chromium/oopif.spec.js

@@ -150,13 +150,12 @@ describe('OOPIF', function() {
     expect(await countOOPIFs(browser)).toBe(1);
     expect(intercepted).toBe(true);
   });
-  it.fail(CHROMIUM)('should take screenshot', async({browser, page, server}) => {
-    // Screenshot differs on the bots, needs debugging.
+  it('should take screenshot', async({browser, page, server, golden}) => {
     await page.setViewportSize({width: 500, height: 500});
     await page.goto(server.PREFIX + '/dynamic-oopif.html');
     expect(page.frames().length).toBe(2);
     expect(await countOOPIFs(browser)).toBe(1);
-    expect(await page.screenshot()).toBeGolden('screenshot-iframe.png');
+    expect(await page.screenshot()).toBeGolden(golden('screenshot-oopif.png'));
   });
   it('should load oopif iframes with subresources and request interception', async function({browser, page, server, context}) {
     await page.route('**/*', route => route.continue());

test/golden-chromium/screenshot-iframe.png

@@ -223,6 +223,11 @@ describe.skip(ffheadful)('Page.screenshot', function() {
     expect(screenshot).toBeGolden(golden('screenshot-device-scale-factor.png'));
     await context.close();
   });
+  it('should work with iframe in shadow', async({browser, page, server, golden}) => {
+    await page.setViewportSize({width: 500, height: 500});
+    await page.goto(server.PREFIX + '/grid-iframe-in-shadow.html');
+    expect(await page.screenshot()).toBeGolden(golden('screenshot-iframe.png'));
+  });
 });
 
 describe.skip(ffheadful)('ElementHandle.screenshot', function() {