wpt / css / css-transforms / 3d-point-mapping-2-transforminterop.html

Status: FAIL | Duration: 48ms | Subtests: 5/12 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (5/12)

Data from commit:
7727414 ci: report WPT subtest changes in the PR description (#826) (2026-09-02)

SubtestStatusMessage
More point mapping through 3D transform hierarchies, hittesting box1)FAILcannot convert 'null' or 'undefined' to object
More point mapping through 3D transform hierarchies, hittesting box2)PASS
More point mapping through 3D transform hierarchies, hittesting box3)PASS
More point mapping through 3D transform hierarchies, hittesting box4)FAILcannot convert 'null' or 'undefined' to object
More point mapping through 3D transform hierarchies, hittesting box5)FAILcannot convert 'null' or 'undefined' to object
More point mapping through 3D transform hierarchies, hittesting box6)PASS
More point mapping through 3D transform hierarchies, hittesting box7)FAILcannot convert 'null' or 'undefined' to object
More point mapping through 3D transform hierarchies, hittesting box8)FAILcannot convert 'null' or 'undefined' to object
More point mapping through 3D transform hierarchies, hittesting box9)PASS
More point mapping through 3D transform hierarchies, hittesting box10)PASS
More point mapping through 3D transform hierarchies, hittesting box11)FAILcannot convert 'null' or 'undefined' to object
More point mapping through 3D transform hierarchies, hittesting box12)FAILcannot convert 'null' or 'undefined' to object

/css/css-transforms/3d-point-mapping-2-transforminterop.html

<!DOCTYPE html>
<title>More point mapping through 3D transform hierarchies</title>
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-document-elementfrompoint">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<style type="text/css" media="screen">
  body {
    margin: 0;
    border: 1px solid black;
  }

  .test {
    display: inline-block;
    height: 200px;
    width: 200px;
    border: 1px solid black;
    margin: 20px;
  }

  #box1, #box5, #box9 {
    height: 140px;
    width: 140px;
    margin: 20px;
    background-color: #DDD;
    border: 1px solid black;
    box-sizing: border-box;
    perspective: 400px;
  }

  #box2, #box6, #box10 {
    position: relative;
    height: 100px;
    width: 100px;
    padding: 20px;
    margin: 20px;
    border: 1px solid black;
    background-color: #81AA8A;
    transform-style: preserve-3d;
    transform: rotateY(-30deg);
    box-sizing: border-box;
  }

  #box3 {
    position: relative;
    height: 100px;
    width: 100px;
    padding: 20px;
    margin: 20px;
    border: 1px solid black;
    background-color: #81AA8A;
    transform-style: preserve-3d;
    box-sizing: border-box;
  }

  #box4, #box8, #box12 {
    height: 90px;
    width: 90px;
    background-color: blue;
    border: 1px solid black;
    box-sizing: border-box;
    transform: rotateY(30deg);
  }

  #box7 {
    position: relative;
    padding-left: 20px;
    height: 100px;
    width: 100px;
    box-sizing: border-box;
    background-color: #DDD;
    border: 1px solid black;
  }

  #box11 {
    padding-left: 20px;
    height: 100px;
    width: 100px;
    box-sizing: border-box;
    background-color: #DDD;
    border: 1px solid black;
  }

  [id^="box"]:hover {
    outline: 3px solid orange;
  }
</style>

<body>

<div class="test">
  <!-- preserve-3d element with no transform-->
  <div id="box1">
    <div id="box2">
      <div id="box3">
        <div id="box4">
        </div>
      </div>
    </div>
  </div>
</div>

<div class="test">
  <!-- layer with no transform-->
  <div id="box5">
    <div id="box6">
      <div id="box7">
        <div id="box8">
        </div>
      </div>
    </div>
  </div>
</div>

<div class="test">
  <!-- non-layer with no transform-->
  <div id="box9">
    <div id="box10">
      <div id="box11">
        <div id="box12">
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  class Point {
    constructor(x, y) {
      this.x = x;
      this.y = y;
    }
  };
  // Each test case defines four test points near the corners of an element area.
  // - Point 1: Top-left
  // - Point 2: Top-right
  // - Point 3: Bottom-left
  // - Point 4: Bottom-right
  const tests = [{
    expectedElemId: 'box1',
      points: [
        new Point(68, 66), // Hits box1 due to box2's transformation.
        new Point(175, 45),
        new Point(62, 155), // Hits box1 due to box2's transformation.
        new Point(100, 175),
      ]
    },
    {
      expectedElemId: 'box2',
      points: [
        new Point(75, 70),
        new Point(155, 63),
        new Point(75, 155),
        new Point(100, 156), // Hits box2 due to box3 preserving parent's transformed space.
      ]
    },
    {
      expectedElemId: 'box3',
      points: [
        new Point(108, 106),
        new Point(198, 106),
        new Point(108, 198),
        // Bottom-right area is overlapped by box4.
      ]
    },
    {
      expectedElemId: 'box4',
      points: [
        new Point(120, 128), // Hits box3 if box4 were untransformed.
        new Point(210, 128),
        new Point(120, 198), // Hits box3 if box4 were untransformed.
        new Point(210, 215),
      ]
    },
    {
      expectedElemId: 'box5',
      points: [
        new Point(312, 67), // Hits box5 due to box6's transformation.
        new Point(423, 47),
        new Point(312, 155), // Hits box5 due to box6's transformation.
        new Point(331, 175), // Hits box5 due to box7 preserving parent's transformed space.
      ]
    },
    {
      expectedElemId: 'box6',
      points: [
        new Point(328, 86), // Hits box6 due to box7 preserving parent's transformed space.
        new Point(400, 63),
        new Point(328, 151), // Hits box6 due to box7 preserving parent's transformed space.
        // The bottom-right area is overlapped by box7.
      ]
    },
    {
      expectedElemId: 'box7',
      points: [
        new Point(354, 87), // Hits box7 due to box8's transformation.
        // The top-right area is overlapped by box8.
        new Point(354, 171), // Hits box7 due to box8's transformation.
        new Point(421, 185),
      ]
    },
    {
      expectedElemId: 'box8',
      points: [
        new Point(359, 87),
        new Point(428, 84),
        new Point(359, 168),
        new Point(428, 175),
      ]
    },
    {
      expectedElemId: 'box9',
      points: [
        new Point(556, 65), // Hits box9 due to box10's transformation.
        new Point(669, 46),
        new Point(556, 157), // Hits box9 due to box10's transformation.
        new Point(576, 174), // Hits box9 due to box11 preserving parent's transformed space.
      ]
    },
    {
      expectedElemId: 'box10',
      points: [
        new Point(568, 69),
        new Point(646, 62),
        new Point(568, 153),
        new Point(576, 154), // Hits box10 due to box11 preserving parent's transformed space.
      ]
    },
    {
      expectedElemId: 'box11',
      points: [
        new Point(600, 87), // Hits box11 due to box12's transformation.
        // The top-right area is overlapped by box12.
        new Point(600, 170),
        new Point(669, 185),
      ]
    },
    {
      expectedElemId: 'box12',
      points: [
        new Point(605, 87),
        new Point(673, 85),
        new Point(605, 170),
        new Point(675, 175),
      ]
    }
  ];

  tests.forEach(testcase => {
    test(t => {
      const expectedElem = document.getElementById(testcase.expectedElemId);
      for (const point of testcase.points) {
        const hitElem = document.elementFromPoint(point.x, point.y);
        assert_equals(hitElem, expectedElem,
          `point (${point.x}, ${point.y}) is inside element ${testcase.expectedElemId}`);
      }
    }, `${document.title}, hittesting ${testcase.expectedElemId})`);
  });
</script>

</html>