Bug 1880189 - Implement Element.currentCSSZoom. r=webidl,layout-reviewers,dshin,smaug

As per https://drafts.csswg.org/cssom-view/#dom-element-currentcsszoom

Differential Revision: https://phabricator.services.mozilla.com/D205214
This commit is contained in:
Emilio Cobos Álvarez 2024-03-20 21:55:52 +00:00
parent acea330fc8
commit 94c83007c1
4 changed files with 44 additions and 0 deletions

View File

@ -1055,6 +1055,14 @@ already_AddRefed<nsIScreen> Element::GetScreen() {
return nullptr;
}
double Element::CurrentCSSZoom() {
nsIFrame* f = GetPrimaryFrame(FlushType::Frames);
if (!f) {
return 1.0;
}
return f->Style()->EffectiveZoom().ToFloat();
}
already_AddRefed<DOMRect> Element::GetBoundingClientRect() {
RefPtr<DOMRect> rect = new DOMRect(ToSupports(OwnerDoc()));

View File

@ -1496,6 +1496,8 @@ class Element : public FragmentOrElement {
return CSSPixel::FromAppUnits(GetClientAreaRect().Width());
}
MOZ_CAN_RUN_SCRIPT double CurrentCSSZoom();
// This function will return the block size of first line box, no matter if
// the box is 'block' or 'inline'. The return unit is pixel. If the element
// can't get a primary frame, we will return be zero.

View File

@ -255,6 +255,8 @@ partial interface Element {
readonly attribute long scrollTopMax;
[ChromeOnly] readonly attribute long scrollLeftMin;
readonly attribute long scrollLeftMax;
[Pref="layout.css.zoom.enabled"] readonly attribute double currentCSSZoom;
};
// http://domparsing.spec.whatwg.org/#extensions-to-the-element-interface

View File

@ -0,0 +1,32 @@
<!doctype html>
<meta charset="utf-8">
<title>Element.currentCSSZoom</title>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<link rel="author" title="Mozilla" href="https://mozilla.org">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-currentcsszoom">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="unzoomed">
<div id="unzoomedChild"></div>
</div>
<div style="zoom: 2" id="outer">
<div style="zoom: 2" id="inner">
<div id="renderedChild"></div>
<div style="display: none" id="nonRenderedChild"></div>
</div>
</div>
<script>
test(() => {
assert_equals(unzoomed.currentCSSZoom, 1, "Unzoomed content");
assert_equals(outer.currentCSSZoom, 2, "Zoomed content");
assert_equals(inner.currentCSSZoom, 4, "Effective zoom gets multiplied properly");
assert_equals(renderedChild.currentCSSZoom, 4, "Effective zoom gets propagated to children");
assert_equals(nonRenderedChild.currentCSSZoom, 1, "Non-rendered elements return 1 for currentCSSZoom");
}, "Element.currentCSSZoom basic test");
test(() => {
unzoomed.style.zoom = 2;
assert_equals(unzoomed.currentCSSZoom, 2, "currentCSSZoom reacts to style changes");
assert_equals(unzoomedChild.currentCSSZoom, 2, "currentCSSZoom propagates to descendants after style changes");
}, "Element.currentCSSZoom reacts to style changes");
</script>