serialize-testcommon.js (3562B)
1 "use strict"; 2 3 4 /* Functions to test serialization of properties. 5 6 Each takes (property, testString, expectedSerialization) arguments. 7 8 These functions depend on a #target element existing in the page, 9 and will error if they don't find one. 10 11 Note that test_computed_serialization and test_used_serialization 12 are identical except for assertion messages; 13 you need to choose properties with the correct resolved values 14 to test the value stage that you want. 15 16 17 For ease of use, it's recommended that you define and use 18 the following function in your test page: 19 20 function test_serialization(t,s,c,u, {prop}={}) { 21 test_specified_serialization(prop || 'text-indent', t, s); 22 test_computed_serialization(prop || 'text-indent', t, c); 23 if(u) test_used_serialization(prop || 'margin-left', t, u); 24 } 25 26 (swapping the property names for what you're expecting to test) 27 28 Then you can write tests easily as: 29 30 test_serialization( 31 'calc(min(1%, 2%) + max(3%, 4%) + 10%)', // test string 32 'calc(15%)', // expected specified value 33 '15%', // expected computed value 34 '15px'); // expected used value 35 36 */ 37 38 39 40 41 function test_specified_serialization(prop, t, e) { 42 const el = document.querySelector("#target"); 43 if(!el) throw new Exception("Couldn't find #target element to run tests on."); 44 test(()=>{ 45 el.style[prop] = ''; 46 el.style[prop] = t; 47 const tValue = el.style[prop]; 48 assert_not_equals(tValue, '', `'${t}' should be valid in ${prop}.`); 49 50 el.style[prop] = ''; 51 el.style[prop] = e; 52 const eValue = el.style[prop]; 53 assert_not_equals(eValue, '', `'${e}' should be valid in ${prop}.`); 54 assert_equals(eValue, e, `'${e}' should round-trip exactly in specified values.`); 55 56 assert_equals(tValue, e, `'${t}' and '${e}' should serialize the same in specified values.`); 57 }, `'${t}' as a specified value should serialize as '${e}'.`); 58 } 59 function test_computed_serialization(prop, t, e) { 60 const el = document.querySelector("#target"); 61 if(!el) throw new Exception("Couldn't find #target element to run tests on."); 62 test(()=>{ 63 el.style[prop] = ''; 64 el.style[prop] = t; 65 const tValue = getComputedStyle(el)[prop]; 66 assert_not_equals(tValue, '', `'${t}' should be valid in ${prop}.`); 67 68 el.style[prop] = ''; 69 el.style[prop] = e; 70 const eValue = getComputedStyle(el)[prop]; 71 assert_not_equals(eValue, '', `'${e}' should be valid in ${prop}.`); 72 assert_equals(eValue, e, `'${e}' should round-trip exactly in computed values.`); 73 74 assert_equals(tValue, e, `'${t}' and '${e}' should serialize the same in computed values.`); 75 }, `'${t}' as a computed value should serialize as '${e}'.`); 76 } 77 function test_used_serialization(prop, t, e) { 78 const el = document.querySelector("#target"); 79 if(!el) throw new Exception("Couldn't find #target element to run tests on."); 80 test(()=>{ 81 el.style[prop] = ''; 82 el.style[prop] = t; 83 const tValue = getComputedStyle(el)[prop]; 84 assert_not_equals(tValue, '', `'${t}' should be valid in ${prop}.`); 85 86 el.style[prop] = ''; 87 el.style[prop] = e; 88 const eValue = getComputedStyle(el)[prop]; 89 assert_not_equals(eValue, '', `'${e}' should be valid in ${prop}.`); 90 assert_equals(eValue, e, `'${e}' should round-trip exactly in used values.`); 91 92 assert_equals(tValue, e, `'${t}' and '${e}' should serialize the same in used values.`); 93 }, `'${t}' as a used value should serialize as '${e}'.`); 94 }