css/css-cascade/scope-style-sharing-002.html - external/w3c/web-platform-tests - Git at Google

 <!DOCTYPE html>
 <title>@scope - Cousin Style Sharing</title>
 <link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scope-atrule">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <main id=main></main>

 <template id=test_1>
   <style>
     @scope (.scope-start) to (:scope:last-of-type > .foo) {
       .foo {
         z-index: 1;
       }
     }
   </style>
   <div class="scope-start">
     <div id="first" class="foo"></div>
   </div>
   <div class="scope-start">
     <div id="second" class="foo"></div>
   </div>
 </template>
 <script>
 test((t) => {
   t.add_cleanup(() => main.replaceChildren());
   main.append(test_1.content.cloneNode(true));

   assert_equals(getComputedStyle(first).zIndex, '1');
   assert_equals(getComputedStyle(second).zIndex, 'auto');
 }, '@scope with cousin style sharing, second sibling exits scope');
 </script>

 <template id=test_2>
   <style>
     @scope (.scope-start) to (:scope:first-of-type > .foo) {
       .foo {
         z-index: 1;
       }
     }
     .scope-start:first-child {
       color: green;
     }
   </style>
   <div class="scope-start">
     <div id="first" class="foo"></div>
   </div>
   <div class="scope-start">
     <div id="second" class="foo"></div>
   </div>
 </template>
 <script>
 test((t) => {
   t.add_cleanup(() => main.replaceChildren());
   main.append(test_2.content.cloneNode(true));

   assert_equals(getComputedStyle(first).zIndex, 'auto');
   assert_equals(getComputedStyle(second).zIndex, '1');
 }, '@scope with cousin style sharing, first sibling exits scope');
 </script>

 <template id=test_3>
   <style>
     @scope (.scope-start:first-of-type > .foo) {
       :scope {
         z-index: 1;
       }
     }
   </style>
   <div class="scope-start">
     <div id="first" class="foo"></div>
   </div>
   <div class="scope-start">
     <div id="second" class="foo"></div>
   </div>
 </template>
 <script>
 test((t) => {
   t.add_cleanup(() => main.replaceChildren());
   main.append(test_3.content.cloneNode(true));

   assert_equals(getComputedStyle(first).zIndex, '1');
   assert_equals(getComputedStyle(second).zIndex, 'auto');
 }, '@scope with cousin style sharing, first sibling enters scope');
 </script>

 <template id=test_4>
   <style>
     @scope (.scope-start:last-of-type > .foo) {
       :scope {
         z-index: 1;
       }
     }
   </style>
   <div class="scope-start">
     <div id="first" class="foo"></div>
   </div>
   <div class="scope-start">
     <div id="second" class="foo"></div>
   </div>
 </template>
 <script>
 test((t) => {
   t.add_cleanup(() => main.replaceChildren());
   main.append(test_4.content.cloneNode(true));

   assert_equals(getComputedStyle(first).zIndex, 'auto');
   assert_equals(getComputedStyle(second).zIndex, '1');
 }, '@scope with cousin style sharing, second sibling enters scope');
 </script>

 <template id=test_5>
   <div class="scope-start">
     <style>
       @scope {
         .foo {
           z-index: 1;
         }
       }
     </style>
     <div id="first" class="foo"></div>
   </div>
   <div class="scope-start">
     <div id="second" class="foo"></div>
   </div>
 </template>
 <script>
 test((t) => {
   t.add_cleanup(() => main.replaceChildren());
   main.append(test_5.content.cloneNode(true));

   assert_equals(getComputedStyle(first).zIndex, '1');
   assert_equals(getComputedStyle(second).zIndex, 'auto');
 }, '@scope with cousin style sharing, second sibling parent does not have implicit scope');
 </script>

 <template id=test_6>
   <div class="scope-start">
     <div id="first" class="foo"></div>
   </div>
   <div class="scope-start">
     <style>
       @scope {
         .foo {
           z-index: 1;
         }
       }
     </style>
     <div id="second" class="foo"></div>
   </div>
 </template>
 <script>
 test((t) => {
   t.add_cleanup(() => main.replaceChildren());
   main.append(test_6.content.cloneNode(true));

   assert_equals(getComputedStyle(first).zIndex, 'auto');
   assert_equals(getComputedStyle(second).zIndex, '1');
 }, '@scope with cousin style sharing, first sibling parent does not have implicit scope');
 </script>

 <template id=test_7>
   <div class="scope-start">
     <div id="first" class="foo">
       <style>
         @scope {
           :scope {
             z-index: 1;
           }
         }
       </style>
     </div>
   </div>
   <div class="scope-start">
     <div id="second" class="foo">
     </div>
   </div>
 </template>
 <script>
 test((t) => {
   t.add_cleanup(() => main.replaceChildren());
   main.append(test_7.content.cloneNode(true));

   assert_equals(getComputedStyle(first).zIndex, '1');
   assert_equals(getComputedStyle(second).zIndex, 'auto');
 }, '@scope with cousin style sharing, second sibling does not have implicit scope');
 </script>

 <template id=test_8>
   <div class="scope-start">
     <div id="first" class="foo">
     </div>
   </div>
   <div class="scope-start">
     <div id="second" class="foo">
       <style>
         @scope {
           :scope {
             z-index: 1;
           }
         }
       </style>
     </div>
   </div>
 </template>
 <script>
 test((t) => {
   t.add_cleanup(() => main.replaceChildren());
   main.append(test_8.content.cloneNode(true));

   assert_equals(getComputedStyle(first).zIndex, 'auto');
   assert_equals(getComputedStyle(second).zIndex, '1');
 }, '@scope with cousin style sharing, first sibling does not have implicit scope');
 </script>

 <template id=test_9>
   <style>
     @scope (.scope-start:has(> .bar)) {
       .foo {
         z-index: 1;
       }
     }
   </style>
   <div class="scope-start">
     <div id="first" class="foo"></div>
     <div class="bar"></div>
   </div>
   <div class="scope-start">
     <div id="second" class="foo"></div>
   </div>
 </template>
 <script>
 test((t) => {
   t.add_cleanup(() => main.replaceChildren());
   main.append(test_9.content.cloneNode(true));

   assert_equals(getComputedStyle(first).zIndex, '1');
   assert_equals(getComputedStyle(second).zIndex, 'auto');
 }, '@scope with cousin style sharing, first sibling enters scope with :has');
 </script>

 <template id=test_10>
   <style>
     @scope (.scope-start:has(> .bar)) {
       .foo {
         z-index: 1;
       }
     }
   </style>
   <div class="scope-start">
     <div id="first" class="foo"></div>
   </div>
   <div class="scope-start">
     <div id="second" class="foo"></div>
     <div class="bar"></div>
   </div>
 </template>
 <script>
 test((t) => {
   t.add_cleanup(() => main.replaceChildren());
   main.append(test_10.content.cloneNode(true));

   assert_equals(getComputedStyle(first).zIndex, 'auto');
   assert_equals(getComputedStyle(second).zIndex, '1');
 }, '@scope with cousin style sharing, second sibling enters scope with :has');
 </script>

 <template id=test_11>
   <style>
     @scope (#first-parent) {
       .foo {
         z-index: 1;
       }
     }
   </style>
   <div id="first-parent">
     <div id="first" class="foo"></div>
   </div>
   <div id="second-parent">
     <div id="second" class="foo"></div>
   </div>
 </template>
 <script>
 test((t) => {
   t.add_cleanup(() => main.replaceChildren());
   main.append(test_11.content.cloneNode(true));

   assert_equals(getComputedStyle(first).zIndex, '1');
   assert_equals(getComputedStyle(second).zIndex, 'auto');
 }, '@scope with cousin style sharing, first sibling enters scope ID selector');
 </script>

 <template id=test_12>
   <style>
     @scope (#second-parent) {
       .foo {
         z-index: 1;
       }
     }
   </style>
   <div id="first-parent">
     <div id="first" class="foo"></div>
   </div>
   <div id="second-parent">
     <div id="second" class="foo"></div>
   </div>
 </template>
 <script>
 test((t) => {
   t.add_cleanup(() => main.replaceChildren());
   main.append(test_12.content.cloneNode(true));

   assert_equals(getComputedStyle(first).zIndex, 'auto');
   assert_equals(getComputedStyle(second).zIndex, '1');
 }, '@scope with cousin style sharing, second sibling enters scope ID selector');
 </script>
	<!DOCTYPE html>
	<title>@scope - Cousin Style Sharing</title>
	<link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scope-atrule">
	<script src="/resources/testharness.js"></script>
	<script src="/resources/testharnessreport.js"></script>
	<main id=main></main>

	<template id=test_1>
	<style>
	@scope (.scope-start) to (:scope:last-of-type > .foo) {
	.foo {
	z-index: 1;
	}
	}
	</style>
	<div class="scope-start">
	<div id="first" class="foo"></div>
	</div>
	<div class="scope-start">
	<div id="second" class="foo"></div>
	</div>
	</template>
	<script>
	test((t) => {
	t.add_cleanup(() => main.replaceChildren());
	main.append(test_1.content.cloneNode(true));

	assert_equals(getComputedStyle(first).zIndex, '1');
	assert_equals(getComputedStyle(second).zIndex, 'auto');
	}, '@scope with cousin style sharing, second sibling exits scope');
	</script>

	<template id=test_2>
	<style>
	@scope (.scope-start) to (:scope:first-of-type > .foo) {
	.foo {
	z-index: 1;
	}
	}
	.scope-start:first-child {
	color: green;
	}
	</style>
	<div class="scope-start">
	<div id="first" class="foo"></div>
	</div>
	<div class="scope-start">
	<div id="second" class="foo"></div>
	</div>
	</template>
	<script>
	test((t) => {
	t.add_cleanup(() => main.replaceChildren());
	main.append(test_2.content.cloneNode(true));

	assert_equals(getComputedStyle(first).zIndex, 'auto');
	assert_equals(getComputedStyle(second).zIndex, '1');
	}, '@scope with cousin style sharing, first sibling exits scope');
	</script>

	<template id=test_3>
	<style>
	@scope (.scope-start:first-of-type > .foo) {
	:scope {
	z-index: 1;
	}
	}
	</style>
	<div class="scope-start">
	<div id="first" class="foo"></div>
	</div>
	<div class="scope-start">
	<div id="second" class="foo"></div>
	</div>
	</template>
	<script>
	test((t) => {
	t.add_cleanup(() => main.replaceChildren());
	main.append(test_3.content.cloneNode(true));

	assert_equals(getComputedStyle(first).zIndex, '1');
	assert_equals(getComputedStyle(second).zIndex, 'auto');
	}, '@scope with cousin style sharing, first sibling enters scope');
	</script>

	<template id=test_4>
	<style>
	@scope (.scope-start:last-of-type > .foo) {
	:scope {
	z-index: 1;
	}
	}
	</style>
	<div class="scope-start">
	<div id="first" class="foo"></div>
	</div>
	<div class="scope-start">
	<div id="second" class="foo"></div>
	</div>
	</template>
	<script>
	test((t) => {
	t.add_cleanup(() => main.replaceChildren());
	main.append(test_4.content.cloneNode(true));

	assert_equals(getComputedStyle(first).zIndex, 'auto');
	assert_equals(getComputedStyle(second).zIndex, '1');
	}, '@scope with cousin style sharing, second sibling enters scope');
	</script>

	<template id=test_5>
	<div class="scope-start">
	<style>
	@scope {
	.foo {
	z-index: 1;
	}
	}
	</style>
	<div id="first" class="foo"></div>
	</div>
	<div class="scope-start">
	<div id="second" class="foo"></div>
	</div>
	</template>
	<script>
	test((t) => {
	t.add_cleanup(() => main.replaceChildren());
	main.append(test_5.content.cloneNode(true));

	assert_equals(getComputedStyle(first).zIndex, '1');
	assert_equals(getComputedStyle(second).zIndex, 'auto');
	}, '@scope with cousin style sharing, second sibling parent does not have implicit scope');
	</script>

	<template id=test_6>
	<div class="scope-start">
	<div id="first" class="foo"></div>
	</div>
	<div class="scope-start">
	<style>
	@scope {
	.foo {
	z-index: 1;
	}
	}
	</style>
	<div id="second" class="foo"></div>
	</div>
	</template>
	<script>
	test((t) => {
	t.add_cleanup(() => main.replaceChildren());
	main.append(test_6.content.cloneNode(true));

	assert_equals(getComputedStyle(first).zIndex, 'auto');
	assert_equals(getComputedStyle(second).zIndex, '1');
	}, '@scope with cousin style sharing, first sibling parent does not have implicit scope');
	</script>

	<template id=test_7>
	<div class="scope-start">
	<div id="first" class="foo">
	<style>
	@scope {
	:scope {
	z-index: 1;
	}
	}
	</style>
	</div>
	</div>
	<div class="scope-start">
	<div id="second" class="foo">
	</div>
	</div>
	</template>
	<script>
	test((t) => {
	t.add_cleanup(() => main.replaceChildren());
	main.append(test_7.content.cloneNode(true));

	assert_equals(getComputedStyle(first).zIndex, '1');
	assert_equals(getComputedStyle(second).zIndex, 'auto');
	}, '@scope with cousin style sharing, second sibling does not have implicit scope');
	</script>

	<template id=test_8>
	<div class="scope-start">
	<div id="first" class="foo">
	</div>
	</div>
	<div class="scope-start">
	<div id="second" class="foo">
	<style>
	@scope {
	:scope {
	z-index: 1;
	}
	}
	</style>
	</div>
	</div>
	</template>
	<script>
	test((t) => {
	t.add_cleanup(() => main.replaceChildren());
	main.append(test_8.content.cloneNode(true));

	assert_equals(getComputedStyle(first).zIndex, 'auto');
	assert_equals(getComputedStyle(second).zIndex, '1');
	}, '@scope with cousin style sharing, first sibling does not have implicit scope');
	</script>

	<template id=test_9>
	<style>
	@scope (.scope-start:has(> .bar)) {
	.foo {
	z-index: 1;
	}
	}
	</style>
	<div class="scope-start">
	<div id="first" class="foo"></div>
	<div class="bar"></div>
	</div>
	<div class="scope-start">
	<div id="second" class="foo"></div>
	</div>
	</template>
	<script>
	test((t) => {
	t.add_cleanup(() => main.replaceChildren());
	main.append(test_9.content.cloneNode(true));

	assert_equals(getComputedStyle(first).zIndex, '1');
	assert_equals(getComputedStyle(second).zIndex, 'auto');
	}, '@scope with cousin style sharing, first sibling enters scope with :has');
	</script>

	<template id=test_10>
	<style>
	@scope (.scope-start:has(> .bar)) {
	.foo {
	z-index: 1;
	}
	}
	</style>
	<div class="scope-start">
	<div id="first" class="foo"></div>
	</div>
	<div class="scope-start">
	<div id="second" class="foo"></div>
	<div class="bar"></div>
	</div>
	</template>
	<script>
	test((t) => {
	t.add_cleanup(() => main.replaceChildren());
	main.append(test_10.content.cloneNode(true));

	assert_equals(getComputedStyle(first).zIndex, 'auto');
	assert_equals(getComputedStyle(second).zIndex, '1');
	}, '@scope with cousin style sharing, second sibling enters scope with :has');
	</script>

	<template id=test_11>
	<style>
	@scope (#first-parent) {
	.foo {
	z-index: 1;
	}
	}
	</style>
	<div id="first-parent">
	<div id="first" class="foo"></div>
	</div>
	<div id="second-parent">
	<div id="second" class="foo"></div>
	</div>
	</template>
	<script>
	test((t) => {
	t.add_cleanup(() => main.replaceChildren());
	main.append(test_11.content.cloneNode(true));

	assert_equals(getComputedStyle(first).zIndex, '1');
	assert_equals(getComputedStyle(second).zIndex, 'auto');
	}, '@scope with cousin style sharing, first sibling enters scope ID selector');
	</script>

	<template id=test_12>
	<style>
	@scope (#second-parent) {
	.foo {
	z-index: 1;
	}
	}
	</style>
	<div id="first-parent">
	<div id="first" class="foo"></div>
	</div>
	<div id="second-parent">
	<div id="second" class="foo"></div>
	</div>
	</template>
	<script>
	test((t) => {
	t.add_cleanup(() => main.replaceChildren());
	main.append(test_12.content.cloneNode(true));

	assert_equals(getComputedStyle(first).zIndex, 'auto');
	assert_equals(getComputedStyle(second).zIndex, '1');
	}, '@scope with cousin style sharing, second sibling enters scope ID selector');
	</script>