```
-### Load tests in an iframe (window.iframeCallback) ###
+### Run tests in an iframe ###
+
+Some tests may require a document other than the standard test fixture, and
+these can be run in a separate iframe. The actual test code and assertions
+remain in jQuery's main test files; only the minimal test fixture markup
+and setup code should be placed in the iframe file.
```js
-testIframeWithCallback( testName, fileName,
- function callback( arg1, arg2, ... assert ) {
+testIframe( testName, fileName,
+ function testCallback(
+ assert, jQuery, window, document,
+ [ additional args ] ) {
...
} );
```
-Loads a given page constructing a url with fileName: `"./data/" + fileName + ".html"`
-The iframe page is responsible for determining when `window.parent.iframeCallback`
-should be called, for example at document ready or window.onload time.
-Arguments passed to the callback are the same as the arguments passed
-to `window.parent.iframeCallback` by the iframe, plus the QUnit `assert`
-object from the `QUnit.test()` that this wrapper sets up for you.
-The iframe should send any objects needed by the unit test via arguments, for example
-its `jQuery`, `window`, and `document` objects from the iframe.
+This loads a page, constructing a url with fileName `"./data/" + fileName`.
+The iframed page determines when the callback occurs in the test by
+including the "/test/data/iframeTest.js" script and calling
+`startIframeTest( [ additional args ] )` when appropriate. Often this
+will be after either document ready or `window.onload` fires.
+The `testCallback` receives the QUnit `assert` object created by `testIframe`
+for this test, followed by the global `jQuery`, `window`, and `document` from
+the iframe. If the iframe code passes any arguments to `startIframeTest`,
+they follow the `document` argument.
Questions?
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>onunload ajax requests (#14379)</title>
<script src="../../jquery.js"></script>
+ <script src="../iframeTest.js"></script>
</head>
<body>
<form id="navigate" action="../iframe.html"></form>
ajaxStatus = status;
}
});
- parent.iframeCallback( ajaxStatus );
+ startIframeTest( ajaxStatus );
});
jQuery(function() {
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Attempt to block tests because of dangling XHR requests (IE)</title>
<script src="../../jquery.js"></script>
+<script src="../iframeTest.js"></script>
<script type="text/javascript">
window.onunload = function() {};
jQuery(function() {
setTimeout(function() {
var parent = window.parent;
document.write("");
- parent.iframeCallback();
+ startIframeTest();
}, 200 );
var number = 50;
while( number-- ) {
};
</script>
<script src="../../jquery.js"></script>
+ <script src="../iframeTest.js"></script>
</head>
<body>
<form>
<input type="text" id="nodeName"/>
</form>
<script>
- jQuery(function() {
- window.parent.iframeCallback( errors );
- });
+ jQuery( function() {
+ startIframeTest( errors );
+ } );
</script>
</body>
</html>
};
</script>
<script src="../../jquery.js"></script>
+ <script src="../iframeTest.js"></script>
</head>
<body>
<script>
- window.parent.iframeCallback( cc_on, errors, jQuery );
+ startIframeTest( cc_on, errors );
</script>
</body>
</html>
<meta charset="utf-8">
<script src="../../jquery.js"></script>
<script>var $j = jQuery.noConflict();</script>
+ <script src="../iframeTest.js"></script>
</head>
<body>
<iframe id="dont_return" src="dont_return.php"></iframe>
$(function () {
clearTimeout( timeoutId );
if ( !timeoutFired ) {
- window.parent.iframeCallback( true );
+ startIframeTest( true );
}
});
});
timeoutId = setTimeout(function () {
timeoutFired = true;
- window.parent.iframeCallback( false );
+ startIframeTest( false );
}, 10000);
});
</script>
window.onready = function() { error = "Called window.onready"; };
</script>
<script src="../../jquery.js"></script>
+ <script src="../iframeTest.js"></script>
</head>
<body>
<form>
<script>
jQuery(function() {
setTimeout( function() {
- window.parent.iframeCallback( error );
+ startIframeTest( error );
});
});
</script>
<body>
<div id="test"></div>
<script src="../../jquery.js"></script>
+<script src="../iframeTest.js"></script>
<script>
- window.parent.iframeCallback( jQuery( "#test" ).css( 'width' ) );
+ startIframeTest( jQuery( "#test" ).css( 'width' ) );
</script>
</body>
</html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE11 onpageshow strangeness (#14894)</title>
<script src="../../jquery.js"></script>
+ <script src="../iframeTest.js"></script>
<script>
$(function(){
- window.parent.iframeCallback( $( "body" ).data().result );
+ startIframeTest( $( "body" ).data().result );
});
</script>
</head>
height: 1000px;
}
</style>
+ <script src="../iframeTest.js"></script>
</head>
<body>
<div>
<script src="../../jquery.js"></script>
<script>
- jQuery( function() {
- window.parent.iframeCallback( jQuery, window, document );
- } );
+ jQuery( startIframeTest );
</script>
</div>
</body>
<title>.focus() (activeElement access #13393)</title>
<script src="../../jquery.js"></script>
+ <script src="../iframeTest.js"></script>
</head>
<body>
<a href="#" id="frame-link"></a>
<script>
jQuery( "#frame-link" ).trigger( "focus" );
- window.parent.iframeCallback( true );
+ startIframeTest( true );
</script>
</body>
</html>
<title>focusin event cross-frame (#14180)</title>
<script src="../../jquery.js"></script>
+ <script src="../iframeTest.js"></script>
</head>
<body>
<input type="text" id="frame-input" />
<script>
// Call parent when this frame is fully loaded, it will mess with #frame-input
jQuery( window ).one( "load", function() {
- window.parent.iframeCallback( document );
+ startIframeTest();
});
</script>
</body>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test case for gh-2100</title>
<script src="../../jquery.js"></script>
+<script src="../iframeTest.js"></script>
</head>
<body>
<script type="text/javascript">
-jQuery( document ).ready(function () {
- window.parent.iframeCallback( jQuery("#container").length === 1 );
-});
+jQuery( function () {
+ startIframeTest( jQuery("#container").length === 1 );
+} );
</script>
<!-- external resources that come before elements trick
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test case for jQuery ticket #11470</title>
<script src="../../jquery.js"></script>
+<script src="../iframeTest.js"></script>
<script type="text/javascript">
jQuery.when( jQuery.ready ).done(function() {
jQuery("body").append("<div>modifying DOM</div>");
- window.parent.iframeCallback( $("div").text() === "modifying DOM" );
+ startIframeTest( $("div").text() === "modifying DOM" );
});
</script>
</head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test case for jQuery ticket #10067</title>
<script src="../../jquery.js"></script>
+<script src="../iframeTest.js"></script>
</head>
<body>
<script type="text/javascript">
jQuery( document ).ready(function () {
- window.parent.iframeCallback( jQuery('#container').length === 1 );
+ startIframeTest( jQuery('#container').length === 1 );
});
</script>
<!doctype html>
<html>
<script src="../../jquery.js"></script>
+ <script src="../iframeTest.js"></script>
<script>
var called = false,
error = false;
return "maybe";
}).on( "load", function( event ) {
$( window ).triggerHandler( "beforeunload" );
- window.parent.iframeCallback( called && !error );
+ startIframeTest( called && !error );
});
</script>
</html>
--- /dev/null
+
+window.startIframeTest = function() {
+ var args = Array.prototype.slice.call( arguments );
+
+ // Note: jQuery may be undefined if page did not load it
+ args.unshift( window.jQuery, window, document );
+ window.parent.iframeCallback.apply( null, args );
+};
<body>
<div id="qunit-fixture"></div>
<script src="../../jquery.js"></script>
+ <script src="../iframeTest.js"></script>
<script>
var script = document.getElementsByTagName( "script" )[ 0 ],
div = document.createElement( "div" ),
error = e;
}
- window.parent.iframeCallback({
+ startIframeTest({
status: success,
description: "buildFragment sets the context without throwing an exception" +
( error ? ": " + error : "" )
<body>
<div id="qunit-fixture"></div>
<script src="../../jquery.js"></script>
+ <script src="../iframeTest.js"></script>
<script>
- window.parent.iframeCallback(
- window,
- document.body,
- "<script>window.scriptTest = true;<\x2fscript>"
- );
+ startIframeTest();
</script>
</body>
</html>
#positionTest { position: absolute; }
</style>
<script src="../../jquery.js"></script>
+ <script src="../iframeTest.js"></script>
<script type="text/javascript" charset="utf-8">
jQuery(function($) {
$(".absolute").click(function() {
$(this).css({ top: pos.top, left: pos.left });
return false;
});
- window.parent.iframeCallback( jQuery, window, document );
+ startIframeTest();
});
</script>
</head>
#firstElement { width: 50px; height: 50px; background: green; }
</style>
<script src="../../jquery.js"></script>
+ <script src="../iframeTest.js"></script>
<script type="text/javascript" charset="utf-8">
jQuery(function($) {
$("body").click(function() {
$("marker").css( $(this).offset() );
return false;
});
- window.parent.iframeCallback( jQuery, window, document );
+ startIframeTest();
});
</script>
</head>
#marker { position: absolute; border: 2px solid #000; width: 50px; height: 50px; background: #ccc; }
</style>
<script src="../../jquery.js"></script>
+ <script src="../iframeTest.js"></script>
<script type="text/javascript" charset="utf-8">
jQuery(function($) {
window.scrollTo(1000,1000);
$("#marker").css( $(this).offset() );
return false;
});
- window.parent.iframeCallback( jQuery, window, document );
+ startIframeTest();
});
</script>
</head>
#marker { position: absolute; border: 2px solid #000; width: 50px; height: 50px; background: #ccc; }
</style>
<script src="../../jquery.js"></script>
+ <script src="../iframeTest.js"></script>
<script type="text/javascript" charset="utf-8">
jQuery(function($) {
$(".relative").click(function() {
$(this).css({ position: 'absolute', top: pos.top, left: pos.left });
return false;
});
- window.parent.iframeCallback( jQuery, window, document );
+ startIframeTest();
});
</script>
</head>
#marker { position: absolute; border: 2px solid #000; width: 50px; height: 50px; background: #ccc; }
</style>
<script src="../../jquery.js"></script>
+ <script src="../iframeTest.js"></script>
<script type="text/javascript" charset="utf-8">
jQuery(function($) {
window.scrollTo(1000,1000);
$("#marker").css( $(this).offset() );
return false;
});
- window.parent.iframeCallback( jQuery, window, document );
+ startIframeTest();
});
</script>
</head>
#marker { position: absolute; border: 2px solid #000; width: 50px; height: 50px; background: #ccc; }
</style>
<script src="../../jquery.js"></script>
+ <script src="../iframeTest.js"></script>
<script type="text/javascript" charset="utf-8">
jQuery(function($) {
$(".static").click(function() {
$(this).css({ position: 'absolute', top: pos.top, left: pos.left });
return false;
});
- window.parent.iframeCallback( jQuery, window, document );
+ startIframeTest();
});
</script>
</head>
#marker { position: absolute; border: 2px solid #000; width: 50px; height: 50px; background: #ccc; }
</style>
<script src="../../jquery.js"></script>
+ <script src="../iframeTest.js"></script>
<script type="text/javascript" charset="utf-8">
jQuery(function($) {
$("table, th, td").click(function() {
$("#marker").css( $(this).offset() );
return false;
});
- window.parent.iframeCallback( jQuery, window, document );
+ startIframeTest();
});
</script>
</head>
<title>jQuery selector - attributes</title>
<script src="../../jquery.js"></script>
-
+ <script src="../iframeTest.js"></script>
<script id="script1"
defer
async></script>
document.createElement('article');
document.createElement('details');
- jQuery( function() {
- window.parent.iframeCallback( jQuery, window, document );
- } );
+ jQuery( startIframeTest );
</script>
</head>
<body>
<title>jQuery selector - sizzle cache</title>
<script src="../../jquery.js"></script>
+ <script src="../iframeTest.js"></script>
<script>
document.write(
"<script>var $cached = jQuery.noConflict(true);<\x2Fscript>" +
<a href="#" id="collision">Worlds collide</a>
</div>
<script>
- jQuery( function() {
- window.parent.iframeCallback( jQuery, window, document );
- } );
+ jQuery( startIframeTest );
</script>
</body>
</html>
<body>
<div>
<script src="../../jquery.js"></script>
+ <script src="../iframeTest.js"></script>
<script src="getComputedSupport.js"></script>
</div>
<script>
- window.parent.iframeCallback( jQuery( "body" ).css( "backgroundColor" ),
+ startIframeTest( jQuery( "body" ).css( "backgroundColor" ),
getComputedSupport( jQuery.support ) );
</script>
</body>
jQuery( function() {
- parent.iframeCallback( getComputedSupport( jQuery.support ) );
+ startIframeTest( getComputedSupport( jQuery.support ) );
} );
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSP Test Page</title>
<script src="../../jquery.js"></script>
+ <script src="../iframeTest.js"></script>
<script src="csp.js"></script>
<script src="getComputedSupport.js"></script>
</head>
} );
};
-this.testIframeWithCallback = function( title, fileName, func ) {
- QUnit.test( title, 1, function( assert ) {
+this.testIframe = function( title, fileName, func ) {
+ QUnit.test( title, function( assert ) {
var iframe;
var done = assert.async();
window.iframeCallback = function() {
var args = Array.prototype.slice.call( arguments );
- args.push( assert );
+ args.unshift( assert );
setTimeout( function() {
this.iframeCallback = undefined;
func.apply( this, args );
func = function() {};
iframe.remove();
-
done();
} );
};
//----------- jQuery.ajax()
- testIframeWithCallback(
+ testIframe(
"XMLHttpRequest - Attempt to block tests because of dangling XHR requests (IE)",
"ajax/unreleasedXHR.html",
function( assert ) {
};
} );
- testIframeWithCallback(
+ testIframe(
"#14379 - jQuery.ajax() on unload",
"ajax/onunload.html",
- function( status, assert ) {
+ function( assert, jQuery, window, document, status ) {
assert.expect( 1 );
assert.strictEqual( status, "success", "Request completed" );
}
} );
} );
-testIframeWithCallback(
+testIframe(
"Conditional compilation compatibility (#13274)",
"core/cc_on.html",
- function( cc_on, errors, $, assert ) {
+ function( assert, jQuery, window, document, cc_on, errors ) {
assert.expect( 3 );
assert.ok( true, "JScript conditional compilation " + ( cc_on ? "supported" : "not supported" ) );
assert.deepEqual( errors, [], "No errors" );
- assert.ok( $(), "jQuery executes" );
+ assert.ok( jQuery(), "jQuery executes" );
}
);
// This makes this test fail but it doesn't seem to cause any real-life problems so blacklisting
// this test there is preferred to complicating the hard-to-test core/ready code further.
if ( !/iphone os 7_/i.test( navigator.userAgent ) ) {
- testIframeWithCallback(
+ testIframe(
"document ready when jQuery loaded asynchronously (#13655)",
"core/dynamic_ready.html",
- function( ready, assert ) {
+ function( assert, jQuery, window, document, ready ) {
assert.expect( 1 );
assert.equal( true, ready, "document ready correctly fired when jQuery is loaded after DOMContentLoaded" );
}
);
}
-testIframeWithCallback(
+testIframe(
"Tolerating alias-masked DOM properties (#14074)",
"core/aliased.html",
- function( errors, assert ) {
+ function( assert, jQuery, window, document, errors ) {
assert.expect( 1 );
assert.deepEqual( errors, [], "jQuery loaded" );
}
);
-testIframeWithCallback(
+testIframe(
"Don't call window.onready (#14802)",
"core/onready.html",
- function( error, assert ) {
+ function( assert, jQuery, window, document, error ) {
assert.expect( 1 );
assert.equal( error, false, "no call to user-defined onready" );
}
assert.equal( el_dis.css( "height" ), el_dis.css( "height", el_dis.css( "height" ) ).css( "height" ), "css('height') is not respecting box-sizing for disconnected element, see #11004" );
} );
-testIframeWithCallback(
+testIframe(
"css('width') should work correctly before document ready (#14084)",
"css/cssWidthBeforeDocReady.html",
- function( cssWidthBeforeDocReady, assert ) {
+ function( assert, jQuery, window, document, cssWidthBeforeDocReady ) {
assert.expect( 1 );
assert.strictEqual( cssWidthBeforeDocReady, "100px", "elem.css('width') works correctly before document ready" );
}
assert.ok( !text.data( "test" ), "Be sure data is not stored in non-element" );
} );
-testIframeWithCallback(
+testIframe(
"enumerate data attrs on body (#14894)",
"data/dataAttrs.html",
- function( result, assert ) {
+ function( assert, jQuery, window, document, result ) {
assert.expect( 1 );
assert.equal( result, "ok", "enumeration of data- attrs on body" );
}
} );
} );
-testIframeWithCallback(
+testIframe(
"window vs. large document",
"dimensions/documentLarge.html",
- function( jQuery, window, document, assert ) {
+ function( assert, jQuery, window, document ) {
assert.expect( 2 );
assert.ok( jQuery( document ).height() > jQuery( window ).height(), "document height is larger than window height" );
} );
-testIframeWithCallback(
+testIframe(
"focusin from an iframe",
"event/focusinCrossFrame.html",
- function( frameDoc, assert ) {
+ function( assert, framejQuery, frameWin, frameDoc ) {
assert.expect( 1 );
var input = jQuery( frameDoc ).find( "#frame-input" );
}
);
-testIframeWithCallback(
+testIframe(
"jQuery.ready promise",
"event/promiseReady.html",
- function( isOk, assert ) {
+ function( assert, jQuery, window, document, isOk ) {
assert.expect( 1 );
assert.ok( isOk, "$.when( $.ready ) works" );
}
// need PHP here to make the incepted IFRAME hang
if ( hasPHP ) {
- testIframeWithCallback(
+ testIframe(
"jQuery.ready uses interactive",
"event/interactiveReady.html",
- function( isOk, assert ) {
+ function( assert, jQuery, window, document, isOk ) {
assert.expect( 1 );
assert.ok( isOk, "jQuery fires ready when the DOM can truly be interacted with" );
}
);
}
-testIframeWithCallback(
+testIframe(
"Focusing iframe element",
"event/focusElem.html",
- function( isOk, assert ) {
+ function( assert, jQuery, window, document, isOk ) {
assert.expect( 1 );
assert.ok( isOk, "Focused an element in an iframe" );
}
);
-testIframeWithCallback(
+testIframe(
"triggerHandler(onbeforeunload)",
"event/triggerunload.html",
- function( isOk, assert ) {
+ function( assert, jQuery, window, document, isOk ) {
assert.expect( 1 );
assert.ok( isOk, "Triggered onbeforeunload without an error" );
}
// need PHP here to make the incepted IFRAME hang
if ( hasPHP ) {
- testIframeWithCallback(
+ testIframe(
"jQuery.ready synchronous load with long loading subresources",
"event/syncReady.html",
- function( isOk, assert ) {
+ function( assert, jQuery, window, document, isOk ) {
assert.expect( 1 );
assert.ok( isOk, "jQuery loaded synchronously fires ready when the DOM can truly be interacted with" );
}
].join( "\n" ) ).appendTo( "#qunit-fixture" );
} );
-testIframeWithCallback(
+testIframe(
"domManip tolerates window-valued document[0] in IE9/10 (trac-12266)",
"manipulation/iframe-denied.html",
- function( test, assert ) {
+ function( assert, jQuery, window, document, test ) {
assert.expect( 1 );
assert.ok( test.status, test.description );
}
);
-testIframeWithCallback(
+testIframe(
"domManip executes scripts in iframes in the iframes' context",
"manipulation/scripts-context.html",
- function( frameWindow, bodyElement, html, assert ) {
+ function( assert, framejQuery, frameWindow, frameDocument ) {
assert.expect( 2 );
- jQuery( bodyElement ).append( html );
+ jQuery( frameDocument.body ).append( "<script>window.scriptTest = true;<\x2fscript>" );
assert.ok( !window.scriptTest, "script executed in iframe context" );
assert.ok( frameWindow.scriptTest, "script executed in iframe context" );
}
assert.equal( result.left, 0, "Retrieving offset on hidden elements returns zeros (gh-2310)" );
} );
-testIframeWithCallback( "absolute", "offset/absolute.html", function( $, iframe, document, assert ) {
+testIframe( "absolute", "offset/absolute.html", function( assert, $, iframe ) {
assert.expect( 4 );
var doc = iframe.document,
} );
} );
-testIframeWithCallback( "absolute", "offset/absolute.html", function( $, window, document, assert ) {
+testIframe( "absolute", "offset/absolute.html", function( assert, $ ) {
assert.expect( 178 );
var tests, offset;
} );
} );
-testIframeWithCallback( "relative", "offset/relative.html", function( $, window, document, assert ) {
+testIframe( "relative", "offset/relative.html", function( assert, $ ) {
assert.expect( 64 );
// get offset
} );
} );
-testIframeWithCallback( "static", "offset/static.html", function( $, window, document, assert ) {
+testIframe( "static", "offset/static.html", function( assert, $ ) {
assert.expect( 80 );
// get offset
} );
} );
-testIframeWithCallback( "fixed", "offset/fixed.html", function( $, window, document, assert ) {
+testIframe( "fixed", "offset/fixed.html", function( assert, $, window ) {
assert.expect( 34 );
var tests, $noTopLeft;
}
} );
-testIframeWithCallback( "table", "offset/table.html", function( $, window, document, assert ) {
+testIframe( "table", "offset/table.html", function( assert, $ ) {
assert.expect( 4 );
assert.equal( $( "#table-1" ).offset().top, 6, "jQuery('#table-1').offset().top" );
assert.equal( $( "#th-1" ).offset().left, 10, "jQuery('#th-1').offset().left" );
} );
-testIframeWithCallback( "scroll", "offset/scroll.html", function( $, win, doc, assert ) {
+testIframe( "scroll", "offset/scroll.html", function( assert, $, win ) {
assert.expect( 26 );
assert.equal( $( "#scroll-1" ).offset().top, 7, "jQuery('#scroll-1').offset().top" );
assert.strictEqual( $().scrollLeft(), undefined, "jQuery().scrollLeft() testing getter on empty jquery object" );
} );
-testIframeWithCallback( "body", "offset/body.html", function( $, window, document, assert ) {
+testIframe( "body", "offset/body.html", function( assert, $ ) {
assert.expect( 4 );
assert.equal( $( "body" ).offset().top, 1, "jQuery('#body').offset().top" );
assert.equal( $opt.is( ":selected" ), true, "selected option" );
} );
-testIframeWithCallback(
+testIframe(
"attributes - jQuery.attr",
"selector/html5_selector.html",
- function( jQuery, window, document, assert ) {
+ function( assert, jQuery, window, document ) {
assert.expect( 38 );
/**
assert.strictEqual( jQuery.unique, jQuery.uniqueSort, "jQuery.unique() is an alias for jQuery.uniqueSort()" );
} );
-testIframeWithCallback(
+testIframe(
"Sizzle cache collides with multiple Sizzles on a page",
"selector/sizzle_cache.html",
- function( jQuery, window, document, assert ) {
+ function( assert, jQuery, window, document ) {
var $cached = window[ "$cached" ];
assert.expect( 4 );
}
if ( jQuery.css ) {
- testIframeWithCallback(
+ testIframe(
"body background is not lost if set prior to loading jQuery (#9239)",
"support/bodyBackground.html",
- function( color, support, assert ) {
+ function( assert, jQuery, window, document, color, support ) {
assert.expect( 2 );
var okValue = {
"#000000": true,
// This test checks CSP only for browsers with "Content-Security-Policy" header support
// i.e. no old WebKit or old Firefox
-testIframeWithCallback(
+testIframe(
"Check CSP (https://developer.mozilla.org/en-US/docs/Security/CSP) restrictions",
"support/csp.php",
- function( support, assert ) {
+ function( assert, jQuery, window, document, support ) {
var done = assert.async();
assert.expect( 2 );