Index: third_party/WebKit/LayoutTests/fast/css/variables/longhand-pending-shorthand-substitution.html |
diff --git a/third_party/WebKit/LayoutTests/fast/css/variables/longhand-pending-shorthand-substitution.html b/third_party/WebKit/LayoutTests/fast/css/variables/longhand-pending-shorthand-substitution.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..7b4b60f726c7eb8a4e25c105e88449ef29bc4ca1 |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/fast/css/variables/longhand-pending-shorthand-substitution.html |
@@ -0,0 +1,54 @@ |
+<!DOCTYPE html> |
+<script src="../../../resources/testharness.js"></script> |
+<script src="../../../resources/testharnessreport.js"></script> |
+<style> |
+ #testElem { |
+ --height: 30px; |
+ --size: 12px; |
+ --size-and-height: var(--size)/var(--height); |
+ font: italic bold var(--size-and-height) serif, sans-serif; |
+ } |
+ |
+ #testElem2 { |
+ --width: 5px; |
+ } |
+</style> |
+ |
+<div id='testElem'></div> |
+<div id='testElem2' style='margin: var(--width); margin-top: 10px;'></div> |
+<div id='testElem3' style='--b1: 1px solid grey; --b2: 2px dashed green; border: var(--b1); border-right: var(--b2);'></div> |
+<script> |
+ |
+test(function() { |
+ var style = getComputedStyle(testElem); |
+ assert_equals(style.fontSize, '12px'); |
+ assert_equals(style.lineHeight, '30px'); |
+ assert_equals(style.fontStyle, 'italic'); |
+ assert_equals(style.fontWeight, 'bold'); |
+ assert_equals(style.fontFamily, 'serif, sans-serif'); |
+}, "Test shorthand substitution in font."); |
+ |
+test(function() { |
+ var style = testElem2.style; |
+ assert_equals(style.cssText, 'margin-right: ; margin-bottom: ; margin-left: ; margin-top: 10px;'); |
+ assert_equals(style.marginLeft, ''); |
+ assert_equals(style.margin, ''); |
+ assert_equals(style.marginTop, '10px'); |
+}, "Test serialization with specific longhand."); |
+ |
+test(function() { |
+ var style = testElem3.style; |
+ assert_equals(style.cssText, '--b1: 1px solid grey; --b2: 2px dashed green; border-top: var(--b1); border-bottom: var(--b1); border-left: var(--b1); border-image: var(--b1); border-right: var(--b2);') |
+ assert_equals(style.border, ''); |
+ assert_equals(style.borderLeft, 'var(--b1)'); |
+ assert_equals(style.borderTop, 'var(--b1)'); |
+ assert_equals(style.borderBottom, 'var(--b1)'); |
+ assert_equals(style.borderRight, 'var(--b2)'); |
+}, "Test serialization for shorthands within shorthands."); |
+ |
+test(function() { |
+ var style = getComputedStyle(testElem3); |
+ assert_equals(style.borderTop, '1px solid rgb(128, 128, 128)'); |
+ assert_equals(style.borderRight, '2px dashed rgb(0, 128, 0)'); |
+}, "Test substitution for border"); |
+</script> |