94 lines
No EOL
3.5 KiB
JavaScript
94 lines
No EOL
3.5 KiB
JavaScript
"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}'.`);
|
|
} |