Permalink
Browse files

fixup regions test. quit early and dont create elements. smarter code…

… style. extra comments on what we're doing.
  • Loading branch information...
1 parent ba95447 commit b4681a056023902e4e60214b4dcda14bb1583aa2 @paulirish paulirish committed Apr 25, 2012
Showing with 49 additions and 53 deletions.
  1. +49 −53 feature-detects/css-regions.js
@@ -2,58 +2,54 @@
// http://www.w3.org/TR/css3-regions/
// 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() {
- /* Attempt a quick-to-fail test */
- if (Modernizr.testAllProps('flowInto')) {
- /* If CSS parsing is there, try to determine if regions actually work. */
- var container = document.createElement('div'),
- content = document.createElement('div'),
- region = document.createElement('div'),
- /* 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' */
- flowName = 'modernizr_flow_for_regions_check';
-
- /* First create a div with two adjacent divs inside it. The first will be the
- content, the second will be the region. To be able to distinguish between the two,
- we'll give the region a particular padding */
- content.innerText = 'M';
- container.style.cssText = 'top: 150px; left: 150px; padding: 0px;'
- 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;
- container.appendChild(content);
- container.appendChild(region);
- document.documentElement.appendChild(container);
-
- /* 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
- should reflect the padding of the region div.*/
- var plainRect, flowedRect, delta;
- plainRect = content.getBoundingClientRect()
-
- var flowIntoProperty = Modernizr.prefixed("flowInto")
- if (!flowIntoProperty){
- return false;
- }
- content.style[flowIntoProperty] = flowName;
- flowedRect = content.getBoundingClientRect();
-
- delta = flowedRect.left - plainRect.left;
- document.documentElement.removeChild(container);
- delete content;
- delete region;
- delete container;
-
- if (delta == 42) {
- return true;
- }
+
+ /* 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;
}
- return false;
-});
+
+ /* If CSS parsing is there, try to determine if regions actually work. */
+ var container = document.createElement('div'),
+ content = document.createElement('div'),
+ region = document.createElement('div'),
+
+ /* 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' */
+ flowName = 'modernizr_flow_for_regions_check';
+
+ /* First create a div with two adjacent divs inside it. The first will be the
+ content, the second will be the region. To be able to distinguish between the two,
+ we'll give the region a particular padding */
+ content.innerText = 'M';
+ container.style.cssText = 'top: 150px; left: 150px; padding: 0px;';
+ region.style.cssText = 'width: 50px; height: 50px; padding: 42px;';
+
+ region.style[flowFromProperty] = flowName;
+ container.appendChild(content);
+ container.appendChild(region);
+ document.documentElement.appendChild(container);
+
+ /* 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
+ should reflect the padding of the region div.*/
+ var flowedRect, delta,
+ plainRect = content.getBoundingClientRect();
+
+
+ content.style[flowIntoProperty] = flowName;
+ flowedRect = content.getBoundingClientRect();
+
+ delta = flowedRect.left - plainRect.left;
+ document.documentElement.removeChild(container);
+ content = region = container = undefined;
+
+ return (delta == 42);
+});

0 comments on commit b4681a0

Please sign in to comment.