https://github.com/wilsonpage/boundarizr

https://github.com/wilsonpage/boundarizr

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/wilsonpage/boundarizr
• Owner: wilsonpage
• License: other
• Created: 2013-10-07T08:56:46.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2013-10-07T09:54:01.000Z (about 11 years ago)
• Last Synced: 2024-04-14T22:46:11.478Z (7 months ago)
• Language: JavaScript
• Size: 108 KB
• Stars: 1
• Watchers: 2
• Forks: 19
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Boundarizr

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

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](http://wilsonpage.co.uk/introducing-layout-boundaries/)

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

* The element is an SVG root (``).

* The element is a text or search `` 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 `` element.

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 at `/bookmarklet.html` - 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

Can be found at `/tests/index.html`

## License

Apache 2.0 - See `/LICENSE`

*Please note:* this is not a Google project