<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<link rel=import id=redImport href="./resources/style-red.html">
<link rel=import id=blueImport href="./resources/style-blue.html">
<link rel=import id=redImportDup href="./resources/style-red.html">
</head>
<body>
<h1 class="target">Should be red</h1>
<h1 class="another-red-target">Should be red</h1>
<script>
var t = async_test('Styles are re-applied in correct ordder after removed imports are re-added in new place');
window.onload = function() {
t.step(function() {
var firstLink = document.querySelector('#redImport')
var dupLink = document.querySelector('#redImportDup');
document.head.removeChild(dupLink);
assert_equals(window.getComputedStyle(document.querySelector('.target')).color, 'rgb(0, 0, 255)', 'Removal reveals shadowed style.');
assert_equals(window.getComputedStyle(document.querySelector('.another-red-target')).color, 'rgb(255, 0, 0)', 'But sheet is still there.');
document.head.removeChild(firstLink);
document.head.appendChild(dupLink);
assert_equals(window.getComputedStyle(document.querySelector('.target')).color, 'rgb(255, 0, 0)', 'Used-to-be-a-dup sheet is applied now.');
assert_equals(window.getComputedStyle(document.querySelector('.another-red-target')).color, 'rgb(255, 0, 0)', 'That means this should be applied as well.');
Array.prototype.forEach.call(document.querySelectorAll("h1"), function(e) { e.style.display = "none"; });
t.done();
});
}
</script>
</body>
</html>