<!DOCTYPE html>
<style>
#counterReset {
    counter-reset: c 10;
}

#counterIncrement {
    counter-increment: c 2;
}

#counterResetAndIncrementSameCounter {
    counter-reset: c 10;
    counter-increment: c 2;
}

#counterResetAndIncrementDifferentCounter {
    counter-reset: a 5;
    counter-increment: c 2;
}
</style>
<div id="counterReset"></div>
<div id="counterIncrement"></div>
<div id="counterResetAndIncrementSameCounter"></div>
<div id="counterResetAndIncrementDifferentCounter"></div>
<script src="../../../resources/js-test.js"></script>
<script>
description("Test that resetting 'counter-reset' and 'counter-increment' with 'initial' works as expected.");

debug("Testing resetting 'counter-reset' alone");
shouldBeEqualToString('window.getComputedStyle(counterReset, null).getPropertyValue("counter-reset")', 'c 10');
shouldBeEqualToString('window.getComputedStyle(counterReset, null).getPropertyValue("counter-increment")', 'none');
counterReset.style.counterReset = "initial";
shouldBeEqualToString('window.getComputedStyle(counterReset, null).getPropertyValue("counter-reset")', 'none');
shouldBeEqualToString('window.getComputedStyle(counterReset, null).getPropertyValue("counter-increment")', 'none');

debug("Testing resetting 'counter-increment' alone");
shouldBeEqualToString('window.getComputedStyle(counterIncrement, null).getPropertyValue("counter-reset")', 'none');
shouldBeEqualToString('window.getComputedStyle(counterIncrement, null).getPropertyValue("counter-increment")', 'c 2');
counterIncrement.style.counterIncrement = "initial";
shouldBeEqualToString('window.getComputedStyle(counterIncrement, null).getPropertyValue("counter-reset")', 'none');
shouldBeEqualToString('window.getComputedStyle(counterIncrement, null).getPropertyValue("counter-increment")', 'none');

debug("Testing resetting 'counter-reset' with 'counter-increment'");
shouldBeEqualToString('window.getComputedStyle(counterResetAndIncrementSameCounter, null).getPropertyValue("counter-reset")', 'c 10');
shouldBeEqualToString('window.getComputedStyle(counterResetAndIncrementSameCounter, null).getPropertyValue("counter-increment")', 'c 2');
counterResetAndIncrementSameCounter.style.counterReset = "initial";
shouldBeEqualToString('window.getComputedStyle(counterResetAndIncrementSameCounter, null).getPropertyValue("counter-reset")', 'none');
shouldBeEqualToString('window.getComputedStyle(counterResetAndIncrementSameCounter, null).getPropertyValue("counter-increment")', 'c 2');

debug("Testing resetting 'counter-increment' with 'counter-reset'");
shouldBeEqualToString('window.getComputedStyle(counterResetAndIncrementDifferentCounter, null).getPropertyValue("counter-reset")', 'a 5');
shouldBeEqualToString('window.getComputedStyle(counterResetAndIncrementDifferentCounter, null).getPropertyValue("counter-increment")', 'c 2');
counterResetAndIncrementDifferentCounter.style.counterIncrement = "initial";
shouldBeEqualToString('window.getComputedStyle(counterResetAndIncrementDifferentCounter, null).getPropertyValue("counter-reset")', 'a 5');
shouldBeEqualToString('window.getComputedStyle(counterResetAndIncrementDifferentCounter, null).getPropertyValue("counter-increment")', 'none');
</script>