Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 337
maurice cruz Avatar asked Nov 01 '22 04:11

maurice cruz


1 Answers

It seems that this is a reported Chromium bug.

like image 195
Pointy Avatar answered Nov 13 '22 18:11

Pointy