No description, website, or topics provided.
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Please note: this is a beta, any feedback is welcome!


If you're like me, you probably love a good demo. Well, since I don't have one of those you'll have to make do with this: an adequate demo of Boundarizr.

Right, but what's the deal?

Layout boundaries are able to limit the root and scope of Chrome's layout operations. This is a small library that highlights elements that can act as potential layout boundaries in your page's DOM. For more info check out Wilson Page's intro to Layout Boundaries

To be a layout boundary, the element must satisfy the following constraints:

  • The element is an SVG root (<svg>).
  • The element is a text or search <input> field.


  • The element does not have a percentage height value.
  • The element does not have an implicit or auto height value.
  • The element does not have an implicit or auto width value.
  • The element has an explicit overflow value (scroll, auto or hidden).
  • The element is not a descendant of a <table> element.
  • The element is not set to display inline or inline-block.

Boundarizr makes use of window.getMatchedCSSRules() to determine what was applied to the elements in the DOM. As such, and in given that the rules for layout boundaries are implementation-specific, you should assume this will only work for Chrome.


You can find a bookmarklet link on this page /bookmarklet.html in this repo - just drag that to your bookmarks in Chrome. You can include /js/boundarizr.js (or .min.js if you prefer) and call Boundarizr.testCurrentDocument().


Boundarizr contains the following methods:

  • .testCurrentDocument() - tests the current DOM, adds the boundaries and shows them.
  • .showBoundaries() - shows the currently detected boundaries.
  • .hideBoundaries() - hides the currently detected boundaries.
  • .kill() - kills and removes Boundarizr.

And you can call individual tests against elements if you like:

  • .tests.isBoundary(elm)
  • .tests.isSVGRoot(elm)
  • .tests.isInputTextOrSearch(elm)
  • .tests.hasPercentageHeight(elm)
  • .tests.hasEmptyOrAutoHeight(elm)
  • .tests.hasEmptyOrAutoWidth(elm)
  • .tests.isNotOverflow(elm)
  • .tests.isDescendantOfTable(elm)
  • .tests.isDisplayInlineOrInlineBlock(elm)


Can be found at /tests/index.html


Apache 2.0 - See /LICENSE

Please note: this is not a Google project