Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 2 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/cssom-view/cssom-geometryutils-shadow-dom.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>CSSOM View - GeometryUtils in shadow trees</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; }
x-geometry-host {
position: absolute;
left: 250px;
top: 35px;
width: 230px;
height: 150px;
border: 5px solid gray;
padding: 10px;
transform: rotate(8deg);
transform-origin: left top;
display: block;
}
#slotted {
width: 80px;
height: 45px;
border: 3px solid black;
transform: translate(18px, 12px) rotate(-16deg);
background: gold;
}
</style>
<x-geometry-host>
<div id="slotted" slot="content"></div>
</x-geometry-host>
<script>
customElements.define("x-geometry-host", class extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({mode: "open"});
shadow.innerHTML = `
<style>
#shadow-target {
position: absolute;
left: 95px;
top: 65px;
width: 70px;
height: 35px;
border: 4px solid blue;
transform: rotate(21deg) scale(1.15);
transform-origin: center;
}
slot {
position: absolute;
left: 20px;
top: 18px;
display: block;
}
</style>
<slot name="content"></slot>
<div id="shadow-target"></div>
`;
}
});
test(() => {
const host = document.querySelector("x-geometry-host");
const shadowTarget = host.shadowRoot.getElementById("shadow-target");
assert_quad_bounds_match_bounding_rect(shadowTarget, {},
"shadow tree element bounds");
const relativeQuad = shadowTarget.getBoxQuads({relativeTo: host})[0];
const convertedQuad = host.convertQuadFromNode(
shadowTarget.getBoxQuads({relativeTo: shadowTarget})[0],
shadowTarget
);
assert_quad_approx_equals(relativeQuad, convertedQuad,
"shadow tree element relative to host");
}, "GeometryUtils follows shadow tree ancestry");
test(() => {
const host = document.querySelector("x-geometry-host");
const slotted = document.getElementById("slotted");
assert_quad_bounds_match_bounding_rect(slotted, {},
"slotted light DOM element bounds");
const relativeQuad = slotted.getBoxQuads({relativeTo: host})[0];
const convertedQuad = host.convertQuadFromNode(
slotted.getBoxQuads({relativeTo: slotted})[0],
slotted
);
assert_quad_approx_equals(relativeQuad, convertedQuad,
"slotted element relative to host");
}, "GeometryUtils follows flat-tree slot assignment");
</script>