Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
"use strict";
async function testDetailsRelations(anchor, target) {
await testCachedRelation(anchor, RELATION_DETAILS, target);
await testCachedRelation(target, RELATION_DETAILS_FOR, anchor);
}
async function testNoDetailsRelations(anchor, target) {
await testCachedRelation(anchor, RELATION_DETAILS, []);
await testCachedRelation(target, RELATION_DETAILS_FOR, []);
}
async function invokeContentTaskAndTick(browser, args, task) {
await invokeContentTask(browser, args, task);
await invokeContentTask(browser, [], () => {
content.windowUtils.advanceTimeAndRefresh(100);
content.windowUtils.restoreNormalRefresh();
});
}
async function invokeSetAttributeAndTick(browser, id, attr, attrValue) {
await invokeSetAttribute(browser, id, attr, attrValue);
await invokeContentTask(browser, [], () => {
content.windowUtils.advanceTimeAndRefresh(100);
content.windowUtils.restoreNormalRefresh();
});
}
/**
* Test details relations for CSS explicit and implicit Anchor Positioning
*/
addAccessibleTask(
`
<style>
#btn1 {
anchor-name: --btn1;
}
#target1 {
position: absolute;
position-anchor: --btn1;
left: anchor(right);
bottom: anchor(top);
}
#btn2 {
anchor-name: --btn2;
}
#target2 {
position: absolute;
left: anchor(--btn2 right);
}
#btn3 {
anchor-name: --btn3;
}
</style>
<div id="target1">World</div>
<button id="btn1">Hello</button>
<div id="target2">World</div>
<button id="btn2">Hello</button>
<button id="btn3">No Target</button>
`,
async function testSimplePositionAnchors(browser, docAcc) {
info("Implicit anchor");
const btn1 = findAccessibleChildByID(docAcc, "btn1");
const target1 = findAccessibleChildByID(docAcc, "target1");
await testDetailsRelations(btn1, target1);
info("Make anchor invalid");
await invokeContentTaskAndTick(browser, [], () => {
Object.assign(content.document.getElementById("btn1").style, {
"anchor-name": "--invalid",
});
});
await testNoDetailsRelations(btn1, target1);
info("Make anchor valid again");
await invokeContentTaskAndTick(browser, [], () => {
Object.assign(content.document.getElementById("btn1").style, {
"anchor-name": "--btn1",
});
});
await testDetailsRelations(btn1, target1);
info("Assign target to different anchor");
await invokeContentTaskAndTick(browser, [], () => {
Object.assign(content.document.getElementById("target1").style, {
"position-anchor": "--btn3",
});
});
const btn3 = findAccessibleChildByID(docAcc, "btn3");
await testDetailsRelations(btn3, target1);
await testCachedRelation(btn1, RELATION_DETAILS, []);
info("Assign target to invalid anchor");
await invokeContentTaskAndTick(browser, [], () => {
Object.assign(content.document.getElementById("target1").style, {
"position-anchor": "--invalid",
});
});
await testNoDetailsRelations(btn3, target1);
info("Explicit anchor");
const btn2 = findAccessibleChildByID(docAcc, "btn2");
const target2 = findAccessibleChildByID(docAcc, "target2");
await testDetailsRelations(btn2, target2);
await invokeContentTaskAndTick(browser, [], () => {
Object.assign(content.document.getElementById("target2").style, {
left: "0px",
});
});
await testNoDetailsRelations(btn2, target2);
},
{ chrome: true, topLevel: true }
);
/**
* Test no details relations for sibling target
*/
addAccessibleTask(
`
<style>
#sibling-btn {
anchor-name: --sibling-btn;
}
#sibling-target {
position: absolute;
position-anchor: --sibling-btn;
left: anchor(right);
bottom: anchor(top);
}
</style>
<button id="sibling-btn">Hello</button>
<button id="intermediate-button" hidden>Cruel</button>
<div id="sibling-target">World</div>
`,
async function testSiblingPositionAnchor(browser, docAcc) {
info("Target is sibling after anchor, no relation");
const siblingBtn = findAccessibleChildByID(docAcc, "sibling-btn");
const siblingTarget = findAccessibleChildByID(docAcc, "sibling-target");
await testNoDetailsRelations(siblingBtn, siblingTarget);
await invokeSetAttributeAndTick(browser, "intermediate-button", "hidden");
await testDetailsRelations(siblingBtn, siblingTarget);
},
{ chrome: true, topLevel: true }
);
/**
* Test no details relations parent anchor with child target
*/
addAccessibleTask(
`
<style>
#parent-btn {
anchor-name: --parent-btn;
}
#child-target {
position: absolute;
position-anchor: --parent-btn;
left: anchor(right);
bottom: anchor(top);
}
#owner-btn {
anchor-name: --owner-btn;
}
#owned-target {
position: absolute;
position-anchor: --owner-btn;
left: anchor(right);
bottom: anchor(top);
}
</style>
<button id="parent-btn">Hello <div role="group"><div id="child-target">World</div></div></button>
<div id="owned-target">World</div>
<button id="owner-btn" aria-owns="owned-target">Hello</button>
`,
async function testSiblingPositionAnchor(browser, docAcc) {
info("Target is child of anchor, no relation");
const parentBtn = findAccessibleChildByID(docAcc, "parent-btn");
const childTarget = findAccessibleChildByID(docAcc, "child-target");
await testNoDetailsRelations(parentBtn, childTarget);
if (!browser.isRemoteBrowser) {
info("Target is owned by anchor, no relation");
const ownerBtn = findAccessibleChildByID(docAcc, "owner-btn");
const ownedTarget = findAccessibleChildByID(docAcc, "owned-target");
await testNoDetailsRelations(ownerBtn, ownedTarget);
info("Remove aria owns, relation should be restored");
await invokeSetAttributeAndTick(browser, "owner-btn", "aria-owns");
await testDetailsRelations(ownerBtn, ownedTarget);
}
},
{ chrome: true, topLevel: true }
);
/**
* Test no details relations for CSS anchor with multiple targets or targets with multiple anchors
*/
addAccessibleTask(
`
<style>
#multiTarget-btn {
anchor-name: --multiTarget-btn;
}
#multiTarget-target1 {
position: absolute;
position-anchor: --multiTarget-btn;
right: anchor(left);
bottom: anchor(top);
}
#multiTarget-target2 {
position: absolute;
position-anchor: --multiTarget-btn;
left: anchor(right);
bottom: anchor(top);
}
#multiTarget-target2.unanchored {
position-anchor: --invalid;
}
#multiAnchor-btn1 {
anchor-name: --multiAnchor-btn1;
}
#multiAnchor-btn2 {
anchor-name: --multiAnchor-btn2;
}
#multiAnchor-target {
position: absolute;
left: anchor(--multiAnchor-btn1 right);
bottom: anchor(--multiAnchor-btn2 top);
right: anchor(--multiAnchor-btn2 left);
}
#multiAnchor-target.unanchored {
left: 0px;
}
</style>
<div id="multiTarget-target1">Cruel</div>
<div id="multiTarget-target2">World</div>
<button id="multiTarget-btn">Hello</button>
<div id="multiAnchor-target">Hello</div>
<button id="multiAnchor-btn1">Cruel</button>
<button id="multiAnchor-btn2">World</button>
`,
async function testMultiplePositionAnchors(browser, docAcc) {
info("Multiple targets for one anchor");
const multiTargetBtn = findAccessibleChildByID(docAcc, "multiTarget-btn");
const multiTargetTarget1 = findAccessibleChildByID(
docAcc,
"multiTarget-target1"
);
const multiTargetTarget2 = findAccessibleChildByID(
docAcc,
"multiTarget-target2"
);
await testNoDetailsRelations(multiTargetBtn, multiTargetTarget1);
await testNoDetailsRelations(multiTargetBtn, multiTargetTarget2);
info("Remove one target from anchor via styling");
await invokeSetAttributeAndTick(
browser,
"multiTarget-target2",
"class",
"unanchored"
);
await testDetailsRelations(multiTargetBtn, multiTargetTarget1);
info("Restore target styling");
await invokeSetAttributeAndTick(browser, "multiTarget-target2", "class");
await testNoDetailsRelations(multiTargetBtn, multiTargetTarget2);
info("Remove one target node completely");
await invokeSetAttributeAndTick(
browser,
"multiTarget-target2",
"hidden",
"true"
);
await testDetailsRelations(multiTargetBtn, multiTargetTarget1);
info("Add back target node");
await invokeSetAttributeAndTick(browser, "multiTarget-target2", "hidden");
await testNoDetailsRelations(multiTargetBtn, multiTargetTarget1);
info("Multiple anchors for one target");
const multiAnchorBtn1 = findAccessibleChildByID(docAcc, "multiAnchor-btn1");
const multiAnchorBtn2 = findAccessibleChildByID(docAcc, "multiAnchor-btn2");
const multiAnchorTarget = findAccessibleChildByID(
docAcc,
"multiAnchor-target"
);
await testNoDetailsRelations(multiAnchorBtn1, multiAnchorTarget);
await testNoDetailsRelations(multiAnchorBtn2, multiAnchorTarget);
info("Remove one anchor via styling");
await invokeSetAttributeAndTick(
browser,
"multiAnchor-target",
"class",
"unanchored"
);
await testDetailsRelations(multiAnchorBtn2, multiAnchorTarget);
info("Add back one anchor via styling");
await invokeSetAttributeAndTick(browser, "multiAnchor-target", "class");
await testNoDetailsRelations(multiAnchorBtn2, multiAnchorTarget);
info("Remove one anchor node");
await invokeSetAttributeAndTick(
browser,
"multiAnchor-btn1",
"hidden",
"true"
);
await testDetailsRelations(multiAnchorBtn2, multiAnchorTarget);
info("Add back anchor node");
await invokeSetAttributeAndTick(browser, "multiAnchor-btn1", "hidden");
await testNoDetailsRelations(multiAnchorBtn2, multiAnchorTarget);
},
{ chrome: true, topLevel: true }
);
/**
* Test no details relations for tooltip target
*/
addAccessibleTask(
`
<style>
#btn {
anchor-name: --btn;
}
#tooltip-target {
position: absolute;
position-anchor: --btn;
left: anchor(right);
bottom: anchor(top);
}
</style>
<div id="tooltip-target" role="tooltip">World</div>
<button id="btn">Hello</button>
`,
async function testTooltipPositionAnchor(browser, docAcc) {
info("Target is tooltip, no relation");
const btn = findAccessibleChildByID(docAcc, "btn");
const tooltipTarget = findAccessibleChildByID(docAcc, "tooltip-target");
await testNoDetailsRelations(btn, tooltipTarget);
},
{ chrome: true, topLevel: true }
);
/**
* Test no details relations for when explicit relations are set.
*/
addAccessibleTask(
`
<style>
.target {
position: absolute;
left: anchor(right);
bottom: anchor(top);
}
#btn-describedby {
anchor-name: --btn-describedby;
}
#target-describedby {
position-anchor: --btn-describedby;
}
#btn-labelledby {
anchor-name: --btn-labelledby;
}
#target-labelledby {
position-anchor: --btn-labelledby;
}
#btn-anchorsetdetails {
anchor-name: --btn-anchorsetdetails;
}
#target-anchorsetdetails {
position-anchor: --btn-anchorsetdetails;
}
#btn-targetsetdetails {
anchor-name: --btn-targetsetdetails;
}
#target-targetsetdetails {
position-anchor: --btn-targetsetdetails;
}
</style>
<div id="target-describedby" class="target">World</div>
<button id="btn-describedby" aria-describedby="target-describedby">Hello</button>
<div id="target-labelledby" class="target">World</div>
<button id="btn-labelledby" aria-labelledby="target-labelledby">Hello</button>
<div id="target-anchorsetdetails" class="target">World</div>
<button id="btn-anchorsetdetails" aria-details="">Hello</button>
<div id="target-targetsetdetails" aria-details="" class="target">World</div>
<button id="btn-targetsetdetails">Hello</button>
`,
async function testTooltipPositionAnchor(browser, docAcc) {
info("Test no details relations when explicit relations are set");
const btnDescribedby = findAccessibleChildByID(docAcc, "btn-describedby");
const targetDescribedby = findAccessibleChildByID(
docAcc,
"target-describedby"
);
const btnLabelledby = findAccessibleChildByID(docAcc, "btn-labelledby");
const targetLabelledby = findAccessibleChildByID(
docAcc,
"target-labelledby"
);
const btnAnchorsetdetails = findAccessibleChildByID(
docAcc,
"btn-anchorsetdetails"
);
const targetAnchorsetdetails = findAccessibleChildByID(
docAcc,
"target-anchorsetdetails"
);
const btnTargetsetdetails = findAccessibleChildByID(
docAcc,
"btn-targetsetdetails"
);
const targetTargetsetdetails = findAccessibleChildByID(
docAcc,
"target-targetsetdetails"
);
await testNoDetailsRelations(btnDescribedby, targetDescribedby);
await invokeSetAttributeAndTick(
browser,
"btn-describedby",
"aria-describedby"
);
await testDetailsRelations(btnDescribedby, targetDescribedby);
await testNoDetailsRelations(btnLabelledby, targetLabelledby);
await invokeSetAttributeAndTick(
browser,
"btn-labelledby",
"aria-labelledby"
);
await testDetailsRelations(btnLabelledby, targetLabelledby);
await testNoDetailsRelations(btnAnchorsetdetails, targetAnchorsetdetails);
await invokeSetAttributeAndTick(
browser,
"btn-anchorsetdetails",
"aria-details"
);
await testDetailsRelations(btnAnchorsetdetails, targetAnchorsetdetails);
await testNoDetailsRelations(btnTargetsetdetails, targetTargetsetdetails);
await invokeSetAttributeAndTick(
browser,
"target-targetsetdetails",
"aria-details"
);
await testDetailsRelations(btnTargetsetdetails, targetTargetsetdetails);
},
{ chrome: true, topLevel: true }
);
/**
* Test no details when anchor is used for sizing target only
*/
addAccessibleTask(
`
<style>
#anchor1 {
anchor-name: --anchor1;
width: 200px;
}
#anchor2 {
anchor-name: --anchor2;
height: 150px;
}
#target {
position: absolute;
width: anchor-size(--anchor1 width);
}
#target.positioned {
left: anchor(--anchor1 right);
}
#target.anchor-height {
height: anchor-size(--anchor2 height);
}
</style>
<div id="target">World</div>
<button id="anchor1">Hello</button>
<button id="anchor2">Cruel</button>
`,
async function testTooltipPositionAnchor(browser, docAcc) {
info("Target is tooltip, no relation");
const anchor1 = findAccessibleChildByID(docAcc, "anchor1");
const target = findAccessibleChildByID(docAcc, "target");
await testNoDetailsRelations(anchor1, target);
info("Use anchor for positioning as well");
await invokeSetAttributeAndTick(browser, "target", "class", "positioned");
await testDetailsRelations(anchor1, target);
info("Use second anchor for sizing");
await invokeSetAttributeAndTick(
browser,
"target",
"class",
"positioned anchor-height"
);
await testNoDetailsRelations(anchor1, target);
},
{ chrome: true, topLevel: true }
);
/**
* Test multi columns colspan
*/
addAccessibleTask(
`
<style>
.columns {
column-count: 2;
column-fill: auto;
}
.colspan {
column-span: all;
}
.spacer {
height: 10px;
}
#anchor {
anchor-name: --a1;
margin-left: 10px;
width: 40px;
}
#target {
position: absolute;
left: anchor(--a1 left);
top: anchor(--a1 top);
width: 150px;
height: 60px;
}
</style>
<div class="columns">
<div id="target" role="group"></div>
<div id="anchor" role="group">
<div class="spacer"></div>
<div class="colspan" style="height: 20px"></div>
</div>
</div>`,
async function testTooltipPositionAnchor(browser, docAcc) {
const anchor = findAccessibleChildByID(docAcc, "anchor");
const target = findAccessibleChildByID(docAcc, "target");
await testDetailsRelations(anchor, target);
},
{ chrome: true, topLevel: true }
);