length-implicit-and-explicit-inheritance.html (1483B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> 4 <link rel="author" href="https://mozilla.org" title="Mozilla"> 5 <link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <div style="zoom: 2"> 9 <div style="zoom: 2" id="parent"> 10 <!-- effective zoom of 8, inherited zoom (4) times specified zoom (2) --> 11 <div style="zoom: 2" id="target"></div> 12 </div> 13 </div> 14 <script> 15 const kTestCases = [ 16 // Explicitly inherited reset properties. 17 ["width", "100px", "inherit", "100px"], 18 ["height", "100px", "inherit", "100px"], 19 // Explicitly inherited properties. 20 ["word-spacing", "100px", "inherit", "100px"], 21 ["word-spacing", "100px", "unset", "100px"], 22 // Implicitly inherited properties. 23 ["word-spacing", "100px", "", "100px"], 24 ]; 25 26 const parent = document.getElementById("parent"); 27 const target = document.getElementById("target"); 28 for (const [prop, parentValue, childValue, expected] of kTestCases) { 29 test(function(t) { 30 parent.style[prop] = parentValue; 31 target.style[prop] = childValue; 32 t.add_cleanup(function() { 33 parent.style[prop] = target.style[prop] = ""; 34 }); 35 assert_equals(getComputedStyle(target).getPropertyValue(prop), expected); 36 }, `${prop}: ${childValue} from ${parentValue}`); 37 } 38 </script>