<!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">
</head>
<body>
<h1 class="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() {
assert_equals(window.getComputedStyle(document.querySelector('.target')).color, 'rgb(0, 0, 255)');
var importLink = document.querySelector('#blueImport');
document.head.removeChild(importLink);
document.head.insertBefore(importLink, document.head.lastElementChild);
assert_equals(window.getComputedStyle(document.querySelector('.target')).color, 'rgb(255, 0, 0)');
Array.prototype.forEach.call(document.querySelectorAll("h1"), function(e) { e.style.display = "none"; });
t.done();
});
}
</script>
</body>
</html>