mirror of
https://github.com/gnh1201/welsonjs.git
synced 2025-10-30 12:31:17 +00:00
60 lines
2.8 KiB
JavaScript
60 lines
2.8 KiB
JavaScript
define(['ModernizrProto', 'injectElementWithStyles'], function(ModernizrProto, injectElementWithStyles) {
|
|
/**
|
|
* testStyles injects an element with style element and some CSS rules
|
|
*
|
|
* @memberOf Modernizr
|
|
* @name Modernizr.testStyles
|
|
* @optionName Modernizr.testStyles()
|
|
* @optionProp testStyles
|
|
* @access public
|
|
* @function testStyles
|
|
* @param {string} rule - String representing a css rule
|
|
* @param {Function} callback - A function that is used to test the injected element
|
|
* @param {number} [nodes] - An integer representing the number of additional nodes you want injected
|
|
* @param {string[]} [testnames] - An array of strings that are used as ids for the additional nodes
|
|
* @returns {boolean}
|
|
* @example
|
|
*
|
|
* `Modernizr.testStyles` takes a CSS rule and injects it onto the current page
|
|
* along with (possibly multiple) DOM elements. This lets you check for features
|
|
* that can not be detected by simply checking the [IDL](https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Interface_development_guide/IDL_interface_rules).
|
|
*
|
|
* ```js
|
|
* Modernizr.testStyles('#modernizr { width: 9px; color: papayawhip; }', function(elem, rule) {
|
|
* // elem is the first DOM node in the page (by default #modernizr)
|
|
* // rule is the first argument you supplied - the CSS rule in string form
|
|
*
|
|
* addTest('widthworks', elem.style.width === '9px')
|
|
* });
|
|
* ```
|
|
*
|
|
* If your test requires multiple nodes, you can include a third argument
|
|
* indicating how many additional div elements to include on the page. The
|
|
* additional nodes are injected as children of the `elem` that is returned as
|
|
* the first argument to the callback.
|
|
*
|
|
* ```js
|
|
* Modernizr.testStyles('#modernizr {width: 1px}; #modernizr2 {width: 2px}', function(elem) {
|
|
* document.getElementById('modernizr').style.width === '1px'; // true
|
|
* document.getElementById('modernizr2').style.width === '2px'; // true
|
|
* elem.firstChild === document.getElementById('modernizr2'); // true
|
|
* }, 1);
|
|
* ```
|
|
*
|
|
* By default, all of the additional elements have an ID of `modernizr[n]`, where
|
|
* `n` is its index (e.g. the first additional, second overall is `#modernizr2`,
|
|
* the second additional is `#modernizr3`, etc.).
|
|
* If you want to have more meaningful IDs for your function, you can provide
|
|
* them as the fourth argument, as an array of strings
|
|
*
|
|
* ```js
|
|
* Modernizr.testStyles('#foo {width: 10px}; #bar {height: 20px}', function(elem) {
|
|
* elem.firstChild === document.getElementById('foo'); // true
|
|
* elem.lastChild === document.getElementById('bar'); // true
|
|
* }, 2, ['foo', 'bar']);
|
|
* ```
|
|
*/
|
|
var testStyles = ModernizrProto.testStyles = injectElementWithStyles;
|
|
return testStyles;
|
|
});
|