computed-style-005.html (1817B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test: getComputedStyle on blocks with auto margins</title> 5 <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"> 6 <link rel="help" href="https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle" /> 7 <meta name="assert" content="getComputedStyle produces pixel values for margin: auto blocks"> 8 <script src="/resources/testharness.js" type="text/javascript"></script> 9 <script src="/resources/testharnessreport.js" type="text/javascript"></script> 10 <style> 11 x { 12 display: block; 13 position: relative; 14 background: grey; 15 width: 60px; 16 height: 10px; 17 } 18 y { 19 display: block; 20 background: blue; 21 width: 40px; 22 height: 10px; 23 margin: auto; 24 } 25 26 #absolute { 27 position: absolute; 28 left: 0; 29 right: 0; 30 } 31 #relative { 32 position: relative; 33 } 34 </style> 35 </head> 36 <body> 37 <div id="log"></div> 38 <x><y id="absolute"></y></x> 39 <x><y id="relative"></y></x> 40 <script type="text/javascript"> 41 let idsToTest = [ 42 "absolute", 43 "relative", 44 ]; 45 46 for (let id of idsToTest) { 47 let elem = document.getElementById(id); 48 let elemStyle = window.getComputedStyle(elem); 49 50 // positioned element's auto margins should be resolved to 10px. 51 test(function() { 52 assert_equals(elemStyle.getPropertyValue("margin-left"), "10px"); 53 assert_equals(elemStyle.getPropertyValue("margin-right"), "10px"); 54 }, id + "_computed_margins"); 55 56 // positioned element should have a left and right of 0px (as authored). 57 test(function() { 58 assert_equals(elemStyle.getPropertyValue("left"), "0px"); 59 assert_equals(elemStyle.getPropertyValue("right"), "0px"); 60 }, id + "_computed_left_and_right"); 61 } 62 </script> 63 </body> 64 </html>