Web features explorer

getBoxQuads()

Limited availability

The getBoxQuads() method, when called on a document, element, pseudo-element, or text node, returns the list of DOMQuad objects that represent the CSS boxes used to render the node.

Browser support

  • Chrome Not supported
  • Chrome Android Not supported
  • Edge Not supported
  • Firefox Not supported
  • Firefox for Android Not supported
  • Safari Not supported
  • Safari on iOS Not supported

Need this feature?
Leave a 👍 on the feedback issue
Don't forget to also leave a comment explaining your specific use case.

MDN documentation

No MDN documentation found. You can search for the feature on MDN. If you believe that MDN has no documentation about this feature, you can open an issue on MDN's GitHub repository.

Developer use cases

  • I created a designer application and need this to get the element positions to draw the overlays: https://node-projects.github.io/web-component-designer-demo/index.html I created a designer application and need this to get the element positions to draw the overlays: https://node-projects.github.io/web-component-designer-demo/index.html [see original comment]
  • Back when working on Firefox DevTools, I used to use this feature to draw overlays when highlighting elements from the Inspector panel. This API proved extremely valuable in this case as it allowed us to also correctly highlight text nodes, including when they wrap on multiple lines, or fragmented elements (e.g. in multicol containers) Back when working on Firefox DevTools, I used to use this feature to draw overlays when highlighting elements from the Inspector panel. This API proved extremely valuable in this case as it allowed us to also correctly highlight text nodes, including when they wrap on multiple lines, or fragmented elements (e.g. in multicol containers) [see original comment]