regions.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. /*!
  2. {
  3. "name": "CSS Regions",
  4. "caniuse": "css-regions",
  5. "authors": ["Mihai Balan"],
  6. "property": "regions",
  7. "tags": ["css"],
  8. "builderAliases": ["css_regions"],
  9. "notes": [{
  10. "name": "W3C Spec",
  11. "href": "https://www.w3.org/TR/css3-regions/"
  12. }]
  13. }
  14. !*/
  15. define(['Modernizr', 'createElement', 'docElement', 'isSVG', 'prefixed'], function(Modernizr, createElement, docElement, isSVG, prefixed) {
  16. // We start with a CSS parser test then we check page geometry to see if it's affected by regions
  17. // Later we might be able to retire the second part, as WebKit builds with the false positives die out
  18. Modernizr.addTest('regions', function() {
  19. if (isSVG) {
  20. // css regions don't work inside of SVG elements. Rather than update the
  21. // below test to work in an SVG context, just exit early to save bytes
  22. return false;
  23. }
  24. /* Get the 'flowFrom' property name available in the browser. Either default or vendor prefixed.
  25. If the property name can't be found we'll get Boolean 'false' and fail quickly */
  26. var flowFromProperty = prefixed('flowFrom');
  27. var flowIntoProperty = prefixed('flowInto');
  28. var result = false;
  29. if (!flowFromProperty || !flowIntoProperty) {
  30. return result;
  31. }
  32. /* If CSS parsing is there, try to determine if regions actually work. */
  33. var iframeContainer = createElement('iframe');
  34. var container = createElement('div');
  35. var content = createElement('div');
  36. var region = createElement('div');
  37. /* we create a random, unlikely to be generated flow number to make sure we don't
  38. clash with anything more vanilla, like 'flow', or 'article', or 'f1' */
  39. var flowName = 'modernizr_flow_for_regions_check';
  40. /* First create a div with two adjacent divs inside it. The first will be the
  41. content, the second will be the region. To be able to distinguish between the two,
  42. we'll give the region a particular padding */
  43. content.innerText = 'M';
  44. container.style.cssText = 'top: 150px; left: 150px; padding: 0px;';
  45. region.style.cssText = 'width: 50px; height: 50px; padding: 42px;';
  46. region.style[flowFromProperty] = flowName;
  47. container.appendChild(content);
  48. container.appendChild(region);
  49. docElement.appendChild(container);
  50. /* Now compute the bounding client rect, before and after attempting to flow the
  51. content div in the region div. If regions are enabled, the after bounding rect
  52. should reflect the padding of the region div.*/
  53. var flowedRect, delta;
  54. var plainRect = content.getBoundingClientRect();
  55. content.style[flowIntoProperty] = flowName;
  56. flowedRect = content.getBoundingClientRect();
  57. delta = parseInt(flowedRect.left - plainRect.left, 10);
  58. docElement.removeChild(container);
  59. if (delta === 42) {
  60. result = true;
  61. } else {
  62. /* IE only allows for the content to come from iframes. This has the
  63. * side effect of automatic collapsing of iframes once they get the flow-into
  64. * property set. checking for a change on the height allows us to detect this
  65. * in a sync way, without having to wait for a frame to load */
  66. docElement.appendChild(iframeContainer);
  67. plainRect = iframeContainer.getBoundingClientRect();
  68. iframeContainer.style[flowIntoProperty] = flowName;
  69. flowedRect = iframeContainer.getBoundingClientRect();
  70. if (plainRect.height > 0 && plainRect.height !== flowedRect.height && flowedRect.height === 0) {
  71. result = true;
  72. }
  73. }
  74. content = region = container = iframeContainer = undefined;
  75. return result;
  76. });
  77. });