chromium/src/third_party/blink/web_tests/wpt_internal/display-lock/beforematch/beforematch-fragment-id-modify-target.html - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE html>
 <meta charset="utf-8">
 <link rel="author" title="Joey Arhar" href="mailto:jarhar@chromium.org">
 <link rel="help" href="https://github.com/WICG/display-locking">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <body>
   <div style="height: 2000px;">spacer</div>

   <script>

   test(() => {
     window.scrollTo(0, 0);
     assert_true(window.pageYOffset === 0, 'Scroll should reset at the beginning of the test.');

     const div = document.createElement('div');
     div.textContent = 'move';
     div.id = 'move';
     document.body.appendChild(div);

     let beforematchCalled = false;
     div.addEventListener('beforematc', () => {
       // Move the matched element 2000px down the page.
       const spacer = document.createElement('div');
       spacer.style.height = '2000px';
       document.body.appendChild(spacer);
       div.remove();
       document.body.appendChild(div);
       beforematchCalled = true;
     });

     window.location.hash = '#move';

     const offsetAfterMatch = window.pageYOffset;
     div.scrollIntoView();
     assert_equals(offsetAfterMatch, window.pageYOffset, `The scroll after beforematch should be the same as scrolling directly to the element's final destination.`);
   }, 'Verifies that when a beforematch event handler moves a matching element, we scroll to its final location.');

   test(() => {
     window.scrollTo(0, 0);
     assert_true(window.pageYOffset === 0, 'Scroll should reset at the beginning of the test.');

     const div = document.createElement('div');
     div.textContent = 'detach';
     div.id = 'detach';
     document.body.appendChild(div);

     let beforematchCalled = false;
     div.addEventListener('beforematch', () => {
       div.remove();
       beforematchCalled = true;
     });

     window.location.hash = '#detach';

     assert_true(beforematchCalled, 'beforematch should be called when window.location.hash is set to #detach.');
     assert_true(window.pageYOffset === 0, 'The page should not be scrolled down to where #detach used to be.');
   }, 'Verifies that no scrolling occurs when an element selected by the fragment identifier is detached by the beforematch event handler.');

   test(() => {
     window.scrollTo(0, 0);
     assert_true(window.pageYOffset === 0, 'Scroll should reset at the beginning of the test.');

     const div = document.createElement('div');
     div.textContent = 'displaynone';
     div.id = 'displaynone';
     document.body.appendChild(div);

     let beforematchCalled = false;
     div.addEventListener('beforematch', () => {
       div.style = 'display: none';
       beforematchCalled = true;
     });

     window.location.hash = '#displaynone';

     assert_true(beforematchCalled, 'beforematch should be called when window.location.hash is set to #displaynone.');
     assert_true(window.pageYOffset === 0, 'The page should not be scrolled down to where #displaynone used to be.');
   }, `No scrolling should occur when the beforematch event handler sets the target element's style to display: none.`);

   test(() => {
     window.scrollTo(0, 0);
     assert_true(window.pageYOffset === 0, 'Scroll should reset at the beginning of the test.');

     const div = document.createElement('div');
     div.textContent = 'visibilityhidden';
     div.id = 'visibilityhidden';
     document.body.appendChild(div);

     let beforematchCalled = false;
     div.addEventListener('beforematch', () => {
       div.style = 'visibility: hidden';
       beforematchCalled = true;
     });

     window.location.hash = '#visibilityhidden';

     assert_true(beforematchCalled, 'beforematch should be called when window.location.hash is set to #visibilityhidden.');
     assert_true(window.pageYOffset !== 0, 'The page should be scrolled down to where #visibilityhidden is.');
   }, `Scrolling should still occur when beforematch sets visiblity: none on the target element.`);

   // TODO(jarhar): Write more tests here once we decide on a behavior here: https://github.com/WICG/display-locking/issues/150

   </script>
 </body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<link rel="author" title="Joey Arhar" href="mailto:jarhar@chromium.org">
	<link rel="help" href="https://github.com/WICG/display-locking">
	<script src="/resources/testharness.js"></script>
	<script src="/resources/testharnessreport.js"></script>
	<body>
	<div style="height: 2000px;">spacer</div>

	<script>

	test(() => {
	window.scrollTo(0, 0);
	assert_true(window.pageYOffset === 0, 'Scroll should reset at the beginning of the test.');

	const div = document.createElement('div');
	div.textContent = 'move';
	div.id = 'move';
	document.body.appendChild(div);

	let beforematchCalled = false;
	div.addEventListener('beforematc', () => {
	// Move the matched element 2000px down the page.
	const spacer = document.createElement('div');
	spacer.style.height = '2000px';
	document.body.appendChild(spacer);
	div.remove();
	document.body.appendChild(div);
	beforematchCalled = true;
	});

	window.location.hash = '#move';

	const offsetAfterMatch = window.pageYOffset;
	div.scrollIntoView();
	assert_equals(offsetAfterMatch, window.pageYOffset, `The scroll after beforematch should be the same as scrolling directly to the element's final destination.`);
	}, 'Verifies that when a beforematch event handler moves a matching element, we scroll to its final location.');

	test(() => {
	window.scrollTo(0, 0);
	assert_true(window.pageYOffset === 0, 'Scroll should reset at the beginning of the test.');

	const div = document.createElement('div');
	div.textContent = 'detach';
	div.id = 'detach';
	document.body.appendChild(div);

	let beforematchCalled = false;
	div.addEventListener('beforematch', () => {
	div.remove();
	beforematchCalled = true;
	});

	window.location.hash = '#detach';

	assert_true(beforematchCalled, 'beforematch should be called when window.location.hash is set to #detach.');
	assert_true(window.pageYOffset === 0, 'The page should not be scrolled down to where #detach used to be.');
	}, 'Verifies that no scrolling occurs when an element selected by the fragment identifier is detached by the beforematch event handler.');

	test(() => {
	window.scrollTo(0, 0);
	assert_true(window.pageYOffset === 0, 'Scroll should reset at the beginning of the test.');

	const div = document.createElement('div');
	div.textContent = 'displaynone';
	div.id = 'displaynone';
	document.body.appendChild(div);

	let beforematchCalled = false;
	div.addEventListener('beforematch', () => {
	div.style = 'display: none';
	beforematchCalled = true;
	});

	window.location.hash = '#displaynone';

	assert_true(beforematchCalled, 'beforematch should be called when window.location.hash is set to #displaynone.');
	assert_true(window.pageYOffset === 0, 'The page should not be scrolled down to where #displaynone used to be.');
	}, `No scrolling should occur when the beforematch event handler sets the target element's style to display: none.`);

	test(() => {
	window.scrollTo(0, 0);
	assert_true(window.pageYOffset === 0, 'Scroll should reset at the beginning of the test.');

	const div = document.createElement('div');
	div.textContent = 'visibilityhidden';
	div.id = 'visibilityhidden';
	document.body.appendChild(div);

	let beforematchCalled = false;
	div.addEventListener('beforematch', () => {
	div.style = 'visibility: hidden';
	beforematchCalled = true;
	});

	window.location.hash = '#visibilityhidden';

	assert_true(beforematchCalled, 'beforematch should be called when window.location.hash is set to #visibilityhidden.');
	assert_true(window.pageYOffset !== 0, 'The page should be scrolled down to where #visibilityhidden is.');
	}, `Scrolling should still occur when beforematch sets visiblity: none on the target element.`);

	// TODO(jarhar): Write more tests here once we decide on a behavior here: https://github.com/WICG/display-locking/issues/150

	</script>
	</body>