<!DOCTYPE html>
<head>
<script src="../../../resources/js-test.js"></script>
<style>
div { width: 100px }
div:-webkit-any(.outer) { width: 200px }
div:-webkit-any(.inner) { width: 300px }
div:-webkit-any(.inner2) { width: 150px }
</style>
</head>
<body>
<div id="outer">
<div id="mid">
<div id="inner">
</div>
</div>
</div>
<script>
description("Tests that a style recalc on the inner element after the outer one works correctly. See also crbug.com/346928.");
function insertStyleSheet(css)
{
var styleElement = document.createElement("style");
styleElement.textContent = css;
(document.head || document.documentElement).appendChild(styleElement);
}
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
outer.offsetHeight;
outer.className = 'outer';
inner.className = 'inner';
shouldBe("getComputedStyle(outer).width", '"200px"');
inner.className = 'inner2';
shouldBe("getComputedStyle(inner).width", '"150px"');
</script>
</body>
