shorthand-testcommon.js (4419B)
1 'use strict'; 2 3 function test_shorthand_value(property, value, longhands) { 4 const stringifiedValue = JSON.stringify(value); 5 6 for (let longhand of Object.keys(longhands).sort()) { 7 test(function(){ 8 var div = document.getElementById('target') || document.createElement('div'); 9 div.style[property] = ""; 10 try { 11 div.style[property] = value; 12 13 const readValue = div.style[longhand]; 14 assert_equals(readValue, longhands[longhand], longhand + " should be canonical"); 15 16 div.style[longhand] = ""; 17 div.style[longhand] = readValue; 18 assert_equals(div.style[longhand], readValue, "serialization should round-trip"); 19 } finally { 20 div.style[property] = ""; 21 } 22 }, "e.style['" + property + "'] = " + stringifiedValue + " should set " + longhand); 23 } 24 25 test(function(){ 26 var div = document.getElementById('target') || document.createElement('div'); 27 div.style[property] = ""; 28 try { 29 const expectedLength = div.style.length; 30 div.style[property] = value; 31 assert_true(CSS.supports(property, value)); 32 for (let longhand of Object.keys(longhands).sort()) { 33 div.style[longhand] = ""; 34 } 35 assert_equals(div.style.length, expectedLength); 36 } finally { 37 div.style[property] = ""; 38 } 39 }, "e.style['" + property + "'] = " + stringifiedValue + " should not set unrelated longhands"); 40 } 41 42 /** 43 * Helper to be called from inside test(). 44 */ 45 function is_property_in_longhands(t, property_name) { 46 let e = document.createElement("div"); 47 document.body.append(e); 48 t.add_cleanup(() => e.remove()); 49 let cs = getComputedStyle(e); 50 return Array.from(cs).includes(property_name); 51 } 52 53 /** 54 * This function is designed mainly to test the distinction between 55 * legacy name aliases and legacy shorthands. 56 */ 57 function test_is_legacy_name_alias(old_name, new_name) { 58 test(t => { 59 let e = document.createElement("div"); 60 e.style.setProperty(old_name, "inherit"); 61 assert_equals(e.style.getPropertyValue(old_name), "inherit", 62 `${old_name} is supported`); 63 assert_equals(e.style.getPropertyValue(new_name), "inherit", 64 `${old_name} is an alias for ${new_name}`); 65 assert_equals(e.style.cssText, `${new_name}: inherit;`, 66 `declarations serialize using new name ${new_name}`); 67 68 e = document.createElement("div"); 69 e.style.setProperty(old_name, "var(--v)"); 70 assert_equals(e.style.getPropertyValue(new_name), "var(--v)", 71 `${old_name} is a legacy name alias rather than a shorthand`) 72 73 e = document.createElement("div"); 74 e.style.setProperty(new_name, "var(--w)"); 75 assert_equals(e.style.getPropertyValue(old_name), "var(--w)", 76 `${old_name} is a legacy name alias rather than a shorthand`) 77 78 assert_false(is_property_in_longhands(t, old_name), 79 `${old_name} is not in getComputedStyle() list of longhands`); 80 }, `${old_name} is a legacy name alias for ${new_name}`); 81 } 82 83 /** 84 * This function is designed mainly to test the distinction between 85 * legacy name aliases and legacy shorthands. 86 */ 87 function test_is_legacy_shorthand(old_name, new_name) { 88 test(t => { 89 let e = document.createElement("div"); 90 e.style.setProperty(old_name, "inherit"); 91 assert_equals(e.style.getPropertyValue(old_name), "inherit", 92 `${old_name} is supported`); 93 assert_equals(e.style.getPropertyValue(new_name), "inherit", 94 `${old_name} is an alias for ${new_name}`); 95 assert_equals(e.style.cssText, `${new_name}: inherit;`, 96 `declarations serialize using new name ${new_name}`); 97 98 e = document.createElement("div"); 99 e.style.setProperty(old_name, "var(--v)"); 100 assert_equals(e.style.getPropertyValue(new_name), "", 101 `${old_name} is a shorthand rather than a legacy name alias`) 102 103 assert_false(is_property_in_longhands(t, old_name), 104 `${old_name} is not in getComputedStyle() list of longhands`); 105 }, `${old_name} is a legacy name alias for ${new_name}`); 106 }