Index: third_party/WebKit/LayoutTests/fast/css/variables/variable-resolution-order-independent.html |
diff --git a/third_party/WebKit/LayoutTests/fast/css/variables/variable-resolution-order-independent.html b/third_party/WebKit/LayoutTests/fast/css/variables/variable-resolution-order-independent.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..41806e42fa6a36374395f798b70b1c3b5475dac4 |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/fast/css/variables/variable-resolution-order-independent.html |
@@ -0,0 +1,33 @@ |
+<!DOCTYPE html> |
+<script src="../../../resources/testharness.js"></script> |
+<script src="../../../resources/testharnessreport.js"></script> |
+<style> |
+div { |
+ width: 100px; |
+ height: 100px; |
+} |
+#firstdiv { |
+ --green: green; |
+ --clr: var(--green); |
+ --foo: var(--clr); |
+ --bar: var(--clr); |
+ background-color: var(--bar); |
+} |
+#seconddiv { |
+ --green: green; |
+ --clr: var(--green); |
+ --bar: var(--clr); |
+ --foo: var(--clr); |
+ background-color: var(--bar); |
+} |
+</style> |
+ |
+<div id="firstdiv"></div> |
+<div id="seconddiv"></div> |
+ |
+<script> |
+test(function() { |
+ assert_equals(getComputedStyle(firstdiv).backgroundColor, 'rgb(0, 128, 0)'); |
+ assert_equals(getComputedStyle(seconddiv).backgroundColor, 'rgb(0, 128, 0)'); |
+}, 'Background color needs to resolved to green independent of ordering of variable declaration.'); |
+</script> |