Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / fast / spatial-navigation / snav-only-clipped-overflow-content.html
blob44d5cfc1d40da6ed6d80ff9fc1d35e76f9fde0f1
1 <html>
2 <!--
3 This test ensures the content overflow traversal correctness of spatial navigation:
4 if an element if clipped overflow in a scrollable container (e.g. <div>),
5 scroll-in-direction should happen in the container box, not on the outer view.
7 * Pre-conditions:
8 1) DRT support for spatial navigation enable/disable.
10 * Navigation steps:
11 1) Loads this page, focus goes to "start" automatically.
12 2) Try to move focus down to the visible focusable element in
13 scrollable div.
15 * Expected results: There should have to a scroll action in the container
16 (div) as an attempt to make the clipped overflow node visible and accessible
17 via spatial navigation. -->
18 <head>
19 <style type="text/css">
20 div.scroll {
21 height: 200px;
22 width: 300px;
23 overflow: auto;
24 border: 1px solid #666;
25 background-color: #ccc;
26 padding: 8px;
28 </style>
30 <script src="../../resources/js-test.js"></script>
31 <script src="resources/spatial-navigation-utils.js"></script>
32 <script type="application/javascript">
34 var resultMap = [
35 ["Down", "start"],
36 ["DONE", "DONE"]
39 if (window.testRunner) {
40 testRunner.dumpAsText();
41 testRunner.overridePreference("WebKitTabToLinksPreferenceKey", 1);
42 window.internals.settings.setSpatialNavigationEnabled(true);
43 testRunner.waitUntilDone();
46 function runTest()
48 // starting the test itself: get to a known place.
49 document.getElementById("start").focus();
51 initTest(resultMap, testCompleted);
54 function testCompleted()
56 shouldBeTrue(String(document.getElementById("div").scrollTop != 0));
58 if (window.testRunner)
59 testRunner.notifyDone();
62 window.onload = runTest;
64 </script>
65 </head>
66 <body id="some-content" xmlns="http://www.w3.org/1999/xhtml">
67 <p>That is is a normal <a id="start" href="a">link</a>.</p>
68 <div class="scroll" id="div">
69 <p>This is a scrollable Div created with the CSS property overflow.</p>
70 <br><br><br><br><br><br><br><br>
71 <p> ... and here we have a clipped overflow <a id="1" href="a">link</a>.</p>
72 </div>
73 <p>And this is another normal <a id="2" href="a">link_2</a>.</p>
74 <div id="console"></div>
75 </body>
76 </html>