Bug 1774705 part 2: Queue a bounds cache update when the CSS left/right/top/bottom CSS properties change on positioned elements. r=morgan

Differential Revision: https://phabricator.services.mozilla.com/D166768
This commit is contained in:
James Teh 2023-01-18 17:52:57 +00:00
parent 8bdfc0d756
commit 4eeda8a4ad
3 changed files with 49 additions and 0 deletions

View File

@ -3832,6 +3832,22 @@ void LocalAccessible::MaybeQueueCacheUpdateForStyleChanges() {
mDoc->QueueCacheUpdate(this, CacheDomain::TransformMatrix);
}
if (newStyle->StyleDisplay()->IsPositionedStyle()) {
// We normally rely on reflow to know when bounds might have changed.
// However, changing the CSS left, top, etc. properties doesn't always
// cause reflow.
for (auto prop : {eCSSProperty_left, eCSSProperty_right, eCSSProperty_top,
eCSSProperty_bottom}) {
nsAutoCString oldVal, newVal;
mOldComputedStyle->GetComputedPropertyValue(prop, oldVal);
newStyle->GetComputedPropertyValue(prop, newVal);
if (oldVal != newVal) {
mDoc->QueueCacheUpdate(this, CacheDomain::Bounds);
break;
}
}
}
mOldComputedStyle = newStyle;
if (newHasValidTransformStyle) {
mStateFlags |= eOldFrameHasValidTransformStyle;

View File

@ -8,6 +8,7 @@ support-files =
!/accessible/tests/mochitest/letters.gif
[browser_accessible_moved.js]
[browser_position.js]
[browser_test_resolution.js]
skip-if = os == 'win' # bug 1372296
[browser_test_zoom.js]

View File

@ -0,0 +1,32 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
/**
* Test changing the left/top CSS properties.
*/
addAccessibleTask(
`
<div id="div" style="position: relative; left: 0px; top: 0px; width: fit-content;">
test
</div>
`,
async function(browser, docAcc) {
await testBoundsWithContent(docAcc, "div", browser);
info("Changing left");
await invokeContentTask(browser, [], () => {
content.document.getElementById("div").style.left = "200px";
});
await waitForContentPaint(browser);
await testBoundsWithContent(docAcc, "div", browser);
info("Changing top");
await invokeContentTask(browser, [], () => {
content.document.getElementById("div").style.top = "200px";
});
await waitForContentPaint(browser);
await testBoundsWithContent(docAcc, "div", browser);
},
{ chrome: true, topLevel: true, iframe: true }
);