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

Unified Diff: third_party/WebKit/LayoutTests/fast/spatial-navigation/snav-css-nav-direction.html

Issue 1919813002: Implementation of CSS3 nav-up/down/left/right properties from CSS3 UI Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 4 years, 8 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
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>

Powered by Google App Engine
This is Rietveld 408576698