cssom-getBoundingClientRect-001.html (1467B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSSOM View - 6.1 - getBoundingClientRect tests</title> 5 <meta charset="utf-8"> 6 <link rel="author" title="Chris Wu" href="mailto:pwx.frontend@gmail.com"> 7 <link rel="help" href="http://www.w3.org/TR/cssom-view/#dom-element-getboundingclientrect"> 8 <meta name="flags" content="dom"> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <style type="text/css"> 12 #testItem { 13 width: 279px; 14 height: 188px; 15 margin: 100px 0 0 178px; 16 background-color: purple; 17 font-size: 26px; 18 font-weight: bold; 19 text-align: center; 20 line-height: 188px; 21 } 22 </style> 23 </head> 24 <body> 25 <div id="testItem">test item</div> 26 <div id="log"></div> 27 <script> 28 var titem = document.getElementById('testItem').getBoundingClientRect(); 29 test( 30 function(){ 31 assert_equals(titem.bottom - titem.top, titem.height, "height should equal bottom minus top") 32 }, "getBoundingClientRect() should return a DOMRect where height=bottom-top" 33 ); 34 test( 35 function(){ 36 assert_equals(titem.right - titem.left, titem.width, "width should equal right minus left") 37 }, "getBoundingClientRect() should return a DOMRect where width=right-left" 38 ) 39 </script> 40 </body> 41 </html>