mirror of
https://github.com/servo/servo.git
synced 2025-07-14 02:43:42 +01:00
267 lines
7.6 KiB
HTML
267 lines
7.6 KiB
HTML
<!DOCTYPE HTML>
|
|
<meta charset="UTF-8">
|
|
<title>CSS Toggles: toggle-visibility</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-visibility-property">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="support/toggle-helpers.js"></script>
|
|
<style id="style">
|
|
|
|
</style>
|
|
|
|
<body>
|
|
|
|
<div id="container"></div>
|
|
<script>
|
|
|
|
let style = document.getElementById("style");
|
|
let container = document.getElementById("container");
|
|
|
|
promise_test(async function() {
|
|
style.innerText = `
|
|
#container { toggle-group: t self; }
|
|
#t, #t2 { toggle-root: t 1 at 0 group; }
|
|
#trigger, #t2 { toggle-trigger: t; }
|
|
#vis { toggle-visibility: toggle t; }
|
|
#child { height: 100px; }
|
|
`;
|
|
container.innerHTML = `
|
|
<div id="t"></div>
|
|
<div id="vis">
|
|
<div id="child"></div>
|
|
</div>
|
|
<div id="trigger"></div>
|
|
<div id="t2"></div>
|
|
`;
|
|
|
|
let t = document.getElementById("t");
|
|
let trigger = document.getElementById("trigger");
|
|
let t2 = document.getElementById("t2");
|
|
let vis = document.getElementById("vis");
|
|
|
|
await wait_for_toggle_creation(t);
|
|
|
|
const kVisibleHeight = 100;
|
|
const kHiddenHeight = 0;
|
|
|
|
assert_equals(vis.clientHeight, kHiddenHeight, "before first click");
|
|
trigger.click();
|
|
assert_equals(vis.clientHeight, kVisibleHeight, "after first click");
|
|
trigger.click();
|
|
assert_equals(vis.clientHeight, kHiddenHeight, "after second click");
|
|
t.toggles.get("t").value = 1;
|
|
assert_equals(vis.clientHeight, kVisibleHeight, "after toggle value setter");
|
|
t2.click();
|
|
assert_equals(vis.clientHeight, kHiddenHeight, "after click on other element in group");
|
|
}, "showing and hiding in response to toggle changes");
|
|
|
|
const action_tests = [
|
|
{
|
|
name: "focus",
|
|
markup: `<input type="checkbox" id="check">`,
|
|
action: () => {
|
|
document.getElementById("check").focus();
|
|
},
|
|
},
|
|
{
|
|
name: "scrollIntoView",
|
|
markup: `<input type="checkbox" id="check">`,
|
|
action: () => {
|
|
document.getElementById("check").scrollIntoView();
|
|
},
|
|
},
|
|
];
|
|
|
|
for (let test of action_tests) {
|
|
promise_test(async function() {
|
|
style.innerText = `
|
|
#container { toggle-group: tab self; }
|
|
#tab { toggle: tab 1 at 0 group; }
|
|
#panel { toggle-visibility: toggle tab; }
|
|
`;
|
|
container.innerHTML = `
|
|
<div id="tab">Tab</div>
|
|
<div id="panel">
|
|
${test.markup}
|
|
</div>
|
|
`;
|
|
|
|
let tab = document.getElementById("tab");
|
|
let panel = document.getElementById("panel");
|
|
|
|
await wait_for_toggle_creation(tab);
|
|
|
|
let tab_toggle = tab.toggles.get("tab");
|
|
|
|
assert_equals(tab_toggle.value, 0, "toggle value before focus");
|
|
assert_equals(panel.clientHeight, 0, "panel height before focus");
|
|
|
|
test.action();
|
|
|
|
assert_equals(tab_toggle.value, 1, "toggle value after focus");
|
|
assert_not_equals(panel.clientHeight, 0, "panel height after focus");
|
|
}, `${test.name} inside hidden element changes a toggle to show it`);
|
|
}
|
|
|
|
const scope_tests = [
|
|
`
|
|
<div class="root-inactive">
|
|
<div class="vis expect-hidden"></div>
|
|
</div>
|
|
<div class="vis expect-hidden"></div>
|
|
`,
|
|
`
|
|
<div class="root-inactive-self">
|
|
<div class="vis expect-hidden"></div>
|
|
</div>
|
|
<div class="vis expect-shown"></div>
|
|
`,
|
|
`
|
|
<div class="root-active">
|
|
<div class="vis expect-shown"></div>
|
|
</div>
|
|
<div class="vis expect-shown"></div>
|
|
`,
|
|
`
|
|
<div class="root-active-self">
|
|
<div class="vis expect-shown"></div>
|
|
</div>
|
|
<div class="vis expect-shown"></div>
|
|
`,
|
|
];
|
|
|
|
for (let test of scope_tests) {
|
|
promise_test(async function() {
|
|
container.innerHTML = test;
|
|
style.innerText = `
|
|
.root-inactive { toggle-root: t 1 at 0; }
|
|
.root-active { toggle-root: t 1 at 1; }
|
|
.root-inactive-self { toggle-root: t 1 at 0 self; }
|
|
.root-active-self { toggle-root: t 1 at 1 self; }
|
|
|
|
.vis {
|
|
toggle-visibility: toggle t;
|
|
}
|
|
|
|
.vis::before {
|
|
content: "";
|
|
display: block;
|
|
height: 100px;
|
|
width: 100px;
|
|
}
|
|
`;
|
|
|
|
await wait_for_toggle_creation(container.querySelector('[class^="root-"]'));
|
|
|
|
for (let e of container.querySelectorAll('.expect-hidden')) {
|
|
assert_equals(e.clientHeight, 0);
|
|
}
|
|
for (let e of container.querySelectorAll('.expect-shown')) {
|
|
assert_equals(e.clientHeight, 100);
|
|
}
|
|
}, `scope test: ${test}`);
|
|
}
|
|
|
|
async function wait_for_content_visibility_auto() {
|
|
return new Promise(resolve => {
|
|
requestAnimationFrame(() => {
|
|
requestAnimationFrame(resolve);
|
|
});
|
|
});
|
|
}
|
|
|
|
promise_test(async function() {
|
|
style.innerText = `
|
|
#t { toggle-root: t 1 at 0; }
|
|
#vis {
|
|
toggle-visibility: toggle t;
|
|
content-visibility: auto;
|
|
min-height: 50px;
|
|
}
|
|
#child { height: 100px; }
|
|
#spacer { height: 300vh; }
|
|
`;
|
|
// TODO (dbaron): Why doesn't padding-top on #container have the same effect
|
|
// as this spacer?
|
|
container.innerHTML = `
|
|
<div id="spacer"></div>
|
|
<div id="t"></div>
|
|
<div id="vis">
|
|
<div id="child"></div>
|
|
</div>
|
|
`;
|
|
|
|
let t = document.getElementById("t");
|
|
let vis = document.getElementById("vis");
|
|
let spacer = document.getElementById("spacer");
|
|
|
|
await wait_for_toggle_creation(t);
|
|
|
|
let toggle = t.toggles.get("t");
|
|
|
|
const kVisibleHeight = 100;
|
|
const kHiddenHeight = 50;
|
|
|
|
await wait_for_content_visibility_auto();
|
|
assert_equals(vis.clientHeight, kHiddenHeight, "with toggle inactive and offscreen");
|
|
toggle.value = 1;
|
|
await wait_for_content_visibility_auto();
|
|
assert_equals(vis.clientHeight, kHiddenHeight, "with toggle active and offscreen");
|
|
spacer.remove();
|
|
await wait_for_content_visibility_auto();
|
|
assert_equals(vis.clientHeight, kVisibleHeight, "with toggle active and onscreen");
|
|
toggle.value = 0;
|
|
await wait_for_content_visibility_auto();
|
|
assert_equals(vis.clientHeight, kHiddenHeight, "with toggle inactive and onscreen");
|
|
toggle.value = 1;
|
|
await wait_for_content_visibility_auto();
|
|
assert_equals(vis.clientHeight, kVisibleHeight, "with toggle active and onscreen (2)");
|
|
toggle.value = 0;
|
|
t.before(spacer);
|
|
await wait_for_content_visibility_auto();
|
|
assert_equals(vis.clientHeight, kHiddenHeight, "with toggle inactive and offscreen (2)");
|
|
spacer.remove();
|
|
await wait_for_content_visibility_auto();
|
|
assert_equals(vis.clientHeight, kHiddenHeight, "with toggle inactive and onscreen (2)");
|
|
toggle.value = 1;
|
|
await wait_for_content_visibility_auto();
|
|
assert_equals(vis.clientHeight, kVisibleHeight, "with toggle active and onscreen (3)");
|
|
t.before(spacer);
|
|
await wait_for_content_visibility_auto();
|
|
assert_equals(vis.clientHeight, kHiddenHeight, "with toggle active and offscreen (2)");
|
|
}, "interaction of toggle-visibility and content-visibility: auto");
|
|
|
|
promise_test(async function() {
|
|
style.innerText = `
|
|
#t { toggle-root: t 1 at 0; }
|
|
#vis {
|
|
toggle-visibility: toggle t;
|
|
content-visibility: hidden;
|
|
}
|
|
#child { height: 100px; }
|
|
`;
|
|
container.innerHTML = `
|
|
<div id="t"></div>
|
|
<div id="vis">
|
|
<div id="child"></div>
|
|
</div>
|
|
`;
|
|
|
|
let t = document.getElementById("t");
|
|
let vis = document.getElementById("vis");
|
|
|
|
await wait_for_toggle_creation(t);
|
|
|
|
let toggle = t.toggles.get("t");
|
|
|
|
const kVisibleHeight = 100;
|
|
const kHiddenHeight = 0;
|
|
|
|
assert_equals(vis.clientHeight, kHiddenHeight, "with toggle inactive and offscreen");
|
|
toggle.value = 1;
|
|
assert_equals(vis.clientHeight, kHiddenHeight, "with toggle active and offscreen");
|
|
}, "interaction of toggle-visibility and content-visibility: hidden");
|
|
|
|
</script>
|