Index: third_party/WebKit/LayoutTests/fast/css/variables/recompute-variables-when-parent-style-updates.html |
diff --git a/third_party/WebKit/LayoutTests/fast/css/variables/recompute-variables-when-parent-style-updates.html b/third_party/WebKit/LayoutTests/fast/css/variables/recompute-variables-when-parent-style-updates.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..8d93fe66624ce1e763494b0a3b12ccb85628206d |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/fast/css/variables/recompute-variables-when-parent-style-updates.html |
@@ -0,0 +1,40 @@ |
+<!DOCTYPE html> |
+<script src="../../../resources/testharness.js"></script> |
+<script src="../../../resources/testharnessreport.js"></script> |
+<style> |
+ body { |
+ --a: red; |
+ --b: blue; |
+ } |
+ |
+ .foo { |
+ --a: green; |
+ } |
+ |
+ .container { |
+ --a: var(--b); |
+ } |
+ |
+ .here { |
+ background: var(--a); |
+ width: 100px; |
+ height: 100px; |
+ } |
+</style> |
+<div id="outer"> |
+<div class="here" id='red'></div> |
+ |
+<div class="container" id='container'> |
+ <div class="here" id='blue'></div> |
+</div> |
+</div> |
+ |
+<script> |
+test(function() { |
+ assert_equals(getComputedStyle(red).backgroundColor, "rgb(255, 0, 0)"); |
+ assert_equals(getComputedStyle(blue).backgroundColor, "rgb(0, 0, 255)"); |
+ outer.classList.add('foo'); |
+ assert_equals(getComputedStyle(red).backgroundColor, "rgb(0, 128, 0)"); |
+ assert_equals(getComputedStyle(blue).backgroundColor, "rgb(0, 0, 255)"); |
+}, 'Custom properties are recomputed when parent style changes.'); |
+</script> |