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

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: Address feedback from aboxhall, add aria-owns test 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
« no previous file with comments | « components/test_runner/web_ax_object_proxy.cc ('k') | third_party/WebKit/Source/modules/accessibility/AXLayoutObject.h » ('j') | no next file with comments »
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..add6b12c3b295d853332633419219c24799b3afa
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/accessibility/bounds-calc.html
@@ -0,0 +1,250 @@
+<!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);
+
+ // Due to rounding we won't get identical bounds as getBoundingClientRect(),
+ // so allow the test to pass if we're within 1 pixel. The test examples
+ // deliberately have borders, margins, and padding larger than 1 pixel to
+ // ensure that this epsilon is not masking more serious errors.
+ var epsilon = 1;
+
+ assert_approx_equals(axObject.boundsX, bounds.left, epsilon, id + " left");
+ 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, opt_expectedResult) {
+ if (opt_expectedResult === undefined)
+ opt_expectedResult = true;
+ var axObject = accessibilityController.accessibleElementById(id);
+ var axContainer = accessibilityController.accessibleElementById(containerId);
+ if (opt_expectedResult)
+ assert_equals(axObject.offsetContainer(), axContainer, id + " offsetContainer");
+ else
+ assert_false(axObject.offsetContainer().isEqual(axContainer), id + " offsetContainer (should be false)");
+}
+
+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>
+
+<div id="container6a" class="container" role="group" style="position: relative; left: 10px;"
+ aria-owns="div6d">
+ <div id="div6a">A</div>
+ <div id="div6b">B</div>
+</div>
+
+<div id="container6b" class="container" role="group" style="position: relative; left: 10px;"
+ aria-owns="div6b">
+ <div id="div6c">C</div>
+ <div id="div6d">D</div>
+</div>
+
+<script>
+test(function(t) {
+ // This test uses aria-owns to rearrange children between ancestors,
+ // to ensure that an object's offset container is not a node that's an
+ // ancestor in the accessibility tree but not in the layout tree.
+ //
+ // Access both of these accessibility objects first to make sure that
+ // the owned children are up-to-date before running assertions,
+ // since aria-owns is processed lazily.
+ var axContainer6a = accessibilityController.accessibleElementById("container6a");
+ axContainer6a.childrenCount;
+ var axContainer6b = accessibilityController.accessibleElementById("container6b");
+ axContainer6b.childrenCount;
+
+ assertOffsetContainerIs("div6a", "container6a", true);
+ assertOffsetContainerIs("div6b", "container6a", false);
+ assertOffsetContainerIs("div6b", "container6b", false);
+
+ assertOffsetContainerIs("div6c", "container6b", true);
+ assertOffsetContainerIs("div6d", "container6a", false);
+ assertOffsetContainerIs("div6d", "container6b", false);
+}, "Container must be an ancestor in both the AX tree and layout tree.");
+</script>
+
+<script>
+if (window.testRunner)
+ document.body.className = "hideAllContainers";
+</script>
« no previous file with comments | « components/test_runner/web_ax_object_proxy.cc ('k') | third_party/WebKit/Source/modules/accessibility/AXLayoutObject.h » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698