Repository: jquery/jquery
File: test/unit/css.js (JavaScript)

Code before:
	span.show();
	assert.equal( span[ 0 ].style.display, "",
		"show() updates inline style of a detached inline-hidden span" );
	span.appendTo( "#qunit-fixture" );
	assert.equal( span.css( "display" ), "inline",
		"A shown-while-detached inline-hidden span has default display after attachment" );

	div = jQuery( "<div style='display: inline'/>" );
	div.show().appendTo( "#qunit-fixture" );
	assert.equal( div.css( "display" ), "inline",
		"show() does not update inline style of a detached inline-visible div" );
	div.remove();

	tr = jQuery( "<tr/>" );
	jQuery( "#table" ).append( tr );
	tr.detach().hide().show();

	assert.ok( !tr[ 0 ].style.display, "Not-hidden detached tr elements have no inline style" );
	tr.remove();

	span = jQuery( "<span/>" ).hide().show();
	assert.ok( !span[ 0 ].style.display, "Not-hidden detached span elements have no inline style" );
	span.remove();
} );

QUnit[ document.body.getRootNode ? "test" : "skip" ]( "show/hide shadow child nodes", function( assert ) {
	assert.expect( 28 );
	jQuery( "<div id='shadowHost'></div>" ).appendTo( "#qunit-fixture" );
	var shadowHost = document.querySelector( "#shadowHost" );
	var shadowRoot = shadowHost.attachShadow( { mode: "open" } );
	shadowRoot.innerHTML = "" +
		"<style>.hidden{display: none;}</style>" +
		"<div class='hidden' id='shadowdiv'>" +
		"	<p class='hidden' id='shadowp'>" +
		"		<a href='#' class='hidden' id='shadowa'></a>" +
		"	</p>" +
		"	<code class='hidden' id='shadowcode'></code>" +
		"	<pre class='hidden' id='shadowpre'></pre>" +
		"	<span class='hidden' id='shadowspan'></span>" +
		"</div>" +
		"<table class='hidden' id='shadowtable'>" +
		"	<thead class='hidden' id='shadowthead'>" +
		"		<tr class='hidden' id='shadowtr'>" +
		"			<th class='hidden' id='shadowth'></th>" +
		"		</tr>" +
		"	</thead>" +
		"	<tbody class='hidden' id='shadowtbody'>" +
		"		<tr class='hidden'>" +
		"			<td class='hidden' id='shadowtd'></td>" +
		"		</tr>" +
		"	</tbody>" +

Review comment (bug):
As per the browser compatibility table from MDN i posted above, this test will fail under Firefox 53-63, these versions does support `getRootNode` but **not** `attachShadow`, so since this test rely on the later this change should not be needed.



Code after:
	span.show();
	assert.equal( span[ 0 ].style.display, "",
		"show() updates inline style of a detached inline-hidden span" );
	span.appendTo( "#qunit-fixture" );
	assert.equal( span.css( "display" ), "inline",
		"A shown-while-detached inline-hidden span has default display after attachment" );

	div = jQuery( "<div style='display: inline'/>" );
	div.show().appendTo( "#qunit-fixture" );
	assert.equal( div.css( "display" ), "inline",
		"show() does not update inline style of a detached inline-visible div" );
	div.remove();

	tr = jQuery( "<tr/>" );
	jQuery( "#table" ).append( tr );
	tr.detach().hide().show();

	assert.ok( !tr[ 0 ].style.display, "Not-hidden detached tr elements have no inline style" );
	tr.remove();

	span = jQuery( "<span/>" ).hide().show();
	assert.ok( !span[ 0 ].style.display, "Not-hidden detached span elements have no inline style" );
	span.remove();
} );

QUnit[
	document.body.attachShadow && document.body.getRootNode ?
		"test" :
		"skip"
	]( "show/hide shadow child nodes", function( assert ) {
	assert.expect( 28 );
	jQuery( "<div id='shadowHost'></div>" ).appendTo( "#qunit-fixture" );
	var shadowHost = document.querySelector( "#shadowHost" );
	var shadowRoot = shadowHost.attachShadow( { mode: "open" } );
	shadowRoot.innerHTML = "" +
		"<style>.hidden{display: none;}</style>" +
		"<div class='hidden' id='shadowdiv'>" +
		"	<p class='hidden' id='shadowp'>" +
		"		<a href='#' class='hidden' id='shadowa'></a>" +
		"	</p>" +
		"	<code class='hidden' id='shadowcode'></code>" +
		"	<pre class='hidden' id='shadowpre'></pre>" +
		"	<span class='hidden' id='shadowspan'></span>" +
		"</div>" +
		"<table class='hidden' id='shadowtable'>" +
		"	<thead class='hidden' id='shadowthead'>" +
		"		<tr class='hidden' id='shadowtr'>" +
		"			<th class='hidden' id='shadowth'></th>" +
		"		</tr>" +
		"	</thead>" +
		"	<tbody class='hidden' id='shadowtbody'>" +