CODEWITHSUNDEEP
javascriptgoogle-chromedomweb-standards
maurice cruz
maurice cruz

Reputation: 156

Explanation on window.getComputedStyle and why Chrome handles it differently

Since Chrome Stable landed v.33.0.1750.117, the logic of window.getComputedStyle has changed from other browsers. Fiddle of code below: http://jsfiddle.net/HD4bD/17/

Can anyone explain what changed and what is the 'correct' ruling on this?

Given the following:

HTML

<body>
    <div class="normal"></div>
    <div class="display-none"></div>
    <div class="visibility-hidden"></div>
</body>

CSS

.normal:before {
    content: "NORMAL: "
}

.display-none:before {
    content: "DISPLAY-NONE: ";
    display: none;
}

.visibility-hidden:before {
    content: "VIS-HIDDEN: "
    visibility: hidden;
}

JS

var $ = document.querySelector.bind(document),
    pass = "This text should have 1 or more labels before it",
    fail = "The label is missing.  Something's wrong.",
    normalContent = getB4Content('.normal'),
    dNoneContent = getB4Content('.display-none'),
    vHideContent = getB4Content('.visibility-hidden');

function getB4Content(selector){
     return window.getComputedStyle($(selector),':before').getPropertyValue('content');
}



$('.normal').innerHTML = normalContent === '' ? fail : normalContent + pass;

$('.display-none').innerHTML = dNoneContent === '' ? fail : dNoneContent + pass;

$('.visibility-hidden').innerHTML = vHideContent === '' ? fail : vHideContent + pass;

OUTPUT

Firefox v27:
NORMAL: "NORMAL: "This text should have 1 or more labels before it
"DISPLAY-NONE: "This text should have 1 or more labels before it
noneThis text should have 1 or more labels before it

IE 11 NORMAL: "NORMAL: "This text should have 1 or more labels before it
"DISPLAY-NONE: "This text should have 1 or more labels before it
noneThis text should have 1 or more labels before it

Chrome v33
NORMAL: "NORMAL: "This text should have 1 or more labels before it
The label is missing. Something's wrong.
The label is missing. Something's wrong.

Upvotes: 5

Views: 3024

Answers (1)

Pointy
Pointy

Reputation: 413682

It seems that this is a reported Chromium bug.

Upvotes: 2

Related Questions