Closed Bug 1039005 Opened 10 years ago Closed 10 years ago

CSS custom properties should be exposed on DOMCSSDeclarationImpl and nsDOMCSSAttributeDeclaration, not just on nsComputedDOMStyle

Categories

(Core :: DOM: CSS Object Model, defect)

Product:
Core
Component:
DOM: CSS Object Model
Version:
32 Branch
Platform:
x86_64
Linux
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
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
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
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
(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: 10 years ago
Flags: needinfo?(cam)
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.