sousa-gecko/testing/web-platform/tests/css/cssom-view/cssom-geometryutils-transforms.html

<!DOCTYPE html>
<title>CSSOM View - GeometryUtils with transform-like CSS properties</title>
<link rel="help" href="https://drafts.csswg.org/cssom-view/#the-geometryutils-interface">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/">
<link rel="help" href="https://drafts.fxtf.org/motion-1/">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/geometry-utils.js"></script>
<style>
  html, body {
    margin: 0;
  }

  #stage {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 700px;
    height: 850px;
  }

  .case {
    position: absolute;
    width: 90px;
    height: 50px;
    border: 4px solid black;
    padding: 6px;
    background: gold;
    box-sizing: content-box;
  }

  #css-transform {
    left: 40px;
    top: 35px;
    transform: translate(24px, 11px) rotate(23deg) scale(1.2, 0.75)
      skewX(8deg);
    transform-origin: 10px 35px;
  }

  #individual-transform {
    left: 240px;
    top: 45px;
    translate: 18px 12px;
    rotate: -31deg;
    scale: 0.85 1.25;
    transform-origin: right bottom;
  }

  #zoomed {
    left: 450px;
    top: 45px;
    zoom: 1.4;
    transform: rotate(11deg);
  }

  #perspective-parent {
    position: absolute;
    left: 55px;
    top: 220px;
    width: 180px;
    height: 140px;
    perspective: 260px;
    perspective-origin: 20% 80%;
    border: 2px solid gray;
  }

  #perspective-child {
    left: 30px;
    top: 35px;
    transform: rotateY(38deg) translateZ(22px);
    transform-origin: center center;
  }

  #preserve-3d-parent {
    position: absolute;
    left: 330px;
    top: 225px;
    width: 170px;
    height: 130px;
    transform-style: preserve-3d;
    transform: rotateX(12deg) rotateY(-18deg);
  }

  #preserve-3d-child {
    left: 25px;
    top: 30px;
    transform: translateZ(35px) rotateY(25deg);
  }

  #motion-path {
    left: 70px;
    top: 470px;
    offset-path: path("M 0 0 L 160 70");
    offset-distance: 60%;
    offset-rotate: 40deg;
  }

  #scale-zero {
    left: 350px;
    top: 500px;
    transform: scale(0);
  }

  #relative-target {
    position: absolute;
    left: 80px;
    top: 680px;
    width: 240px;
    height: 130px;
    border: 5px solid gray;
    transform: rotate(19deg);
    transform-origin: 20px 10px;
  }

  #relative-source {
    left: 45px;
    top: 35px;
    transform: rotate(-24deg) translate(12px, 8px);
  }
</style>
<div id="stage">
  <div id="css-transform" class="case"></div>
  <div id="individual-transform" class="case"></div>
  <div id="zoomed" class="case"></div>
  <div id="perspective-parent">
    <div id="perspective-child" class="case"></div>
  </div>
  <div id="preserve-3d-parent">
    <div id="preserve-3d-child" class="case"></div>
  </div>
  <div id="motion-path" class="case"></div>
  <div id="scale-zero" class="case"></div>
  <div id="relative-target">
    <div id="relative-source" class="case"></div>
  </div>
</div>
<script>
const transformedCases = [
  ["css-transform", "transform, transform-origin, skew, rotate and scale"],
  ["individual-transform", "individual translate, rotate and scale"],
  ["zoomed", "zoom with transform"],
  ["perspective-child", "perspective and perspective-origin"],
  ["preserve-3d-child", "transform-style: preserve-3d"],
  ["motion-path", "offset-path, offset-distance and offset-rotate"],
];

for (const [id, description] of transformedCases) {
  test(() => {
    const element = document.getElementById(id);
    assert_quad_bounds_match_bounding_rect(
      element,
      {box: "border"},
      `${description} border quad bounds`
    );
  }, `getBoxQuads() matches getBoundingClientRect() for ${description}`);
}

test(() => {
  const quad = document.getElementById("css-transform").getBoxQuads()[0];
  assert_not_equals(Math.round(quad.p1.y), Math.round(quad.p2.y),
                    "top edge is not axis-aligned");
  assert_not_equals(Math.round(quad.p2.x), Math.round(quad.p3.x),
                    "right edge is not axis-aligned");
}, "getBoxQuads() preserves non-axis-aligned corners for CSS transforms");

test(() => {
  assert_true(CSS.supports("offset-path", "path(\"M 0 0 L 1 1\")"),
              "offset-path is supported");
  assert_true(CSS.supports("offset-rotate", "40deg"),
              "offset-rotate is supported");
}, "Motion path properties used by this test are supported");

test(() => {
  const bounds = document.getElementById("scale-zero").getBoxQuads()[0]
    .getBounds();
  assert_approx_equals(bounds.width, 0, GEOMETRY_UTILS_EPSILON,
                       "scale(0) width");
  assert_approx_equals(bounds.height, 0, GEOMETRY_UTILS_EPSILON,
                       "scale(0) height");
}, "getBoxQuads() returns a zero-size bounds for scale(0)");

test(() => {
  const source = document.getElementById("relative-source");
  const target = document.getElementById("relative-target");
  const relativeQuad = source.getBoxQuads({relativeTo: target})[0];
  const convertedQuad = target.convertQuadFromNode(
    quad_from_rect(local_box_rect(source, "border")),
    source
  );
  assert_quad_approx_equals(relativeQuad, convertedQuad,
                            "relative quad and converted quad");
}, "getBoxQuads({relativeTo}) matches convertQuadFromNode() in a transformed subtree");
</script>