No description, website, or topics provided.
JavaScript CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
build
css First commit Aug 21, 2013
examples
js
tests
.gitignore
LICENSE
README.md
bookmarklet.html
index.html

README.md

Boundarizr

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

Demo

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.

or:

  • 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.

Usage

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().

API

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)

Tests

Can be found at /tests/index.html

License

Apache 2.0 - See /LICENSE

Please note: this is not a Google project