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

Code before:
	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.head.createShadowRoot ? "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>" +
		"</table>" +
		"<ul class='hidden' id='shadowul'>" +
			"<li class='hidden' id='shadowli'></li>" +
		"</ul>";

	var test = {
		"div": "block",
		"p": "block",

Review comment (bug):
This is indented incorrectly, all this indentation would be lost upon reformatting. Please achieve indentation by putting spaces inside of the string, not before it, like that:
```js
shadowRoot.innerHTML = "" +
	"<style>.hidden{display: none;}</style>" +
	"<div class='hidden' id='shadowdiv'>" +
	"	<p class='hidden' id='shadowp'>" +
	...
	"</div>";
```

Code after:
	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 ? "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>" +
		"</table>" +
		"<ul class='hidden' id='shadowul'>" +
		"	<li class='hidden' id='shadowli'></li>" +
		"</ul>";

	var test = {
		"div": "block",