usemap-casing.html (4791B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>img usemap case-sensitive</title> 4 <link rel="author" title="Domenic Denicola" href="mailto:d@domenic.me"> 5 <link rel="help" href="https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-hash-name-reference"> 6 <!-- See also: https://github.com/whatwg/html/issues/1666 --> 7 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 11 <img src="/images/threecolors.png" usemap="#sanityCheck" width="100" height="100"> 12 <map name="sanityCheck"><area shape="rect" coords="0,0,100,100"></map> 13 14 <img src="/images/threecolors.png" usemap="#sImPlE" width="100" height="100"> 15 <map name="simple"><area shape="rect" coords="0,0,100,100"></map> 16 <map name="SIMPLE"><area shape="rect" coords="0,0,100,100"></map> 17 18 <img src="/images/threecolors.png" usemap="#paSSfield-killroyß" width="100" height="100"> 19 <map name="passfield-killroyß"><area shape="rect" coords="0,0,100,100"></map> 20 <map name="PASSFIELD-KILLROYß"><area shape="rect" coords="0,0,100,100"></map> 21 <map name="paſſfield-killroyß"><area shape="rect" coords="0,0,100,100"></map> 22 <map name="passfield-Killroyß"><area shape="rect" coords="0,0,100,100"></map> 23 <map name="paßfield-killroyß"><area shape="rect" coords="0,0,100,100"></map> 24 <map name="paẞfield-killroyß"><area shape="rect" coords="0,0,100,100"></map> 25 <map name="passfield-killroyẞ"><area shape="rect" coords="0,0,100,100"></map> 26 <map name="passfield-killroyß"><area shape="rect" coords="0,0,100,100"></map> 27 <map name="passfıeld-killroyß"><area shape="rect" coords="0,0,100,100"></map> 28 <map name="passfİeld-killroyß"><area shape="rect" coords="0,0,100,100"></map> 29 30 <img src="/images/threecolors.png" usemap="#глупый" width="100" height="100"> 31 <map name="глупый"><area shape="rect" coords="0,0,100,100"></map> 32 <map name="ГЛУПЫЙ"><area shape="rect" coords="0,0,100,100"></map> 33 <map name="ГЛУПЫЙ"><area shape="rect" coords="0,0,100,100"></map> 34 35 <img src="/images/threecolors.png" usemap="#åωk" width="100" height="100"> 36 <map name="ÅΩK"><area shape="rect" coords="0,0,100,100"></map> 37 <map name="Åωk"><area shape="rect" coords="0,0,100,100"></map> 38 <map name="åΩk"><area shape="rect" coords="0,0,100,100"></map> 39 <map name="åωK"><area shape="rect" coords="0,0,100,100"></map> 40 41 <img src="/images/threecolors.png" usemap="#blah1" width="100" height="100"> 42 <map name="blah①"><area shape="rect" coords="0,0,100,100"></map> 43 <map name="blⒶh1"><area shape="rect" coords="0,0,100,100"></map> 44 <map name="blⓐh1"><area shape="rect" coords="0,0,100,100"></map> 45 46 <img src="/images/threecolors.png" usemap="#tÉdz5アパートFi" width="100" height="100"> 47 <map name="TÉDZ5アパートFi"><area shape="rect" coords="0,0,100,100"></map> 48 <map name="TéDZ⁵アパートFi"><area shape="rect" coords="0,0,100,100"></map> 49 <map name="tÉdz5㄀Fi"><area shape="rect" coords="0,0,100,100"></map> 50 <map name="tÉdz5アパートFi"><area shape="rect" coords="0,0,100,100"></map> 51 <map name="TÉDZ⁵アパートFi"><area shape="rect" coords="0,0,100,100"></map> 52 <map name="TÉDZ5アパートfi"><area shape="rect" coords="0,0,100,100"></map> 53 54 <img src="/images/threecolors.png" usemap="#ΣΣ" width="100" height="100"> 55 <map name="σς"><area shape="rect" coords="0,0,100,100"></map> 56 57 <div id="log"></div> 58 59 <script> 60 "use strict"; 61 setup({ explicit_done: true }); 62 63 onload = () => { 64 test(() => { 65 const image = document.querySelector(`img[usemap="#sanityCheck"]`); 66 const imageRect = image.getBoundingClientRect(); 67 const x = imageRect.left + imageRect.width / 2; 68 const y = imageRect.top + imageRect.height / 2; 69 const element = document.elementFromPoint(x, y); 70 const area = document.querySelector(`map[name="sanityCheck"] > area`); 71 72 assert_equals(element, area); 73 }, `Image with usemap of #sanityCheck should match the area with map named sanityCheck`); 74 75 const images = Array.from(document.querySelectorAll(`img:not([usemap="#sanityCheck"])`)); 76 77 for (let image of images) { 78 test(() => { 79 const imageRect = image.getBoundingClientRect(); 80 const x = imageRect.left + imageRect.width / 2; 81 const y = imageRect.top + imageRect.height / 2; 82 const element = document.elementFromPoint(x, y); 83 84 const name = element.parentElement.getAttribute("name"); 85 const messageSuffix = name ? `; used <map> with name "${name}"` : ""; 86 87 assert_equals(element, image, "The element retrieved must be the image, not an area" + messageSuffix); 88 }, `Image with usemap of ${image.useMap} should not match any of the areas`); 89 } 90 91 done(); 92 }; 93 </script>