css/css-toggle/toggle-activation-with-groups.tentative.html - external/github.com/web-platform-tests/wpt - Git at Google

 <!DOCTYPE HTML>
 <meta charset="UTF-8">
 <title>CSS Toggles: activation of toggles</title>
 <link rel="author" title="L. David Baron" href="https://dbaron.org/">
 <link rel="author" title="Google" href="http://www.google.com/">
 <link rel="help" href="https://tabatkins.github.io/css-toggle/#toggle-trigger-property">
 <link rel="help" href="https://tabatkins.github.io/css-toggle/#fire-a-toggle-activation">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="support/toggle-helpers.js"></script>

 <body>

 <div id="container"></div>
 <script>

 let container = document.getElementById("container");

 function test_trigger_on_group(toggle_specifier, other_specifier, action, toggle_expected, group_expected)
 {
   promise_test(async function() {
     let group = document.createElement("div");
     group.style.toggleGroup = "test-group";

     let toggle = document.createElement("div");
     toggle.style.toggle = `test-group ${toggle_specifier} group`;
     toggle.style.toggleTrigger = `test-group ${action}`;
     group.appendChild(toggle);

     let other = document.createElement("div");
     other.style.toggle = `test-group ${other_specifier} group`;
     group.appendChild(other);

     container.replaceChildren(group);
     await wait_for_toggle_creation(toggle);

     toggle.click();
     assert_true(toggle.matches(`:toggle(test-group ${toggle_expected}`), "value of triggered toggle");
     assert_true(other.matches(`:toggle(test-group ${group_expected}`), "value of other toggle in group");
   }, `group behavior for toggle "${toggle_specifier}" and action "${action}" with other element in group "${other_specifier}"`);
 }

 test_trigger_on_group("", "", "next", "1", "0");
 test_trigger_on_group("1 at 0", "1 at 0", "next", "1", "0");
 test_trigger_on_group("", "1 at 1", "next", "1", "0");
 test_trigger_on_group("1 at 1", "1 at 1", "next", "0", "1");
 test_trigger_on_group("1 at 1 cycle", "1 at 1", "next", "0", "1");
 test_trigger_on_group("1 at 1 cycle-on", "1 at 1", "next", "1", "0");
 test_trigger_on_group("1 at 1 sticky", "1 at 1", "next", "1", "0");
 test_trigger_on_group("1 at 1", "1 at 1", "set 3", "3", "0");
 test_trigger_on_group("1 at 1", "1 at 1", "set 0", "0", "1");
 test_trigger_on_group("1 at 7", "1 at 5", "set 9", "9", "0");
 test_trigger_on_group("1 at 7", "1 at 5", "set 0", "0", "5");
 test_trigger_on_group("", "1 at 1 cycle", "next", "1", "0");
 test_trigger_on_group("", "1 at 1 cycle-on", "next", "1", "0");
 test_trigger_on_group("", "1 at 1 sticky", "next", "1", "0");
 test_trigger_on_group("1 at 0", "1 at 1", "prev", "1", "0");
 test_trigger_on_group("1 at 0", "1 at 0", "prev", "1", "0");
 test_trigger_on_group("1 at 1", "1 at 1", "prev", "0", "1");
 test_trigger_on_group("1 at 1 cycle", "1 at 1", "prev", "0", "1");
 test_trigger_on_group("1 at 1 cycle-on", "1 at 1", "prev", "1", "0");
 test_trigger_on_group("1 at 1 sticky", "1 at 1", "prev", "0", "1");
 test_trigger_on_group("", "1 at 1", "set 0", "0", "1");
 test_trigger_on_group("", "1 at 1", "set 1", "1", "0");
 test_trigger_on_group("", "1 at 1", "set 7", "7", "0");
 test_trigger_on_group("", "1 at 1", "set named-state", "named-state", "0");
 test_trigger_on_group("[a b c] at a", "1 at 1", "next", "b", "0");
 test_trigger_on_group("[a b c] at c", "1 at 1", "next", "a", "1");
 test_trigger_on_group("[a b c] at a", "1 at 1", "prev", "c", "0");
 test_trigger_on_group("[a b c] at b", "1 at 1", "prev", "a", "1");
 test_trigger_on_group("[a b c] at b", "1 at 1", "set 2", "c", "0");
 test_trigger_on_group("[a b c] at b", "1 at 1", "set c", "c", "0");
 test_trigger_on_group("[a b c] at b", "1 at 1", "set 0", "0", "1");
 test_trigger_on_group("[a b c] at b", "1 at 1", "set a", "0", "1");
 test_trigger_on_group("[a b c] at b", "1 at 1", "set new-state", "new-state", "0");
 test_trigger_on_group("", "[a b c] at b", "next", "1", "a");
 test_trigger_on_group("", "[a b c] at b", "prev", "1", "a");
 test_trigger_on_group("", "[a b c] at b", "set 1", "1", "a");
 test_trigger_on_group("", "[a b c] at b", "set 0", "0", "b");

 let finding_group_tests = [
   // Markup to create the test assertions:
   //   class=assert-in: assert that this element's in-scope toggle is in the
   //     test-group group and was not the activated toggle
   //   class=assert-out: assert that this element's in-scope toggle is not in
   //     the test-group group and was not the activated toggle
   //   class=assert-activated: assert that this element's in-scope toggle was
   //     the activated toggle
   //
   // Helper markup to create more markup:
   //   class=establish: establish the group with the toggle-group property
   //   class=establish-self: same, but with the self keyword (narrow scope)
   //   class=root: create a test-group toggle with the toggle-root property
   //   class=root-nogroup: same, but without the 'group' keyword
   //   class=activate: toggle-trigger to activate test-group toggle
   //
   // class=activate (above) is *also* a helper to run the test; it will be
   // activated.  There must only be one element with class=activate.
   `
     <div class="establish"></div>
     <div class="root assert-in"></div>
     <div class="root-nogroup assert-out"></div>
     <div class="root activate assert-activated"></div>
   `,
   `
     <div class="establish"></div>
     <div class="root assert-out"></div>
     <div class="establish"></div>
     <div class="root assert-in"></div>
     <div class="root activate assert-activated"></div>
   `,
   `
     <div class="establish"></div>
     <div class="root activate assert-activated"></div>
     <div class="root assert-in"></div>
     <div class="establish"></div>
     <div class="root assert-out"></div>
   `,
   `
     <div class="establish"></div>
     <div class="root assert-in"></div>
     <div class="establish-self">
       <div class="root assert-out"></div>
     </div>
     <div class="root assert-in"></div>
     <div class="root activate assert-activated"></div>
   `,
   `
     <div class="establish"></div>
     <div class="root assert-out"></div>
     <div class="establish">
       <div class="root assert-in"></div>
     </div>
     <div class="root assert-in"></div>
     <div class="root activate assert-activated"></div>
   `,
   `
     <div class="establish"></div>
     <div class="root activate assert-activated"></div>
     <div class="root assert-in"></div>
     <div class="establish">
       <div class="root assert-out"></div>
     </div>
     <div class="root assert-out"></div>
   `,
   `
     <div class="establish"></div>
     <div class="root assert-in"></div>
     <div class="establish-self"></div>
     <div class="root assert-activated"></div>
     <div class="activate"></div>
   `,
   `
     <div class="root activate assert-activated"></div>
     <div class="root assert-in"></div>
   `,
   `
     <div class="root assert-out"></div>
     <div class="establish-self">
       <div class="root activate assert-activated"></div>
       <div class="root assert-in"></div>
     </div>
     <div class="root assert-out"></div>
   `,
   `
     <div class="root assert-out"></div>
     <div style="toggle-group: test-group self, extra-group">
       <div class="root activate assert-activated"></div>
       <div class="root assert-in"></div>
     </div>
     <div class="root assert-out"></div>
   `,
   `
     <div class="root assert-out"></div>
     <div style="toggle-group: extra-group, test-group self">
       <div class="root activate assert-activated"></div>
       <div class="root assert-in"></div>
     </div>
     <div class="root assert-out"></div>
   `,
   `
     <div class="root activate assert-activated">
       <div class="establish">
         <div class="root assert-out"></div>
       </div>
       <div class="root assert-out"></div>
     </div>
   `,
   `
     <div class="root activate assert-activated">
       <div class="establish-self">
         <div class="root assert-out"></div>
       </div>
       <div class="root assert-in"></div>
     </div>
   `,
   `
     <div class="root activate assert-activated">
       <div class="root assert-in"></div>
       <div>
         <div class="root assert-in"></div>
         <div class="establish">
           <div class="root assert-out"></div>
         </div>
         <div class="root assert-out"></div>
       </div>
       <div class="root assert-in"></div>
     </div>
   `,
 ];

 for (let t of finding_group_tests) {
   promise_test(async function() {
     container.innerHTML = t;

     for (let e of container.querySelectorAll('.establish')) {
       e.style.toggleGroup = "test-group";
     }
     for (let e of container.querySelectorAll('.establish-self')) {
       e.style.toggleGroup = "test-group self";
     }
     for (let e of container.querySelectorAll('.root')) {
       e.style.toggleRoot = "test-group 1 at 1 cycle-on group";
     }
     for (let e of container.querySelectorAll('.root-nogroup')) {
       e.style.toggleRoot = "test-group 1 at 1 cycle-on";
     }
     let activate = container.querySelector('.activate');
     activate.style.toggleTrigger = "test-group set 2";

     for (let e of container.querySelectorAll('.root, .root-nogroup')) {
       await wait_for_toggle_creation(e);
     }

     activate.click();
     for (let e of container.querySelectorAll('.assert-in')) {
       assert_true(e.matches(":toggle(test-group 0)"), "element in group");
     }
     for (let e of container.querySelectorAll('.assert-out')) {
       assert_true(e.matches(":toggle(test-group 1)"), "element not in group");
     }
     for (let e of container.querySelectorAll('.assert-activated')) {
       assert_true(e.matches(":toggle(test-group 2)"), "element was activated");
     }
   }, `toggle groups test: ${t}`);
 }

 // TODO(dbaron): This could probably use a few additional tests for multiple
 // values of the list-valued properties.  (But they're hard to auto-generate.)

 </script>
	<!DOCTYPE HTML>
	<meta charset="UTF-8">
	<title>CSS Toggles: activation of toggles</title>
	<link rel="author" title="L. David Baron" href="https://dbaron.org/">
	<link rel="author" title="Google" href="http://www.google.com/">
	<link rel="help" href="https://tabatkins.github.io/css-toggle/#toggle-trigger-property">
	<link rel="help" href="https://tabatkins.github.io/css-toggle/#fire-a-toggle-activation">
	<script src="/resources/testharness.js"></script>
	<script src="/resources/testharnessreport.js"></script>
	<script src="support/toggle-helpers.js"></script>

	<body>

	<div id="container"></div>
	<script>

	let container = document.getElementById("container");

	function test_trigger_on_group(toggle_specifier, other_specifier, action, toggle_expected, group_expected)
	{
	promise_test(async function() {
	let group = document.createElement("div");
	group.style.toggleGroup = "test-group";

	let toggle = document.createElement("div");
	toggle.style.toggle = `test-group ${toggle_specifier} group`;
	toggle.style.toggleTrigger = `test-group ${action}`;
	group.appendChild(toggle);

	let other = document.createElement("div");
	other.style.toggle = `test-group ${other_specifier} group`;
	group.appendChild(other);

	container.replaceChildren(group);
	await wait_for_toggle_creation(toggle);

	toggle.click();
	assert_true(toggle.matches(`:toggle(test-group ${toggle_expected}`), "value of triggered toggle");
	assert_true(other.matches(`:toggle(test-group ${group_expected}`), "value of other toggle in group");
	}, `group behavior for toggle "${toggle_specifier}" and action "${action}" with other element in group "${other_specifier}"`);
	}

	test_trigger_on_group("", "", "next", "1", "0");
	test_trigger_on_group("1 at 0", "1 at 0", "next", "1", "0");
	test_trigger_on_group("", "1 at 1", "next", "1", "0");
	test_trigger_on_group("1 at 1", "1 at 1", "next", "0", "1");
	test_trigger_on_group("1 at 1 cycle", "1 at 1", "next", "0", "1");
	test_trigger_on_group("1 at 1 cycle-on", "1 at 1", "next", "1", "0");
	test_trigger_on_group("1 at 1 sticky", "1 at 1", "next", "1", "0");
	test_trigger_on_group("1 at 1", "1 at 1", "set 3", "3", "0");
	test_trigger_on_group("1 at 1", "1 at 1", "set 0", "0", "1");
	test_trigger_on_group("1 at 7", "1 at 5", "set 9", "9", "0");
	test_trigger_on_group("1 at 7", "1 at 5", "set 0", "0", "5");
	test_trigger_on_group("", "1 at 1 cycle", "next", "1", "0");
	test_trigger_on_group("", "1 at 1 cycle-on", "next", "1", "0");
	test_trigger_on_group("", "1 at 1 sticky", "next", "1", "0");
	test_trigger_on_group("1 at 0", "1 at 1", "prev", "1", "0");
	test_trigger_on_group("1 at 0", "1 at 0", "prev", "1", "0");
	test_trigger_on_group("1 at 1", "1 at 1", "prev", "0", "1");
	test_trigger_on_group("1 at 1 cycle", "1 at 1", "prev", "0", "1");
	test_trigger_on_group("1 at 1 cycle-on", "1 at 1", "prev", "1", "0");
	test_trigger_on_group("1 at 1 sticky", "1 at 1", "prev", "0", "1");
	test_trigger_on_group("", "1 at 1", "set 0", "0", "1");
	test_trigger_on_group("", "1 at 1", "set 1", "1", "0");
	test_trigger_on_group("", "1 at 1", "set 7", "7", "0");
	test_trigger_on_group("", "1 at 1", "set named-state", "named-state", "0");
	test_trigger_on_group("[a b c] at a", "1 at 1", "next", "b", "0");
	test_trigger_on_group("[a b c] at c", "1 at 1", "next", "a", "1");
	test_trigger_on_group("[a b c] at a", "1 at 1", "prev", "c", "0");
	test_trigger_on_group("[a b c] at b", "1 at 1", "prev", "a", "1");
	test_trigger_on_group("[a b c] at b", "1 at 1", "set 2", "c", "0");
	test_trigger_on_group("[a b c] at b", "1 at 1", "set c", "c", "0");
	test_trigger_on_group("[a b c] at b", "1 at 1", "set 0", "0", "1");
	test_trigger_on_group("[a b c] at b", "1 at 1", "set a", "0", "1");
	test_trigger_on_group("[a b c] at b", "1 at 1", "set new-state", "new-state", "0");
	test_trigger_on_group("", "[a b c] at b", "next", "1", "a");
	test_trigger_on_group("", "[a b c] at b", "prev", "1", "a");
	test_trigger_on_group("", "[a b c] at b", "set 1", "1", "a");
	test_trigger_on_group("", "[a b c] at b", "set 0", "0", "b");

	let finding_group_tests = [
	// Markup to create the test assertions:
	// class=assert-in: assert that this element's in-scope toggle is in the
	// test-group group and was not the activated toggle
	// class=assert-out: assert that this element's in-scope toggle is not in
	// the test-group group and was not the activated toggle
	// class=assert-activated: assert that this element's in-scope toggle was
	// the activated toggle
	//
	// Helper markup to create more markup:
	// class=establish: establish the group with the toggle-group property
	// class=establish-self: same, but with the self keyword (narrow scope)
	// class=root: create a test-group toggle with the toggle-root property
	// class=root-nogroup: same, but without the 'group' keyword
	// class=activate: toggle-trigger to activate test-group toggle
	//
	// class=activate (above) is also a helper to run the test; it will be
	// activated. There must only be one element with class=activate.
	`
	<div class="establish"></div>
	<div class="root assert-in"></div>
	<div class="root-nogroup assert-out"></div>
	<div class="root activate assert-activated"></div>
	`,
	`
	<div class="establish"></div>
	<div class="root assert-out"></div>
	<div class="establish"></div>
	<div class="root assert-in"></div>
	<div class="root activate assert-activated"></div>
	`,
	`
	<div class="establish"></div>
	<div class="root activate assert-activated"></div>
	<div class="root assert-in"></div>
	<div class="establish"></div>
	<div class="root assert-out"></div>
	`,
	`
	<div class="establish"></div>
	<div class="root assert-in"></div>
	<div class="establish-self">
	<div class="root assert-out"></div>
	</div>
	<div class="root assert-in"></div>
	<div class="root activate assert-activated"></div>
	`,
	`
	<div class="establish"></div>
	<div class="root assert-out"></div>
	<div class="establish">
	<div class="root assert-in"></div>
	</div>
	<div class="root assert-in"></div>
	<div class="root activate assert-activated"></div>
	`,
	`
	<div class="establish"></div>
	<div class="root activate assert-activated"></div>
	<div class="root assert-in"></div>
	<div class="establish">
	<div class="root assert-out"></div>
	</div>
	<div class="root assert-out"></div>
	`,
	`
	<div class="establish"></div>
	<div class="root assert-in"></div>
	<div class="establish-self"></div>
	<div class="root assert-activated"></div>
	<div class="activate"></div>
	`,
	`
	<div class="root activate assert-activated"></div>
	<div class="root assert-in"></div>
	`,
	`
	<div class="root assert-out"></div>
	<div class="establish-self">
	<div class="root activate assert-activated"></div>
	<div class="root assert-in"></div>
	</div>
	<div class="root assert-out"></div>
	`,
	`
	<div class="root assert-out"></div>
	<div style="toggle-group: test-group self, extra-group">
	<div class="root activate assert-activated"></div>
	<div class="root assert-in"></div>
	</div>
	<div class="root assert-out"></div>
	`,
	`
	<div class="root assert-out"></div>
	<div style="toggle-group: extra-group, test-group self">
	<div class="root activate assert-activated"></div>
	<div class="root assert-in"></div>
	</div>
	<div class="root assert-out"></div>
	`,
	`
	<div class="root activate assert-activated">
	<div class="establish">
	<div class="root assert-out"></div>
	</div>
	<div class="root assert-out"></div>
	</div>
	`,
	`
	<div class="root activate assert-activated">
	<div class="establish-self">
	<div class="root assert-out"></div>
	</div>
	<div class="root assert-in"></div>
	</div>
	`,
	`
	<div class="root activate assert-activated">
	<div class="root assert-in"></div>
	<div>
	<div class="root assert-in"></div>
	<div class="establish">
	<div class="root assert-out"></div>
	</div>
	<div class="root assert-out"></div>
	</div>
	<div class="root assert-in"></div>
	</div>
	`,
	];

	for (let t of finding_group_tests) {
	promise_test(async function() {
	container.innerHTML = t;

	for (let e of container.querySelectorAll('.establish')) {
	e.style.toggleGroup = "test-group";
	}
	for (let e of container.querySelectorAll('.establish-self')) {
	e.style.toggleGroup = "test-group self";
	}
	for (let e of container.querySelectorAll('.root')) {
	e.style.toggleRoot = "test-group 1 at 1 cycle-on group";
	}
	for (let e of container.querySelectorAll('.root-nogroup')) {
	e.style.toggleRoot = "test-group 1 at 1 cycle-on";
	}
	let activate = container.querySelector('.activate');
	activate.style.toggleTrigger = "test-group set 2";

	for (let e of container.querySelectorAll('.root, .root-nogroup')) {
	await wait_for_toggle_creation(e);
	}

	activate.click();
	for (let e of container.querySelectorAll('.assert-in')) {
	assert_true(e.matches(":toggle(test-group 0)"), "element in group");
	}
	for (let e of container.querySelectorAll('.assert-out')) {
	assert_true(e.matches(":toggle(test-group 1)"), "element not in group");
	}
	for (let e of container.querySelectorAll('.assert-activated')) {
	assert_true(e.matches(":toggle(test-group 2)"), "element was activated");
	}
	}, `toggle groups test: ${t}`);
	}

	// TODO(dbaron): This could probably use a few additional tests for multiple
	// values of the list-valued properties. (But they're hard to auto-generate.)

	</script>