Skip to content

Commit 87e7f1c

Browse files
andruudchromium-wpt-export-bot
andruud
authored and
chromium-wpt-export-bot
committed
[zoom] Adjust line-height and width when the effective zoom changes
Based on CL:5302760 by chrishtr@. In Blink, lengths are stored on the ComputedStyle with "premultiplied zoom", meaning that for e.g. width:20px;zoom:200%, the width is stored as "40". Currently, we do not account for this during inheritance: we inherit that "40" as-is, even if the effective zoom of the element we're inheriting into is not the same. Issue 9397 [1] clarified that this is not correct, and therefore we need to adjust our zoomed values when inheriting. This CL solves this problem by using our existing code paths for creating the computed CSSValue (which already does unzooming) and for applying that CSSValue onto a ComputedStyle (which already does zooming). We need two things for this to work: 1. Special behavior in Longhand::ApplyInherit, which detects if the effective zoom changed, and if so, inherits via the computed CSSValue path instead of the regular ComputedStyle-to-ComputedStyle path. However, Longhand::ApplyInherit is only reached if an explicit inherit/unset exists in the cascade, but we also need to make the adjustment for *inherited* properties (e.g. line-height). Therefore: 2. During cascade expansion, if the effective zoom changes vs. the parent zoom, we insert explicit 'unset' values at the bottom of the cascade. This ensures that we always reach ApplyInherit for affected properties. This CL only enables the zoom adjustment for one inherited property (line-height), and one non-inherited property (width) to establish the pattern. Future CLs will incrementally add the 'affected_by_zoom' flag to the relevant properties. Bug: 40946858 [1] w3c/csswg-drafts#9397 Change-Id: Iab4dd978143e56264a5c78377055ecbb0363b276 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5323090 Commit-Queue: Chris Harrelson <[email protected]> Reviewed-by: Rune Lillesveen <[email protected]> Cr-Commit-Position: refs/heads/main@{#1267277}
1 parent bec260d commit 87e7f1c

File tree

4 files changed

+100
-0
lines changed

4 files changed

+100
-0
lines changed

‎css/css-viewport/line-height-ref.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<style>CSS zoom applies to line-height when specified and inherited</style>
3+
<link rel="author" title="Chris Harrelson" href="mailto:[email protected]">
4+
<link rel="help" href="https://drafts.csswg.org/css-viewport/">
5+
<div style="line-height: 12px; font-size: 12px">
6+
Double-spaced<br>12px font text
7+
</div>
8+
9+
<hr>
10+
11+
<div style="line-height: 24px; font-size: 24px;">
12+
Double-spaced<br>12px font zoomed text
13+
</div>
14+
15+
<hr>
16+
17+
<div style="line-height: 12px; font-size: 12px">
18+
<div style="line-height: 24px; font-size: 24px">
19+
Double-spaced<br>12px font zoomed inherited text
20+
</div>
21+
</div>
22+
23+
<hr>

‎css/css-viewport/line-height.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<style>CSS zoom applies to line-height when specified and inherited</style>
3+
<link rel="author" title="Chris Harrelson" href="mailto:[email protected]">
4+
<link rel="help" href="https://drafts.csswg.org/css-viewport/">
5+
<link rel="match" href="line-height-ref.html">
6+
<div style="line-height: 12px; font-size: 12px">
7+
Double-spaced<br>12px font text
8+
</div>
9+
10+
<hr>
11+
12+
<div style="line-height: 12px; font-size: 12px; zoom: 2">
13+
Double-spaced<br>12px font zoomed text
14+
</div>
15+
16+
<hr>
17+
18+
<div style="line-height: 12px; font-size: 12px">
19+
<div style="zoom:2">
20+
Double-spaced<br>12px font zoomed inherited text
21+
</div>
22+
</div>
23+
24+
<hr>

‎css/css-viewport/width-ref.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<style>CSS zoom applies to width when specified and inherited</style>
3+
<link rel="author" title="Chris Harrelson" href="mailto:[email protected]">
4+
<link rel="help" href="https://drafts.csswg.org/css-viewport/">
5+
<style>
6+
#parent {
7+
width: 100px;
8+
background: red;
9+
}
10+
#child-zoomed {
11+
width: inherit;
12+
background: lime;
13+
width: 200px;
14+
height: 200px;
15+
}
16+
#child {
17+
width: 200px;
18+
height: 200px;
19+
background: green;
20+
}
21+
</style>
22+
<p>You should see two squares below. One lime, and one green.</p>
23+
<div id="parent">
24+
<div id="child-zoomed"></div>
25+
<div id="child"></div>
26+
</div>

‎css/css-viewport/width.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<style>CSS zoom applies to width when specified and inherited</style>
3+
<link rel="author" title="Chris Harrelson" href="mailto:[email protected]">
4+
<link rel="help" href="https://drafts.csswg.org/css-viewport/">
5+
<link rel="match" href="width-ref.html">
6+
<style>
7+
#parent {
8+
width: 100px;
9+
background: red;
10+
}
11+
#child-zoomed {
12+
zoom: 2;
13+
width: inherit;
14+
background: lime;
15+
height: 100px;
16+
}
17+
#child {
18+
width: 200px;
19+
height: 200px;
20+
background: green;
21+
}
22+
</style>
23+
<p>You should see two squares below. One lime, and one green.</p>
24+
<div id="parent">
25+
<div id="child-zoomed"></div>
26+
<div id="child"></div>
27+
</div>

0 commit comments

Comments
 (0)