Index: LayoutTests/fast/spatial-navigation/snav-css-nav-direction.html |
diff --git a/LayoutTests/fast/spatial-navigation/snav-css-nav-direction.html b/LayoutTests/fast/spatial-navigation/snav-css-nav-direction.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..7f6dc334dcd2bb5240a5e292123b72690f3539d9 |
--- /dev/null |
+++ b/LayoutTests/fast/spatial-navigation/snav-css-nav-direction.html |
@@ -0,0 +1,114 @@ |
+<!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() |
+{ |
+ e5_navUp = window.getComputedStyle(document.getElementById("e5")).getPropertyCSSValue('nav-up'); |
Timothy Loh
2014/10/01 13:14:53
getPropertyCSSValue and the CSSValue interface are
|
+ shouldBe("e5_navUp.cssValueType", "CSSValue.CSS_VALUE_LIST"); |
+ shouldBeEqualToNumber("e5_navUp.length", 2); |
+ shouldBe("e5_navUp[0].cssValueType", "CSSValue.CSS_PRIMITIVE_VALUE"); |
+ shouldBe("e5_navUp[0].primitiveType", "CSSPrimitiveValue.CSS_STRING"); |
+ shouldBeEqualToString("e5_navUp[0].getStringValue()", "#e2"); |
+ shouldBe("e5_navUp[1].cssValueType", "CSSValue.CSS_PRIMITIVE_VALUE"); |
+ shouldBe("e5_navUp[1].primitiveType", "CSSPrimitiveValue.CSS_IDENT"); |
+ shouldBeEqualToString("e5_navUp[1].getStringValue()", "current"); |
+ e6_navDown = window.getComputedStyle(document.getElementById("e6")).getPropertyCSSValue('nav-down'); |
+ shouldBe("e6_navDown.cssValueType", "CSSValue.CSS_VALUE_LIST"); |
+ shouldBeEqualToNumber("e6_navDown.length", 2); |
+ shouldBe("e6_navDown[1].primitiveType", "CSSPrimitiveValue.CSS_IDENT"); |
+ shouldBeEqualToString("e6_navDown[1].getStringValue()", "current"); |
+ e8_navDown = window.getComputedStyle(document.getElementById("e8")).getPropertyCSSValue('nav-down'); |
+ shouldBe("e8_navDown.cssValueType", "CSSValue.CSS_VALUE_LIST"); |
+ shouldBeEqualToNumber("e8_navDown.length", 2); |
+ shouldBe("e8_navDown[1].primitiveType", "CSSPrimitiveValue.CSS_STRING"); |
+ shouldBeEqualToString("e8_navDown[1].getStringValue()", "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> |