transform-getBoundingClientRect-001.html (1047B)
1 <meta charset=UTF-8> 2 <title>CSS Test: transform and getBoundingClientRect</title> 3 <link rel="author" title="L. David Baron" href="https://dbaron.org/"> 4 <link rel="author" title="Google" href="http://www.google.com/"> 5 <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-property"> 6 <link rel="help" href="https://drafts.csswg.org/cssom-view/#extension-to-the-element-interface"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <style> 10 body { 11 margin: 0; 12 } 13 14 div { 15 height: 100px; 16 width: 100px; 17 } 18 19 #outer { 20 transform: translate(100px, 100px); 21 } 22 23 #inner { 24 transform: scale(0.5); 25 transform-origin: center; 26 } 27 </style> 28 29 <div id="outer"> 30 <div> 31 <div id="inner"></div> 32 </div> 33 </div> 34 35 <script> 36 test(function() { 37 let bcr = document.getElementById("inner").getBoundingClientRect(); 38 assert_equals(bcr.x, 125); 39 assert_equals(bcr.y, 125); 40 }, "correct getBoundingClientRect() result within set of transforms"); 41 </script>