javascript - CSSStyleDeclaration の更新時にドキュメントの再レンダリングを強制する (chrome)

Question

(CHROME のみ) 実行時にメディアクエリ関連の CSSRules を変更しようとしていますが、ルールを変更するとドキュメントが再レンダリングされません。ドキュメントは、メディア クエリが再度変更された場合にのみ再レンダリングされます。フィドルを見ると、ロード時に要素が暗い色であることがわかりますが、すぐに赤になるはずです。ドキュメントにスタイルを無効にするように依頼する方法はありますか?

ブラウザ ウィンドウを小さくしたり大きくしたりして、メディア クエリ スタイルを 2 回無効にすることで、スタイルが正常に変更されたことがわかります。

フィドル: http://jsfiddle.net/QNgxk/3/

編集：フィドルが機能する場合があります??? うわぁ

コード：

HTML

<div id="test">I SHOULD BE RED</div>

CSS

#test {
    position: absolute;
    width:    100%;
    background-color: #333;
    height:   50px;
}

@media screen and (min-width: 481px) {
    #test {
        width: 50%;
    }
}

JS

var test = document.getElementById('test');   // get the element
var rules = window.getMatchedCSSRules(test);  // get matched rules
var regexp = new RegExp('^#test');            // test the CSS rule explicit id
var matchedRule;
for (var i = rules.length - 1; i >= 0; i--) { // loop through rules and find the explicit one
    var rule = rules[i];
    if (rule.cssText.match(regexp)) {
        matchedRule = rule;
        break;
    }
}

// now change the rule to have a background of red, and width 20%
if (matchedRule) {
    matchedRule.style.setProperty('background-color', '#f00');
    matchedRule.style.setProperty('width', '20%');
}