diff options
Diffstat (limited to 'testing/web-platform/tests/html/semantics/embedded-content/the-img-element/usemap-casing.html')
-rw-r--r-- | testing/web-platform/tests/html/semantics/embedded-content/the-img-element/usemap-casing.html | 93 |
1 files changed, 93 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/usemap-casing.html b/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/usemap-casing.html new file mode 100644 index 0000000000..c28f667ff3 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/usemap-casing.html @@ -0,0 +1,93 @@ +<!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-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="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="passfield-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="åωK"><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éDZ⁵アパート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アパートfi"><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> |