188 lines
6 KiB
HTML
188 lines
6 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSS Anchor Positioning: position-area in @position-try</title>
|
|
<link rel="help" href='https://drafts.csswg.org/css-anchor-position-1/#position-try-fallbacks'>
|
|
<script src='/resources/testharness.js'></script>
|
|
<script src='/resources/testharnessreport.js'></script>
|
|
<style>
|
|
#cb {
|
|
position: relative;
|
|
width: 200px;
|
|
height: 200px;
|
|
border: 1px solid black;
|
|
}
|
|
#anchor {
|
|
position: absolute;
|
|
left: 100px;
|
|
top: 100px;
|
|
width: 50px;
|
|
height: 50px;
|
|
background-color: tomato;
|
|
anchor-name: --a;
|
|
}
|
|
#target {
|
|
left: 200px; /* force fallback */
|
|
}
|
|
#target, #ref {
|
|
position: absolute;
|
|
width: 40px;
|
|
height: 40px;
|
|
background-color: skyblue;
|
|
position-area: bottom right;
|
|
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>
|
|
|
|
// Test that inside-area, when used inside @position-try, works the same
|
|
// as when it's specified in the base style.
|
|
function test_position_area_ref(position_area) {
|
|
test((t) => {
|
|
t.add_cleanup(() => {
|
|
style.textContent = '';
|
|
});
|
|
style.textContent = `
|
|
@position-try --pt {
|
|
inset: unset; /* Undo force fallback */
|
|
position-area: ${position_area};
|
|
}
|
|
#target {
|
|
position-try-fallbacks: --pt;
|
|
}
|
|
#ref {
|
|
position-area: ${position_area};
|
|
}
|
|
`;
|
|
assert_true(CSS.supports('position-area', 'top left'));
|
|
assert_true(CSS.supports('position-try-fallbacks', '--x'));
|
|
assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft');
|
|
assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop');
|
|
}, `${position_area}`);
|
|
}
|
|
|
|
test_position_area_ref('none');
|
|
test_position_area_ref('span-all');
|
|
test_position_area_ref('span-all span-all');
|
|
test_position_area_ref('top left');
|
|
test_position_area_ref('top center');
|
|
test_position_area_ref('top right');
|
|
test_position_area_ref('center left');
|
|
test_position_area_ref('center center');
|
|
test_position_area_ref('center right');
|
|
test_position_area_ref('bottom left');
|
|
test_position_area_ref('bottom center');
|
|
test_position_area_ref('bottom right');
|
|
test_position_area_ref('start start');
|
|
test_position_area_ref('start center');
|
|
test_position_area_ref('start end');
|
|
test_position_area_ref('center start');
|
|
test_position_area_ref('center end');
|
|
test_position_area_ref('end start');
|
|
test_position_area_ref('end center');
|
|
test_position_area_ref('end end');
|
|
test_position_area_ref('self-start self-start');
|
|
test_position_area_ref('self-start center');
|
|
test_position_area_ref('self-start self-end');
|
|
test_position_area_ref('center self-start');
|
|
test_position_area_ref('center self-end');
|
|
test_position_area_ref('self-end self-start');
|
|
test_position_area_ref('self-end center');
|
|
test_position_area_ref('self-end self-end');
|
|
test_position_area_ref('y-start x-start');
|
|
test_position_area_ref('y-start center');
|
|
test_position_area_ref('y-start x-end');
|
|
test_position_area_ref('center x-start');
|
|
test_position_area_ref('center x-end');
|
|
test_position_area_ref('y-end x-start');
|
|
test_position_area_ref('y-end center');
|
|
test_position_area_ref('y-end x-end');
|
|
test_position_area_ref('y-self-start x-self-start');
|
|
test_position_area_ref('y-self-start center');
|
|
test_position_area_ref('y-self-start x-self-end');
|
|
test_position_area_ref('center x-self-start');
|
|
test_position_area_ref('center x-self-end');
|
|
test_position_area_ref('y-self-end x-self-start');
|
|
test_position_area_ref('y-self-end center');
|
|
test_position_area_ref('y-self-end x-self-end');
|
|
test_position_area_ref('span-y-self-start span-x-self-end');
|
|
test_position_area_ref('span-bottom span-all');
|
|
|
|
</script>
|
|
|
|
<style>
|
|
@position-try --top {
|
|
inset: unset; /* Undo force fallback */
|
|
position-area: top;
|
|
}
|
|
@position-try --right {
|
|
inset: unset; /* Undo force fallback */
|
|
position-area: right;
|
|
}
|
|
@position-try --bottom {
|
|
inset: unset; /* Undo force fallback */
|
|
position-area: bottom;
|
|
}
|
|
@position-try --left {
|
|
inset: unset; /* Undo force fallback */
|
|
position-area: left;
|
|
}
|
|
</style>
|
|
<script>
|
|
|
|
// Test that an element with the specified position-try-fallbacks is placed
|
|
// at the same position as a reference element with position-area:`expected`.
|
|
// This test uses #target/#ref size of 60x60px, which causes overflow if
|
|
// if we attempt the --right and --bottom positions.
|
|
function test_position_area_placement(position_try_fallbacks, expected) {
|
|
test((t) => {
|
|
style.textContent = `
|
|
#target, #ref {
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
#target {
|
|
position-try-fallbacks: ${position_try_fallbacks};
|
|
}
|
|
#ref {
|
|
position-area: ${expected};
|
|
}
|
|
`;
|
|
assert_true(CSS.supports('position-area', 'top left'));
|
|
assert_true(CSS.supports('position-try-fallbacks', '--x'));
|
|
assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft');
|
|
assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop');
|
|
}, `Placement: ${position_try_fallbacks}`);
|
|
}
|
|
|
|
test_position_area_placement('--top', 'top');
|
|
test_position_area_placement('--left', 'left');
|
|
|
|
// No space to to the right/bottom:
|
|
test_position_area_placement('--right, --top', 'top');
|
|
test_position_area_placement('--bottom, --top', 'top');
|
|
test_position_area_placement('--bottom, --right, --top', 'top');
|
|
test_position_area_placement('--bottom, --right, --left, --top', 'left');
|
|
test_position_area_placement('--bottom, --left, --top, --right', 'left');
|
|
|
|
// Flipping:
|
|
test_position_area_placement('--right flip-inline', 'left');
|
|
test_position_area_placement('--bottom flip-block', 'top');
|
|
test_position_area_placement('--left flip-start', 'top');
|
|
|
|
// left + flip-inline => right (no space).
|
|
test_position_area_placement('--left flip-inline, --top', 'top');
|
|
// top + flip-block => bottom (no space).
|
|
test_position_area_placement('--top flip-block, --left', 'left');
|
|
// left + flip-start flip-block => bottom (no space).
|
|
test_position_area_placement('--left flip-start flip-block, --left', 'left');
|
|
|
|
</script>
|