Closed
Bug 1039005
Opened 11 years ago
Closed 11 years ago
CSS custom properties should be exposed on DOMCSSDeclarationImpl and nsDOMCSSAttributeDeclaration, not just on nsComputedDOMStyle
Categories
(Core :: DOM: CSS Object Model, defect)
Tracking
()
RESOLVED
INVALID
People
(Reporter: jkt, Unassigned)
Details
User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
Steps to reproduce:
Wrote the following code:
http://codepen.io/anon/pen/GAymz
----
or:
CSS:
:root {
--varnamething: red;
}
JavaScript:
var root = document.querySelector(':root');
console.log(root.style.getPropertyValue('varnamething')); // expected: null output: null
console.log(root.style.getPropertyValue('--varnamething')); // expected: red output: null
console.log(window.getComputedStyle(root).getPropertyValue('--varnamething')); // expected: red output: red
console.log(window.getComputedStyle(root).getPropertyValue('varnamething')); // expected: null output: null
Actual results:
The console output was: null, null, red, null
Expected results:
The output should have been: null, red, red, null
The behaviour should be both the computed and style property expose the variable with the .getPropertyValue method.
As confirmed by Tab Atkins in this thread:
http://discourse.specifiction.org/t/css-custom-property-api/535/9
|
||
Comment 1•11 years ago
|
||
2014-07-21-06-21-16-mozilla-central-firefox-33.0a1.ru.linux-x86_64
"" index.html:13
"" index.html:15
" red" index.html:17
"" index.html:19
QA Whiteboard: [bugday-20140721]
Component: Untriaged → DOM: CSS Object Model
Product: Firefox → Core
|
|
||
Updated•11 years ago
|
Status: UNCONFIRMED → NEW
Ever confirmed: true
Flags: needinfo?(cam)
Summary: CSS custom properties exposed in CSSOM JavaScript → CSS custom properties should be exposed on DOMCSSDeclarationImpl and nsDOMCSSAttributeDeclaration, not just on nsComputedDOMStyle
|
||
Comment 2•11 years ago
|
||
(In reply to jonathan from comment #0)
> console.log(root.style.getPropertyValue('varnamething')); // expected: null
> output: null
Here you are using "<element>.style", which reflects the value of the style="" attribute on the element, not anything to do with the style sheet in the <style> element. For example if you write:
<!DOCTYPE html>
<body style="--varnamething: red;">
<script>
console.log(document.body.style.getPropertyValue("--varnamething"));
</script>
it will log " red".
If you want to get the value of the property from the style sheet rule, you need something like this:
<!DOCTYPE html>
<style>
:root { --varnamething: red; }
</style>
<script>
var rule = document.querySelector("style").sheet.cssRules[0];
console.log(rule.style.getPropertyValue("--varnamething"));
</script>
"<rule>.style" here reflects the contents of the rule from the style sheet.
Status: NEW → RESOLVED
Closed: 11 years ago
Flags: needinfo?(cam)
Resolution: --- → INVALID
You need to log in
before you can comment on or make changes to this bug.
Description
•