<!DOCTYPE html>
<title>Syncbases with tangled dependencies</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<svg viewBox="0 0 500 200" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="none">
<animate id="minani" attributeName="x" fill="freeze" begin="min.click" dur="100ms" values="0; 0"/>
<animate id="maxani" attributeName="x" fill="freeze" begin="max.click" dur="100ms" values="0; 0"/>
</rect>
<rect id="min" width="100" height="100" fill="green">
<set attributeName="height" fill="freeze" begin="minani.begin" to="0"/>
<set attributeName="height" fill="freeze" begin="maxani.begin+0.1s" to="100"/>
</rect>
<rect id="max" x="110" width="100" height="100" fill="blue"/>
</svg>
<script>
async_test(t => {
let clicks = 3;
let min = document.querySelector("#min");
let max = document.querySelector("#max");
let i = setInterval(t.step_func(() => {
clicks--;
if (clicks == 0) {
clearInterval(i);
t.step_timeout(t.step_func_done(() => {
assert_equals(window.getComputedStyle(min, null).height, "100px");
}), 500);
}
min.dispatchEvent(new Event("click"));
window.setTimeout(() => max.dispatchEvent(new Event("click")), 130);
}), 250);
});
</script>