Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(57)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/accessibility/bounds-calc.html

Issue 2047873002: Add interface to get relative bounding box rect of AX objects. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Separate out one change that broke existing tests Created 4 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« components/test_runner/web_ax_object_proxy.cc ('K') | « components/test_runner/web_ax_object_proxy.cc ('k') | third_party/WebKit/Source/modules/accessibility/AXLayoutObject.h » ('j') | third_party/WebKit/Source/modules/accessibility/AXLayoutObject.cpp » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/LayoutTests/accessibility/bounds-calc.html
diff --git a/third_party/WebKit/LayoutTests/accessibility/bounds-calc.html b/third_party/WebKit/LayoutTests/accessibility/bounds-calc.html
new file mode 100644
index 0000000000000000000000000000000000000000..d4de3eb2b9978e8afc1c5de6d339c1b160aa5627
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/accessibility/bounds-calc.html
@@ -0,0 +1,203 @@
+<!DOCTYPE HTML>
+<script src="../resources/testharness.js"></script>
+<script src="../resources/testharnessreport.js"></script>
+
+<!--
+This is a test of the new (June 2016) bounds calculation code,
+in which every node in the accessibility tree specifies its
+bounding box and optional matrix transform relative to an
+ancestor object in the tree.
+
+This representation means that when a container element
+scrolls, animates, or otherwise changes position on screen,
+its descendants don't need to be updated because their
+coordinates are all relative.
+
+This test asserts that the bounding box we compute is the
+same as what's computed by the DOM getBoundingClientRect
+interface.
+ -->
+
+<style>
+.hideAllContainers .container {
+ display: none;
+}
+</style>
+
+<div class="container">
+ <input type="text" id="input">
+ <input type="checkbox" id="checkbox">
+ <input type="radio" id="radio">
+ <select id="select">
+ <option>Apple
+ <option>Orange
+ </select>
+ <button id="button">Button</button>
+ <h1 id="heading">Heading</h1>
+ <p id="para">Para</p>
+ <p>This para has one <span id="span" role="group">span</span></p>
+ <ul id="ul">
+ <li id="li1">List item 1</li>
+ <li id="li2">List item 2</li>
+ </ul>
+ <div id="div">Div</div>
+ <div id="border" style="border: 10px solid #ccc;">Border</div>
+ <div id="padding" style="padding: 20px;">Padding</div>
+ <div id="margin" style="margin: 30px;">Margin</div>
+ <div id="border_padding_margin"
+ style="border: 10px solid #eee; padding: 20px; margin: 30px;">
+ Border Padding Margin
+ </div>
+ <svg id="svg" width="60" height="60">
+ <circle role="button" id="svg_circle" r="25" cx="30" cy="30" stroke="blue" stroke-width="1"/>
+ </svg>
+</div>
+
+<script>
+function assertDOMRectSameAsAXRect(id) {
+ var element = document.getElementById(id);
+ var bounds = element.getBoundingClientRect();
+ var axObject = accessibilityController.accessibleElementById(id);
+ var epsilon = 1;
+ assert_approx_equals(axObject.boundsX, bounds.left, epsilon, id + " left");
aboxhall 2016/06/09 23:05:30 Can you add a comment explaining why epsilon/appro
dmazzoni 2016/06/10 16:55:39 Added a comment. I also switched the test_runner c
+ assert_approx_equals(axObject.boundsY, bounds.top, epsilon, id + " left");
+ assert_approx_equals(axObject.boundsWidth, bounds.width, epsilon, id + " left");
+ assert_approx_equals(axObject.boundsHeight, bounds.height, epsilon, id + " left");
+}
+
+function assertStaticTextChildDOMRectSameAsAXRect(id) {
+ var element = document.getElementById(id);
+ var axObject = accessibilityController.accessibleElementById(id);
+ var text = element.firstChild;
+ var axText = axObject.childAtIndex(0);
+ assert_equals(text.nodeType, Node.TEXT_NODE, id + " firstChild nodeType");
+ assert_equals(axText.role, "AXRole: AXStaticText", id + " AX first child role");
+ var range = document.createRange();
+ range.selectNode(text);
+ var bounds = range.getBoundingClientRect();
+ var axObject = accessibilityController.accessibleElementById(id);
+ var epsilon = 1;
+ assert_approx_equals(axText.boundsX, bounds.left, epsilon, id + " left");
+ assert_approx_equals(axText.boundsY, bounds.top, epsilon, id + " left");
+ assert_approx_equals(axText.boundsWidth, bounds.width, epsilon, id + " left");
+ assert_approx_equals(axText.boundsHeight, bounds.height, epsilon, id + " left");
+}
+
+function assertOffsetContainerIs(id, containerId) {
+ var axObject = accessibilityController.accessibleElementById(id);
+ var axContainer = accessibilityController.accessibleElementById(containerId);
+ assert_equals(axObject.offsetContainer(), axContainer, id + " offsetContainer");
+}
+
+function assertHasTransform(id, expected) {
+ var axObject = accessibilityController.accessibleElementById(id);
+ assert_equals(axObject.hasNonIdentityTransform(), expected, id + " hasNonIdentityTransform");
+}
+
+test(function(t) {
+ assertDOMRectSameAsAXRect("input");
+ assertDOMRectSameAsAXRect("checkbox");
+ assertDOMRectSameAsAXRect("radio");
+ assertDOMRectSameAsAXRect("button");
+ assertDOMRectSameAsAXRect("heading");
+ assertStaticTextChildDOMRectSameAsAXRect("heading");
+ assertDOMRectSameAsAXRect("para");
+ assertStaticTextChildDOMRectSameAsAXRect("para");
+ assertDOMRectSameAsAXRect("span");
+ assertStaticTextChildDOMRectSameAsAXRect("span");
+ assertDOMRectSameAsAXRect("ul");
+ assertDOMRectSameAsAXRect("li1");
+ assertDOMRectSameAsAXRect("li2");
+ assertDOMRectSameAsAXRect("div");
+ assertStaticTextChildDOMRectSameAsAXRect("div");
+ assertDOMRectSameAsAXRect("border");
+ assertStaticTextChildDOMRectSameAsAXRect("border");
+ assertDOMRectSameAsAXRect("padding");
+ assertStaticTextChildDOMRectSameAsAXRect("padding");
+ assertDOMRectSameAsAXRect("margin");
+ assertStaticTextChildDOMRectSameAsAXRect("margin");
+ assertDOMRectSameAsAXRect("border_padding_margin");
+ assertStaticTextChildDOMRectSameAsAXRect("border_padding_margin");
+ assertDOMRectSameAsAXRect("svg");
+ assertDOMRectSameAsAXRect("svg_circle");
+}, "Test computed AX rect for some common objects");
+</script>
+
+<div id="container2" class="container" role="group"
+ style="position: absolute; left: 400px; top: 20px; border: 3px solid #eee; margin: 5px; padding: 7px;">
+ <div id="div2">Absolute-positioned</div>
+ <svg id="svg2" width="60" height="60">
+ <circle role="button" id="svg_circle2" r="25" cx="30" cy="30" stroke="blue" stroke-width="1"/>
+ </svg>
+
+</div>
+
+<script>
+test(function(t) {
+ assertHasTransform("container2", false);
+
+ assertHasTransform("div2", false);
+ assertDOMRectSameAsAXRect("div2");
+ assertOffsetContainerIs("div2", "container2");
+ assertDOMRectSameAsAXRect("svg2");
+ assertDOMRectSameAsAXRect("svg_circle2");
+}, "Test objects inside of absolute-positioned container");
+</script>
+
+<div id="container3" class="container" style="height: 100px; overflow: scroll;">
+ <div id="div3" style="height: 500px;">Div</div>
+ <input type="text" id="input3">
+</div>
+
+<script>
+test(function(t) {
+ document.getElementById("container3").scrollTop = 200;
+
+ assertHasTransform("container3", false);
+
+ assertHasTransform("div3", false);
+ assertDOMRectSameAsAXRect("div3");
+ assertOffsetContainerIs("div3", "container3");
+ assertHasTransform("input3", false);
+ assertDOMRectSameAsAXRect("input3");
+ assertOffsetContainerIs("input3", "container3");
+}, "Test objects inside of scrolled container");
+</script>
+
+<div id="container4" class="container" style="width: 200px; transform: rotateZ(45deg);" role="group">
+ <div id="div4">Rotated text</div>
+</div>
+
+<script>
+test(function(t) {
+ assertHasTransform("container4", true);
+
+ assertHasTransform("div4", false);
+ assertDOMRectSameAsAXRect("div4");
+ assertOffsetContainerIs("div4", "container4");
+}, "Test objects inside of rotated container");
+</script>
+
+<div class="container">
+ <div style="margin: 20px; width: 200px; transform: scale(1.5);">
+ <div id="scroll5" class="container" style="padding: 10px; height: 100px; overflow: scroll;">
+ <div style="width: 200px; transform: rotateZ(175deg);">
+ <div id="div5" style="margin: 30px; padding: 40px; border: 2px solid #eee;">
+ Text with lots of transformations
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
+<script>
+test(function(t) {
+ document.getElementById("scroll5").scrollTop = 40;
+ assertDOMRectSameAsAXRect("div5");
+}, "Test object inside of several nested containers with transforms and scrolling.");
+</script>
+
+<script>
+if (window.testRunner)
+ document.body.className = "hideAllContainers";
+</script>
« components/test_runner/web_ax_object_proxy.cc ('K') | « components/test_runner/web_ax_object_proxy.cc ('k') | third_party/WebKit/Source/modules/accessibility/AXLayoutObject.h » ('j') | third_party/WebKit/Source/modules/accessibility/AXLayoutObject.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698