<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin" type="text/css"?> <?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css" type="text/css"?> <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=199692 --> <window title="Test for Bug 199692" id="test_bug199692.xhtml" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> <script type="text/javascript"> <![CDATA[ customElements.define("test-xul-element", class CustomElement extends XULElement { constructor() { super(); const template = document.getElementById("template"); this.attachShadow({mode: "open"}) .appendChild(template.content.cloneNode(true)); } }); ]]> </script> <body id="body" xmlns="http://www.w3.org/1999/xhtml"> <template id="template"> <xul:label id="anon-label" value="ANON"/> </template> <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=199692">Mozilla Bug 199692</a> <vbox id="content" style="position: relative;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <xul:label id="non-anon-label" value="a textbox!:" control="textbox"/> <html:textarea id="textbox" rows="4"/> <xul:radiogroup style="outline: 2px solid orange;"> <xul:radio id="unselected-radio" label="Orange" style="outline: 2px solid red;"/> <xul:radio id="selected-radio" label="Violet" selected="true"/> <xul:radio id="disabled-radio" label="Yellow" disabled="true"/> </xul:radiogroup> <test-xul-element id="bound" style="border: 2px solid green;"></test-xul-element> </vbox> <pre id="test"> <script class="testbody" type="text/javascript"> <![CDATA[ SimpleTest.waitForExplicitFinish(); // Before onload, XUL docs have no root frame. is(document.elementFromPoint(10,10), null, "Calls to elementFromPoint before onload should return null"); var d = 10; function middle(e) { return { "x": e.getBoundingClientRect().x + e.getBoundingClientRect().width/2, "y": e.getBoundingClientRect().y + e.getBoundingClientRect().height/2 }; } function lower_right(e) { return { "x": e.getBoundingClientRect().x + e.getBoundingClientRect().width - d, "y": e.getBoundingClientRect().y + e.getBoundingClientRect().height - d }; } function upper_left(e) { return { "x": e.getBoundingClientRect().x + d, "y": e.getBoundingClientRect().y + d }; } function scrollbar_button(e) { // a bit down from upper right return { "x": e.getBoundingClientRect().x + e.getBoundingClientRect().width - d, "y": e.getBoundingClientRect().y + d + 15 }; } function test(ptFunc, id, message) { var pt = ptFunc($(id)); var e = document.elementFromPoint(pt.x, pt.y); ok(e != null, message + " (returned null)"); is(e.id, id, message); } function do_test() { // Avoid hardcoding x,y pixel values, to better deal with differing default // font sizes or other layout defaults. test(middle, 'textbox', "Point within textbox should return textbox element"); test(lower_right, 'textbox', "Point on textbox's scrollbar should return textbox element"); test(scrollbar_button, 'textbox', "Point on textbox's scrollbar button should return textbox element"); test(middle, 'non-anon-label', "Point on label should return label"); test(upper_left, 'bound', "Point on custom element content should return custom element"); SimpleTest.finish(); } $("textbox").setAttribute("value", "lorem ipsum dolor sit amet " + "lorem ipsum dolor sit amet " + "lorem ipsum dolor sit amet " + "lorem ipsum dolor sit amet " + "lorem ipsum dolor sit amet " + "lorem ipsum dolor sit amet " + "lorem ipsum dolor sit amet "); // force scrollbars to appear addLoadEvent(do_test); ]]> </script> </pre> </body> </window>