Useful Tests for JS-powered Styling

useful-tests.js

/* Useful Tests for JS-powered Styling */

/* ELEMENT QUERIES */

// Width-based tests
el => el.offsetWidth < 500  // less than 500px wide
el => el.offsetWidth <= 500 // less or equal to 500px wide
el => el.offsetWidth == 500 // 500px wide
el => el.offsetWidth >= 500 // greater or equal to 500px wide
el => el.offsetWidth > 500  // greater than 500px wide

// Height-based tests
el => el.offsetHeight < 500  // less than 500px tall
el => el.offsetHeight <= 500 // less or equal to 500px tall
el => el.offsetHeight == 500 // 500px tall
el => el.offsetHeight >= 500 // greater or equal to 500px tall
el => el.offsetHeight > 500  // greater than 500px tall

// Text Length tests
el => el.value.length < 5  // less than 5 characters
el => el.value.length <= 5 // less or equal to 5 characters
el => el.value.length == 5 // 5 characters
el => el.value.length >= 5 // greater or equal to 5 characters
el => el.value.length > 5  // greater than 5 characters

el => el.textContent.length < 5  // less than 5 characters
el => el.textContent.length <= 5 // less or equal to 5 characters
el => el.textContent.length == 5 // 5 characters
el => el.textContent.length >= 5 // greater or equal to 5 characters
el => el.textContent.length > 5  // greater than 5 characters

// Children-based tests
el => el.children.length < 5  // less than 5 children
el => el.children.length <= 5 // less or equal to 5 children
el => el.children.length == 5 // 5 children
el => el.children.length >= 5 // greater or equal to 5 children
el => el.children.length > 5  // greater than 5 children

// Scroll-based tests
el => el.scrollLeft < 50  // less than 50px scrolled right
el => el.scrollLeft <= 50 // less or equal to 50px scrolled right
el => el.scrollLeft == 50 // 50px scrolled right
el => el.scrollLeft >= 50 // greater or equal to 50px scrolled right
el => el.scrollLeft > 50  // greater than 50px scrolled right

el => el.scrollTop < 50  // less than 50px scrolled down
el => el.scrollTop <= 50 // less or equal to 50px scrolled down
el => el.scrollTop == 50 // 50px scrolled down
el => el.scrollTop >= 50 // greater or equal to 50px scrolled down
el => el.scrollTop > 50  // greater than 50px scrolled down

// Aspect-ratio-based tests
el => el.offsetWidth/el.offsetHeight < 16/9  // less than 16/9
el => el.offsetWidth/el.offsetHeight <= 16/9 // less or equal to 16/9
el => el.offsetWidth/el.offsetHeight == 16/9 // 16/9
el => el.offsetWidth/el.offsetHeight >= 16/9 // greater or equal to 16/9
el => el.offsetWidth/el.offsetHeight < 16/9  // greater than 16/9

// Orientation-based tests
el => el.offsetWidth < el.offsetHeight  // portrait orientation
el => el.offsetWidth == el.offsetHeight // square orientation
el => el.offsetWidth > el.offsetHeight  // landscape orientation

/* SELECTORS */

// parent of el
el.parentNode

// closest matching ancestor of el
el.closest('selector')

// previous sibling of el
el.previousElementSibling

// el containing selector
el.querySelector('selector')

/* More info at http://responsive.style */