chromium/src/third_party/blink/web_tests/external/wpt/html/semantics/embedded-content/the-img-element/usemap-casing.html - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE html>
 <meta charset=utf-8>
 <title>img usemap case-sensitive</title>
 <link rel="author" title="Domenic Denicola" href="mailto:d@domenic.me">
 <link rel="help" href="https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-hash-name-reference">
 <!-- See also: https://github.com/whatwg/html/issues/1666 -->

 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>

 <img src="/images/threecolors.png" usemap="#sanityCheck" width="100" height="100">
 <map name="sanityCheck"><area shape="rect" coords="0,0,100,100"></map>

 <img src="/images/threecolors.png" usemap="#sImPlE" width="100" height="100">
 <map name="simple"><area shape="rect" coords="0,0,100,100"></map>
 <map name="SIMPLE"><area shape="rect" coords="0,0,100,100"></map>

 <img src="/images/threecolors.png" usemap="#paSSfield-killroyß" width="100" height="100">
 <map name="passfield-killroyß"><area shape="rect" coords="0,0,100,100"></map>
 <map name="PASSFIELD-KILLROYß"><area shape="rect" coords="0,0,100,100"></map>
 <map name="paſſfield-killroyß"><area shape="rect" coords="0,0,100,100"></map>
 <map name="passfield-&#x212a;illroyß"><area shape="rect" coords="0,0,100,100"></map>
 <map name="paßfield-killroyß"><area shape="rect" coords="0,0,100,100"></map>
 <map name="paẞfield-killroyß"><area shape="rect" coords="0,0,100,100"></map>
 <map name="passfield-killroyẞ"><area shape="rect" coords="0,0,100,100"></map>
 <map name="passﬁeld-killroyß"><area shape="rect" coords="0,0,100,100"></map>
 <map name="passfıeld-killroyß"><area shape="rect" coords="0,0,100,100"></map>
 <map name="passfİeld-killroyß"><area shape="rect" coords="0,0,100,100"></map>

 <img src="/images/threecolors.png" usemap="#глупый" width="100" height="100">
 <map name="глупы&#x438;&#x306;"><area shape="rect" coords="0,0,100,100"></map>
 <map name="ГЛУПЫЙ"><area shape="rect" coords="0,0,100,100"></map>
 <map name="ГЛУПЫ&#x418;&#x306;"><area shape="rect" coords="0,0,100,100"></map>

 <img src="/images/threecolors.png" usemap="#åωk" width="100" height="100">
 <map name="ÅΩK"><area shape="rect" coords="0,0,100,100"></map>
 <map name="&#x212b;ωk"><area shape="rect" coords="0,0,100,100"></map>
 <map name="å&#x2126;k"><area shape="rect" coords="0,0,100,100"></map>
 <map name="åω&#x212a;"><area shape="rect" coords="0,0,100,100"></map>

 <img src="/images/threecolors.png" usemap="#blah1" width="100" height="100">
 <map name="blah&#x2460;"><area shape="rect" coords="0,0,100,100"></map>
 <map name="bl&#x24b6;h1"><area shape="rect" coords="0,0,100,100"></map>
 <map name="bl&#x24d0;h1"><area shape="rect" coords="0,0,100,100"></map>

 <img src="/images/threecolors.png" usemap="#t&Eacute;dz5アパートFi" width="100" height="100">
 <map name="T&Eacute;DZ5アパートFi"><area shape="rect" coords="0,0,100,100"></map>
 <map name="T&eacute;&#x01F1;&#x2075;アパートFi"><area shape="rect" coords="0,0,100,100"></map>
 <map name="t&Eacute;dz5&#x3100;Fi"><area shape="rect" coords="0,0,100,100"></map>
 <map name="t&Eacute;dz5&#x30A2;&#x30CF;&#x309A;&#x30FC;&#x30C8;Fi"><area shape="rect" coords="0,0,100,100"></map>
 <map name="T&Eacute;DZ⁵アパートFi"><area shape="rect" coords="0,0,100,100"></map>
 <map name="T&Eacute;DZ5アパートﬁ"><area shape="rect" coords="0,0,100,100"></map>

 <img src="/images/threecolors.png" usemap="#ΣΣ" width="100" height="100">
 <map name="σς"><area shape="rect" coords="0,0,100,100"></map>

 <div id="log"></div>

 <script>
 "use strict";
 setup({ explicit_done: true });

 onload = () => {
   test(() => {
     const image = document.querySelector(`img[usemap="#sanityCheck"]`);
     const imageRect = image.getBoundingClientRect();
     const x = imageRect.left + imageRect.width / 2;
     const y = imageRect.top + imageRect.height / 2;
     const element = document.elementFromPoint(x, y);
     const area = document.querySelector(`map[name="sanityCheck"] > area`);

     assert_equals(element, area);
   }, `Image with usemap of #sanityCheck should match the area with map named sanityCheck`);

   const images = Array.from(document.querySelectorAll(`img:not([usemap="#sanityCheck"])`));

   for (let image of images) {
     test(() => {
       const imageRect = image.getBoundingClientRect();
       const x = imageRect.left + imageRect.width / 2;
       const y = imageRect.top + imageRect.height / 2;
       const element = document.elementFromPoint(x, y);

       const name = element.parentElement.getAttribute("name");
       const messageSuffix = name ? `; used <map> with name "${name}"` : "";

       assert_equals(element, image, "The element retrieved must be the image, not an area" + messageSuffix);
     }, `Image with usemap of ${image.useMap} should not match any of the areas`);
   }

   done();
 };
 </script>
	<!DOCTYPE html>
	<meta charset=utf-8>
	<title>img usemap case-sensitive</title>
	<link rel="author" title="Domenic Denicola" href="mailto:d@domenic.me">
	<link rel="help" href="https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-hash-name-reference">
	<!-- See also: https://github.com/whatwg/html/issues/1666 -->

	<script src="/resources/testharness.js"></script>
	<script src="/resources/testharnessreport.js"></script>

	<img src="/images/threecolors.png" usemap="#sanityCheck" width="100" height="100">
	<map name="sanityCheck"><area shape="rect" coords="0,0,100,100"></map>

	<img src="/images/threecolors.png" usemap="#sImPlE" width="100" height="100">
	<map name="simple"><area shape="rect" coords="0,0,100,100"></map>
	<map name="SIMPLE"><area shape="rect" coords="0,0,100,100"></map>

	<img src="/images/threecolors.png" usemap="#paSSfield-killroyß" width="100" height="100">
	<map name="passfield-killroyß"><area shape="rect" coords="0,0,100,100"></map>
	<map name="PASSFIELD-KILLROYß"><area shape="rect" coords="0,0,100,100"></map>
	<map name="paſſfield-killroyß"><area shape="rect" coords="0,0,100,100"></map>
	<map name="passfield-Killroyß"><area shape="rect" coords="0,0,100,100"></map>
	<map name="paßfield-killroyß"><area shape="rect" coords="0,0,100,100"></map>
	<map name="paẞfield-killroyß"><area shape="rect" coords="0,0,100,100"></map>
	<map name="passfield-killroyẞ"><area shape="rect" coords="0,0,100,100"></map>
	<map name="passﬁeld-killroyß"><area shape="rect" coords="0,0,100,100"></map>
	<map name="passfıeld-killroyß"><area shape="rect" coords="0,0,100,100"></map>
	<map name="passfİeld-killroyß"><area shape="rect" coords="0,0,100,100"></map>

	<img src="/images/threecolors.png" usemap="#глупый" width="100" height="100">
	<map name="глупый"><area shape="rect" coords="0,0,100,100"></map>
	<map name="ГЛУПЫЙ"><area shape="rect" coords="0,0,100,100"></map>
	<map name="ГЛУПЫЙ"><area shape="rect" coords="0,0,100,100"></map>

	<img src="/images/threecolors.png" usemap="#åωk" width="100" height="100">
	<map name="ÅΩK"><area shape="rect" coords="0,0,100,100"></map>
	<map name="Åωk"><area shape="rect" coords="0,0,100,100"></map>
	<map name="åΩk"><area shape="rect" coords="0,0,100,100"></map>
	<map name="åωK"><area shape="rect" coords="0,0,100,100"></map>

	<img src="/images/threecolors.png" usemap="#blah1" width="100" height="100">
	<map name="blah①"><area shape="rect" coords="0,0,100,100"></map>
	<map name="blⒶh1"><area shape="rect" coords="0,0,100,100"></map>
	<map name="blⓐh1"><area shape="rect" coords="0,0,100,100"></map>

	<img src="/images/threecolors.png" usemap="#tÉdz5アパートFi" width="100" height="100">
	<map name="TÉDZ5アパートFi"><area shape="rect" coords="0,0,100,100"></map>
	<map name="TéǱ⁵アパートFi"><area shape="rect" coords="0,0,100,100"></map>
	<map name="tÉdz5㄀Fi"><area shape="rect" coords="0,0,100,100"></map>
	<map name="tÉdz5アパートFi"><area shape="rect" coords="0,0,100,100"></map>
	<map name="TÉDZ⁵アパートFi"><area shape="rect" coords="0,0,100,100"></map>
	<map name="TÉDZ5アパートﬁ"><area shape="rect" coords="0,0,100,100"></map>

	<img src="/images/threecolors.png" usemap="#ΣΣ" width="100" height="100">
	<map name="σς"><area shape="rect" coords="0,0,100,100"></map>

	<div id="log"></div>

	<script>
	"use strict";
	setup({ explicit_done: true });

	onload = () => {
	test(() => {
	const image = document.querySelector(`img[usemap="#sanityCheck"]`);
	const imageRect = image.getBoundingClientRect();
	const x = imageRect.left + imageRect.width / 2;
	const y = imageRect.top + imageRect.height / 2;
	const element = document.elementFromPoint(x, y);
	const area = document.querySelector(`map[name="sanityCheck"] > area`);

	assert_equals(element, area);
	}, `Image with usemap of #sanityCheck should match the area with map named sanityCheck`);

	const images = Array.from(document.querySelectorAll(`img:not([usemap="#sanityCheck"])`));

	for (let image of images) {
	test(() => {
	const imageRect = image.getBoundingClientRect();
	const x = imageRect.left + imageRect.width / 2;
	const y = imageRect.top + imageRect.height / 2;
	const element = document.elementFromPoint(x, y);

	const name = element.parentElement.getAttribute("name");
	const messageSuffix = name ? `; used <map> with name "${name}"` : "";

	assert_equals(element, image, "The element retrieved must be the image, not an area" + messageSuffix);
	}, `Image with usemap of ${image.useMap} should not match any of the areas`);
	}

	done();
	};
	</script>