test_computed_style_difference.html (3120B)
1 <!doctype html> 2 <title>Test that the difference of the computed style of an element is always correctly propagated</title> 3 <!-- 4 There are CSS property changes that don't have an effect in computed style. 5 6 It's relatively easy to return `nsChangeHint(0)` for the case where the 7 property changes but it should have no rendering difference. 8 9 That's however incorrect, since if it's an inherited property, or a 10 descendant explicitly inherits it, we should still propagate the change 11 downwards. 12 13 This test tests that computed style diffing is correct. 14 --> 15 <script src="/resources/testharness.js"></script> 16 <script src="/resources/testharnessreport.js"></script> 17 <script src="property_database.js"></script> 18 <div id="outer"> 19 <div id="inner"></div> 20 </div> 21 <script> 22 // We need to skip checking for properties for which the value returned by 23 // getComputedStyle depends on the parent. 24 // 25 // TODO(emilio): We could test a subset of these, see below. 26 const kWhitelist = [ 27 // Could test display values that don't force blockification of children. 28 "display", 29 30 // Could avoid testing only the ones that have percentages. 31 "transform", 32 "transform-origin", 33 "perspective-origin", 34 35 "padding-bottom", 36 "padding-left", 37 "padding-right", 38 "padding-top", 39 "padding-inline-end", 40 "padding-inline-start", 41 "padding-block-end", 42 "padding-block-start", 43 44 "margin-bottom", 45 "margin-left", 46 "margin-right", 47 "margin-top", 48 "margin-inline-end", 49 "margin-inline-start", 50 "margin-block-end", 51 "margin-block-start", 52 53 "width", 54 "height", 55 "block-size", 56 "inline-size", 57 58 "min-height", 59 "min-width", 60 "min-block-size", 61 "min-inline-size", 62 ]; 63 64 const outer = document.getElementById("outer"); 65 const inner = document.getElementById("inner"); 66 67 function testValue(prop, value) { 68 outer.style.setProperty(prop, value); 69 const computed = getComputedStyle(outer).getPropertyValue(prop); 70 assert_equals( 71 getComputedStyle(inner).getPropertyValue(prop), computed, 72 "Didn't handle the inherited change correctly?" 73 ) 74 } 75 76 // Note that we intentionally ignore the "prerequisites" here, since that's 77 // the most likely place where the diffing could potentially go wrong. 78 function testProperty(prop, info) { 79 // We only care about longhands, changing shorthands is not that interesting, 80 // since we're interested of changing as little as possible, and changing 81 // them would be equivalent to changing all the longhands at the same time. 82 if (info.type !== CSS_TYPE_LONGHAND) 83 return; 84 if (kWhitelist.includes(prop)) 85 return; 86 87 inner.style.setProperty(prop, "inherit"); 88 for (const v of info.initial_values) 89 testValue(prop, v); 90 for (const v of info.other_values) 91 testValue(prop, v); 92 // Test again the first value so that we test changing to it, not just from 93 // it. 94 // 95 // TODO(emilio): We could test every value against every-value if we wanted, 96 // might be worth it. 97 testValue(prop, info.initial_values[0]); 98 99 inner.style.removeProperty(prop); 100 } 101 102 for (let prop in gCSSProperties) 103 test(() => testProperty(prop, gCSSProperties[prop]), "Diffing for " + prop); 104 </script>