195 lines
5.6 KiB
HTML
195 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSS Anchor Positioning: try-tactic, justify/align-self</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>
|
|
#cb {
|
|
position: absolute;
|
|
width: 400px;
|
|
height: 400px;
|
|
border: 1px solid black;
|
|
}
|
|
#anchor {
|
|
position: absolute;
|
|
left: 150px;
|
|
top: 150px;
|
|
width: 100px;
|
|
height: 50px;
|
|
background-color: coral;
|
|
}
|
|
#target, #ref {
|
|
position: absolute;
|
|
left: 450px; /* force fallback */
|
|
width: 40px;
|
|
height: 40px;
|
|
background-color: skyblue;
|
|
}
|
|
#ref {
|
|
background-color: seagreen;
|
|
}
|
|
</style>
|
|
<style id=style>
|
|
</style>
|
|
<div id=cb>
|
|
<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_justify_flip(try_tactic, untransformed, transformed, direction, writing_mode) {
|
|
if (direction==undefined) {
|
|
direction = 'ltr';
|
|
}
|
|
if (writing_mode==undefined) {
|
|
writing_mode = 'horizontal-tb';
|
|
}
|
|
test((t) => {
|
|
t.add_cleanup(() => {
|
|
document.documentElement.style = '';
|
|
style.textContent = '';
|
|
});
|
|
document.documentElement.style.direction = direction;
|
|
document.documentElement.style.writingMode = writing_mode;
|
|
style.textContent = `
|
|
@position-try --pf {
|
|
inset: 0;
|
|
${untransformed}
|
|
}
|
|
#target {
|
|
position-try-fallbacks: --pf ${try_tactic};
|
|
}
|
|
@position-try --ref {
|
|
inset: 0;
|
|
${transformed}
|
|
}
|
|
#ref {
|
|
position-try-fallbacks: --ref;
|
|
}
|
|
`;
|
|
assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft');
|
|
assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop');
|
|
}, `${try_tactic}, ${untransformed}, ${transformed}, ${direction}, ${writing_mode}`);
|
|
}
|
|
|
|
test_justify_flip(
|
|
'',
|
|
'justify-self:start;align-self:start',
|
|
'justify-self:start;align-self:start');
|
|
|
|
test_justify_flip(
|
|
'flip-inline',
|
|
'justify-self:start;align-self:start',
|
|
'justify-self:end;align-self:start');
|
|
|
|
test_justify_flip(
|
|
'flip-block',
|
|
'justify-self:start;align-self:start',
|
|
'justify-self:start;align-self:end');
|
|
|
|
test_justify_flip(
|
|
'flip-block flip-inline',
|
|
'justify-self:start;align-self:start',
|
|
'justify-self:end;align-self:end');
|
|
|
|
test_justify_flip(
|
|
'flip-start',
|
|
'justify-self:start;align-self:end',
|
|
'justify-self:end;align-self:start');
|
|
|
|
test_justify_flip(
|
|
'flip-block flip-start',
|
|
'justify-self:start;align-self:start',
|
|
'justify-self:end;align-self:start');
|
|
|
|
test_justify_flip(
|
|
'flip-inline flip-start',
|
|
'justify-self:start;align-self:start',
|
|
'justify-self:start;align-self:end');
|
|
|
|
test_justify_flip(
|
|
'flip-block flip-inline flip-start',
|
|
'justify-self:start;align-self:start',
|
|
'justify-self:end;align-self:end');
|
|
|
|
// left/right are special cases, because they're supported by
|
|
// justify-self, but not align-self:
|
|
|
|
test_justify_flip(
|
|
'flip-inline',
|
|
'justify-self:left;align-self:start',
|
|
'justify-self:right;align-self:start');
|
|
|
|
test_justify_flip(
|
|
'flip-start',
|
|
'justify-self:left;align-self:end',
|
|
'justify-self:end;align-self:self-start');
|
|
|
|
test_justify_flip(
|
|
'flip-start',
|
|
'justify-self:right;align-self:start',
|
|
'justify-self:start;align-self:self-end');
|
|
|
|
|
|
// That that all relevant computed values can be transformed:
|
|
|
|
function test_computed_value(try_tactic, property, value, expected) {
|
|
test((t) => {
|
|
t.add_cleanup(() => {
|
|
style.textContent = '';
|
|
});
|
|
style.textContent = `
|
|
@position-try --pf {
|
|
inset: 0;
|
|
${property}:${value};
|
|
}
|
|
#target {
|
|
position-try-fallbacks: --pf ${try_tactic};
|
|
}
|
|
`;
|
|
assert_equals(getComputedStyle(target).getPropertyValue(property), expected);
|
|
}, `${try_tactic}, ${property}:${value}`);
|
|
}
|
|
|
|
// No flip:
|
|
for (let property of ['justify-self', 'align-self']) {
|
|
test_computed_value('', property, 'start', 'start');
|
|
test_computed_value('', property, 'end', 'end');
|
|
test_computed_value('', property, 'self-start', 'self-start');
|
|
test_computed_value('', property, 'self-end', 'self-end');
|
|
test_computed_value('', property, 'flex-start', 'flex-start');
|
|
test_computed_value('', property, 'flex-end', 'flex-end');
|
|
}
|
|
|
|
test_computed_value('flip-inline', 'justify-self', 'start', 'end');
|
|
test_computed_value('flip-inline', 'justify-self', 'end', 'start');
|
|
test_computed_value('flip-inline', 'justify-self', 'self-start', 'self-end');
|
|
test_computed_value('flip-inline', 'justify-self', 'self-end', 'self-start');
|
|
test_computed_value('flip-inline', 'justify-self', 'flex-start', 'flex-end');
|
|
test_computed_value('flip-inline', 'justify-self', 'flex-end', 'flex-start');
|
|
test_computed_value('flip-inline', 'justify-self', 'left', 'right');
|
|
test_computed_value('flip-inline', 'justify-self', 'right', 'left');
|
|
|
|
test_computed_value('flip-block', 'align-self', 'start', 'end');
|
|
test_computed_value('flip-block', 'align-self', 'end', 'start');
|
|
test_computed_value('flip-block', 'align-self', 'self-start', 'self-end');
|
|
test_computed_value('flip-block', 'align-self', 'self-end', 'self-start');
|
|
test_computed_value('flip-block', 'align-self', 'flex-start', 'flex-end');
|
|
test_computed_value('flip-block', 'align-self', 'flex-end', 'flex-start');
|
|
|
|
test_justify_flip(
|
|
'flip-start',
|
|
'justify-self:left;align-self:end',
|
|
'justify-self:end;align-self:self-start',
|
|
'ltr',
|
|
'vertical-rl');
|
|
|
|
test_justify_flip(
|
|
'flip-start',
|
|
'justify-self:left;align-self:start',
|
|
'justify-self:start;align-self:self-end',
|
|
'rtl');
|
|
|
|
</script>
|