No description or website provided.
JavaScript CSS
Latest commit 47963a1 Dec 1, 2014 @paullewis Merge pull request #8 from stevesouth/master
If the element has a matching inline style simply return it
Failed to load latest commit information.
css First commit Aug 21, 2013
.gitignore Added gitignore Aug 21, 2013
index.html Add class name(s) to the boundary's label. May 2, 2014


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