getBoxQuads()
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.
Status
Limited availability
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.Specifications
Browser support
- Chrome ❌
- Chrome Android ❌
- Edge ❌
- Firefox ❌
- Firefox for Android ❌
- Safari ❌
- Safari on iOS ❌
Web Platform Tests (WPT)
View the latest WPT test results for this featureDeveloper votes
Do you need this feature?
Let us know by leaving a 👍 reaction on the feedback issue. Don't forget to also leave a comment explaining your specific use case.
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]
View as JSON | Edit this feature | Report an issue | Web-features entry: source, dist