| <!DOCTYPE html> |
| <meta charset=utf-8> |
| <title>object 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> |
| |
| <div id="log"></div> |
| |
| <object data="/images/threecolors.png" usemap="#sanityCheck" width="300" height="300"></object> |
| <map name="sanityCheck"><area shape="rect" coords="0,0,300,300"></map> |
| |
| <object data="/images/threecolors.png" usemap="#sImPlE" width="300" height="300"></object> |
| <map name="simple"><area shape="rect" coords="0,0,300,300"></map> |
| <map name="SIMPLE"><area shape="rect" coords="0,0,300,300"></map> |
| |
| <object data="/images/threecolors.png" usemap="#paSSfield-killroyß" width="300" height="300"></object> |
| <map name="passfield-killroyß"><area shape="rect" coords="0,0,300,300"></map> |
| <map name="PASSFIELD-KILLROYß"><area shape="rect" coords="0,0,300,300"></map> |
| <map name="paſſfield-killroyß"><area shape="rect" coords="0,0,300,300"></map> |
| <map name="passfield-Killroyß"><area shape="rect" coords="0,0,300,300"></map> |
| <map name="paßfield-killroyß"><area shape="rect" coords="0,0,300,300"></map> |
| <map name="paẞfield-killroyß"><area shape="rect" coords="0,0,300,300"></map> |
| <map name="passfield-killroyẞ"><area shape="rect" coords="0,0,300,300"></map> |
| <map name="passfield-killroyß"><area shape="rect" coords="0,0,300,300"></map> |
| <map name="passfıeld-killroyß"><area shape="rect" coords="0,0,300,300"></map> |
| <map name="passfİeld-killroyß"><area shape="rect" coords="0,0,300,300"></map> |
| |
| <object data="/images/threecolors.png" usemap="#глупый" width="300" height="300"></object> |
| <map name="глупый"><area shape="rect" coords="0,0,300,300"></map> |
| <map name="ГЛУПЫЙ"><area shape="rect" coords="0,0,300,300"></map> |
| <map name="ГЛУПЫЙ"><area shape="rect" coords="0,0,300,300"></map> |
| |
| <object data="/images/threecolors.png" usemap="#åωk" width="300" height="300"></object> |
| <map name="ÅΩK"><area shape="rect" coords="0,0,300,300"></map> |
| <map name="Åωk"><area shape="rect" coords="0,0,300,300"></map> |
| <map name="åΩk"><area shape="rect" coords="0,0,300,300"></map> |
| <map name="åωK"><area shape="rect" coords="0,0,300,300"></map> |
| |
| <object data="/images/threecolors.png" usemap="#blah1" width="300" height="300"></object> |
| <map name="blah①"><area shape="rect" coords="0,0,300,300"></map> |
| <map name="blⒶh1"><area shape="rect" coords="0,0,300,300"></map> |
| <map name="blⓐh1"><area shape="rect" coords="0,0,300,300"></map> |
| |
| <object data="/images/threecolors.png" usemap="#tÉdz5アパートFi" width="300" height="300"></object> |
| <map name="TÉDZ5アパートFi"><area shape="rect" coords="0,0,300,300"></map> |
| <map name="TéDZ⁵アパートFi"><area shape="rect" coords="0,0,300,300"></map> |
| <map name="tÉdz5㌀Fi"><area shape="rect" coords="0,0,300,300"></map> |
| <map name="tÉdz5アパートFi"><area shape="rect" coords="0,0,300,300"></map> |
| <map name="TÉDZ⁵アパートFi"><area shape="rect" coords="0,0,300,300"></map> |
| <map name="TÉDZ5アパートfi"><area shape="rect" coords="0,0,300,300"></map> |
| |
| <object data="/images/threecolors.png" usemap="#ΣΣ" width="300" height="300"></object> |
| <map name="σς"><area shape="rect" coords="0,0,300,300"></map> |
| |
| <script> |
| "use strict"; |
| setup({ explicit_done: true }); |
| |
| onload = () => { |
| test(() => { |
| const object = document.querySelector(`object[usemap="#sanityCheck"]`); |
| const objectRect = object.getBoundingClientRect(); |
| const x = objectRect.left + objectRect.width / 2; |
| const y = objectRect.top + objectRect.height / 2; |
| const element = document.elementFromPoint(x, y); |
| const area = document.querySelector(`map[name="sanityCheck"] > area`); |
| |
| assert_equals(element, area); |
| }, `Object with usemap of #sanityCheck should match the area with map named sanityCheck`); |
| |
| const objects = Array.from(document.querySelectorAll(`object:not([usemap="#sanityCheck"])`)); |
| |
| for (let object of objects) { |
| test(() => { |
| const objectRect = object.getBoundingClientRect(); |
| const x = objectRect.left + objectRect.width / 2; |
| const y = objectRect.top + objectRect.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, object, "The element retrieved must be the object, not an area" + messageSuffix); |
| }, `Object with usemap of ${object.useMap} should not match any of the areas`); |
| } |
| |
| done(); |
| }; |
| </script> |