css/css-anchor-position/position-try-order-basic.html - external/w3c/web-platform-tests.git - Git at Google

 <!DOCTYPE html>
 <title>CSS Anchor Positioning: Basic position-try-order behavior</title>
 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-try-order-property">
 <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: 200px;
     width: 150px;
     height: 150px;
     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;
   }

 /*

 The IMCB for --right is the whole area to the right of the anchor, and similarly
 for --left, etc.

   ┌──────────────┐
   │          xxxx│
   │          xxxx│
   │    ┌────┐xxxx│
   │    │    │xxxx│
   │    └────┘xxxx│
   │          xxxx│
   │          xxxx│
   └──────────────┘

 **/

   @position-try --right {
     inset: unset;
     left: anchor(right);
   }
   @position-try --left {
     inset: unset;
     right: anchor(left);
   }
   @position-try --top {
     inset: unset;
     bottom: anchor(top);
   }
   @position-try --bottom {
     inset: unset;
     top: anchor(bottom);
   }

 /*

 The IMCB for --right-sweep is the area that would be "swept" by the anchor if it
 moved right, and similarly for --left-sweep, etc.

    ┌──────────────┐
    │              │
    │              │
    │    ┌────┐xxxx│
    │    │    │xxxx│
    │    └────┘xxxx│
    │              │
    │              │
    └──────────────┘

 */

   @position-try --right-sweep {
     inset: unset;
     top: anchor(top);
     bottom: anchor(bottom);
     left: anchor(right);
     align-self: center;
   }

   @position-try --left-sweep {
     inset: unset;
     top: anchor(top);
     bottom: anchor(bottom);
     right: anchor(left);
     align-self: center;
   }

   @position-try --bottom-sweep {
     left: anchor(left);
     right: anchor(right);
     top: anchor(bottom);
     justify-self: center;
   }

   @position-try --top-sweep {
     left: anchor(left);
     right: anchor(right);
     bottom: anchor(top);
     justify-self: center;
   }

 </style>
 <style id=style>
 </style>
 <div id=cb>
   <div id=anchor></div>
   <div id=target></div>
   <div id=ref></div>
 </div>
 <script>

 // Test that an element with the specified `position_try` gets the same
 // position as a reference element with `position_try_expected`.
 function test_order(position_try, position_try_expected) {
   test((t) => {
     style.textContent = `
       #target {
         position-try: ${position_try};
       }
       #ref {
         position-try: ${position_try_expected};
       }
     `;
     assert_true(CSS.supports('position-try', 'normal --x'));
     assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft');
     assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop');
   }, `${position_try} | ${position_try_expected}`);
 }

 // Note: --right, --left, --top, and --bottom all fit, but have different
 // inset-modifed containing blocks.
 test_order('--right', '--right');
 test_order('--left', '--left');
 test_order('--top', '--top');
 test_order('--bottom', '--bottom');

 // position-try-order:normal just picks the first fallback.
 test_order('--right, --left, --bottom, --top', '--right');
 test_order('normal --right, --left, --bottom, --top', '--right');
 test_order('normal --top, --left, --bottom, --right', '--top');

 // --right and --left have the same IMCB block-size.
 test_order('most-block-size --right, --left', '--right');
 test_order('most-height --right, --left', '--right');
 // --left has more inline-size than --right.
 test_order('most-inline-size --right, --left', '--left');
 test_order('most-width --right, --left', '--left');

 // --bottom and --top have the same IMCB inline-size.
 test_order('most-inline-size --bottom, --top', '--bottom');
 test_order('most-width --bottom, --top', '--bottom');
 // --top has more block-size than --bottom.
 test_order('most-block-size --bottom, --top', '--top');
 test_order('most-height --bottom, --top', '--top');

 // --bottom/--top has more IMBC inline-size than --right/--left.
 test_order('most-inline-size --right, --left, --bottom, --top', '--bottom');
 test_order('most-inline-size --right, --left, --top, --bottom', '--top');

 // --right/--left has more IMBC block-size than --bottom/--top.
 test_order('most-block-size --bottom, --top, --right, --left', '--right');
 test_order('most-block-size --bottom, --top, --left, --right', '--left');

 // --left-sweep and --bottom-sweep has the same IMBC inline-size ...
 test_order('most-inline-size --left-sweep, --bottom-sweep', '--left-sweep');
 test_order('most-inline-size --bottom-sweep, --left-sweep', '--bottom-sweep');
 // ... but not the same block-size.
 test_order('most-block-size --left-sweep, --bottom-sweep', '--left-sweep');
 test_order('most-block-size --bottom-sweep, --left-sweep', '--left-sweep');

 test_order('most-inline-size --right-sweep, --left-sweep, --bottom-sweep, --top-sweep', '--left-sweep');
 test_order('most-block-size --right-sweep, --left-sweep, --bottom-sweep, --top-sweep', '--top-sweep');

 // NOTE: the css-anchor-position-1 spec requires that only a minimum of five
 // fallback positions be respected. So this test, while intended to test across
 // all 8 fallbacks, intentionally leaves off 3 of them.
 test_order(`most-inline-size
   --right-sweep, --left-sweep, --bottom-sweep, --top-sweep,
   /*  --right, --left, --bottom, --top */
   --bottom
   `, '--bottom');

 // NOTE: the css-anchor-position-1 spec requires that only a minimum of five
 // fallback positions be respected. So this test, while intended to test across
 // all 8 fallbacks, intentionally leaves off 3 of them.
 test_order(`most-block-size
   --right-sweep, --left-sweep, --bottom-sweep, --top-sweep,
   /*  --right, --left, --bottom, --top */
   --right
   `, '--right');

 </script>
	<!DOCTYPE html>
	<title>CSS Anchor Positioning: Basic position-try-order behavior</title>
	<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-try-order-property">
	<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: 200px;
	width: 150px;
	height: 150px;
	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;
	}

	/*

	The IMCB for --right is the whole area to the right of the anchor, and similarly
	for --left, etc.

	┌──────────────┐
	│ xxxx│
	│ xxxx│
	│ ┌────┐xxxx│
	│ │ │xxxx│
	│ └────┘xxxx│
	│ xxxx│
	│ xxxx│
	└──────────────┘

	**/

	@position-try --right {
	inset: unset;
	left: anchor(right);
	}
	@position-try --left {
	inset: unset;
	right: anchor(left);
	}
	@position-try --top {
	inset: unset;
	bottom: anchor(top);
	}
	@position-try --bottom {
	inset: unset;
	top: anchor(bottom);
	}

	/*

	The IMCB for --right-sweep is the area that would be "swept" by the anchor if it
	moved right, and similarly for --left-sweep, etc.

	┌──────────────┐
	│ │
	│ │
	│ ┌────┐xxxx│
	│ │ │xxxx│
	│ └────┘xxxx│
	│ │
	│ │
	└──────────────┘

	*/

	@position-try --right-sweep {
	inset: unset;
	top: anchor(top);
	bottom: anchor(bottom);
	left: anchor(right);
	align-self: center;
	}

	@position-try --left-sweep {
	inset: unset;
	top: anchor(top);
	bottom: anchor(bottom);
	right: anchor(left);
	align-self: center;
	}

	@position-try --bottom-sweep {
	left: anchor(left);
	right: anchor(right);
	top: anchor(bottom);
	justify-self: center;
	}

	@position-try --top-sweep {
	left: anchor(left);
	right: anchor(right);
	bottom: anchor(top);
	justify-self: center;
	}

	</style>
	<style id=style>
	</style>
	<div id=cb>
	<div id=anchor></div>
	<div id=target></div>
	<div id=ref></div>
	</div>
	<script>

	// Test that an element with the specified `position_try` gets the same
	// position as a reference element with `position_try_expected`.
	function test_order(position_try, position_try_expected) {
	test((t) => {
	style.textContent = `
	#target {
	position-try: ${position_try};
	}
	#ref {
	position-try: ${position_try_expected};
	}
	`;
	assert_true(CSS.supports('position-try', 'normal --x'));
	assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft');
	assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop');
	}, `${position_try} \| ${position_try_expected}`);
	}

	// Note: --right, --left, --top, and --bottom all fit, but have different
	// inset-modifed containing blocks.
	test_order('--right', '--right');
	test_order('--left', '--left');
	test_order('--top', '--top');
	test_order('--bottom', '--bottom');

	// position-try-order:normal just picks the first fallback.
	test_order('--right, --left, --bottom, --top', '--right');
	test_order('normal --right, --left, --bottom, --top', '--right');
	test_order('normal --top, --left, --bottom, --right', '--top');

	// --right and --left have the same IMCB block-size.
	test_order('most-block-size --right, --left', '--right');
	test_order('most-height --right, --left', '--right');
	// --left has more inline-size than --right.
	test_order('most-inline-size --right, --left', '--left');
	test_order('most-width --right, --left', '--left');

	// --bottom and --top have the same IMCB inline-size.
	test_order('most-inline-size --bottom, --top', '--bottom');
	test_order('most-width --bottom, --top', '--bottom');
	// --top has more block-size than --bottom.
	test_order('most-block-size --bottom, --top', '--top');
	test_order('most-height --bottom, --top', '--top');

	// --bottom/--top has more IMBC inline-size than --right/--left.
	test_order('most-inline-size --right, --left, --bottom, --top', '--bottom');
	test_order('most-inline-size --right, --left, --top, --bottom', '--top');

	// --right/--left has more IMBC block-size than --bottom/--top.
	test_order('most-block-size --bottom, --top, --right, --left', '--right');
	test_order('most-block-size --bottom, --top, --left, --right', '--left');

	// --left-sweep and --bottom-sweep has the same IMBC inline-size ...
	test_order('most-inline-size --left-sweep, --bottom-sweep', '--left-sweep');
	test_order('most-inline-size --bottom-sweep, --left-sweep', '--bottom-sweep');
	// ... but not the same block-size.
	test_order('most-block-size --left-sweep, --bottom-sweep', '--left-sweep');
	test_order('most-block-size --bottom-sweep, --left-sweep', '--left-sweep');

	test_order('most-inline-size --right-sweep, --left-sweep, --bottom-sweep, --top-sweep', '--left-sweep');
	test_order('most-block-size --right-sweep, --left-sweep, --bottom-sweep, --top-sweep', '--top-sweep');

	// NOTE: the css-anchor-position-1 spec requires that only a minimum of five
	// fallback positions be respected. So this test, while intended to test across
	// all 8 fallbacks, intentionally leaves off 3 of them.
	test_order(`most-inline-size
	--right-sweep, --left-sweep, --bottom-sweep, --top-sweep,
	/* --right, --left, --bottom, --top */
	--bottom
	`, '--bottom');

	// NOTE: the css-anchor-position-1 spec requires that only a minimum of five
	// fallback positions be respected. So this test, while intended to test across
	// all 8 fallbacks, intentionally leaves off 3 of them.
	test_order(`most-block-size
	--right-sweep, --left-sweep, --bottom-sweep, --top-sweep,
	/* --right, --left, --bottom, --top */
	--right
	`, '--right');

	</script>