| <!DOCTYPE html> |
| <title>CSSOM View - GeometryUtils across same-origin iframes</title> |
| <link rel="help" href="https://drafts.csswg.org/cssom-view/#the-geometryutils-interface"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="resources/geometry-utils.js"></script> |
| <style> |
| html, body { margin: 0; } |
| iframe { |
| position: absolute; |
| left: 60px; |
| top: 60px; |
| width: 260px; |
| height: 170px; |
| border: 8px solid purple; |
| transform: rotate(9deg); |
| transform-origin: left top; |
| } |
| </style> |
| <body> |
| <script> |
| function load_iframe(srcdoc) { |
| const frame = document.createElement("iframe"); |
| document.body.appendChild(frame); |
| const loaded = new Promise(resolve => frame.onload = resolve); |
| frame.srcdoc = srcdoc; |
| return loaded.then(() => frame); |
| } |
| |
| promise_test(async () => { |
| const frame = await load_iframe(`<!DOCTYPE html> |
| <style> |
| html, body { margin: 0; } |
| #inner { |
| position: absolute; |
| left: 35px; |
| top: 28px; |
| width: 80px; |
| height: 45px; |
| border: 4px solid black; |
| padding: 6px; |
| transform: rotate(14deg) scale(1.1); |
| transform-origin: 10px 15px; |
| } |
| </style> |
| <div id="inner"></div>`); |
| |
| const inner = frame.contentDocument.getElementById("inner"); |
| const innerQuad = inner.getBoxQuads()[0]; |
| assert_rect_approx_equals(innerQuad.getBounds(), |
| inner.getBoundingClientRect(), |
| "iframe-local inner bounds"); |
| }, "getBoxQuads() works in a same-origin iframe document"); |
| |
| promise_test(async () => { |
| const frame = await load_iframe(`<!DOCTYPE html> |
| <style> |
| html, body { margin: 0; } |
| #inner { |
| position: absolute; |
| left: 35px; |
| top: 28px; |
| width: 80px; |
| height: 45px; |
| border: 4px solid black; |
| transform: rotate(14deg); |
| } |
| </style> |
| <div id="inner"></div>`); |
| |
| const inner = frame.contentDocument.getElementById("inner"); |
| const localQuad = inner.getBoxQuads({relativeTo: inner})[0]; |
| const convertedQuad = document.convertQuadFromNode(localQuad, inner); |
| assert_quad_approx_equals(convertedQuad, |
| inner.getBoxQuads({relativeTo: document})[0], |
| "iframe element quad relative to outer document"); |
| }, "GeometryUtils converts same-origin iframe content to the outer document"); |
| </script> |
