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

Code before:
	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",
		"a": "inline",
		"code": "inline",
		"pre": "block",
		"span": "inline",
		"table": "table",
		"thead": "table-header-group",
		"tbody": "table-row-group",
		"tr": "table-row",
		"th": "table-cell",
		"td": "table-cell",
		"ul": "block",
		"li": "list-item"
	};

	jQuery.each( test, function( selector, expected ) {
		var shadowChild = shadowRoot.querySelector( "#shadow" + selector );
		var x = jQuery( shadowChild );
		assert.strictEqual( x.css( "display" ), "none", "is hidden" );
		x.show();
		assert.strictEqual( x.css( "display" ), expected, "Show using correct display type for " + selector );
	} );

Review comment (suggestion):
This got quite long and, hence, hard to read. Could you format this code so that the format is more clear? You can use tabs in the string to simulate indentation, something like:
```js
	shadowRoot.innerHTML = "" +
		"<style>.hidden{display: none;}</style>" +
		"<div class='hidden' id='shadowdiv'>" +
		"	<p class='hidden' id='shadowp'>" +
		...
		"</div>" +
		...
```
etc.

Code after:
	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",
		"p": "block",
		"a": "inline",
		"code": "inline",
		"pre": "block",
		"span": "inline",
		"table": "table",
		"thead": "table-header-group",