components/test/data/actor/dom_node_geometry.html

<!DOCTYPE html>
<html>
<head>
  <!--<meta name="viewport" content="width=device-width, minimum-scale=1.0"> -->
  <meta name="viewport" content="width=800">
  <title>APC Utils Test Page</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
    }
    #a, #b, #c, #d, #e {
      padding: 10px;
      border: 1px solid #ccc;
      margin-bottom: 10px;
    }
    #a {
      background-color: #f9f9f9;
    }
    #b {
      background-color: #e9e9e9;
      padding-right: 10%;
    }
    #c {
      background-color: #d9d9d9;
      width: 10%;
    }
    #d {
      background-color: #f9f9f9;
      width: 20%;
      text-align: left;
    }
    #e {
      width: 20%;
      float: right;
    }
    /* Invisible elements for bounding box error testing */
    #f {
      width: 0px;
      height: 0px;
      position: absolute;
      overflow: hidden;
      opacity: 0;
    }
    #g {
      width: 0px;
      height: 10px;
      position: absolute;
      overflow: hidden;
      opacity: 0;
    }
    #h {
      width: 10px;
      height: 0px;
      position: absolute;
      overflow: hidden;
      opacity: 0;
    }
  </style>
  <script>
    window.isIframeLoaded = false;
    function iframeLoaded() {
      window.isIframeLoaded = true;
    }
  </script>
</head>

<body>
  <script>
    /**
     * Helper to convert physical pixels to logical pixels.
     * @param {number} physicalX - The X coordinate in physical pixels.
     * @param {number} physicalY - The Y coordinate in physical pixels.
     * @return {{x: number, y: number}} The equivalent logical coordinates.
     */
    function toLogicalCoords(physicalX, physicalY) {
      const scale = window.devicePixelRatio;
      return {
        x: physicalX / scale,
        y: physicalY / scale
      };
    }

    /**
     * Returns the text content of the element at the given physical coordinates.
     * @param {number} physicalX - The horizontal coordinate (from the left edge of the page) in physical pixels.
     * @param {number} physicalY - The vertical coordinate (from the top edge of the page) in physical pixels.
     * @return {string} The text content of the element found.
     */
    function getElementTextAtPoint(physicalX, physicalY) {
      const {x, y} = toLogicalCoords(physicalX, physicalY);
      return document.elementFromPoint(x, y).textContent;
    }

    /**
     * Creates a colored dot and places it on the page at specific coordinates.
     * @param {number} physicalX - The horizontal coordinate (from the left edge of the page) in physical pixels.
     * @param {number} physicalY - The vertical coordinate (from the top edge of the page) in physical pixels.
     * @param {string} [color='red'] - The color of the dot (e.g., 'red', '#ff0000').
     * @param {number} [size=15] - The diameter of 1the dot in pixels.
     */
    function placeDot(physicalX, physicalY, color = 'red', size = 8) {
      const {x, y} = toLogicalCoords(physicalX, physicalY);
      const dot = document.createElement('div');
      dot.style.position = 'absolute';
      dot.style.width = `${size}px`;
      dot.style.height = `${size}px`;
      dot.style.backgroundColor = color;
      dot.style.borderRadius = '50%';
      dot.style.left = `${x - size / 2}px`;
      dot.style.top = `${y - size / 2}px`;
      document.body.appendChild(dot);
  }
  </script>

  <div id="e" aria-label="e_div">
    <strong>E</strong>
  </div>
  <div id="a" aria-label="a_div">
    <strong aria-label="a">A</strong>
    <div id="b" aria-label="b_div">
      <strong aria-label="b">B</strong>
      <div id="c" aria-label="c_div"><strong>C</strong></div>
    </div>
    <iframe src="dom_node_geometry_iframe.html"></iframe>
  </div>
  <center>
    <div id="d" aria-label="d_div">
      <strong>D</strong>
    </div>
  </center>
  <div id="f" aria-label="f_div">F</div>
  <div id="g" aria-label="g_div">G</div>
  <div id="h" aria-label="h_div">H</div>
</body>
</html>