search

fgnass / domino

Server-side DOM implementation based on Mozilla's dom.js
BSD 2-Clause "Simplified" License
764 stars 118 forks source link

Support document.styleSheets? #50

Open fortes opened 9 years ago

fortes commented 9 years ago

Not sure if it's out of scope for the project, but I ran into an issue with an automated headless test that is accessing document.styleSheets. This is needed since it's the only way to get at the stylesheet.rules, etc properties (which I'm guessing isn't supported either).

cscott commented 9 years ago

I would actually like to support more of the CSS-related DOM eventually. Patches welcome! Otherwise I'll eventually get to it myself.

cscott commented 8 years ago

I've been doing a lot of work on https://github.com/CSSLint/parser-lib recently, so we're close(r) to being able to implement this properly. (We do already implement CSSStyleDeclaration which is the value of the HTMLElement#style property, but we don't fully support shorthand properties yet.)

niedzielski commented 7 years ago

Firstly, thanks for the great lib! Secondly, I wanted to add a comment for posterity :] Maybe this goes without saying for some, but I think this issue also applies generally to all styles specified in head. For example, given two files, foo.css and fixture.html:

/* foo.css */
.foo {
  color: red;
}
<!-- fixture.html -->
<html>
<head>
  <link href=foo.css rel=stylesheet>
  <style>
    .bar {
      background: green;
    }
  </style>
</head>

<body>
  <a id=a class='foo bar' style='font-size: 20px'>hello world!</a>
</body>
</html>

Color and background are undefined:

var domino = require('domino')
var fs = require('fs')

var html = fs.readFileSync('fixture.html')
var window = domino.createWindow(html)
var a = window.document.getElementById('a')
var style = window.getComputedStyle(a)

console.log(a.classList) // foo, bar
console.log(style.getPropertyValue('color')) // undefined
console.log(style.getPropertyValue('background')) // undefined
console.log(style.getPropertyValue('font-size')) // 20px

It's a little bit of bummer if your code relies on getComputedStyle().

CaerusKaru commented 6 years ago

@cscott Is there an implementation plan for this feature (and other getComputedStyle-related issues)? I'd be happy to submit a patch if you have notes on how you'd like it implemented.

We're running into this issue trying to get SSR to work properly on @angular/flex-layout

sandangel commented 6 years ago

I run into this issue when trying to generate graph on serverside using d3 and domino. The inline style which is set by eg: .style('stroke', '#52ADFF') is not apply to the element. I have to switch back to jsdom for now.