| <!DOCTYPE HTML> |
| <html> |
| <body> |
| <script src="../resources/js-test.js"></script> |
| <script src="../resources/accessibility-helper.js"></script> |
| |
| <div id="container" style="position: relative; top: 100px; left: 600px; width:400px; height: 400px;" role="group" tabindex="0"> |
| |
| <svg role="group" id="svgroot"> |
| |
| <circle role="button" aria-label="face" id="face" r="200" cx="200" cy="200" stroke="red" stroke-width="1" fill="yellow" /> |
| <ellipse role="button" aria-label="left-eye" id="left-eye" cx="120" cy="180" rx="18" ry="33" fill="black"/> |
| <ellipse role="button" aria-label="right-eye" id="right-eye" cx="280" cy="120" rx="18" ry="33" fill="black"/> |
| <ellipse role="button" aria-label="nose" id="nose" cx="200" cy="220" rx="8" ry="15" fill="black"/> |
| <path role="button" aria-label="smile" id="smile" stroke-width="10" stroke="black" fill="none" stroke-linecap="round" d="M120,280 Q200,330 290,280"/> |
| <text x="150" y="130" fill="red">Test</text> |
| <image x="20" y="20" width="300" height="80" aria-label="Test Image" xlink:href="resources/cake.png" /> |
| |
| </svg> |
| </div> |
| |
| |
| <div id="console"></div> |
| <script> |
| |
| description("This test ensures the accessibility bounds of embedded SVG objects are correct.") |
| |
| // Return the page's relative coordinates. If we rely on the x() or y() of the accessibility object, then |
| // accessibility transforms are applied that fail because there is no window available |
| function pageX(element) { |
| return element.clickPointX - element.width/2; |
| } |
| |
| function pageY(element) { |
| return element.clickPointY - element.height/2; |
| } |
| |
| if (window.testRunner && window.accessibilityController) { |
| var container = accessibilityController.accessibleElementById("svgroot"); |
| |
| var x = pageX(container) - 1; |
| var y = pageY(container) - 1; |
| |
| debug("container location: (" + x + ", " + y + ")"); |
| |
| var face = container.childAtIndex(0); |
| debug('Face role: ' + face.role); |
| debug('Face label: ' + platformValueForW3CName(face, true)); |
| debug('FaceX: ' + (pageX(face) - x)); |
| debug('FaceY: ' + Math.abs(pageY(face) - y)); |
| debug('<br>'); |
| |
| var eye = container.childAtIndex(1); |
| debug('Eye role: ' + eye.role); |
| debug('Eye label: ' + platformValueForW3CName(eye, true)); |
| debug('EyeX: ' + (pageX(eye) - x)); |
| debug('EyeY: ' + Math.abs(pageY(eye) - y)); |
| debug('<br>'); |
| |
| var nose = container.childAtIndex(3); |
| debug('Nose role: ' + nose.role); |
| debug('Nose label: ' + platformValueForW3CName(nose, true)); |
| debug('NoseX: ' + (pageX(nose) - x)); |
| debug('NoseY: ' + Math.abs(pageY(nose) - y)); |
| debug('<br>'); |
| |
| var mouth = container.childAtIndex(4); |
| debug('Mouth role: ' + mouth.role); |
| debug('Mouth label: ' + platformValueForW3CName(mouth, true)); |
| debug('MouthX: ' + (pageX(mouth) - x)); |
| debug('MouthY: ' + Math.floor(Math.abs(pageY(mouth) - y))); |
| debug('<br>'); |
| |
| // Text varies by about 1 - 2 pixels depending on the platform, |
| // so just print the text coordinates divided by 10. |
| var text = container.childAtIndex(5); |
| if (accessibilityController.platformName != "atk") |
| text = text.childAtIndex(0); |
| debug('Text role: ' + text.role); |
| debug('TextX/10: ' + Math.floor((pageX(text) - x) / 10)); |
| debug('TextY/10: ' + Math.floor(Math.abs(pageY(text) - y) / 10)); |
| debug('<br>'); |
| |
| var image = container.childAtIndex(6); |
| debug('Image role: ' + image.role); |
| debug('Image label: ' + platformValueForW3CName(image, true)); |
| debug('ImageX: ' + (pageX(image) - x)); |
| debug('ImageY: ' + Math.abs(pageY(image) - y)); |
| } |
| |
| </script> |
| </body> |
| </html> |
| |
