Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /svg/animations/smil-clock-value-parsing.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>SMIL clock values: out-of-range minutes/seconds validation and fractional seconds support</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<svg height="0"></svg>
<script>
const TESTS = [
// Valid dur="00:30:01" (30 min 1 sec). At t=60s the animation should be running.
{ value: "00:30:01" },
// Valid boundary dur="00:59:59". Should animate.
{ value: "00:59:59" },
// Fractional seconds in HH:MM:SS form: dur="00:00:01.50" is 1.5s.
// At t=60s, animation should be fully done (fill="freeze" at to=200).
{ value: "00:00:01.50", frozen: true },
// Fractional seconds in MM:SS form: dur="00:01.50" is 1.5s
{ value: "00:01.50", frozen: true },
// Fractional seconds near 60 boundary in HH:MM:SS form: dur="00:00:59.50" is 59.5s.
{ value: "00:00:59.50", frozen: true },
// Fractional seconds near 60 boundary in MM:SS form: dur="00:59.50" is 59.5s.
{ value: "00:59.50", frozen: true },
// More than 99 hours. Should animate.
{ value: "101:00:01" },
// Invalid minutes in HH:MM:SS form.
{ value: "01:99:01", error: "minutes > 59 in HH:MM:SS" },
// Invalid minutes in MM:SS form.
{ value: "99:01", error: "minutes > 59 in MM:SS" },
// Invalid seconds in HH:MM:SS form.
{ value: "01:30:99", error: "seconds > 59 in HH:MM:SS" },
// Invalid seconds in MM:SS form.
{ value: "30:99", error: "seconds > 59 in MM:SS" },
// Invalid fraction, no digits after full stop.
{ value: "00:59:59.", error: "a fraction needs to have at least one digit" },
// Invalid seconds in HH:MM:SS.ff form. No leading zero.
{ value: "00:59:9.9", error: "seconds < 10 should have a leading zero" },
// Missing seconds in HH:MM:SS.ff form.
{ value: "00:59:.9", error: "seconds needs to be specified" },
// Invalid seconds in HH:MM:SS form.
{ value: "00:59:009", error: "seconds without fraction should be two digits" },
// Missing hour field in HH:MM:SS form.
{ value: ":30:01", error: "hours can't be missing in HH:MM:SS" },
// Missing minutes field in HH:MM:SS form.
{ value: "01::01", error: "minutes can't be missing in HH:MM:SS" },
// Single digit minutes field in MM:SS form.
{ value: "5:30", error: "minutes should always be two digits" },
];
promise_setup(async () => {
const template = document.createElementNS(svgNs, 'rect');
[['fill', 'green'], ['width', '20'], ['height', '20'], ['class', 'test']].forEach(([name, value]) => {
template.setAttribute(name, value);
});
const anim = template.appendChild(document.createElementNS(svgNs, 'animate'));
[['attributeName', 'x'], ['from', '0'], ['to', '200'], ['fill', 'freeze']].forEach(([name, value]) => {
anim.setAttribute(name, value);
});
const svgRoot = document.querySelector('svg');
TESTS.forEach(test => {
const testElement = template.cloneNode(true);
const testAnimate = testElement.firstElementChild;
testAnimate.setAttribute('dur', test.value);
svgRoot.appendChild(testElement);
promise_test(async () => {
if (test.error) {
assert_equals(testElement.x.animVal.value, 0,
`dur="${test.value}" should be invalid (${test.error})`);
} else {
if (test.frozen) {
assert_equals(testElement.x.animVal.value, 200,
`dur="${test.value}" should be valid and animate (frozen)`);
} else {
assert_not_equals(testElement.x.animVal.value, 0,
`dur="${test.value}" should be valid and animate`);
}
}
}, `${document.title}, dur="${test.value}"`);
});
svgRoot.pauseAnimations();
svgRoot.setCurrentTime(60);
return new Promise(resolve => {
window.addEventListener('load', () => {
requestAnimationFrame(resolve);
}, {once: true});
});
});
</script>