getComputedStyle-listing.html (3501B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>CSS Logical Properties: computed style listing</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> 5 <link rel="help" href="https://drafts.csswg.org/css-logical/#margin-properties"> 6 <meta name="assert" content="This test checks that the logical properties are properly exposed in a computed CSSStyleDeclaration." /> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 10 <div id="log"></div> 11 12 <script> 13 function hasProperty(object, property) { 14 // This checks the [[HasProperty]] internal method. 15 return property in object; 16 } 17 18 function hasPropertyValue(object, property) { 19 // This checks the [[Get]] internal method. 20 return object[property] !== undefined; 21 } 22 23 function hasPropertyDescriptor(object, property) { 24 // This checks [[GetOwnProperty]], iterating the prototype chain. 25 while (object) { 26 if (Reflect.getOwnPropertyDescriptor(object, property)) { 27 return true; 28 } 29 object = Reflect.getPrototypeOf(object); 30 } 31 return false; 32 } 33 34 function hasPropertyKey(object, property) { 35 // This checks [[OwnPropertyKeys]], iterating the prototype chain. 36 while (object) { 37 if (Reflect.ownKeys(object).includes(property)) { 38 return true; 39 } 40 object = Reflect.getPrototypeOf(object); 41 } 42 return false; 43 } 44 45 function hasItem(object, item) { 46 // This checks the CSSStyleDeclaration::item WebIDL getter. 47 for (let i = 0; i < object.length; ++i) { 48 if (object.item(i) === item) { 49 return true; 50 } 51 } 52 return false; 53 } 54 55 function check(property) { 56 const cs = getComputedStyle(document.body); 57 const camelCase = property.replace(/-(.)/g, (_, b) => b.toUpperCase()); 58 test(function() { 59 assert_true(hasProperty(cs, property) || hasProperty(cs, camelCase), 60 `The computed style has the property ${property} or ${camelCase}.`); 61 assert_true(hasPropertyValue(cs, property) || hasPropertyValue(cs, camelCase), 62 `The computed style has a value for for the property ${property} or ${camelCase}.`); 63 assert_true(hasPropertyDescriptor(cs, property) || hasPropertyDescriptor(cs, camelCase), 64 `The computed style has a property descriptor for ${property} or ${camelCase}.`); 65 assert_true(hasPropertyKey(cs, property) || hasPropertyKey(cs, camelCase), 66 `The computed style contains ${property} or ${camelCase} in the property list.`); 67 assert_true(hasItem(cs, property) || hasItem(cs, camelCase), 68 `The computed style contains the item ${property} or ${camelCase}.`); 69 }, property); 70 } 71 72 check("border-block-end-color"); 73 check("border-block-end-style"); 74 check("border-block-end-width"); 75 check("border-block-start-color"); 76 check("border-block-start-style"); 77 check("border-block-start-width"); 78 check("border-inline-end-color"); 79 check("border-inline-end-style"); 80 check("border-inline-end-width"); 81 check("border-inline-start-color"); 82 check("border-inline-start-style"); 83 check("border-inline-start-width"); 84 85 check("inset-block-start"); 86 check("inset-block-end"); 87 check("inset-inline-start"); 88 check("inset-inline-end"); 89 90 check("margin-block-start"); 91 check("margin-block-end"); 92 check("margin-inline-start"); 93 check("margin-inline-end"); 94 95 check("padding-block-start"); 96 check("padding-block-end"); 97 check("padding-inline-start"); 98 check("padding-inline-end"); 99 100 check("block-size"); 101 check("inline-size"); 102 check("max-block-size"); 103 check("max-inline-size"); 104 check("min-block-size"); 105 check("min-inline-size"); 106 </script>