modernizr/feature-detects/css/wrapflow.js

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

/*!
{
  "name": "CSS wrap-flow",
  "property": "wrapflow",
  "tags": ["css"],
  "notes": [{
    "name": "W3C Exclusions Spec",
    "href": "http://www.w3.org/TR/css3-exclusions"
  },{
    "name": "Example by Adobe",
    "href": "http://html.adobe.com/webstandards/cssexclusions"
  }]
}
!*/
define(['Modernizr', 'prefixed', 'docElement', 'createElement'], function( Modernizr, prefixed, docElement, createElement ) {
    // Separate test for `wrap-flow` property as IE10 has just implemented this alone
    Modernizr.addTest('wrapflow', function () {
        var prefixedProperty = prefixed('wrapFlow');
        if (!prefixedProperty)
            return false;

        var wrapFlowProperty = prefixedProperty.replace(/([A-Z])/g, function (str, m1) { return '-' + m1.toLowerCase(); }).replace(/^ms-/, '-ms-');

        /* 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
           the property, but it hasn't got the implementation for the functionality yet. */
        var container = createElement('div');
        var exclusion = createElement('div');
        var content = createElement('span');

        /* 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.
           We use the "wrap-flow: end" property to test the actual behavior. (http://dev.w3.org/csswg/css3-exclusions/#wrap-flow-property)
           The wrap-flow property is applied to the exclusion area what has a 50px left offset and a 100px width.
           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. */
        exclusion.style.cssText = 'position: absolute; left: 50px; width: 100px; height: 20px;' + wrapFlowProperty + ':end;';
        content.innerText = 'X';

        container.appendChild(exclusion);
        container.appendChild(content);
        docElement.appendChild(container);

        var leftOffset = content.offsetLeft;

        docElement.removeChild(container);
        exclusion = content = container = undefined;

        return (leftOffset == 150);
    });
});