LayoutTests/fast/shadow-dom/stylesheet-title-in-shadow-tree.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
 <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
 <meta name="assert" content="title content attribute should not affect the stylesheet's title inside a shadow tree">
 <link rel="help" href="https://html.spec.whatwg.org/#attr-style-title">
 <link rel="help" href="https://html.spec.whatwg.org/#attr-link-title">
 <script src="../../resources/testharness.js"></script>
 <script src="../../resources/testharnessreport.js"></script>
 </head>
 <body>
 <div id="log"></div>
 <script>

 function testStyleElementWithTitleInShadowTree(mode) {
     test(function () {
         const host = document.createElement('div');
         document.body.appendChild(host);
         const shadowRoot = host.attachShadow({'mode': mode});
         shadowRoot.innerHTML = '<style title="foo">div {width: 10px}</style><style title="bar">div {width: 20px}</style><div></div>';
         assert_equals(shadowRoot.styleSheets.length, 2);
         assert_equals(shadowRoot.styleSheets[0].title, null);
         assert_equals(shadowRoot.styleSheets[1].title, null);
         assert_equals(getComputedStyle(shadowRoot.querySelector('div')).width, '20px');
     }, `title content attribute on a HTML style element should not set the title of a stylesheet inside a shadow tree of ${mode} mode`);
 }

 testStyleElementWithTitleInShadowTree('open');
 testStyleElementWithTitleInShadowTree('closed');

 function testUpdatingTitleOnStyleElemenInShadowTree(mode) {
     test(function () {
         const host = document.createElement('div');
         document.body.appendChild(host);
         const shadowRoot = host.attachShadow({mode});
         shadowRoot.innerHTML = '<style>div {height: 10px}</style><style>div {height: 20px}</style><div></div>';
         assert_equals(shadowRoot.styleSheets.length, 2);
         assert_equals(shadowRoot.styleSheets[0].title, null);
         assert_equals(shadowRoot.styleSheets[1].title, null);
         shadowRoot.children[0].setAttribute('title', 'foo');
         shadowRoot.children[1].setAttribute('title', 'bar');
         assert_equals(shadowRoot.styleSheets.length, 2);
         assert_equals(shadowRoot.styleSheets[0].title, null);
         assert_equals(shadowRoot.styleSheets[1].title, null);
         assert_equals(getComputedStyle(shadowRoot.querySelector('div')).height, '20px');
     }, `Setting title content attribute on a HTML style element should not set the title of a stylesheet inside a shadow tree of ${mode} mode`);
 }

 testUpdatingTitleOnStyleElemenInShadowTree('open');
 testUpdatingTitleOnStyleElemenInShadowTree('closed');

 function testSVGStyleElementWithTitleInShadowTree(mode) {
     test(function () {
         const host = document.createElement('div');
         document.body.appendChild(host);
         const shadowRoot = host.attachShadow({'mode': mode});
         shadowRoot.innerHTML = '<svg><style title="foo">div {width: 10px}</style><style title="bar">div {width: 20px}</style></svg><div></div>';
         assert_equals(shadowRoot.styleSheets.length, 2);
         assert_equals(shadowRoot.styleSheets[0].title, null);
         assert_equals(shadowRoot.styleSheets[1].title, null);
         assert_equals(getComputedStyle(shadowRoot.querySelector('div')).width, '20px');
     }, `title content attribute on a SVG style element should not set the title of a stylesheet inside a shadow tree of ${mode} mode`);
 }

 testSVGStyleElementWithTitleInShadowTree('open');
 testSVGStyleElementWithTitleInShadowTree('closed');

 function testUpdatingTitleOnSVGStyleElemenInShadowTree(mode) {
     test(function () {
         const host = document.createElement('div');
         document.body.appendChild(host);
         const shadowRoot = host.attachShadow({mode});
         shadowRoot.innerHTML = '<svg><style>div {height: 10px}</style><style>div {height: 20px}</style></svg><div></div>';
         assert_equals(shadowRoot.styleSheets.length, 2);
         assert_equals(shadowRoot.styleSheets[0].title, null);
         assert_equals(shadowRoot.styleSheets[1].title, null);
         shadowRoot.firstChild.children[0].setAttribute('title', 'foo');
         shadowRoot.firstChild.children[1].setAttribute('title', 'bar');
         assert_equals(shadowRoot.styleSheets.length, 2);
         assert_equals(shadowRoot.styleSheets[0].title, null);
         assert_equals(shadowRoot.styleSheets[1].title, null);
         assert_equals(getComputedStyle(shadowRoot.querySelector('div')).height, '20px');
     }, `Setting title content attribute on a HTML style element should not set the title of a stylesheet inside a shadow tree of ${mode} mode 2`);
 }

 testUpdatingTitleOnSVGStyleElemenInShadowTree('open');
 testUpdatingTitleOnSVGStyleElemenInShadowTree('closed');

 function testLinkElementWithTitleInShadowTree(mode) {
     promise_test(async function () {
         const host = document.createElement('div');
         const shadowRoot = host.attachShadow({'mode': mode});
         shadowRoot.innerHTML = '<link rel="stylesheet" href="resources/green-div.css" title="foo"><link rel="stylesheet" href="resources/green-div.css" title="bar"><div></div>';
         const promises = Promise.all(Array.from(shadowRoot.querySelectorAll('link')).map((link) => {
             return new Promise((resolve) => link.addEventListener('load', resolve));
         }));
         document.body.appendChild(host);
         await promises;
         assert_equals(shadowRoot.styleSheets.length, 2);
         assert_equals(shadowRoot.styleSheets[0].title, null);
         assert_equals(shadowRoot.styleSheets[1].title, null);
         assert_equals(getComputedStyle(shadowRoot.querySelector('div')).backgroundColor, 'rgb(0, 128, 0)');
     }, `title content attribute on a HTML style element should not set the title of a stylesheet inside a shadow tree of ${mode} mode 2`);
 }

 testLinkElementWithTitleInShadowTree('open');
 testLinkElementWithTitleInShadowTree('closed');

 function testUpdatingTitleOnLinkElementInShadowTree(mode) {
     promise_test(async function () {
         const host = document.createElement('div');
         const shadowRoot = host.attachShadow({'mode': mode});
         shadowRoot.innerHTML = '<link rel="stylesheet" href="resources/green-div.css" title="foo"><link rel="stylesheet" href="resources/green-div.css" title="bar"><div></div>';
         const promises = Promise.all(Array.from(shadowRoot.querySelectorAll('link')).map((link) => {
             return new Promise((resolve) => link.addEventListener('load', resolve));
         }));
         document.body.appendChild(host);
         await promises;
         assert_equals(shadowRoot.styleSheets.length, 2);
         assert_equals(shadowRoot.styleSheets[0].title, null);
         assert_equals(shadowRoot.styleSheets[1].title, null);
         shadowRoot.children[0].setAttribute('title', 'foo');
         shadowRoot.children[1].setAttribute('title', 'bar');
         assert_equals(shadowRoot.styleSheets.length, 2);
         assert_equals(shadowRoot.styleSheets[0].title, null);
         assert_equals(shadowRoot.styleSheets[1].title, null);
         assert_equals(getComputedStyle(shadowRoot.querySelector('div')).backgroundColor, 'rgb(0, 128, 0)');
     }, `Setting title content attribute on a HTML style element should not set the title of a stylesheet inside a shadow tree of ${mode} mode 3`);
 }

 testUpdatingTitleOnLinkElementInShadowTree('open');
 testUpdatingTitleOnLinkElementInShadowTree('closed');

 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
	<meta name="assert" content="title content attribute should not affect the stylesheet's title inside a shadow tree">
	<link rel="help" href="https://html.spec.whatwg.org/#attr-style-title">
	<link rel="help" href="https://html.spec.whatwg.org/#attr-link-title">
	<script src="../../resources/testharness.js"></script>
	<script src="../../resources/testharnessreport.js"></script>
	</head>
	<body>
	<div id="log"></div>
	<script>

	function testStyleElementWithTitleInShadowTree(mode) {
	test(function () {
	const host = document.createElement('div');
	document.body.appendChild(host);
	const shadowRoot = host.attachShadow({'mode': mode});
	shadowRoot.innerHTML = '<style title="foo">div {width: 10px}</style><style title="bar">div {width: 20px}</style><div></div>';
	assert_equals(shadowRoot.styleSheets.length, 2);
	assert_equals(shadowRoot.styleSheets[0].title, null);
	assert_equals(shadowRoot.styleSheets[1].title, null);
	assert_equals(getComputedStyle(shadowRoot.querySelector('div')).width, '20px');
	}, `title content attribute on a HTML style element should not set the title of a stylesheet inside a shadow tree of ${mode} mode`);
	}

	testStyleElementWithTitleInShadowTree('open');
	testStyleElementWithTitleInShadowTree('closed');

	function testUpdatingTitleOnStyleElemenInShadowTree(mode) {
	test(function () {
	const host = document.createElement('div');
	document.body.appendChild(host);
	const shadowRoot = host.attachShadow({mode});
	shadowRoot.innerHTML = '<style>div {height: 10px}</style><style>div {height: 20px}</style><div></div>';
	assert_equals(shadowRoot.styleSheets.length, 2);
	assert_equals(shadowRoot.styleSheets[0].title, null);
	assert_equals(shadowRoot.styleSheets[1].title, null);
	shadowRoot.children[0].setAttribute('title', 'foo');
	shadowRoot.children[1].setAttribute('title', 'bar');
	assert_equals(shadowRoot.styleSheets.length, 2);
	assert_equals(shadowRoot.styleSheets[0].title, null);
	assert_equals(shadowRoot.styleSheets[1].title, null);
	assert_equals(getComputedStyle(shadowRoot.querySelector('div')).height, '20px');
	}, `Setting title content attribute on a HTML style element should not set the title of a stylesheet inside a shadow tree of ${mode} mode`);
	}

	testUpdatingTitleOnStyleElemenInShadowTree('open');
	testUpdatingTitleOnStyleElemenInShadowTree('closed');

	function testSVGStyleElementWithTitleInShadowTree(mode) {
	test(function () {
	const host = document.createElement('div');
	document.body.appendChild(host);
	const shadowRoot = host.attachShadow({'mode': mode});
	shadowRoot.innerHTML = '<svg><style title="foo">div {width: 10px}</style><style title="bar">div {width: 20px}</style></svg><div></div>';
	assert_equals(shadowRoot.styleSheets.length, 2);
	assert_equals(shadowRoot.styleSheets[0].title, null);
	assert_equals(shadowRoot.styleSheets[1].title, null);
	assert_equals(getComputedStyle(shadowRoot.querySelector('div')).width, '20px');
	}, `title content attribute on a SVG style element should not set the title of a stylesheet inside a shadow tree of ${mode} mode`);
	}

	testSVGStyleElementWithTitleInShadowTree('open');
	testSVGStyleElementWithTitleInShadowTree('closed');

	function testUpdatingTitleOnSVGStyleElemenInShadowTree(mode) {
	test(function () {
	const host = document.createElement('div');
	document.body.appendChild(host);
	const shadowRoot = host.attachShadow({mode});
	shadowRoot.innerHTML = '<svg><style>div {height: 10px}</style><style>div {height: 20px}</style></svg><div></div>';
	assert_equals(shadowRoot.styleSheets.length, 2);
	assert_equals(shadowRoot.styleSheets[0].title, null);
	assert_equals(shadowRoot.styleSheets[1].title, null);
	shadowRoot.firstChild.children[0].setAttribute('title', 'foo');
	shadowRoot.firstChild.children[1].setAttribute('title', 'bar');
	assert_equals(shadowRoot.styleSheets.length, 2);
	assert_equals(shadowRoot.styleSheets[0].title, null);
	assert_equals(shadowRoot.styleSheets[1].title, null);
	assert_equals(getComputedStyle(shadowRoot.querySelector('div')).height, '20px');
	}, `Setting title content attribute on a HTML style element should not set the title of a stylesheet inside a shadow tree of ${mode} mode 2`);
	}

	testUpdatingTitleOnSVGStyleElemenInShadowTree('open');
	testUpdatingTitleOnSVGStyleElemenInShadowTree('closed');

	function testLinkElementWithTitleInShadowTree(mode) {
	promise_test(async function () {
	const host = document.createElement('div');
	const shadowRoot = host.attachShadow({'mode': mode});
	shadowRoot.innerHTML = '<link rel="stylesheet" href="resources/green-div.css" title="foo"><link rel="stylesheet" href="resources/green-div.css" title="bar"><div></div>';
	const promises = Promise.all(Array.from(shadowRoot.querySelectorAll('link')).map((link) => {
	return new Promise((resolve) => link.addEventListener('load', resolve));
	}));
	document.body.appendChild(host);
	await promises;
	assert_equals(shadowRoot.styleSheets.length, 2);
	assert_equals(shadowRoot.styleSheets[0].title, null);
	assert_equals(shadowRoot.styleSheets[1].title, null);
	assert_equals(getComputedStyle(shadowRoot.querySelector('div')).backgroundColor, 'rgb(0, 128, 0)');
	}, `title content attribute on a HTML style element should not set the title of a stylesheet inside a shadow tree of ${mode} mode 2`);
	}

	testLinkElementWithTitleInShadowTree('open');
	testLinkElementWithTitleInShadowTree('closed');

	function testUpdatingTitleOnLinkElementInShadowTree(mode) {
	promise_test(async function () {
	const host = document.createElement('div');
	const shadowRoot = host.attachShadow({'mode': mode});
	shadowRoot.innerHTML = '<link rel="stylesheet" href="resources/green-div.css" title="foo"><link rel="stylesheet" href="resources/green-div.css" title="bar"><div></div>';
	const promises = Promise.all(Array.from(shadowRoot.querySelectorAll('link')).map((link) => {
	return new Promise((resolve) => link.addEventListener('load', resolve));
	}));
	document.body.appendChild(host);
	await promises;
	assert_equals(shadowRoot.styleSheets.length, 2);
	assert_equals(shadowRoot.styleSheets[0].title, null);
	assert_equals(shadowRoot.styleSheets[1].title, null);
	shadowRoot.children[0].setAttribute('title', 'foo');
	shadowRoot.children[1].setAttribute('title', 'bar');
	assert_equals(shadowRoot.styleSheets.length, 2);
	assert_equals(shadowRoot.styleSheets[0].title, null);
	assert_equals(shadowRoot.styleSheets[1].title, null);
	assert_equals(getComputedStyle(shadowRoot.querySelector('div')).backgroundColor, 'rgb(0, 128, 0)');
	}, `Setting title content attribute on a HTML style element should not set the title of a stylesheet inside a shadow tree of ${mode} mode 3`);
	}

	testUpdatingTitleOnLinkElementInShadowTree('open');
	testUpdatingTitleOnLinkElementInShadowTree('closed');

	</script>
	</body>
	</html>