css/cssom-view/cssom-geometryutils-convertQuadFromNode.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>