Bugzilla

STR:

1. Open this test case:
    `data:text/html,<div id="container" style="position: absolute; top: 100px; left: 0px;">Hello</div><button onclick="container.style.left = '600px';">Move</button>
2. Get the bounds of the div Accessible.
3. Press the Move button.
4. Get the bounds of the div Accessible.
    - Expected: The div Accessible should have a larger left coordinate than in step 2.
    - Actual: The left coordinate remains the same as in step 2.

Perhaps this doesn't cause reflow, so we don't get notified the bounds might have changed, though this needs to be verified.

This also applies to animating position properties:

`data:text/html,<style>.container { position: absolute; left: 0px; top: 100px; } .animate { left: 600px; transition: left 5s linear; }</style><div id="container" class="container">Hello</div><button onclick="container.classList.add('animate');">Animate</button>`

Interestingly, animating the position using a transform *does* update cached bounds correctly because of the way we monitor for transform changes:
`data:text/html,<style>.container { position: absolute; left: 0px; top: 100px; } .animate { transform: translateX(600px); transition: transform 5s linear; }</style><div id="container" class="container">Hello</div><button onclick="container.classList.add('animate');">Animate</button>`

Perhaps we need to monitor the left, top, width and height CSS properties in a similar way to transforms for [positioned elements](https://developer.mozilla.org/en-US/docs/Web/CSS/position); i.e. when position is not static.

STR:

1. Open this test case:
    `data:text/html,<div id="container" style="position: absolute; top: 100px; left: 0px;">Hello</div><button onclick="container.style.left = '600px';">Move</button>`
2. Get the bounds of the div Accessible.
3. Press the Move button.
4. Get the bounds of the div Accessible.
    - Expected: The div Accessible should have a larger left coordinate than in step 2.
    - Actual: The left coordinate remains the same as in step 2.

Perhaps this doesn't cause reflow, so we don't get notified the bounds might have changed, though this needs to be verified.

This also applies to animating position properties:

`data:text/html,<style>.container { position: absolute; left: 0px; top: 100px; } .animate { left: 600px; transition: left 5s linear; }</style><div id="container" class="container">Hello</div><button onclick="container.classList.add('animate');">Animate</button>`

Interestingly, animating the position using a transform *does* update cached bounds correctly because of the way we monitor for transform changes:
`data:text/html,<style>.container { position: absolute; left: 0px; top: 100px; } .animate { transform: translateX(600px); transition: transform 5s linear; }</style><div id="container" class="container">Hello</div><button onclick="container.classList.add('animate');">Animate</button>`

Perhaps we need to monitor the left, top, width and height CSS properties in a similar way to transforms for [positioned elements](https://developer.mozilla.org/en-US/docs/Web/CSS/position); i.e. when position is not static.