Source code
Revision control
Copy as Markdown
Other Tools
"use strict";
/* Functions to test serialization of properties.
Each takes (property, testString, expectedSerialization) arguments.
These functions depend on a #target element existing in the page,
and will error if they don't find one.
Note that test_computed_serialization and test_used_serialization
are identical except for assertion messages;
you need to choose properties with the correct resolved values
to test the value stage that you want.
For ease of use, it's recommended that you define and use
the following function in your test page:
function test_serialization(t,s,c,u, {prop}={}) {
test_specified_serialization(prop || 'text-indent', t, s);
test_computed_serialization(prop || 'text-indent', t, c);
if(u) test_used_serialization(prop || 'margin-left', t, u);
}
(swapping the property names for what you're expecting to test)
Then you can write tests easily as:
test_serialization(
'calc(min(1%, 2%) + max(3%, 4%) + 10%)', // test string
'calc(15%)', // expected specified value
'15%', // expected computed value
'15px'); // expected used value
*/
function test_specified_serialization(prop, t, e) {
const el = document.querySelector("#target");
if(!el) throw new Exception("Couldn't find #target element to run tests on.");
test(()=>{
el.style[prop] = '';
el.style[prop] = t;
const tValue = el.style[prop];
assert_not_equals(tValue, '', `'${t}' should be valid in ${prop}.`);
el.style[prop] = '';
el.style[prop] = e;
const eValue = el.style[prop];
assert_not_equals(eValue, '', `'${e}' should be valid in ${prop}.`);
assert_equals(eValue, e, `'${e}' should round-trip exactly in specified values.`);
assert_equals(tValue, e, `'${t}' and '${e}' should serialize the same in specified values.`);
}, `'${t}' as a specified value should serialize as '${e}'.`);
}
function test_computed_serialization(prop, t, e) {
const el = document.querySelector("#target");
if(!el) throw new Exception("Couldn't find #target element to run tests on.");
test(()=>{
el.style[prop] = '';
el.style[prop] = t;
const tValue = getComputedStyle(el)[prop];
assert_not_equals(tValue, '', `'${t}' should be valid in ${prop}.`);
el.style[prop] = '';
el.style[prop] = e;
const eValue = getComputedStyle(el)[prop];
assert_not_equals(eValue, '', `'${e}' should be valid in ${prop}.`);
assert_equals(eValue, e, `'${e}' should round-trip exactly in computed values.`);
assert_equals(tValue, e, `'${t}' and '${e}' should serialize the same in computed values.`);
}, `'${t}' as a computed value should serialize as '${e}'.`);
}
function test_used_serialization(prop, t, e) {
const el = document.querySelector("#target");
if(!el) throw new Exception("Couldn't find #target element to run tests on.");
test(()=>{
el.style[prop] = '';
el.style[prop] = t;
const tValue = getComputedStyle(el)[prop];
assert_not_equals(tValue, '', `'${t}' should be valid in ${prop}.`);
el.style[prop] = '';
el.style[prop] = e;
const eValue = getComputedStyle(el)[prop];
assert_not_equals(eValue, '', `'${e}' should be valid in ${prop}.`);
assert_equals(eValue, e, `'${e}' should round-trip exactly in used values.`);
assert_equals(tValue, e, `'${t}' and '${e}' should serialize the same in used values.`);
}, `'${t}' as a used value should serialize as '${e}'.`);
}