W3C "transform" style doesn't work

quantizor commented 8 years ago

To replicate, create an element and do the following with it:

const domElement = document.createElement('div');

domElement.style.transform = 'translate3d(0px, 0px, 0px)';

assert(domElement.style.transform === 'translate3d(0px, 0px, 0px)'); // undefined

I can only get it to work if I use this specific pattern:

const domElement = document.createElement('div');

domElement.style['webkit-transform'] = 'translate3d(0px, 0px, 0px)';

assert(domElement.style.WebkitTransform === 'translate3d(0px, 0px, 0px)');

X-issue from https://github.com/tmpvar/jsdom/issues/1321

domenic commented 8 years ago

For the record I can merge PRs and publish CSSOM so if you pull request a fix it should show up in jsdom pretty quickly :)

quantizor commented 8 years ago

Alright, perhaps I will take a crack at this tomorrow :)

quantizor commented 8 years ago

Closing this - the issue is actually in https://github.com/chad3814/CSSStyleDeclaration

ArsSirek commented 6 years ago

Hi all, My case isn't exactly same, but it seems very related

const jsdom = require("jsdom");
const {JSDOM} = jsdom;
const dom = new JSDOM('<div id="test" style="transform: translate(0,-50%); font-size:10px;"></div>', {
    runScripts: "outside-only",
});
var target = dom.window.document.getElementById('test');
target.style.fontWeight = 'bold';
console.log(dom.serialize());

when there is no action with styles, than inline styles preserved as they were in original html, however in the example above the console output is

<html><head></head><body><div id="test" style="font-size: 10px; font-weight: bold;"></div></body></html>

font-size style is preserved fine, but not the transform style.

I can see via debugger that target.style treat transform differently

{
  "0": "font-size",
  "_values": {
    "font-size": "10px"
  },
  "_importants": {
    "transform": "",
    "font-size": ""
  },
  "_length": 1,
  "transform": "translate(0,-50%)"
}

But i wasn't able to find were the related code is in the projects, nor to come up with temp fix.. @domenic will merging the chad3814/CSSStyleDeclaration#49 resolve this as well? if not, can you please advise me what can be done? Sorry if this is not the right place to report (as it is old and closed), I've come here passing through tmpvar/jsdom#1321 Regards

NV / CSSOM

W3C "transform" style doesn't work #78