diff --git a/packages/playwright-core/browsers.json b/packages/playwright-core/browsers.json
index 291dc14b76..c583eb0808 100644
--- a/packages/playwright-core/browsers.json
+++ b/packages/playwright-core/browsers.json
@@ -23,7 +23,7 @@
     },
     {
       "name": "webkit",
-      "revision": "1586",
+      "revision": "1588",
       "installByDefault": true,
       "revisionOverrides": {
         "mac10.14": "1446"
diff --git a/packages/playwright-core/src/server/webkit/protocol.d.ts b/packages/playwright-core/src/server/webkit/protocol.d.ts
index a71d7f6bdd..9c0d62ebd6 100644
--- a/packages/playwright-core/src/server/webkit/protocol.d.ts
+++ b/packages/playwright-core/src/server/webkit/protocol.d.ts
@@ -849,17 +849,17 @@ export module Protocol {
       range?: SourceRange;
     }
     /**
-     * CSS @media (as well as other users of media queries, like @import, <style>, <link>, etc.) and @supports descriptor.
+     * CSS @media (as well as other users of media queries, like @import, <style>, <link>, etc.), @supports, and @layer descriptor.
      */
     export interface Grouping {
       /**
-       * Media query text.
+       * Source of the media query: "media-rule" if specified by a @media rule, "media-import-rule" if specified by an @import rule, "media-link-node" if specified by a "media" attribute in a linked style sheet's LINK tag, "media-style-node" if specified by a "media" attribute in an inline style sheet's STYLE tag, "supports-rule" if specified by an @supports rule, "layer-rule" if specified by an @layer rule.
        */
-      text: string;
+      type: "media-rule"|"media-import-rule"|"media-link-node"|"media-style-node"|"supports-rule"|"layer-rule"|"layer-import-rule";
       /**
-       * Source of the media query: "media-rule" if specified by a @media rule, "media-import-rule" if specified by an @import rule, "media-link-node" if specified by a "media" attribute in a linked style sheet's LINK tag, "media-style-node" if specified by a "media" attribute in an inline style sheet's STYLE tag, "supports-rule" if specified by an @supports rule, .
+       * Query text if specified by a @media or @supports rule. Layer name (or not present for anonymous layers) for @layer rules.
        */
-      type: "media-rule"|"media-import-rule"|"media-link-node"|"media-style-node"|"supports-rule";
+      text?: string;
       /**
        * URL of the document containing the CSS grouping.
        */
diff --git a/tests/page/elementhandle-bounding-box.spec.ts b/tests/page/elementhandle-bounding-box.spec.ts
index 762c571019..ceea022bc7 100644
--- a/tests/page/elementhandle-bounding-box.spec.ts
+++ b/tests/page/elementhandle-bounding-box.spec.ts
@@ -30,7 +30,7 @@ it('should work', async ({ page, server, browserName, headless }) => {
 });
 
 it('should handle nested frames', async ({ page, server }) => {
-  await page.setViewportSize({ width: 500, height: 500 });
+  await page.setViewportSize({ width: 616, height: 500 });
   await page.goto(server.PREFIX + '/frames/nested-frames.html');
   const nestedFrame = page.frames().find(frame => frame.name() === 'dos');
   const elementHandle = await nestedFrame.$('div');
@@ -38,6 +38,29 @@ it('should handle nested frames', async ({ page, server }) => {
   expect(box).toEqual({ x: 24, y: 224, width: 268, height: 18 });
 });
 
+it('should get frame box', async ({ page, browserName }) => {
+  it.fail(browserName === 'webkit', 'https://github.com/microsoft/playwright/issues/10977');
+  await page.setViewportSize({ width: 200, height: 200 });
+  await page.setContent(`<style>
+  body {
+      display: flex;
+      height: 500px;
+      margin: 0px;
+  }
+  body iframe {
+      flex-shrink: 1;
+      border: 0;
+      background-color: green;
+  }
+  </style>
+  <iframe></iframe>
+  `);
+  const elementHandle = await page.$('iframe');
+  const box = await elementHandle.boundingBox();
+  expect(box).toEqual({ x: 0, y: 0, width: 300, height: 500 });
+});
+
+
 it('should handle scroll offset and click', async ({ page, server }) => {
   await page.setContent(`
     <style>* { margin: 0; padding: 0; }</style>