Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 7 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-anchor-position/try-tactic-anchor.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>CSS Anchor Positioning: try-tactic, anchor()</title>
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#typedef-position-try-fallbacks-try-tactic">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
:root {
--anchor-left:anchor(left);
}
#cb {
position: absolute;
width: 400px;
height: 400px;
border: 1px solid black;
}
#anchor {
position: absolute;
left: 150px;
top: 150px;
width: 60px;
height: 70px;
background-color: coral;
anchor-name: --a;
}
#target, #ref {
position: absolute;
left: 450px; /* force fallback */
width: 40px;
height: 40px;
background-color: skyblue;
position-anchor: --a;
}
#ref {
background-color: seagreen;
}
</style>
<style id=style>
</style>
<div id=cb>
<div id=anchor></div>
<div id=target></div>
<div id=ref></div>
</div>
<script>
// Verify that a given try-tactic + untransformed declaration equals
// a reference element using `transformed` directly.
function test_anchor_flip(try_tactic, untransformed, transformed) {
test((t) => {
style.textContent = `
@position-try --pf {
inset: auto;
${untransformed}
}
#target {
position-try-fallbacks: --pf ${try_tactic};
}
@position-try --ref {
inset: auto;
${transformed}
}
#ref {
position-try-fallbacks: --ref;
}
`;
assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft');
assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop');
}, `${try_tactic}, ${untransformed}, ${transformed}`);
}
// These are the possible transformations between
// anchor(left/right/top/bottom):
//
// ┌───┬────┬────┬────┬────┐
// │ - │ L │ R │ T │ B │
// │ L │ - │ LR │ LT │ LB │
// │ R │ RL │ - │ RT │ RB │
// │ T │ TL │ TR │ - │ TB │
// │ B │ BL │ BR │ BT │ - │
// └───┴────┴────┴────┴────┘
// No flip, no transformation.
test_anchor_flip('', 'right:anchor(left)', 'right:anchor(left)');
// flip-block does not affect left-right.
test_anchor_flip('flip-block', 'right:anchor(left)', 'right:anchor(left)');
// flip-inline does not affect left-right.
test_anchor_flip('flip-inline', 'bottom:anchor(top)', 'bottom:anchor(top)');
// Note that the letters represent the arguments to the anchor() functions,
// not the properties. For example, LR: anchor(left) => anchor(right).
// LR
test_anchor_flip('flip-inline', 'right:anchor(left)', 'left:anchor(right)');
// RL
test_anchor_flip('flip-inline', 'left:anchor(right)', 'right:anchor(left)');
// LT
test_anchor_flip('flip-start', 'right:anchor(left)', 'bottom:anchor(top)');
// TL
test_anchor_flip('flip-start', 'bottom:anchor(top)', 'right:anchor(left)');
// LB
test_anchor_flip('flip-inline flip-start', 'right:anchor(left)', 'top:anchor(bottom)');
// BL
test_anchor_flip('flip-start flip-inline', 'top:anchor(bottom)', 'right:anchor(left)');
// RT
test_anchor_flip('flip-start flip-block', 'left:anchor(right)', 'bottom:anchor(top)');
// TR
test_anchor_flip('flip-block flip-start', 'bottom:anchor(top)', 'left:anchor(right)');
// RB
test_anchor_flip('flip-start', 'left:anchor(right)', 'top:anchor(bottom)');
// BR
test_anchor_flip('flip-start', 'top:anchor(bottom)', 'left:anchor(right)');
// TB
test_anchor_flip('flip-block', 'bottom:anchor(top)', 'top:anchor(bottom)');
// BT
test_anchor_flip('flip-block', 'top:anchor(bottom)', 'bottom:anchor(top)');
// Logical versions.
//
// These tests duplicate the above, but replace the input logical anchor()
// functions.
// LR
test_anchor_flip('flip-inline', 'right:anchor(start)', 'left:anchor(right)');
// RL
test_anchor_flip('flip-inline', 'left:anchor(end)', 'right:anchor(left)');
// LT
test_anchor_flip('flip-start', 'right:anchor(start)', 'bottom:anchor(top)');
// TL
test_anchor_flip('flip-start', 'bottom:anchor(start)', 'right:anchor(left)');
// LB
test_anchor_flip('flip-inline flip-start', 'right:anchor(start)', 'top:anchor(bottom)');
// BL
test_anchor_flip('flip-start flip-inline', 'top:anchor(end)', 'right:anchor(left)');
// RT
test_anchor_flip('flip-start flip-block', 'left:anchor(end)', 'bottom:anchor(top)');
// TR
test_anchor_flip('flip-block flip-start', 'bottom:anchor(start)', 'left:anchor(right)');
// RB
test_anchor_flip('flip-start', 'left:anchor(end)', 'top:anchor(bottom)');
// BR
test_anchor_flip('flip-start', 'top:anchor(end)', 'left:anchor(right)');
// TB
test_anchor_flip('flip-block', 'bottom:anchor(start)', 'top:anchor(bottom)');
// BT
test_anchor_flip('flip-block', 'top:anchor(end)', 'bottom:anchor(top)');
// The same again, except with self-start/self-end.
// LR
test_anchor_flip('flip-inline', 'right:anchor(self-start)', 'left:anchor(right)');
// RL
test_anchor_flip('flip-inline', 'left:anchor(self-end)', 'right:anchor(left)');
// LT
test_anchor_flip('flip-start', 'right:anchor(self-start)', 'bottom:anchor(top)');
// TL
test_anchor_flip('flip-start', 'bottom:anchor(self-start)', 'right:anchor(left)');
// LB
test_anchor_flip('flip-inline flip-start', 'right:anchor(self-start)', 'top:anchor(bottom)');
// BL
test_anchor_flip('flip-start flip-inline', 'top:anchor(self-end)', 'right:anchor(left)');
// RT
test_anchor_flip('flip-start flip-block', 'left:anchor(self-end)', 'bottom:anchor(top)');
// TR
test_anchor_flip('flip-block flip-start', 'bottom:anchor(self-start)', 'left:anchor(right)');
// RB
test_anchor_flip('flip-start', 'left:anchor(self-end)', 'top:anchor(bottom)');
// BR
test_anchor_flip('flip-start', 'top:anchor(self-end)', 'left:anchor(right)');
// TB
test_anchor_flip('flip-block', 'bottom:anchor(self-start)', 'top:anchor(bottom)');
// BT
test_anchor_flip('flip-block', 'top:anchor(self-end)', 'bottom:anchor(top)');
function test_anchor_size_flip(try_tactic, flip_expected) {
test((t) => {
style.textContent = `
@position-try --pf {
inset: auto;
width: calc(anchor-size(width) + 20px);
height: anchor-size(height);
}
#target {
position-try-fallbacks: --pf ${try_tactic};
}
`;
let expected_width = anchor.offsetWidth + (flip_expected ? 0 : 20);
let expected_height = anchor.offsetHeight + (flip_expected ? 20 : 0);
assert_equals(target.offsetWidth, expected_width, 'offsetWidth');
assert_equals(target.offsetHeight, expected_height, 'offsetHeight');
}, try_tactic);
}
// No flip, no transformation.
test_anchor_size_flip('', /* expect_flip */ false);
// Note: only the cross-axis flips cause width/height to change.
// LR, TB (and their reverse versions) are in-axis, other combinations are
// cross-axis.
// In-axis:
// LR, RL
test_anchor_size_flip('flip-inline', /* expect_flip */ false);
// TB, BT
test_anchor_size_flip('flip-block', /* expect_flip */ false);
// Cross-axis:
// LT, TL, RB, BR
test_anchor_size_flip('flip-start', /* expect_flip */ true);
// LB, BL
test_anchor_size_flip('flip-inline flip-start', /* expect_flip */ true);
// RT, TR
test_anchor_size_flip('flip-start flip-block', /* expect_flip */ true);
test((t) => {
style.textContent = `
@position-try --pf {
inset: auto;
right: var(--anchor-left);
}
#target {
position-try-fallbacks: --pf;
}
`;
// Initially positioned to the left of the anchor.
assert_equals(target.offsetLeft, 110, 'offsetLeft');
// Now positioned to the right of the anchor.
style.textContent += `
#target {
position-try-fallbacks: --pf flip-inline;
}
`;
assert_equals(target.offsetLeft, 210, 'offsetLeft');
}, 'Can transform a value post-var-substitution');
</script>