mirror of
https://github.com/gnh1201/welsonjs.git
synced 2025-05-17 23:21:04 +00:00
94 lines
3.5 KiB
JavaScript
94 lines
3.5 KiB
JavaScript
/*!
|
|
{
|
|
"name": "CSS Regions",
|
|
"caniuse": "css-regions",
|
|
"authors": ["Mihai Balan"],
|
|
"property": "regions",
|
|
"tags": ["css"],
|
|
"builderAliases": ["css_regions"],
|
|
"notes": [{
|
|
"name": "W3C Spec",
|
|
"href": "https://www.w3.org/TR/css3-regions/"
|
|
}]
|
|
}
|
|
!*/
|
|
define(['Modernizr', 'createElement', 'docElement', 'isSVG', 'prefixed'], function(Modernizr, createElement, docElement, isSVG, prefixed) {
|
|
// 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() {
|
|
|
|
if (isSVG) {
|
|
// css regions don't work inside of SVG elements. Rather than update the
|
|
// below test to work in an SVG context, just exit early to save bytes
|
|
return false;
|
|
}
|
|
|
|
/* 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 = prefixed('flowFrom');
|
|
var flowIntoProperty = prefixed('flowInto');
|
|
var result = false;
|
|
|
|
if (!flowFromProperty || !flowIntoProperty) {
|
|
return result;
|
|
}
|
|
|
|
/* If CSS parsing is there, try to determine if regions actually work. */
|
|
var iframeContainer = createElement('iframe');
|
|
var container = createElement('div');
|
|
var content = createElement('div');
|
|
var region = 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' */
|
|
var 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);
|
|
docElement.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;
|
|
var plainRect = content.getBoundingClientRect();
|
|
|
|
content.style[flowIntoProperty] = flowName;
|
|
flowedRect = content.getBoundingClientRect();
|
|
|
|
delta = parseInt(flowedRect.left - plainRect.left, 10);
|
|
docElement.removeChild(container);
|
|
|
|
if (delta === 42) {
|
|
result = true;
|
|
} else {
|
|
/* IE only allows for the content to come from iframes. This has the
|
|
* side effect of automatic collapsing of iframes once they get the flow-into
|
|
* property set. checking for a change on the height allows us to detect this
|
|
* in a sync way, without having to wait for a frame to load */
|
|
|
|
docElement.appendChild(iframeContainer);
|
|
plainRect = iframeContainer.getBoundingClientRect();
|
|
iframeContainer.style[flowIntoProperty] = flowName;
|
|
flowedRect = iframeContainer.getBoundingClientRect();
|
|
|
|
if (plainRect.height > 0 && plainRect.height !== flowedRect.height && flowedRect.height === 0) {
|
|
result = true;
|
|
}
|
|
}
|
|
|
|
content = region = container = iframeContainer = undefined;
|
|
|
|
return result;
|
|
});
|
|
});
|