Index: third_party/WebKit/LayoutTests/fast/selectors/dir-pseudo/dir-pseudo-with-direction.html |
diff --git a/third_party/WebKit/LayoutTests/fast/selectors/dir-pseudo/dir-pseudo-with-direction.html b/third_party/WebKit/LayoutTests/fast/selectors/dir-pseudo/dir-pseudo-with-direction.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..09aba343cac5a8eeb090ce7340e306af539f3bb3 |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/fast/selectors/dir-pseudo/dir-pseudo-with-direction.html |
@@ -0,0 +1,48 @@ |
+<!doctype html> |
+<script src="../../../resources/testharness.js"></script> |
+<script src="../../../resources/testharnessreport.js"></script> |
+ |
+<style> |
+div { |
+ width: 100px; |
+ height: 100px; |
+ background-color: red; |
+} |
+ |
+#outer1 { direction: rtl; } |
+#outer1:dir(ltr) { background-color: green; } |
+#inner1:dir(ltr) { background-color: green; } |
+#outer1:dir(rtl) { background-color: red; } |
+#inner1:dir(rtl) { background-color: red; } |
+ |
+#outer2 { direction: ltr; } |
+#outer2:dir(rtl) { background-color: green; } |
+#inner2:dir(rtl) { background-color: green; } |
+#outer2:dir(ltr) { background-color: red; } |
+#inner2:dir(ltr) { background-color: red; } |
+ |
+#testDiv:dir(ltr) { direction: rtl; } |
+#testDiv:dir(rtl) { direction: ltr; } |
+</style> |
+ |
+<div id=outer1> |
+ <div id=inner1> |
+ </div> |
+</div> |
+ |
+<div id=outer2 dir=rtl> |
+ <div id=inner2> |
+ </div> |
+</div> |
+ |
+<div id=testDiv></div> |
+ |
+<script> |
+test(() => { |
+ assert_equals(getComputedStyle(outer1).backgroundColor, "rgb(0, 128, 0)"); |
+ assert_equals(getComputedStyle(inner1).backgroundColor, "rgb(0, 128, 0)"); |
+ assert_equals(getComputedStyle(outer2).backgroundColor, "rgb(0, 128, 0)"); |
+ assert_equals(getComputedStyle(inner2).backgroundColor, "rgb(0, 128, 0)"); |
+ assert_equals(getComputedStyle(testDiv).direction, "rtl"); |
+}, ":dir() does not depend on stylistic states"); |
+</script> |