Skip to content

Commit

Permalink
Implement "fire a toggle activation" and "change a toggle".
Browse files Browse the repository at this point in the history 
This implements:
https://tabatkins.github.io/css-toggle/#fire-a-toggle-activation
https://tabatkins.github.io/css-toggle/#change-a-toggle

(Support for toggles is behind the CSSToggles flag, which is currently
off.)

Bug: 1250716
Change-Id: Iaad22df767be612bee813738e7a1a54c07a57cde
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3753292
Reviewed-by: Joey Arhar <jarhar@chromium.org>
Commit-Queue: David Baron <dbaron@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1030573}
  • Loading branch information
@dbaron @pull
dbaron authored and pull[bot] committed Dec 7, 2023
1 parent 3b7199c commit b576b7b
Show file tree
Hide file tree
Showing 3 changed files with 559 additions and 0 deletions.
8 changes: 8 additions & 0 deletions css/css-toggle/support/toggle-helpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,11 @@ async function wait_for_toggle_creation(element) {
// style is good enough for now, but this might need to change.
getComputedStyle(element).toggleRoot;
}

async function set_up_single_toggle_in(container, toggle_style) {
let div = document.createElement("div");
div.style.toggle = toggle_style;
container.replaceChildren(div);
await wait_for_toggle_creation(div);
return div;
}
251 changes: 251 additions & 0 deletions css/css-toggle/toggle-activation-with-groups.tentative.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,251 @@
<!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>
Loading

0 comments on commit b576b7b

Please sign in to comment.