diff --git a/src/lib/css-parse.html b/src/lib/css-parse.html
index 6414468ee4..78435c363c 100644
--- a/src/lib/css-parse.html
+++ b/src/lib/css-parse.html
@@ -171,7 +171,7 @@
_rx: {
comments: /\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,
port: /@import[^;]*;/gim,
- customProp: /(?:^|[\s;])--[^;{]*?:[^{};]*?(?:[;\n]|$)/gim,
+ customProp: /(?:^[^;\-\s}]+)?--[^;{]*?:[^{};]*?(?:[;\n]|$)/gim,
mixinProp: /(?:^|[\s;])?--[^;{]*?:[^{;]*?{[^}]*?}(?:[;\n]|$)?/gim,
mixinApply: /@apply[\s]*\([^)]*?\)[\s]*(?:[;\n]|$)?/gim,
varApply: /[^;:]*?:[^;]*?var\([^;]*\)(?:[;\n]|$)?/gim,
diff --git a/test/unit/custom-style.html b/test/unit/custom-style.html
index 058bc8e0f3..33a207b450 100644
--- a/test/unit/custom-style.html
+++ b/test/unit/custom-style.html
@@ -235,6 +235,9 @@
--variable-property-after-property: 3px;
--variable-property-after-assignment: 4px;
--variable-property-before-assignment: 5px;
+ --variable-into-first-variable: 9px;
+ --variable-into-second-variable: 10px;
+ --variable-into-third-variable: 11px;
}
@@ -251,7 +254,8 @@
--variable-between-properties: 6px;
background-color: var(--variable-property-before-property); padding-top: var(--variable-property-after-property);
--variable-assignment-before-property: 7px; padding-bottom: var(--variable-property-after-assignment);
- padding-left: var(--variable-property-before-assignment);--variable-assignment-after-property: 8px
+ padding-left: var(--variable-property-before-assignment);--variable-assignment-after-property: 8px;
+ top: 12px;--variable-from-other-variable: var(--variable-into-first-variable);--variable-from-another-variable: var(--variable-into-second-variable); --variable-from-last-variable: var(--variable-into-third-variable);
}
@@ -266,6 +270,9 @@
padding-right: var(--variable-between-properties);
margin-left: var(--variable-assignment-before-property);
margin-right: var(--variable-assignment-after-property);
+ bottom: var(--variable-from-other-variable);
+ left: var(--variable-from-another-variable);
+ right: var(--variable-from-last-variable);
}
Text
@@ -468,11 +475,16 @@
assertComputed(el, '7px', 'margin-left');
assertComputed(el, '8px', 'margin-right');
assertComputed(el, 'rgb(255, 255, 0)', 'background-color');
+ assertComputed(el, '9px', 'bottom');
+ assertComputed(el, '10px', 'left');
+ assertComputed(el, '11px', 'right');
+ assertComputed(el, '12px', 'top');
// Because FireFox and Chrome parse font-family differently...
var computed = getComputedStyle(el);
assert.equal(computed['font-family'].replace(/['"]+/g, ''), 'Varela font');
});
+
test('BEM-like CSS selectors under media queries', function() {
assertComputed(document.querySelector('.foo--bar'), '3px');
});
diff --git a/test/unit/styling-cross-scope-var.html b/test/unit/styling-cross-scope-var.html
index cdd52dcd9b..ba2888083d 100644
--- a/test/unit/styling-cross-scope-var.html
+++ b/test/unit/styling-cross-scope-var.html
@@ -94,7 +94,7 @@
}
#gc4 {
- --grand-child-scope-var:
+ --grand-child-scope-var:
var(--gc4-scope);
}
@@ -286,7 +286,7 @@
});
-
+
-
+
@@ -679,7 +679,7 @@
// test('var values can be overridden by subsequent concrete properties', function() {
// assertComputed(styled.$.overridesConcrete, '4px');
// });
-
+
});