third_party/WebKit/LayoutTests/accessibility/svg-bounds.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <body>
   4 <script src="../resources/js-test.js"></script>
   5
   6 <div id="container" style="position: relative; top: 100px; left: 600px; width:400px; height: 400px;" role="group" tabindex="0">
   7
   8 <svg role="group" id="svgroot">
   9
  10   <circle role="button" aria-label="face" id="face" r="200" cx="200" cy="200" stroke="red" stroke-width="1" fill="yellow" />
  11   <ellipse role="button" aria-label="left-eye" id="left-eye" cx="120" cy="180" rx="18" ry="33" fill="black"/>
  12   <ellipse role="button" aria-label="right-eye" id="right-eye" cx="280" cy="120" rx="18" ry="33" fill="black"/>
  13   <ellipse role="button" aria-label="nose" id="nose" cx="200" cy="220" rx="8" ry="15" fill="black"/>
  14   <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"/>
  15   <text x="150" y="130" fill="red">Test</text>
  16   <image x="20" y="20" width="300" height="80" aria-label="Test Image" xlink:href="resources/cake.png" />
  17
  18 </svg>
  19 </div>
  20
  21
  22 <div id="console"></div>
  23 <script>
  24
  25 description("This test ensures the accessibility bounds of embedded SVG objects are correct.")
  26
  27 // Return the page's relative coordinates. If we rely on the x() or y() of the accessibility object, then
  28 // accessibility transforms are applied that fail because there is no window available
  29 function pageX(element) {
  30     return element.clickPointX - element.width/2;
  31 }
  32
  33 function pageY(element) {
  34     return element.clickPointY - element.height/2;
  35 }
  36
  37 if (window.testRunner && window.accessibilityController) {
  38     window.testRunner.dumpAsText();
  39
  40     var container = accessibilityController.accessibleElementById("svgroot");
  41
  42     var x = pageX(container) - 1;
  43     var y = pageY(container) - 1;
  44
  45     debug("container location: (" + x + ", " + y + ")");
  46
  47     var face = container.childAtIndex(0);
  48     debug('Face role: ' + face.role);
  49     debug('Face label: ' + face.deprecatedDescription);
  50     debug('FaceX: ' + (pageX(face) - x));
  51     debug('FaceY: ' + Math.abs(pageY(face) - y));
  52     debug('<br>');
  53
  54     var eye = container.childAtIndex(1);
  55     debug('Eye role: ' + eye.role);
  56     debug('Eye label: ' + eye.deprecatedDescription);
  57     debug('EyeX: ' + (pageX(eye) - x));
  58     debug('EyeY: ' + Math.abs(pageY(eye) - y));
  59     debug('<br>');
  60
  61     var nose = container.childAtIndex(3);
  62     debug('Nose role: ' + nose.role);
  63     debug('Nose label: ' + nose.deprecatedDescription);
  64     debug('NoseX: ' + (pageX(nose) - x));
  65     debug('NoseY: ' + Math.abs(pageY(nose) - y));
  66     debug('<br>');
  67
  68     var mouth = container.childAtIndex(4);
  69     debug('Mouth role: ' + mouth.role);
  70     debug('Mouth label: ' + mouth.deprecatedDescription);
  71     debug('MouthX: ' + (pageX(mouth) - x));
  72     debug('MouthY: ' + Math.floor(Math.abs(pageY(mouth) - y)));
  73     debug('<br>');
  74
  75     // Text varies by about 1 - 2 pixels depending on the platform,
  76     // so just print the text coordinates divided by 10.
  77     var text = container.childAtIndex(5).childAtIndex(0);
  78     debug('Text role: ' + text.role);
  79     debug('TextX/10: ' + Math.floor((pageX(text) - x) / 10));
  80     debug('TextY/10: ' + Math.floor(Math.abs(pageY(text) - y) / 10));
  81     debug('<br>');
  82
  83     var image = container.childAtIndex(6);
  84     debug('Image role: ' + image.role);
  85     debug('Image label: ' + image.deprecatedDescription);
  86     debug('ImageX: ' + (pageX(image) - x));
  87     debug('ImageY: ' + Math.abs(pageY(image) - y));
  88 }
  89
  90 </script>
  91
  92 </body>
  93 </html>
  94