transform-getBoundingClientRect-001.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-transforms/transform-getBoundingClientRect-001.html - WPT Dashboard Interop Dashboard

<meta charset=UTF-8>

<title>CSS Test: transform and getBoundingClientRect</title>

<link rel="author" title="L. David Baron" href="https://dbaron.org/">

<link rel="author" title="Google" href="http://www.google.com/">

<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-property">

<link rel="help" href="https://drafts.csswg.org/cssom-view/#extension-to-the-element-interface">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<style>

  body {

    margin: 0;

  div {

    height: 100px;

    width: 100px;

  #outer {

    transform: translate(100px, 100px);

  #inner {

    transform: scale(0.5);

    transform-origin: center;

</style>

<div id="outer">

  <div>

    <div id="inner"></div>

  </div>

</div>

<script>

  test(function() {

    let bcr = document.getElementById("inner").getBoundingClientRect();

    assert_equals(bcr.x, 125);

    assert_equals(bcr.y, 125);

  }, "correct getBoundingClientRect() result within set of transforms");

</script>