Index: third_party/WebKit/LayoutTests/inspector/elements/styles-3/styles-variables.html |
diff --git a/third_party/WebKit/LayoutTests/inspector/elements/styles-3/styles-variables.html b/third_party/WebKit/LayoutTests/inspector/elements/styles-3/styles-variables.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..9fd1b1c48bf3285e7957ec3993c692e2acb7a4cf |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/inspector/elements/styles-3/styles-variables.html |
@@ -0,0 +1,61 @@ |
+<html> |
+<head> |
+<style> |
+body { |
+ --a: red; |
+} |
+ |
+#id1 { |
+ --b: 44px; |
+} |
+ |
+#id2 { |
+ --a: green; |
+} |
+ |
+</style> |
+<script src="../../../http/tests/inspector/inspector-test.js"></script> |
+<script src="../../../http/tests/inspector/elements-test.js"></script> |
+<script> |
+ |
+function test() |
+{ |
+ InspectorTest.selectNodeAndWaitForStylesWithComputed("id1", step1); |
+ function step1(node) |
+ { |
+ InspectorTest.addResult("==== Computed style for ID1 ===="); |
+ InspectorTest.dumpSelectedElementStyles(false, true); |
+ InspectorTest.cssModel.computedStylePromise(node.id).then( |
+ function(style) { |
+ InspectorTest.addResult("value of --a: " + style.get("--a")); |
+ InspectorTest.selectNodeAndWaitForStylesWithComputed("id2", step2); |
+ }); |
+ } |
+ |
+ function step2(node) |
+ { |
+ InspectorTest.addResult("==== Computed style for ID2 ===="); |
+ InspectorTest.dumpSelectedElementStyles(false, true); |
+ InspectorTest.cssModel.computedStylePromise(node.id).then( |
+ function(style) { |
+ InspectorTest.addResult("value of --b: " + style.get("--b")); |
+ InspectorTest.completeTest(); |
+ }); |
+ } |
+ |
+} |
+</script> |
+</head> |
+ |
+<body onload="runTest()"> |
+<p> |
+Tests that computed styles expand and allow tracing to style rules. |
+</p> |
+ |
+<div id="id1"> |
+<div id="id2"> |
+</div> |
+</div> |
+ |
+</body> |
+</html> |