mirror of
https://github.com/servo/servo
synced 2026-05-13 02:17:06 +02:00
94 lines
4.8 KiB
HTML
94 lines
4.8 KiB
HTML
<!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>
|