Index: third_party/WebKit/LayoutTests/fast/spatial-navigation/snav-css-nav-direction.html |
diff --git a/third_party/WebKit/LayoutTests/fast/spatial-navigation/snav-css-nav-direction.html b/third_party/WebKit/LayoutTests/fast/spatial-navigation/snav-css-nav-direction.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..cf5c1c5e92180ef633cc4184b098c728dc488ada |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/fast/spatial-navigation/snav-css-nav-direction.html |
@@ -0,0 +1,132 @@ |
+<!DOCTYPE html> |
+<html> |
+<head> |
+<script src="../../resources/js-test.js"></script> |
+<script src="resources/spatial-navigation-utils.js"></script> |
+<script type="application/javascript"> |
+jsTestIsAsync = true; |
+ |
+var resultMap = [ |
+ ["Right", "e9"], |
+ ["Up", "e9"], |
+ ["Right", "e5"], |
+ ["Up", "e2"], |
+ ["Left", "e4"], |
+ ["Left", "e6"], |
+ ["Down", "e8"], |
+ ["Down", "fr1"], |
+ ["Down", "e5"], |
+ ["DONE", "DONE"] |
+]; |
+ |
+if (window.testRunner) { |
+ testRunner.overridePreference("WebKitTabToLinksPreferenceKey", 1); |
+ window.internals.settings.setSpatialNavigationEnabled(true); |
+} |
+ |
+function testParsingAndSerialization() |
fs
2016/05/18 15:55:04
Use a separate test for parsing/serializing. Layou
|
+{ |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e1')).navUp", 'auto'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e1')).navDown", 'auto'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e1')).navLeft", 'auto'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e1')).navRight", 'auto'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e2')).navUp", 'auto'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e2')).navDown", 'auto'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e2')).navLeft", '"#e4" current'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e2')).navRight", 'auto'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e3')).navUp", 'auto'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e3')).navDown", 'auto'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e3')).navLeft", 'auto'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e3')).navRight", 'auto'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e4')).navUp", 'auto'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e4')).navDown", 'auto'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e4')).navLeft", '"#e6" current'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e4')).navRight", 'auto'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e5')).navDown", 'auto'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e5')).navUp", '"#e2" current'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e5')).navDown", 'auto'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e5')).navLeft", 'auto'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e5')).navRight", '"#e9" current'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e6')).navUp", 'auto'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e6')).navDown", '"#e8" current'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e6')).navLeft", 'auto'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e6')).navRight", 'auto'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e7')).navUp", 'auto'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e7')).navDown", 'auto'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e7')).navLeft", 'auto'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e7')).navRight", 'auto'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e8')).navUp", 'auto'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e8')).navDown", '"#fr1" current'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e8')).navLeft", 'auto'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e8')).navRight", 'auto'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e9')).navUp", '"#e9" current'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e9')).navDown", 'auto'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e9')).navLeft", 'auto'); |
+ shouldBeEqualToString("window.getComputedStyle(document.getElementById('e9')).navRight", '"#e5" current'); |
+} |
+ |
+function testNavigation() |
+{ |
+ // starting the test itself: get to a known place. |
+ document.getElementById("e5").focus(); |
+ |
+ initTest(resultMap, finishJSTest); |
+} |
+ |
+function runTest() |
+{ |
+ testParsingAndSerialization(); |
+ testNavigation(); |
+} |
+</script> |
+</head> |
+<style> |
+#e2 { |
+ nav-left: #e4; |
+} |
+#e4 { |
+ nav-left: #e6; |
+} |
+#e5 { |
+ nav-right: #e9; |
+ nav-up: #e2; |
+} |
+#e6 { |
+ nav-down: #e8 current; |
+} |
+#e8 { |
+ nav-down: #fr1 "current"; |
+} |
+#e9 { |
+ nav-up: #e9; |
+ nav-right: #e5; |
+} |
+</style> |
+<body id="some-content" onload="runTest();"> |
+<p id="description"> |
+This test ensures the correctness of Spatial Navigation when CSS3 nav-up/down/left/right properties are set. |
+</p> |
+<table style="text-align: left; width: 100%; margin-left: auto; margin-right: auto;" border="1" cellpadding="2" cellspacing="1"> |
+<tbody> |
+<tr> |
+<td style="vertical-align: top; text-align: center;"><a id="e1" href="a">1</a></td> |
+<td style="vertical-align: top; text-align: center;"><a id="e2" href="a">2</a></td> |
+<td style="vertical-align: top; text-align: center;"><a id="e3" href="a">3</a></td> |
+</tr> |
+<tr> |
+<td style="vertical-align: top; text-align: center;"><a id="e4" href="a">4</a></td> |
+<td style="vertical-align: top; text-align: center;"><a id="e5" href="5">5</td> |
+<td style="vertical-align: top; text-align: center;"><a id="e6" href="a">6</a></td> |
+</tr> |
+<tr> |
+<td style="vertical-align: top; text-align: center;"><a id="e7" href="a">7</a></td> |
+<td style="vertical-align: top; text-align: center;"><a id="e8" href="a">8</a></td> |
+<td style="vertical-align: top; text-align: center;"><a id="e9" href="a">9</a></td> |
+</tr> |
+</tbody> |
+</table> |
+<br/> |
+<iframe name="current" srcdoc="<button id='fr1' style='nav-down: #e5 root;'>inside frame</button>" style="width:100%; height:40px"></iframe> |
+<div id="console"></div> |
+</body> |
+</html> |