Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 1 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/cssom-view/cssom-geometryutils-same-origin-iframe.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>CSSOM View - GeometryUtils across same-origin iframes</title>
<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>