<!DOCTYPE html>
<html>
<body>
<script src="../../resources/js-test.js"></script>
<div id="target"></div>
<script>
description("Tests the parsing of the stroke-dashoffset CSS property.");

const target = document.getElementById("target");

// Initial value.
shouldBeEqualToString("getComputedStyle(target).strokeDashoffset", "0px");

// Valid length.
evalAndLog("target.style.strokeDashoffset = '3px';");
shouldBeEqualToString("target.style.strokeDashoffset", "3px");
shouldBeEqualToString("getComputedStyle(target).strokeDashoffset", "3px");

// Valid percentage.
evalAndLog("target.style.strokeDashoffset = '10%';");
shouldBeEqualToString("target.style.strokeDashoffset", "10%");
shouldBeEqualToString("getComputedStyle(target).strokeDashoffset", "10%");

// Valid number.
evalAndLog("target.style.strokeDashoffset = '20';");
shouldBeEqualToString("target.style.strokeDashoffset", "20"); // Gecko says 20%, Blink says 20.
shouldBeEqualToString("getComputedStyle(target).strokeDashoffset", "20px");

// Zero value.
evalAndLog("target.style.strokeDashoffset = '0';");
shouldBeEqualToString("target.style.strokeDashoffset", "0"); // Gecko says 0px, specification and Blink say 0.
shouldBeEqualToString("getComputedStyle(target).strokeDashoffset", "0px");

// Negative value.
target.style.strokeDashoffset = "";
evalAndLog("target.style.strokeDashoffset = '-30px';");
shouldBeEqualToString("target.style.strokeDashoffset", "-30px");
shouldBeEqualToString("getComputedStyle(target).strokeDashoffset", "-30px");
</script>
</body>
</html>