| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293 |
- /*!
- {
- "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;
- });
- });
|