jogibear9988
d643b8e79a
Automatic update from web-platform-tests Add GeometryUtils coverage for cssom-view -- Add GeometryUtils pseudo-element coverage -- wpt-commits: 699bc949b8ba032aaef7682c6a94d590c2c70d68, ca2cd19351859f7a15e536d0cf655fcaefe8e4d2 wpt-pr: 61015
82 lines
2.6 KiB
HTML
82 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSSOM View - convertQuadFromNode()</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;
|
|
}
|
|
|
|
#target {
|
|
position: absolute;
|
|
left: 15px;
|
|
top: 20px;
|
|
width: 280px;
|
|
height: 180px;
|
|
margin: 9px 13px 17px 21px;
|
|
border: solid;
|
|
border-width: 4px 6px 8px 10px;
|
|
padding: 3px 5px 7px 9px;
|
|
}
|
|
|
|
#source {
|
|
position: absolute;
|
|
left: 65px;
|
|
top: 50px;
|
|
width: 100px;
|
|
height: 50px;
|
|
margin: 12px 16px 20px 24px;
|
|
border: solid;
|
|
border-width: 2px 4px 6px 8px;
|
|
padding: 3px 5px 7px 9px;
|
|
transform: skewX(15deg) rotate(-8deg) translate(9px, 4px);
|
|
transform-origin: 25% 75%;
|
|
}
|
|
</style>
|
|
<div id="target">
|
|
<div id="source"></div>
|
|
</div>
|
|
<script>
|
|
const source = document.getElementById("source");
|
|
const target = document.getElementById("target");
|
|
const boxes = ["margin", "border", "padding", "content"];
|
|
|
|
for (const fromBox of boxes) {
|
|
for (const toBox of boxes) {
|
|
test(() => {
|
|
const size = box_size(source, fromBox);
|
|
const quad = new DOMQuad(
|
|
new DOMPoint(0, 0),
|
|
new DOMPoint(size.width, 0),
|
|
new DOMPoint(size.width, size.height),
|
|
new DOMPoint(0, size.height)
|
|
);
|
|
const actual = target.convertQuadFromNode(quad, source, {fromBox, toBox});
|
|
const expected = expected_quad_in_target_box(source, target, fromBox,
|
|
toBox);
|
|
assert_quad_approx_equals(actual, expected,
|
|
`${fromBox} quad to ${toBox} coordinates`);
|
|
}, `convertQuadFromNode() maps ${fromBox} quad to ${toBox} coordinates`);
|
|
}
|
|
}
|
|
|
|
test(() => {
|
|
const borderRect = local_box_rect(source, "border");
|
|
const quad = quad_from_rect(borderRect);
|
|
const converted = document.convertQuadFromNode(quad, source);
|
|
assert_quad_approx_equals(converted, source.getBoxQuads()[0],
|
|
"source border quad in document coordinates");
|
|
}, "Document.convertQuadFromNode() matches getBoxQuads()");
|
|
|
|
test(() => {
|
|
const borderRect = local_box_rect(source, "border");
|
|
const quad = quad_from_rect(borderRect);
|
|
const targetQuad = target.convertQuadFromNode(quad, source);
|
|
const roundTripped = source.convertQuadFromNode(targetQuad, target);
|
|
assert_quad_approx_equals(roundTripped, quad,
|
|
"quad after round-trip conversion");
|
|
}, "convertQuadFromNode() round-trips between two elements");
|
|
</script>
|