Skip to content

Commit

Permalink
fixup regions test. quit early and dont create elements. smarter code…
Browse files Browse the repository at this point in the history
… style. extra comments on what we're doing.
  • Loading branch information
paulirish committed Apr 25, 2012
1 parent ba95447 commit b4681a0
Showing 1 changed file with 20 additions and 24 deletions.
44 changes: 20 additions & 24 deletions feature-detects/css-regions.js
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -2,14 +2,25 @@
// http://www.w3.org/TR/css3-regions/ // http://www.w3.org/TR/css3-regions/
// By: Mihai Balan // By: Mihai Balan


// Simple, CSS parser based // We start with a CSS parser test then we check page geometry to see if it's affected by regions
// Later we might be able to retire the second part, as WebKit builds with the false positives die out

Modernizr.addTest('regions', function() { Modernizr.addTest('regions', function() {
/* Attempt a quick-to-fail test */
if (Modernizr.testAllProps('flowInto')) { /* Get the 'flowFrom' property name available in the browser. Either default or vendor prefixed.
If the property name can't be found we'll get Boolean 'false' and fail quickly */
var flowFromProperty = Modernizr.prefixed("flowFrom"),
flowIntoProperty = Modernizr.prefixed("flowInto");

if (!flowFromProperty || !flowIntoProperty){
return false;
}

/* If CSS parsing is there, try to determine if regions actually work. */ /* If CSS parsing is there, try to determine if regions actually work. */
var container = document.createElement('div'), var container = document.createElement('div'),
content = document.createElement('div'), content = document.createElement('div'),
region = document.createElement('div'), region = document.createElement('div'),

/* we create a random, unlikely to be generated flow number to make sure we don't /* we create a random, unlikely to be generated flow number to make sure we don't
clash with anything more vanilla, like 'flow', or 'article', or 'f1' */ clash with anything more vanilla, like 'flow', or 'article', or 'f1' */
flowName = 'modernizr_flow_for_regions_check'; flowName = 'modernizr_flow_for_regions_check';
Expand All @@ -18,15 +29,9 @@ Modernizr.addTest('regions', function() {
content, the second will be the region. To be able to distinguish between the two, content, the second will be the region. To be able to distinguish between the two,
we'll give the region a particular padding */ we'll give the region a particular padding */
content.innerText = 'M'; content.innerText = 'M';
container.style.cssText = 'top: 150px; left: 150px; padding: 0px;' container.style.cssText = 'top: 150px; left: 150px; padding: 0px;';
region.style.cssText = 'width: 50px; height: 50px; padding: 42px;'; region.style.cssText = 'width: 50px; height: 50px; padding: 42px;';


/* Get the 'flowFrom' property name available in the browser. Either default or vendor prefixed.
If the property name can't be found we'll get Boolean 'false' and fail quickly */
var flowFromProperty = Modernizr.prefixed("flowFrom")
if (!flowFromProperty){
return false;
}
region.style[flowFromProperty] = flowName; region.style[flowFromProperty] = flowName;
container.appendChild(content); container.appendChild(content);
container.appendChild(region); container.appendChild(region);
Expand All @@ -35,25 +40,16 @@ Modernizr.addTest('regions', function() {
/* Now compute the bounding client rect, before and after attempting to flow the /* Now compute the bounding client rect, before and after attempting to flow the
content div in the region div. If regions are enabled, the after bounding rect content div in the region div. If regions are enabled, the after bounding rect
should reflect the padding of the region div.*/ should reflect the padding of the region div.*/
var plainRect, flowedRect, delta; var flowedRect, delta,
plainRect = content.getBoundingClientRect() plainRect = content.getBoundingClientRect();



var flowIntoProperty = Modernizr.prefixed("flowInto")
if (!flowIntoProperty){
return false;
}
content.style[flowIntoProperty] = flowName; content.style[flowIntoProperty] = flowName;
flowedRect = content.getBoundingClientRect(); flowedRect = content.getBoundingClientRect();


delta = flowedRect.left - plainRect.left; delta = flowedRect.left - plainRect.left;
document.documentElement.removeChild(container); document.documentElement.removeChild(container);
delete content; content = region = container = undefined;
delete region;
delete container;


if (delta == 42) { return (delta == 42);
return true;
}
}
return false;
}); });

0 comments on commit b4681a0

Please sign in to comment.