<!DOCTYPE html>
<meta charset=utf-8>
<title>KeyframeEffectReadOnly spacing attribute tests</title>
<link rel="help"
href="https://w3c.github.io/web-animations/#dom-keyframeeffectreadonly-spacing">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<body>
<div id="log"></div>
<script>
"use strict";
test(function(t) {
assert_throws(new TypeError, function() {
createDiv(t).animate(null, { spacing: '' });
});
}, 'Test throwing TypeError if using empty string');
test(function(t) {
assert_throws(new TypeError, function() {
createDiv(t).animate(null, { spacing: 'dist' });
});
}, 'Test throwing TypeError if not using the correct keyword');
test(function(t) {
assert_throws(new TypeError, function() {
createDiv(t).animate(null, { spacing: ' paced(margin-left)' });
});
}, 'Test throwing TypeError if adding leading spaces');
test(function(t) {
assert_throws(new TypeError, function() {
createDiv(t).animate(null, { spacing: 'paced(margin-left) ' });
});
}, 'Test throwing TypeError if adding trailing spaces');
test(function(t) {
assert_throws(new TypeError, function() {
createDiv(t).animate(null, { spacing: 'paced( margin-left)' });
});
}, 'Test throwing TypeError if adding leading spaces before the ' +
'paced property');
test(function(t) {
assert_throws(new TypeError, function() {
createDiv(t).animate(null, { spacing: 'paced(margin-left )' });
});
}, 'Test throwing TypeError if adding trailing spaces after the ' +
'paced property');
test(function(t) {
assert_throws(new TypeError, function() {
createDiv(t).animate(null, { spacing: 'paced()' });
});
}, 'Test throwing TypeError if these is no paced property');
test(function(t) {
assert_throws(new TypeError, function() {
createDiv(t).animate(null, { spacing: 'paced(.margin)' });
});
}, 'Test throwing TypeError if using a non-ident started string');
test(function(t) {
assert_throws(new TypeError, function() {
createDiv(t).animate(null, { spacing: 'paced(1margin)' });
});
}, 'Test throwing TypeError if using a non-ident started string');
test(function(t) {
assert_throws(new TypeError, function() {
createDiv(t).animate(null, { spacing: 'paced(\\)' });
});
}, 'Test throwing TypeError if using a non-ident started string with ' +
'an invalid escape');
test(function(t) {
assert_throws(new TypeError, function() {
createDiv(t).animate(null, { spacing: 'paced(\\\fmargin)' });
});
}, 'Test throwing TypeError if using a non-ident started string with ' +
'an invalid escape (FF)');
test(function(t) {
assert_throws(new TypeError, function() {
createDiv(t).animate(null, { spacing: 'paced(\\\rmargin)' });
});
}, 'Test throwing TypeError if using a non-ident started string with ' +
'an invalid escape (CR)');
test(function(t) {
assert_throws(new TypeError, function() {
createDiv(t).animate(null, { spacing: 'paced(\\\nmargin)' });
});
}, 'Test throwing TypeError if using a non-ident started string with ' +
'an invalid escape (LF)');
test(function(t) {
assert_throws(new TypeError, function() {
createDiv(t).animate(null, { spacing: 'paced(- )' });
});
}, 'Test throwing TypeError if using a non-ident started string with ' +
'a leading minus and an invalid name-start code point');
test(function(t) {
assert_throws(new TypeError, function() {
createDiv(t).animate(null, { spacing: 'paced(-\\)' });
});
}, 'Test throwing TypeError if using a non-ident started string with ' +
'a leading minus and an invalid escape');
test(function(t) {
assert_throws(new TypeError, function() {
createDiv(t).animate(null, { spacing: 'paced(-\\\fmargin)' });
});
}, 'Test throwing TypeError if using a non-ident started string with ' +
'a leading minus and an invalid escape (FF)');
test(function(t) {
assert_throws(new TypeError, function() {
createDiv(t).animate(null, { spacing: 'paced(-\\\rmargin)' });
});
}, 'Test throwing TypeError if using a non-ident started string with ' +
'a leading minus and an invalid escape (CR)');
test(function(t) {
assert_throws(new TypeError, function() {
createDiv(t).animate(null, { spacing: 'paced(-\\\nmargin)' });
});
}, 'Test throwing TypeError if using a non-ident started string with ' +
'a leading minus and an invalid escape (LF)');
test(function(t) {
assert_throws(new TypeError, function() {
createDiv(t).animate(null, { spacing: 'paced(--\\)' });
});
}, 'Test throwing TypeError if using a non-ident string with an invalid ' +
'escape');
test(function(t) {
assert_throws(new TypeError, function() {
createDiv(t).animate(null, { spacing: 'paced(--\\\fmargin)' });
});
}, 'Test throwing TypeError if using a non-ident string with an invalid ' +
'escape (FF)');
test(function(t) {
assert_throws(new TypeError, function() {
createDiv(t).animate(null, { spacing: 'paced(--\\\rmargin)' });
});
}, 'Test throwing TypeError if using a non-ident string with an invalid ' +
'escape (CR)');
test(function(t) {
assert_throws(new TypeError, function() {
createDiv(t).animate(null, { spacing: 'paced(--\\\nmargin)' });
});
}, 'Test throwing TypeError if using a non-ident string with an invalid ' +
'escape (LF)');
test(function(t) {
assert_throws(new TypeError, function() {
createDiv(t).animate(null, { spacing: 'paced(margin.left)' });
});
}, 'Test throwing TypeError if using a non-ident string with an invalid name ' +
'code point');
test(function(t) {
var anim = createDiv(t).animate(null, { spacing: 'paced(A)' });
assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
}, 'Test falling back to distribute spacing if using a unrecognized property');
test(function(t) {
var anim = createDiv(t).animate(null, { spacing: 'paced(\\.margin)' });
assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
}, 'Test falling back to distribute spacing if using a unrecognized property ' +
'which starts with a valid escape (Full stop)');
test(function(t) {
var anim = createDiv(t).animate(null, { spacing: 'paced(\\ margin)' });
assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
}, 'Test falling back to distribute spacing if using a unrecognized property ' +
'which starts with a valid escape (white space)');
test(function(t) {
var anim = createDiv(t).animate(null, { spacing: 'paced(_margin)' });
assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
}, 'Test falling back to distribute spacing if using a unrecognized property ' +
'which starts with a valid escape (low line)');
test(function(t) {
var anim = createDiv(t).animate(null, { spacing: 'paced(-_margin)' });
assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
}, 'Test falling back to distribute spacing if using a unrecognized property ' +
'which starts with a minus and a low line');
test(function(t) {
var anim = createDiv(t).animate(null, { spacing: 'paced(-\\.margin)' });
assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
}, 'Test falling back to distribute spacing if using a unrecognized property ' +
'which starts with a minus and a valid escape');
test(function(t) {
var anim = createDiv(t).animate(null, { spacing: 'paced(--bg-color)' });
assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
}, 'Test falling back to distribute spacing if using CSS variables');
test(function(t) {
var anim = createDiv(t).animate(null, { spacing: 'paced(animation)' });
assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
}, 'Test falling back to distribute spacing if using a non-animatable ' +
'shorthand property');
test(function(t) {
var anim = createDiv(t).animate(null,
{ spacing: 'paced(animation-duration)' });
assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
}, 'Test falling back to distribute spacing if using a non-animatable ' +
'property');
test(function(t) {
var anim = createDiv(t).animate(null);
assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
}, 'Test default value of spacing');
test(function(t) {
var anim = createDiv(t).animate(null, { spacing: 'distribute' });
assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
}, 'Test spacing value if setting distribute');
test(function(t) {
var anim = createDiv(t).animate(null, { spacing: 'paced(margin-left)' });
assert_equals(anim.effect.spacing, 'paced(margin-left)', 'spacing mode');
}, 'Test spacing value if setting paced');
</script>
</body>