wrapflow.js 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. /*!
  2. {
  3. "name": "CSS wrap-flow",
  4. "property": "wrapflow",
  5. "tags": ["css"],
  6. "notes": [{
  7. "name": "W3C Spec",
  8. "href": "https://www.w3.org/TR/css3-exclusions"
  9. },{
  10. "name": "Example by Louie Rootfield",
  11. "href": "https://webdesign.tutsplus.com/tutorials/css-exclusions--cms-28087"
  12. }]
  13. }
  14. !*/
  15. define(['Modernizr', 'prefixed', 'docElement', 'createElement', 'isSVG'], function(Modernizr, prefixed, docElement, createElement, isSVG) {
  16. Modernizr.addTest('wrapflow', function() {
  17. var prefixedProperty = prefixed('wrapFlow');
  18. if (!prefixedProperty || isSVG) {
  19. return false;
  20. }
  21. var wrapFlowProperty = prefixedProperty.replace(/([A-Z])/g, function(str, m1) { return '-' + m1.toLowerCase(); }).replace(/^ms-/, '-ms-');
  22. /* If the CSS parsing is there we need to determine if wrap-flow actually works to avoid false positive cases, e.g. the browser parses
  23. the property, but it hasn't got the implementation for the functionality yet. */
  24. var container = createElement('div');
  25. var exclusion = createElement('div');
  26. var content = createElement('span');
  27. /* First we create a div with two adjacent divs inside it. The first div will be the content, the second div will be the exclusion area.
  28. We use the "wrap-flow: end" property to test the actual behavior. (https://drafts.csswg.org/css-exclusions-1/#wrap-flow-property)
  29. The wrap-flow property is applied to the exclusion area what has a 50px left offset and a 100px width.
  30. If the wrap-flow property is working correctly then the content should start after the exclusion area, so the content's left offset should be 150px. */
  31. exclusion.style.cssText = 'position: absolute; left: 50px; width: 100px; height: 20px;' + wrapFlowProperty + ':end;';
  32. content.innerText = 'X';
  33. container.appendChild(exclusion);
  34. container.appendChild(content);
  35. docElement.appendChild(container);
  36. var leftOffset = content.offsetLeft;
  37. docElement.removeChild(container);
  38. exclusion = content = container = undefined;
  39. return (leftOffset === 150);
  40. });
  41. });