From 87ef4cb38475317a68d54bf74ef1e9fd0eaab57d Mon Sep 17 00:00:00 2001 From: Chris Harrelson Date: Mon, 11 Dec 2023 17:48:20 -0800 Subject: [PATCH 01/33] Add definition of the zoom css property --- css-viewport/Overview.bs | 134 ++++++++++++++++++++++++ css-viewport/css_zoom_hover_example.png | Bin 0 -> 5067 bytes 2 files changed, 134 insertions(+) create mode 100644 css-viewport/css_zoom_hover_example.png diff --git a/css-viewport/Overview.bs b/css-viewport/Overview.bs index e919d7d8bee..734490e6331 100644 --- a/css-viewport/Overview.bs +++ b/css-viewport/Overview.bs @@ -356,6 +356,140 @@ only the value previously set to it. } +

+The 'zoom' property

+ +An element becomes zoomed when the 'zoom' property has a positive computed value +different than 1. 'zoom' affects computed property values and inherited +property values. The computed value of 'zoom' is applied as a scalar to +all <length> property values of all CSS properties for the element and +its descendants, resulting in a magnification or minificaiton effect. Unlike 'transform', scaling the 'zoom' property affects layout. + +Nested values of 'zoom' multiiply, resulting in additional scaling +of <length> values. + +The 'zoom' property has no effect to <length> property values with +computed value is ''auto'' or <percent>. + +

The computed value of 'font-size' is never <percent> +thus 'zoom' always applies.

+ +

+ 'zoom' does not affect or prevent 'transform' scaling.

+ +
+Name: zoom
+Value: <number>
+Initial: 1
+Applies to: all <length> property values of block-level elements
+Inherited: no
+Percentages: Refer to all <length> property values
+Media: visual
+Computed value: as specified
+
+ +The values of this property have the following meanings: + +
+
number +
+ Positive floating point number indicating a zoom factor. Numbers smaller + than 1.0 indicate a "zoom out" or minification effect, while numbers + greater than 1.0 indicate a "zoom in" or magnification effect. + +
percent +
+ Positive floating point number, followed by a percentage character ("%") + which indicates a zoom factor multiplied by 100. +
+ +Negative values for 'zoom' are illegal. + +
+ Example of the 'zoom' property applied during hover for magnification effect. + +
+<div class="messageBox">
+    <div class="label">Text of the label</div>
+</div>
+
+<style type="text/css">
+.messageBox {
+    width: 10em;
+    padding: 2em;
+    border: medium solid lightblue;
+}
+
+.messageBox:hover {
+    zoom: 150%;
+}
+
+.label {
+    background: lightgrey;
+    padding: 1em;
+    text-align: center;
+}
+</style>
+
+ + Illustration of the before and after hover state of the message box element. + +
+ +
+Example of nested zoom. In this example, "Inner text" is 4x as large as +"Outer text", and "Middle text" is 2x as large as "Outer text". + +
+<div style="zoom: 2">
+  Middle text
+	<div style="zoom: 2">
+	   Inner text
+	<div>
+<div>
+Outer text
+
+
+ +

+ DOM and CSSOM interaction

+ + The current interoperable behavior of 'zoom' affects DOM and CSSOM interface serialization in two ways; removing or preserving the scaling of the accumulated 'zoom' value. + +

+ Scaled interface serialization

+ + The following API preseve the accumulated scaling effect of 'zoom' + resulting in serialization of values that are the result of layout. + + + +

+ Unscaled interface serialization

+ + The unscaled serialization is performed by applying the inverse accumulated + 'zoom' value to the following OM API. The results of such of serialization + are values approximating the computed values if 'zoom' didn't apply at all. + + +

Appendix A. Changes

This appendix is informative. diff --git a/css-viewport/css_zoom_hover_example.png b/css-viewport/css_zoom_hover_example.png new file mode 100644 index 0000000000000000000000000000000000000000..8dccf28893f04bc966919f81d28805128678fcc3 GIT binary patch literal 5067 zcmeHLc~Fzr7XJc>2+A&tgw2Q;*+eRfY*9eau(`1a0Ra(9At5LP3`?xaQj|qxu^<$z zl~#eEYylFaBFJX+u>}GF64{Aqpb!v9UJ%sI)V_H$Z(gVKUjO)(d**)ko_p@^e&_c) ziO!C;+eCMW0sye>sGao*01$Y}fB!{9fPcSIWMjsEfG(b}Jq(n*1W)oCLIH;y4go+} zir9+JCVqQMh@JaI01$t+c7d8vMdtuO=Il}HL#HCVnAE|vfu>u+&hBaw=Rgi_o0|mP z)db%F+fqSMy`~&@;TPAU-Ni~2U2{y`Tc0xXeXb%V_7=R{B6RNxbYRJj5G zm(Ly4|Iv@e#WB~La%mB8+ z;c?r1%iQ{vMz#nDy%d0mTM#4Crah1@dq}SR_k{eo~hxG-ggA{f$L990puTA`e7Ox0+-Q#mCN%kiIbo(t)4~8$a5j~9qj&W%6YHqK0Uf&B_kJ6(H zX@|F~;r>D7Y!Y!Pw<{2pgiX?x1%$NDeDAzToe|7_txOBzR|@KId8< zfR&FwJ6h2km7TSH%1uCMYgg;#9cw#$_6Sp7brpOH>~3+bPLM!)+N z8ZeZdI2TxdN8LASW;*;$z6n$ylGaAy@ANvB8eqqi#8x=Eu*1y0CVzG zxY8wjOK-{aORK5K zXQ)1LEkEiJ%c_`2__lpEewlLXA+hlqC!#Z2TYP(#eD9ryeX~Xq+=Yc63u02L6r`41 zjh-ULcd$aD$@OGRE=O$xISIRecy<{Rq-FdQ-W40G{W5PmufbkbkPaV`Qk%`@h%4{`1dN5J|;Z!5z{DN7w@?}&>S2zy{# zif}sb^fFj}mbFy{Rg?0(;IIdQ#bh#l-8^AIlNOAaW*-Jssn%@C!D1quWVHcwdfd2{ zaWdWrHn7}X5F`vLEPa2D8V!)b3CX0G)o*!kcTEqHPhA+7PzQh^mK4 zgm-j#}Vy@V9x<8QdVtD6J`dvtRu?3+7h(vt+G?J>&4+!_g#mtD9WKnUpI;mzg>54+g>k(*E z7k;L21xz=V*L3LHdLVe*D>8NQNy*-Dvi=>x5;AFzoWImv>Rms^+f<~|!u{sn^Wg#MS=raV z!K=x}LH6lOJSg3m;ClCAW78{_x3wxR21u|$qfL{4b0!l?e{5Mjlrx17US;VJT*12_ zKQEZ(qOuhvIZCEuoPCY)hV(011Pj)l53p1!T-2rQaKGo#Jx92#Z&B&#G_oYz0yPW9 zM47=(J#1WzG9S$@4mQ0XjI)b0S10E@4D&v~r4gIMLB62^jRu9ih5e{-|Aco#j>q-W zpXa&`N=S!Y^oX5E5`dF=DVz$}G)WtH)F=d0d?jiD=1@dr`Jx(h#3B3LxW z{#g;*3n@$c^t8Ilgc1U*M{UIhW?Hk$>2UezG)5IveVm(3^YyD>y1YH%fH}#PRS5{1 zX3bXV>FwB8d95;ZXdWN5kc4>=PPxj#j=aO`8`xr=8wom-DnGA zR?>%rhfJW?x;Gr)G{;kEfQd8Px z_jT1Qf|SNCx27chc(QpIoSJplmKGz)s4jp;qtUzBOLOB<(BRFD7%1Q0 z(n{!5nie6Frv3p3JoUD!@?zHGo|7+0OD12Ldkd*QG;}QuU^_#skS(ElCe5hPg=*YH z%?fyP;??nSymDqJyw58NT<>BK-WVU8XNNvbKvk1C2bT{i7JmHW=cN^+FVe|*tHUT3 z9K0(zgq`xMh7+1dJO%GTY2F^7xzG?O!sKN)nxm(^M{L!5uMw(-L%UR0Jgi7p^ho1N zy*ef{YtEW}{CoU{Nti*-e>dHtJzA$yHtg$_lAlq40baj7+7Amhy=>g7u$lx!*77ijb0^SBo*ub9m$1ZfaGZ;edtySI=n zG57eeG8`9iq#f3q?%q<`WG`oVIzT%C%ItjLlp*Yk<%S_zz2mC0yJyu1aAt&hY+${J zDuL~rMUm!XhUybGMF~X*Q+-BqI9MhfuWym!Y;+5gCK$@-0Hg$WhIe@l)!oXeGO+$V z`Dw(o9o^H|e(Gee%gP?`MYm*VhC+$vVy?wSd*yvR55L@<^ykFyrDwgj`nlzP;ljY9 zr;_TM$OdtXuM7v%vXmc)M_yM%R;FJ<1g};$G;^?>^FDJTXbAd=e#3b5b%i^ct+fe0 zk@97JHxeO@^L47jyy&@OC1lfMpYes$V)EtmSjrO<;^;ZK&eN+}R@YOU6$^`bIz~-( z3Z_j{Han{2WCGi32`Kv&`FfjdYL!I-1YJ};mYRNvI)XB(;Ah&fA}rsFj;md(O~f~t z-4@cu=19liNa@@(BG``-=)*5v4J>TfcBac`b5vyCD2D^zOJl3 zk@9s#^@)$KE2+Qm=kHR)_#*u`g6O@@{EI8Sf2mXXO4z4t1(NAft*No0c{A^4{XvT_ zvY(m>t;^oE0>rvr9xngCGEJwgm0@~3|HGop;8sZhA@aTq69Rr;&H<7kzpDZPGrM5` uP`gDEc#0Gd0`NHi=)Z3Iwbz@sxx#=k`eVwu9)1B1IBMf)U2^#B*Z&08GYEzN literal 0 HcmV?d00001 From 60e6b378d065db25935b04842adc88dabf356d0a Mon Sep 17 00:00:00 2001 From: Chris Harrelson Date: Wed, 20 Dec 2023 15:48:42 -0800 Subject: [PATCH 02/33] Spell out the complete spec --- css-viewport/Overview.bs | 104 +++++++++++++++++++++++---------------- cssom-view-1/Overview.bs | 4 +- 2 files changed, 65 insertions(+), 43 deletions(-) diff --git a/css-viewport/Overview.bs b/css-viewport/Overview.bs index 734490e6331..e34b8c2855e 100644 --- a/css-viewport/Overview.bs +++ b/css-viewport/Overview.bs @@ -356,26 +356,31 @@ only the value previously set to it. } -

+

The 'zoom' property

An element becomes zoomed when the 'zoom' property has a positive computed value different than 1. 'zoom' affects computed property values and inherited property values. The computed value of 'zoom' is applied as a scalar to -all <length> property values of all CSS properties for the element and -its descendants, resulting in a magnification or minificaiton effect. Unlike 'transform', scaling the 'zoom' property affects layout. +the used value <length>s CSS properties for the element and +its descendants (including inherited properties such as 'line-height' or +'font-size'), plus intrinsic sizing of +all replaced elements and nested frames, resulting in a magnification or +minification effect. -Nested values of 'zoom' multiiply, resulting in additional scaling +Nested values of 'zoom' multiply, resulting in additional scaling of <length> values. The 'zoom' property has no effect to <length> property values with computed value is ''auto'' or <percent>. +
Unlike 'transform', scaling the 'zoom' property affects +layout.
+

The computed value of 'font-size' is never <percent> thus 'zoom' always applies.

-

- 'zoom' does not affect or prevent 'transform' scaling.

+

'zoom' does not affect or prevent 'transform' scaling.

 Name: zoom
@@ -451,44 +456,59 @@ Outer text
-

+
+Example of replaced elements. In this example, the image and iframe will +be twice as large as their default sizing. + +
+<div style="zoom: 2">
+	<img src="">
+	<iframe src="">
+<div>
+
+
+ +The effective zoom of an element is the product of its computed +value of 'zoom' all ancestors' computed values of 'zoom'. + +The scaled value of a CSS length is the used value of that length; +in particular it includes zoom. + +The unscaled value of a CSS length is the scaled value +divided by the element's effective zoom + +
Zoom applied to an iframe multiplies all its CSS lengths +during layout, but is otherwise invisible to authors except via the observable +width and height of the viewport in CSS units, and via +{{Window/devicePixelRatio}}. In other words, the effective zoom of +elements in an iframe are 1 unless 'zoom' is set on them directly or their +ancestor in the same document. +
+ +

DOM and CSSOM interaction

- The current interoperable behavior of 'zoom' affects DOM and CSSOM interface serialization in two ways; removing or preserving the scaling of the accumulated 'zoom' value. - -

- Scaled interface serialization

- - The following API preseve the accumulated scaling effect of 'zoom' - resulting in serialization of values that are the result of layout. - -
    -
  • offsetTop -
  • offsetLeft -
  • clientRects -
  • scrollTop -
  • scrollLeft -
  • boundingClientRect -
- -

- Unscaled interface serialization

- - The unscaled serialization is performed by applying the inverse accumulated - 'zoom' value to the following OM API. The results of such of serialization - are values approximating the computed values if 'zoom' didn't apply at all. - -
    -
  • All used values from getComputedStyle properties -
  • offsetHeight -
  • offsetWidth -
  • scrollHeight -
  • scrollWidth -
  • clientHeight -
  • clientWidth -
  • scrollTop -
  • scrollLeft -
+ Computed style APIs (i.e., all values returned by {{getComputedStyle()}}) that + are non-auto and non-percentage lengths must be unscaled. + + The {{Element/getBoundingClientRect}}, {{Element/getClientRects}}, + and {{IntersectionObserver}} APIs must return rects with scaled + coordinates. + + The {{HTMLElement/offsetParent}} API must return an adjusted parent that stops at + ancestors which have a computed value for 'zoom' other than 1. This is + further explained in [[cssom-view#extensions-to-the-htmlelement-interface]]. + + The {{HTMLElement/offsetTop}} and {{HTMLElement/offsetLeft}} APIs must return + an unscaled offset. This is further explained in + [[cssom-view#extensions-to-the-htmlelement-interface]]. + + The {{HTMLElement/offsetWidth}}, {{HTMLElement/offsetHeight}}, + {{Element/scrollWidth}} and {{Element/scrollHeight}} APIs must return an unscaled value. + + The {{Window/devicePixelRatio}} of a frame is multiplied by the + effective zoom inherited by its parent frame. +

Appendix A. Changes

diff --git a/cssom-view-1/Overview.bs b/cssom-view-1/Overview.bs index 9522d10b8b4..4588c12cb5d 100644 --- a/cssom-view-1/Overview.bs +++ b/cssom-view-1/Overview.bs @@ -1401,7 +1401,8 @@ The scrollHeight attribute must return the resu The clientTop attribute must run these steps: 1. If the element has no associated [=CSS/box=] or if the [=CSS/box=] is inline, return zero. -1. Return the computed value of the 'border-top-width' property plus the height of any scrollbar rendered between the top padding edge and the top border edge, ignoring any transforms that apply to the element and its ancestors. +1. Return the computed value of the 'border-top-width' property plus the height of any scrollbar rendered between the top padding edge and the top border edge, ignoring any transforms or that apply to the element and +its ancestors. The clientLeft attribute must run these steps: @@ -1536,6 +1537,7 @@ The offsetParent attribute must return the 1. If ancestor is closed-shadow-hidden from the element and its computed value of the 'position' property is ''position/fixed'', terminate this algorithm and return null. 1. If ancestor is not closed-shadow-hidden from the element and satisfies at least one of the following, terminate this algorithm and return ancestor. * The element is a containing block of absolutely-positioned descendants (regardless of whether there are any absolutely-positioned descendants). + * The element has a non-default used value of 'zoom'. * It is the body element. * The computed value of the 'position' property of the element is ''static'' and the ancestor is one of the following HTML elements: td, th, or table. 1. If there is no more parent of ancestor in the flat tree, terminate this algorithm and return null. From 949b515439345b9e4fb421f13bff0bb8f4702a8e Mon Sep 17 00:00:00 2001 From: Chris Harrelson Date: Wed, 20 Dec 2023 15:50:46 -0800 Subject: [PATCH 03/33] none --- css-viewport/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-viewport/Overview.bs b/css-viewport/Overview.bs index e34b8c2855e..7dc33b71885 100644 --- a/css-viewport/Overview.bs +++ b/css-viewport/Overview.bs @@ -486,7 +486,7 @@ ancestor in the same document.

- DOM and CSSOM interaction

+ DOM and CSSOM interaction Computed style APIs (i.e., all values returned by {{getComputedStyle()}}) that are non-auto and non-percentage lengths must be unscaled. From 44b4fdf0c5ef82c918ee0f5830d8e5c87e068cdf Mon Sep 17 00:00:00 2001 From: Chris Harrelson Date: Wed, 20 Dec 2023 15:53:30 -0800 Subject: [PATCH 04/33] Avoid zero --- css-viewport/Overview.bs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/css-viewport/Overview.bs b/css-viewport/Overview.bs index 7dc33b71885..5d6075211ad 100644 --- a/css-viewport/Overview.bs +++ b/css-viewport/Overview.bs @@ -371,8 +371,8 @@ minification effect. Nested values of 'zoom' multiply, resulting in additional scaling of <length> values. -The 'zoom' property has no effect to <length> property values with -computed value is ''auto'' or <percent>. +The 'zoom' property has no effect on <length> property values with +computed values that are ''auto'' or <percent>.
Unlike 'transform', scaling the 'zoom' property affects layout.
@@ -408,7 +408,7 @@ The values of this property have the following meanings: which indicates a zoom factor multiplied by 100. -Negative values for 'zoom' are illegal. +Negative or zero values for 'zoom' are illegal.
Example of the 'zoom' property applied during hover for magnification effect. From b150914efbd928eb868da2ace6e7a53a81916df0 Mon Sep 17 00:00:00 2001 From: Chris Harrelson Date: Wed, 20 Dec 2023 15:56:32 -0800 Subject: [PATCH 05/33] Further clarifications --- css-viewport/Overview.bs | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/css-viewport/Overview.bs b/css-viewport/Overview.bs index 5d6075211ad..394e1d0fb15 100644 --- a/css-viewport/Overview.bs +++ b/css-viewport/Overview.bs @@ -469,13 +469,13 @@ be twice as large as their default sizing.
The effective zoom of an element is the product of its computed -value of 'zoom' all ancestors' computed values of 'zoom'. +value of 'zoom' and all ancestors' computed values of 'zoom'. The scaled value of a CSS length is the used value of that length; in particular it includes zoom. -The unscaled value of a CSS length is the scaled value -divided by the element's effective zoom +The unscaled value of a CSS length relative to an element is the +scaled value divided by the element's effective zoom.
Zoom applied to an iframe multiplies all its CSS lengths during layout, but is otherwise invisible to authors except via the observable @@ -493,18 +493,20 @@ ancestor in the same document. The {{Element/getBoundingClientRect}}, {{Element/getClientRects}}, and {{IntersectionObserver}} APIs must return rects with scaled - coordinates. + lengths. - The {{HTMLElement/offsetParent}} API must return an adjusted parent that stops at - ancestors which have a computed value for 'zoom' other than 1. This is - further explained in [[cssom-view#extensions-to-the-htmlelement-interface]]. + The {{HTMLElement/offsetParent}} API must return an adjusted parent that + stops at ancestors which have a computed value for 'zoom' other than 1. This + is further explained in + [[cssom-view#extensions-to-the-htmlelement-interface]]. The {{HTMLElement/offsetTop}} and {{HTMLElement/offsetLeft}} APIs must return an unscaled offset. This is further explained in [[cssom-view#extensions-to-the-htmlelement-interface]]. The {{HTMLElement/offsetWidth}}, {{HTMLElement/offsetHeight}}, - {{Element/scrollWidth}} and {{Element/scrollHeight}} APIs must return an unscaled value. + {{Element/scrollWidth}} and {{Element/scrollHeight}} APIs must return an + unscaled value. The {{Window/devicePixelRatio}} of a frame is multiplied by the effective zoom inherited by its parent frame. From 75dce705ad21afac75fbd084514ac6b6a26a53f3 Mon Sep 17 00:00:00 2001 From: Chris Harrelson Date: Wed, 20 Dec 2023 16:09:29 -0800 Subject: [PATCH 06/33] Add zoom in more places --- css-viewport/Overview.bs | 14 +++----------- cssom-view-1/Overview.bs | 32 +++++++++++++++++--------------- 2 files changed, 20 insertions(+), 26 deletions(-) diff --git a/css-viewport/Overview.bs b/css-viewport/Overview.bs index 394e1d0fb15..ad209ced863 100644 --- a/css-viewport/Overview.bs +++ b/css-viewport/Overview.bs @@ -495,19 +495,11 @@ ancestor in the same document. and {{IntersectionObserver}} APIs must return rects with scaled lengths. - The {{HTMLElement/offsetParent}} API must return an adjusted parent that - stops at ancestors which have a computed value for 'zoom' other than 1. This - is further explained in + All other APIs related to element geometries must return unscaled + lengths. This is explained in detail in [[cssom-view#extensions-to-the-htmlelement-interface]]. - The {{HTMLElement/offsetTop}} and {{HTMLElement/offsetLeft}} APIs must return - an unscaled offset. This is further explained in - [[cssom-view#extensions-to-the-htmlelement-interface]]. - - The {{HTMLElement/offsetWidth}}, {{HTMLElement/offsetHeight}}, - {{Element/scrollWidth}} and {{Element/scrollHeight}} APIs must return an - unscaled value. - + The {{Window/devicePixelRatio}} of a frame is multiplied by the effective zoom inherited by its parent frame. diff --git a/cssom-view-1/Overview.bs b/cssom-view-1/Overview.bs index 4588c12cb5d..dac52e6aea5 100644 --- a/cssom-view-1/Overview.bs +++ b/cssom-view-1/Overview.bs @@ -1143,7 +1143,7 @@ aborting on the first step that returns a value: and that is in the document, return a {{DOMRect}} object for the caret in the widget as represented by the caret offset value. - The transforms that apply to the element and its ancestors are applied. + The transforms and 'zoom' that apply to the element and its ancestors are applied. 1. Return null. Note: This {{DOMRect}} object is not live. @@ -1190,7 +1190,8 @@ partial interface Element { The getClientRects() method, when invoked, must return the result of the following algorithm: 1. If the element on which it was invoked does not have an associated [=CSS/box=] return an empty {{DOMRectList}} object and stop this algorithm. -1. If the element has an associated SVG layout box return a {{DOMRectList}} object containing a single {{DOMRect}} object that describes the bounding box of the element as defined by the SVG specification, applying the transforms that apply to the element and its ancestors. +1. If the element has an associated SVG layout box return a {{DOMRectList}} object containing a single {{DOMRect}} object that describes the bounding box of the element as defined by the SVG specification, applying the transforms +and 'zoom' that apply to the element and its ancestors. 1. Return a {{DOMRectList}} object containing {{DOMRect}} objects in content order, one for each box fragment, describing its border area (including those with a height or width of zero) with the following constraints: * Apply the transforms that apply to the element and its ancestors. @@ -1401,25 +1402,26 @@ The scrollHeight attribute must return the resu The clientTop attribute must run these steps: 1. If the element has no associated [=CSS/box=] or if the [=CSS/box=] is inline, return zero. -1. Return the computed value of the 'border-top-width' property plus the height of any scrollbar rendered between the top padding edge and the top border edge, ignoring any transforms or that apply to the element and +1. Return the computed value of the 'border-top-width' property plus the height of any scrollbar rendered between the top padding edge and the top border edge, ignoring any transforms or 'zoom' that apply to the element and its ancestors. The clientLeft attribute must run these steps: 1. If the element has no associated [=CSS/box=] or if the [=CSS/box=] is inline, return zero. -1. Return the computed value of the 'border-left-width' property plus the width of any scrollbar rendered between the left padding edge and the left border edge, ignoring any transforms that apply to the element and its ancestors. +1. Return the computed value of the 'border-left-width' property plus the width of any scrollbar rendered between the left padding edge and the left border edge, ignoring any transforms or 'zoom' that apply to the element and +its ancestors. The clientWidth attribute must run these steps: 1. If the element has no associated [=CSS/box=] or if the [=CSS/box=] is inline, return zero. 1. If the element is the [=root element=] and the element's node document is not in quirks mode, or if the element is the body element and the element's node document is in quirks mode, return the viewport width excluding the size of a rendered scroll bar (if any). -1. Return the width of the padding edge excluding the width of any rendered scrollbar between the padding edge and the border edge, ignoring any transforms that apply to the element and its ancestors. +1. Return the width of the padding edge excluding the width of any rendered scrollbar between the padding edge and the border edge, ignoring any transforms or 'zoom' that apply to the element and its ancestors. The clientHeight attribute must run these steps: 1. If the element has no associated [=CSS/box=] or if the [=CSS/box=] is inline, return zero. 1. If the element is the [=root element=] and the element's node document is not in quirks mode, or if the element is the body element and the element's node document is in quirks mode, return the viewport height excluding the size of a rendered scroll bar (if any). -1. Return the height of the padding edge excluding the height of any rendered scrollbar between the padding edge and the border edge, ignoring any transforms that apply to the element and its ancestors. +1. Return the height of the padding edge excluding the height of any rendered scrollbar between the padding edge and the border edge, ignoring any transforms or 'zoom' that apply to the element and its ancestors.

{{Element}} Scrolling Members

@@ -1546,21 +1548,21 @@ The offsetParent attribute must return the The offsetTop attribute must return the result of running these steps: 1. If the element is the body element or does not have any associated [=CSS/box=] return zero and terminate this algorithm. -1. If the {{HTMLElement/offsetParent}} of the element is null return the y-coordinate of the top border edge of the first [=CSS/box=] associated with the element, relative to the initial containing block origin, ignoring any transforms that apply to the element and its ancestors, and terminate this algorithm. +1. If the {{HTMLElement/offsetParent}} of the element is null return the y-coordinate of the top border edge of the first [=CSS/box=] associated with the element, relative to the initial containing block origin, ignoring any transforms 'or zoom' that apply to the element and its ancestors, and terminate this algorithm. 1. Return the result of subtracting the y-coordinate of the top padding edge of the first [=CSS/box=] associated with the {{HTMLElement/offsetParent}} of the element from the y-coordinate of the top border edge of the first [=CSS/box=] associated with the element, relative to the initial containing block origin, - ignoring any transforms that apply to the element and its ancestors. + ignoring any transforms or 'zoom' that apply to the element and its ancestors. Note: An inline element that consists of multiple line boxes will only have its first [=CSS/box=] considered. The offsetLeft attribute must return the result of running these steps: 1. If the element is the body element or does not have any associated [=CSS/box=] return zero and terminate this algorithm. -1. If the {{HTMLElement/offsetParent}} of the element is null return the x-coordinate of the left border edge of the first [=CSS/box=] associated with the element, relative to the initial containing block origin, ignoring any transforms that apply to the element and its ancestors, and terminate this algorithm. -1. Return the result of subtracting the x-coordinate of the left padding edge of the first [=CSS/box=] associated with the {{HTMLElement/offsetParent}} of the element from the x-coordinate of the left border edge of the first [=CSS/box=] associated with the element, relative to the initial containing block origin, ignoring any transforms that apply to the element and its ancestors. +1. If the {{HTMLElement/offsetParent}} of the element is null return the x-coordinate of the left border edge of the first [=CSS/box=] associated with the element, relative to the initial containing block origin, ignoring any transforms or 'zoom' that apply to the element and its ancestors, and terminate this algorithm. +1. Return the result of subtracting the x-coordinate of the left padding edge of the first [=CSS/box=] associated with the {{HTMLElement/offsetParent}} of the element from the x-coordinate of the left border edge of the first [=CSS/box=] associated with the element, relative to the initial containing block origin, ignoring any transforms or 'zoom' that apply to the element and its ancestors. The offsetWidth attribute must return the result of running these steps: @@ -1568,7 +1570,7 @@ The offsetWidth attribute must return the r 1. Return the width of the axis-aligned bounding box of the [=border boxes=] of all fragments generated by the element's [=principal box=], - ignoring any transforms that apply to the element and its ancestors. + ignoring any transforms or 'zoom' that apply to the element and its ancestors. If the element's [=principal box=] is an [=inline-level box=] which was "split" by a [=block-level=] descendant, @@ -1581,7 +1583,7 @@ The offsetHeight attribute must return the 1. Return the height of the axis-aligned bounding box of the [=border boxes=] of all fragments generated by the element's [=principal box=], - ignoring any transforms that apply to the element and its ancestors. + ignoring any transforms or 'zoom' that apply to the element and its ancestors. If the element's [=principal box=] is an [=inline-level box=] which was "split" by a [=block-level=] descendant, @@ -1600,11 +1602,11 @@ partial interface HTMLImageElement { The x attribute, on getting, must return the x-coordinate of the left border edge of the first [=CSS/box=] associated with the element, relative to the initial containing block origin, ignoring any -transforms that apply to the element and its ancestors, or zero if there is no [=CSS/box=]. +transforms or 'zoom' that apply to the element and its ancestors, or zero if there is no [=CSS/box=]. The y attribute, on getting, must return the y-coordinate of the top border edge of the first [=CSS/box=] associated with the element, relative to the initial containing block origin, ignoring any -transforms that apply to the element and its ancestors, or zero if there is no [=CSS/box=]. +transforms or 'zoom' that apply to the element and its ancestors, or zero if there is no [=CSS/box=].

Extensions to the {{Range}} Interface

@@ -1629,7 +1631,7 @@ containing a list of {{DOMRect}} objects in content order that matches the follo a partial typographic character unit (e.g. half a surrogate pair or part of a grapheme cluster), the full typographic character unit must be included for the purpose of computing the bounds of the relevant {{DOMRect}}. [[!CSS-TEXT-3]] The - transforms that apply to the ancestors are applied. + transforms and 'zoom' that apply to the ancestors are applied. Note: The {{DOMRect}} objects returned by {{Range/getClientRects()}} are not live. From 120441e89cad08e7e7a5e0a253151cfd041d7ca7 Mon Sep 17 00:00:00 2001 From: Chris Harrelson Date: Thu, 4 Jan 2024 10:41:37 -0800 Subject: [PATCH 07/33] Fixes to formatting --- css-viewport/Overview.bs | 150 +++++++++++++++++++-------------------- cssom-view-1/Overview.bs | 3 +- 2 files changed, 77 insertions(+), 76 deletions(-) diff --git a/css-viewport/Overview.bs b/css-viewport/Overview.bs index ad209ced863..e2b32d5f74c 100644 --- a/css-viewport/Overview.bs +++ b/css-viewport/Overview.bs @@ -357,40 +357,39 @@ only the value previously set to it.

-The 'zoom' property

+ The 'zoom' property + -An element becomes zoomed when the 'zoom' property has a positive computed value -different than 1. 'zoom' affects computed property values and inherited -property values. The computed value of 'zoom' is applied as a scalar to -the used value <length>s CSS properties for the element and -its descendants (including inherited properties such as 'line-height' or -'font-size'), plus intrinsic sizing of -all replaced elements and nested frames, resulting in a magnification or -minification effect. +An element becomes zoomed when the 'zoom' property has a positive computed value different than 1. +'zoom' affects computed property values and inherited property values. +The computed value of 'zoom' is applied as a scalar to the used value of <> CSS properties for the element and its descendants +(including inherited properties such as 'line-height' or 'font-size'), +plus intrinsic sizing of all replaced elements and nested frames, +resulting in a magnification or minification effect. -Nested values of 'zoom' multiply, resulting in additional scaling -of <length> values. +Nested values of 'zoom' multiply, resulting in additional scaling of < values. -The 'zoom' property has no effect on <length> property values with -computed values that are ''auto'' or <percent>. +The 'zoom' property has no effect on <> property values with computed values that are ''auto'' or <>. -
Unlike 'transform', scaling the 'zoom' property affects -layout.
+
Unlike 'transform', +scaling the 'zoom' property affects layout.
-

The computed value of 'font-size' is never <percent> -thus 'zoom' always applies.

+

+The computed value of 'font-size' is never <>; +thus 'zoom' always applies. +

'zoom' does not affect or prevent 'transform' scaling.

-Name: zoom
-Value: <number>
-Initial: 1
-Applies to: all <length> property values of block-level elements
-Inherited: no
-Percentages: Refer to all <length> property values
-Media: visual
-Computed value: as specified
+	Name: zoom
+	Value: <>;
+	Initial: 1
+	Applies to: all <> property values of block-level elements
+	Inherited: no
+	Percentages: Refer to all <> property values
+	Media: visual
+	Computed value: as specified
The values of this property have the following meanings: @@ -398,14 +397,14 @@ The values of this property have the following meanings:
number
- Positive floating point number indicating a zoom factor. Numbers smaller - than 1.0 indicate a "zoom out" or minification effect, while numbers - greater than 1.0 indicate a "zoom in" or magnification effect. + Positive floating point number indicating a zoom factor. + Numbers smaller than 1.0 indicate a "zoom out" or minification effect, + while numbers greater than 1.0 indicate a "zoom in" or magnification effect. -
percent +
percent
- Positive floating point number, followed by a percentage character ("%") - which indicates a zoom factor multiplied by 100. + Positive floating point number, + followed by a percentage character ("%") which indicates a zoom factor multiplied by 100.
Negative or zero values for 'zoom' are illegal. @@ -413,59 +412,60 @@ Negative or zero values for 'zoom' are illegal.
Example of the 'zoom' property applied during hover for magnification effect. -
-<div class="messageBox">
-    <div class="label">Text of the label</div>
-</div>
-
-<style type="text/css">
-.messageBox {
-    width: 10em;
-    padding: 2em;
-    border: medium solid lightblue;
-}
-
-.messageBox:hover {
-    zoom: 150%;
-}
-
-.label {
-    background: lightgrey;
-    padding: 1em;
-    text-align: center;
-}
-</style>
-
+ 
+		<div class="messageBox">
+		    <div class="label">Text of the label</div>
+		</div>
+
+		<style type="text/css">
+		.messageBox {
+		    width: 10em;
+		    padding: 2em;
+		    border: medium solid lightblue;
+		}
+
+		.messageBox:hover {
+		    zoom: 150%;
+		}
+
+		.label {
+		    background: lightgrey;
+		    padding: 1em;
+		    text-align: center;
+		}
+		</style>
+
Illustration of the before and after hover state of the message box element.
-Example of nested zoom. In this example, "Inner text" is 4x as large as -"Outer text", and "Middle text" is 2x as large as "Outer text". - -
-<div style="zoom: 2">
-  Middle text
-	<div style="zoom: 2">
-	   Inner text
-	<div>
-<div>
-Outer text
-
+ Example of nested zoom. + In this example, "Inner text" is 4x as large as "Outer text", + and "Middle text" is 2x as large as "Outer text". + + 
+		<div style="zoom: 2">
+		  Middle text
+			<div style="zoom: 2">
+			   Inner text
+			<div>
+		<div>
+		Outer text
+
-Example of replaced elements. In this example, the image and iframe will -be twice as large as their default sizing. - -
-<div style="zoom: 2">
-	<img src="">
-	<iframe src="">
-<div>
-
+ Example of replaced elements. In this example, + the image and iframe will be twice as large as their default sizing. + + 
+	<div style="zoom: 2">
+		<img src="">
+		<iframe src="">
+	<div>
+
The effective zoom of an element is the product of its computed diff --git a/cssom-view-1/Overview.bs b/cssom-view-1/Overview.bs index dac52e6aea5..d9388622505 100644 --- a/cssom-view-1/Overview.bs +++ b/cssom-view-1/Overview.bs @@ -1548,7 +1548,8 @@ The offsetParent attribute must return the The offsetTop attribute must return the result of running these steps: 1. If the element is the body element or does not have any associated [=CSS/box=] return zero and terminate this algorithm. -1. If the {{HTMLElement/offsetParent}} of the element is null return the y-coordinate of the top border edge of the first [=CSS/box=] associated with the element, relative to the initial containing block origin, ignoring any transforms 'or zoom' that apply to the element and its ancestors, and terminate this algorithm. +1. If the {{HTMLElement/offsetParent}} of the element is null return the +[=unscaled=] y-coordinate of the top border edge of the first [=CSS/box=] associated with the element, relative to the initial containing block origin, ignoring any transformsthat apply to the element and its ancestors and terminate this algorithm. 1. Return the result of subtracting the y-coordinate of the top padding edge of the first [=CSS/box=] associated with the {{HTMLElement/offsetParent}} of the element from the y-coordinate of the top border edge From aa8c47851bb200a7f55b1e9d7f8d093096ee7aa0 Mon Sep 17 00:00:00 2001 From: Chris Harrelson Date: Thu, 4 Jan 2024 10:43:21 -0800 Subject: [PATCH 08/33] Fixes to formatting --- css-viewport/Overview.bs | 29 +++++++++++++++-------------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/css-viewport/Overview.bs b/css-viewport/Overview.bs index e2b32d5f74c..b6f5cccf436 100644 --- a/css-viewport/Overview.bs +++ b/css-viewport/Overview.bs @@ -477,31 +477,32 @@ in particular it includes zoom. The unscaled value of a CSS length relative to an element is the scaled value divided by the element's effective zoom. -
Zoom applied to an iframe multiplies all its CSS lengths -during layout, but is otherwise invisible to authors except via the observable -width and height of the viewport in CSS units, and via -{{Window/devicePixelRatio}}. In other words, the effective zoom of -elements in an iframe are 1 unless 'zoom' is set on them directly or their +
+ Zoom applied to an iframe multiplies all its CSS lengths during layout, + but is otherwise invisible to authors, + except via the observable width and height of the viewport in CSS units, + and via {{Window/devicePixelRatio}}. + In other words, the effective zoom of elements in an iframe are 1 unless 'zoom' is set on them directly or their ancestor in the same document.

- DOM and CSSOM interaction

+ DOM and CSSOM interaction + - Computed style APIs (i.e., all values returned by {{getComputedStyle()}}) that - are non-auto and non-percentage lengths must be unscaled. + Computed style APIs (i.e., all values returned by {{getComputedStyle()}}) + that are non-auto and non-percentage lengths must be unscaled. - The {{Element/getBoundingClientRect}}, {{Element/getClientRects}}, + The {{Element/getBoundingClientRect}}, + {{Element/getClientRects}}, and {{IntersectionObserver}} APIs must return rects with scaled lengths. - All other APIs related to element geometries must return unscaled - lengths. This is explained in detail in - [[cssom-view#extensions-to-the-htmlelement-interface]]. + All other APIs related to element geometries must return unscaled lengths. + This is explained in detail in [[cssom-view#extensions-to-the-htmlelement-interface]]. - The {{Window/devicePixelRatio}} of a frame is multiplied by the - effective zoom inherited by its parent frame. + The {{Window/devicePixelRatio}} of a frame is multiplied by the effective zoom inherited by its parent frame.

Appendix A. Changes

From abfba5536db21cef5be558d618e8e5b6a92767c3 Mon Sep 17 00:00:00 2001 From: Chris Harrelson Date: Thu, 4 Jan 2024 10:55:33 -0800 Subject: [PATCH 09/33] Replace 'or zoom' with 'unscaled' --- css-viewport/Overview.bs | 15 +++++++-------- cssom-view-1/Overview.bs | 32 ++++++++++++++++---------------- 2 files changed, 23 insertions(+), 24 deletions(-) diff --git a/css-viewport/Overview.bs b/css-viewport/Overview.bs index b6f5cccf436..f43e181640c 100644 --- a/css-viewport/Overview.bs +++ b/css-viewport/Overview.bs @@ -471,18 +471,17 @@ Negative or zero values for 'zoom' are illegal. The effective zoom of an element is the product of its computed value of 'zoom' and all ancestors' computed values of 'zoom'. -The scaled value of a CSS length is the used value of that length; +The scaled value of a CSS length is the used value of that length; in particular it includes zoom. -The unscaled value of a CSS length relative to an element is the -scaled value divided by the element's effective zoom. +The unscaled value of a CSS length relative to an element is the [=scaled=] value divided by the element's [=effective zoom=].
Zoom applied to an iframe multiplies all its CSS lengths during layout, but is otherwise invisible to authors, except via the observable width and height of the viewport in CSS units, and via {{Window/devicePixelRatio}}. - In other words, the effective zoom of elements in an iframe are 1 unless 'zoom' is set on them directly or their + In other words, the [=effective zoom=] of elements in an iframe are 1 unless 'zoom' is set on them directly or their ancestor in the same document.
@@ -491,18 +490,18 @@ ancestor in the same document. Computed style APIs (i.e., all values returned by {{getComputedStyle()}}) - that are non-auto and non-percentage lengths must be unscaled. + that are non-auto and non-percentage lengths must be [=unscaled=]. The {{Element/getBoundingClientRect}}, {{Element/getClientRects}}, - and {{IntersectionObserver}} APIs must return rects with scaled + and {{IntersectionObserver}} APIs must return rects with [=scaled=] lengths. - All other APIs related to element geometries must return unscaled lengths. + All other APIs related to element geometries must return [=unscaled=] lengths. This is explained in detail in [[cssom-view#extensions-to-the-htmlelement-interface]]. - The {{Window/devicePixelRatio}} of a frame is multiplied by the effective zoom inherited by its parent frame. + The {{Window/devicePixelRatio}} of a frame is multiplied by the [=effective zoom=] inherited by its parent frame.

Appendix A. Changes

diff --git a/cssom-view-1/Overview.bs b/cssom-view-1/Overview.bs index d9388622505..71a0413548c 100644 --- a/cssom-view-1/Overview.bs +++ b/cssom-view-1/Overview.bs @@ -1402,26 +1402,26 @@ The scrollHeight attribute must return the resu The clientTop attribute must run these steps: 1. If the element has no associated [=CSS/box=] or if the [=CSS/box=] is inline, return zero. -1. Return the computed value of the 'border-top-width' property plus the height of any scrollbar rendered between the top padding edge and the top border edge, ignoring any transforms or 'zoom' that apply to the element and +1. Return the unscaled computed value of the 'border-top-width' property plus the height of any scrollbar rendered between the top padding edge and the top border edge, ignoring any transforms that apply to the element and its ancestors. The clientLeft attribute must run these steps: 1. If the element has no associated [=CSS/box=] or if the [=CSS/box=] is inline, return zero. -1. Return the computed value of the 'border-left-width' property plus the width of any scrollbar rendered between the left padding edge and the left border edge, ignoring any transforms or 'zoom' that apply to the element and +1. Return the unscaled computed value of the 'border-left-width' property plus the width of any scrollbar rendered between the left padding edge and the left border edge, ignoring any transforms that apply to the element and its ancestors. The clientWidth attribute must run these steps: 1. If the element has no associated [=CSS/box=] or if the [=CSS/box=] is inline, return zero. 1. If the element is the [=root element=] and the element's node document is not in quirks mode, or if the element is the body element and the element's node document is in quirks mode, return the viewport width excluding the size of a rendered scroll bar (if any). -1. Return the width of the padding edge excluding the width of any rendered scrollbar between the padding edge and the border edge, ignoring any transforms or 'zoom' that apply to the element and its ancestors. +1. Return the unscaled width of the padding edge excluding the width of any rendered scrollbar between the padding edge and the border edge, ignoring any transforms or that apply to the element and its ancestors. The clientHeight attribute must run these steps: 1. If the element has no associated [=CSS/box=] or if the [=CSS/box=] is inline, return zero. 1. If the element is the [=root element=] and the element's node document is not in quirks mode, or if the element is the body element and the element's node document is in quirks mode, return the viewport height excluding the size of a rendered scroll bar (if any). -1. Return the height of the padding edge excluding the height of any rendered scrollbar between the padding edge and the border edge, ignoring any transforms or 'zoom' that apply to the element and its ancestors. +1. Return the unscaled height of the padding edge excluding the height of any rendered scrollbar between the padding edge and the border edge, ignoring any transforms that apply to the element and its ancestors.

{{Element}} Scrolling Members

@@ -1550,28 +1550,28 @@ The offsetTop attribute must return the res 1. If the element is the body element or does not have any associated [=CSS/box=] return zero and terminate this algorithm. 1. If the {{HTMLElement/offsetParent}} of the element is null return the [=unscaled=] y-coordinate of the top border edge of the first [=CSS/box=] associated with the element, relative to the initial containing block origin, ignoring any transformsthat apply to the element and its ancestors and terminate this algorithm. -1. Return the result of subtracting the y-coordinate of the top padding edge +1. Return the [=unscaled=] result of subtracting the y-coordinate of the top padding edge of the first [=CSS/box=] associated with the {{HTMLElement/offsetParent}} of the element from the y-coordinate of the top border edge of the first [=CSS/box=] associated with the element, relative to the initial containing block origin, - ignoring any transforms or 'zoom' that apply to the element and its ancestors. + ignoring any transforms that apply to the element and its ancestors. Note: An inline element that consists of multiple line boxes will only have its first [=CSS/box=] considered. The offsetLeft attribute must return the result of running these steps: 1. If the element is the body element or does not have any associated [=CSS/box=] return zero and terminate this algorithm. -1. If the {{HTMLElement/offsetParent}} of the element is null return the x-coordinate of the left border edge of the first [=CSS/box=] associated with the element, relative to the initial containing block origin, ignoring any transforms or 'zoom' that apply to the element and its ancestors, and terminate this algorithm. -1. Return the result of subtracting the x-coordinate of the left padding edge of the first [=CSS/box=] associated with the {{HTMLElement/offsetParent}} of the element from the x-coordinate of the left border edge of the first [=CSS/box=] associated with the element, relative to the initial containing block origin, ignoring any transforms or 'zoom' that apply to the element and its ancestors. +1. If the {{HTMLElement/offsetParent}} of the element is null return the [=unscaled=] x-coordinate of the left border edge of the first [=CSS/box=] associated with the element, relative to the initial containing block origin, ignoring any transforms that apply to the element and its ancestors, and terminate this algorithm. +1. Return the [=unscaled=] result of subtracting the x-coordinate of the left padding edge of the first [=CSS/box=] associated with the {{HTMLElement/offsetParent}} of the element from the x-coordinate of the left border edge of the first [=CSS/box=] associated with the element, relative to the initial containing block origin, ignoring any transforms that apply to the element and its ancestors. The offsetWidth attribute must return the result of running these steps: 1. If the element does not have any associated [=CSS/box=] return zero and terminate this algorithm. -1. Return the width of the axis-aligned bounding box +1. Return the [=unscaled=] width of the axis-aligned bounding box of the [=border boxes=] of all fragments generated by the element's [=principal box=], - ignoring any transforms or 'zoom' that apply to the element and its ancestors. + ignoring any transforms that apply to the element and its ancestors. If the element's [=principal box=] is an [=inline-level box=] which was "split" by a [=block-level=] descendant, @@ -1581,10 +1581,10 @@ The offsetWidth attribute must return the r The offsetHeight attribute must return the result of running these steps: 1. If the element does not have any associated [=CSS/box=] return zero and terminate this algorithm. -1. Return the height of the axis-aligned bounding box +1. Return the [=unscaled=] height of the axis-aligned bounding box of the [=border boxes=] of all fragments generated by the element's [=principal box=], - ignoring any transforms or 'zoom' that apply to the element and its ancestors. + ignoring any transforms that apply to the element and its ancestors. If the element's [=principal box=] is an [=inline-level box=] which was "split" by a [=block-level=] descendant, @@ -1601,13 +1601,13 @@ partial interface HTMLImageElement { }; -The x attribute, on getting, must return the x-coordinate of the left border edge of the +The x attribute, on getting, must return the [=unscaled=] x-coordinate of the left border edge of the first [=CSS/box=] associated with the element, relative to the initial containing block origin, ignoring any -transforms or 'zoom' that apply to the element and its ancestors, or zero if there is no [=CSS/box=]. +transforms that apply to the element and its ancestors, or zero if there is no [=CSS/box=]. -The y attribute, on getting, must return the y-coordinate of the top border edge of the +The y attribute, on getting, must return the [=unscaled=] y-coordinate of the top border edge of the first [=CSS/box=] associated with the element, relative to the initial containing block origin, ignoring any -transforms or 'zoom' that apply to the element and its ancestors, or zero if there is no [=CSS/box=]. +transforms that apply to the element and its ancestors, or zero if there is no [=CSS/box=].

Extensions to the {{Range}} Interface

From 11ee8976a891b2dc6d711bc3120ab3e2604b95ba Mon Sep 17 00:00:00 2001 From: Chris Harrelson Date: Thu, 4 Jan 2024 11:07:53 -0800 Subject: [PATCH 10/33] Fix formatting and add alt text --- css-viewport/Overview.bs | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/css-viewport/Overview.bs b/css-viewport/Overview.bs index f43e181640c..c7e96e7421b 100644 --- a/css-viewport/Overview.bs +++ b/css-viewport/Overview.bs @@ -383,7 +383,7 @@ thus 'zoom' always applies. 
 	Name: zoom
-	Value: <>;
+	Value: <>
 	Initial: 1
 	Applies to: all <> property values of block-level elements
 	Inherited: no
@@ -394,14 +394,14 @@ thus 'zoom' always applies.
 
 The values of this property have the following meanings:
 
-

-  
number
+

+  
>
   

     Positive floating point number indicating a zoom factor.
     Numbers smaller than 1.0 indicate a "zoom out" or minification effect,
     while numbers greater than 1.0 indicate a "zoom in" or magnification effect.
 
-  
percent
+  
>
   

     Positive floating point number,
     followed by a percentage character ("%") which indicates a zoom factor multiplied by 100.
@@ -436,8 +436,9 @@ Negative or zero values for 'zoom' are illegal.
 		</style>
- Illustration of the before and after hover state of the message box element. - + Here is an llustration of the before and after hover state of the message box element: + Two images, + showing the zooming effect before and after zoom has applied. The second is 1.5 larger.
From 5c144b68e2dd0e0e2752d52b29b41f01ed508283 Mon Sep 17 00:00:00 2001 From: Chris Harrelson Date: Thu, 4 Jan 2024 11:11:10 -0800 Subject: [PATCH 11/33] Shorten notes --- css-viewport/Overview.bs | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/css-viewport/Overview.bs b/css-viewport/Overview.bs index c7e96e7421b..acf70e1b811 100644 --- a/css-viewport/Overview.bs +++ b/css-viewport/Overview.bs @@ -371,15 +371,13 @@ Nested values of 'zoom' multiply, resulting in additional scaling of < v The 'zoom' property has no effect on <> property values with computed values that are ''auto'' or <>. -
Unlike 'transform', -scaling the 'zoom' property affects layout.
+Note: Unlike 'transform', +scaling the 'zoom' property affects layout. -

-The computed value of 'font-size' is never <>; +Note: The computed value of 'font-size' is never <>; thus 'zoom' always applies. -

-

'zoom' does not affect or prevent 'transform' scaling.

+Note: 'zoom' does not affect or prevent 'transform' scaling. 
 	Name: zoom

From ec234eac8b7a6fa80a85af8222c7854af250363c Mon Sep 17 00:00:00 2001
From: Chris Harrelson 
Date: Thu, 4 Jan 2024 11:11:56 -0800
Subject: [PATCH 12/33] Shorten heading

---
 css-viewport/Overview.bs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/css-viewport/Overview.bs b/css-viewport/Overview.bs
index acf70e1b811..3dfaa5c2e12 100644
--- a/css-viewport/Overview.bs
+++ b/css-viewport/Overview.bs
@@ -484,7 +484,7 @@ The unscaled value of a CSS length relative to an element is t
 ancestor in the same document.
-

+

DOM and CSSOM interaction

From 2fdbf3520fe573431cd7bc9649cd1d900e3ced7d Mon Sep 17 00:00:00 2001 From: Chris Harrelson Date: Thu, 4 Jan 2024 11:15:29 -0800 Subject: [PATCH 13/33] Add background images --- css-viewport/Overview.bs | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/css-viewport/Overview.bs b/css-viewport/Overview.bs index 3dfaa5c2e12..6bc5332c673 100644 --- a/css-viewport/Overview.bs +++ b/css-viewport/Overview.bs @@ -364,7 +364,9 @@ An element becomes zoomed when the 'zoom' property has a positive computed value 'zoom' affects computed property values and inherited property values. The computed value of 'zoom' is applied as a scalar to the used value of <> CSS properties for the element and its descendants (including inherited properties such as 'line-height' or 'font-size'), -plus intrinsic sizing of all replaced elements and nested frames, +plus intrinsic sizing of all replaced elements, +background images, +and nested frames, resulting in a magnification or minification effect. Nested values of 'zoom' multiply, resulting in additional scaling of < values. From 56a6b7de2f85ba2de36218efadfc722f32daa0b3 Mon Sep 17 00:00:00 2001 From: Chris Harrelson Date: Thu, 4 Jan 2024 11:37:48 -0800 Subject: [PATCH 14/33] Omit fenced frames; clarify note about iframes --- css-viewport/Overview.bs | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/css-viewport/Overview.bs b/css-viewport/Overview.bs index 6bc5332c673..0f9bc2622cd 100644 --- a/css-viewport/Overview.bs +++ b/css-viewport/Overview.bs @@ -23,6 +23,8 @@ Ignored Vars: spec: virtual-keyboard; urlPrefix: https://w3c.github.io/virtual-keyboard type: interface; text: VirtualKeyboard; url: dom-virtualkeyboard type: attribute; text: overlaysContent; for: VirtualKeyboard; url: dom-virtualkeyboard-overlayscontent + +spec: fenced-frames: urlPrefix: https://wicg.github.io/fenced-frame/ @@ -366,7 +368,7 @@ The computed value of 'zoom' is applied as a scalar to the used value of < values. @@ -478,12 +480,7 @@ in particular it includes zoom. The unscaled value of a CSS length relative to an element is the [=scaled=] value divided by the element's [=effective zoom=].
- Zoom applied to an iframe multiplies all its CSS lengths during layout, - but is otherwise invisible to authors, - except via the observable width and height of the viewport in CSS units, - and via {{Window/devicePixelRatio}}. - In other words, the [=effective zoom=] of elements in an iframe are 1 unless 'zoom' is set on them directly or their -ancestor in the same document. + The effective zoom of an element in a nested frame may be a value other than 1 even if 'zoom' is never set on an element in that frame. This can be observed by authors via APIs such as {{Window/devicePixelRatio}} and {{Element/getBoundingClientRect}}.

From bf27c4b03a9035aae61fd658681f38dadcbe0b6e Mon Sep 17 00:00:00 2001 From: Chris Harrelson Date: Thu, 4 Jan 2024 11:40:52 -0800 Subject: [PATCH 15/33] Fix spec reference type --- css-viewport/Overview.bs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css-viewport/Overview.bs b/css-viewport/Overview.bs index 0f9bc2622cd..357e14d844c 100644 --- a/css-viewport/Overview.bs +++ b/css-viewport/Overview.bs @@ -25,9 +25,9 @@ spec: virtual-keyboard; urlPrefix: https://w3c.github.io/virtual-keyboard type: attribute; text: overlaysContent; for: VirtualKeyboard; url: dom-virtualkeyboard-overlayscontent spec: fenced-frames: urlPrefix: https://wicg.github.io/fenced-frame/ + type: interface -

Introduction

@@ -371,7 +371,7 @@ background images, and nested frames (except for fenced frames [[!FENCED-FRAME]]), resulting in a magnification or minification effect. -Nested values of 'zoom' multiply, resulting in additional scaling of < values. +Nested values of 'zoom' multiply, resulting in additional scaling of <> values. The 'zoom' property has no effect on <> property values with computed values that are ''auto'' or <>. From 0ba0eed89692f9c44f156eca3a8b1250a4012ead Mon Sep 17 00:00:00 2001 From: Chris Harrelson Date: Thu, 4 Jan 2024 11:45:27 -0800 Subject: [PATCH 16/33] Fix spaces and tabs --- css-viewport/Overview.bs | 52 +++++++++++++++++++--------------------- 1 file changed, 25 insertions(+), 27 deletions(-) diff --git a/css-viewport/Overview.bs b/css-viewport/Overview.bs index 357e14d844c..bc6cbf62f53 100644 --- a/css-viewport/Overview.bs +++ b/css-viewport/Overview.bs @@ -25,7 +25,7 @@ spec: virtual-keyboard; urlPrefix: https://w3c.github.io/virtual-keyboard type: attribute; text: overlaysContent; for: VirtualKeyboard; url: dom-virtualkeyboard-overlayscontent spec: fenced-frames: urlPrefix: https://wicg.github.io/fenced-frame/ - type: interface + type: interface

@@ -397,26 +397,26 @@ Note: 'zoom' does not affect or prevent 'transform' scaling. The values of this property have the following meanings:
-
> -
- Positive floating point number indicating a zoom factor. - Numbers smaller than 1.0 indicate a "zoom out" or minification effect, - while numbers greater than 1.0 indicate a "zoom in" or magnification effect. - -
> -
- Positive floating point number, - followed by a percentage character ("%") which indicates a zoom factor multiplied by 100. +
<> +
+ Positive floating point number indicating a zoom factor. + Numbers smaller than 1.0 indicate a "zoom out" or minification effect, + while numbers greater than 1.0 indicate a "zoom in" or magnification effect. + +
<> +
+ Positive floating point number, + followed by a percentage character ("%") which indicates a zoom factor multiplied by 100.
Negative or zero values for 'zoom' are illegal.
- Example of the 'zoom' property applied during hover for magnification effect. + Example of the 'zoom' property applied during hover for magnification effect. 
 		<div class="messageBox">
-		    <div class="label">Text of the label</div>
+			<div class="label">Text of the label</div>
 		</div>
 
 		<style type="text/css">
@@ -438,9 +438,9 @@ Negative or zero values for 'zoom' are illegal.
 		</style>
- Here is an llustration of the before and after hover state of the message box element: - Two images, - showing the zooming effect before and after zoom has applied. The second is 1.5 larger. + Here is an llustration of the before and after hover state of the message box element: + Two images, + showing the zooming effect before and after zoom has applied. The second is 1.5 larger.
@@ -484,22 +484,20 @@ The unscaled value of a CSS length relative to an element is t

- DOM and CSSOM interaction + DOM and CSSOM interaction

- Computed style APIs (i.e., all values returned by {{getComputedStyle()}}) - that are non-auto and non-percentage lengths must be [=unscaled=]. + Computed style APIs (i.e., all values returned by {{getComputedStyle()}}) that are non-auto and non-percentage lengths must be [=unscaled=]. - The {{Element/getBoundingClientRect}}, - {{Element/getClientRects}}, - and {{IntersectionObserver}} APIs must return rects with [=scaled=] - lengths. + The {{Element/getBoundingClientRect}}, + {{Element/getClientRects}}, + and {{IntersectionObserver}} APIs must return rects with [=scaled=] + lengths. - All other APIs related to element geometries must return [=unscaled=] lengths. - This is explained in detail in [[cssom-view#extensions-to-the-htmlelement-interface]]. + All other APIs related to element geometries must return [=unscaled=] lengths. + This is explained in detail in [[cssom-view#extensions-to-the-htmlelement-interface]]. - - The {{Window/devicePixelRatio}} of a frame is multiplied by the [=effective zoom=] inherited by its parent frame. + The {{Window/devicePixelRatio}} of a frame is multiplied by the [=effective zoom=] inherited by its parent frame.

Appendix A. Changes

From 78a456cf52fae7426c43970a874d20e7dbf5a4d4 Mon Sep 17 00:00:00 2001 From: Chris Harrelson Date: Thu, 4 Jan 2024 11:55:00 -0800 Subject: [PATCH 17/33] Fix some lint issues --- css-contain-2/Overview.bs | 2 +- css-viewport/Overview.bs | 9 ++++++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/css-contain-2/Overview.bs b/css-contain-2/Overview.bs index 5da4b97a400..de90e462b2c 100644 --- a/css-contain-2/Overview.bs +++ b/css-contain-2/Overview.bs @@ -154,7 +154,7 @@ Strong Containment: the 'contain' property contain-strict-001.html - contain-strict-002.html + contain-strict-002.htmlp contain-strict-003.html contain-strict-011.html contain-flexbox-outline.html diff --git a/css-viewport/Overview.bs b/css-viewport/Overview.bs index bc6cbf62f53..eae6c57cfb2 100644 --- a/css-viewport/Overview.bs +++ b/css-viewport/Overview.bs @@ -23,9 +23,11 @@ Ignored Vars: spec: virtual-keyboard; urlPrefix: https://w3c.github.io/virtual-keyboard type: interface; text: VirtualKeyboard; url: dom-virtualkeyboard type: attribute; text: overlaysContent; for: VirtualKeyboard; url: dom-virtualkeyboard-overlayscontent + -spec: fenced-frames: urlPrefix: https://wicg.github.io/fenced-frame/ - type: interface +
+spec: fenced-frames; urlPrefix: https://wicg.github.io/fenced-frame/
+	type: interface; text: FencedFrames

@@ -373,7 +375,7 @@ resulting in a magnification or minification effect. Nested values of 'zoom' multiply, resulting in additional scaling of <> values. -The 'zoom' property has no effect on <> property values with computed values that are ''auto'' or <>. +The 'zoom' property has no effect on <> property values with computed values that are 'auto' or <>. Note: Unlike 'transform', scaling the 'zoom' property affects layout. @@ -392,6 +394,7 @@ Note: 'zoom' does not affect or prevent 'transform' scaling. Percentages: Refer to all <> property values Media: visual Computed value: as specified + Animation type: not animatable The values of this property have the following meanings: From 7b4e3d34be7ddc4d773fb53669b5dd30d4343600 Mon Sep 17 00:00:00 2001 From: Chris Harrelson Date: Thu, 4 Jan 2024 11:55:30 -0800 Subject: [PATCH 18/33] Remove stray character --- css-contain-2/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-contain-2/Overview.bs b/css-contain-2/Overview.bs index de90e462b2c..5da4b97a400 100644 --- a/css-contain-2/Overview.bs +++ b/css-contain-2/Overview.bs @@ -154,7 +154,7 @@ Strong Containment: the 'contain' property

contain-strict-001.html - contain-strict-002.htmlp + contain-strict-002.html contain-strict-003.html contain-strict-011.html contain-flexbox-outline.html From 9471f9d7ac80a04545b4d3401af48f5f96bad35a Mon Sep 17 00:00:00 2001 From: Chris Harrelson Date: Thu, 4 Jan 2024 11:57:53 -0800 Subject: [PATCH 19/33] Remove more 'and zoom' --- cssom-view-1/Overview.bs | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/cssom-view-1/Overview.bs b/cssom-view-1/Overview.bs index 71a0413548c..02ac7712c68 100644 --- a/cssom-view-1/Overview.bs +++ b/cssom-view-1/Overview.bs @@ -1141,9 +1141,9 @@ aborting on the first step that returns a value: 1. Return the {{DOMRect}} object in list at index 0. 1. If caret node is a text entry widget that is a replaced element, and that is in the document, - return a {{DOMRect}} object for the caret in the widget + return an [=unscaled=] {{DOMRect}} object for the caret in the widget as represented by the caret offset value. - The transforms and 'zoom' that apply to the element and its ancestors are applied. + The transforms that apply to the element and its ancestors are applied. 1. Return null. Note: This {{DOMRect}} object is not live. @@ -1190,8 +1190,7 @@ partial interface Element { The getClientRects() method, when invoked, must return the result of the following algorithm: 1. If the element on which it was invoked does not have an associated [=CSS/box=] return an empty {{DOMRectList}} object and stop this algorithm. -1. If the element has an associated SVG layout box return a {{DOMRectList}} object containing a single {{DOMRect}} object that describes the bounding box of the element as defined by the SVG specification, applying the transforms -and 'zoom' that apply to the element and its ancestors. +1. If the element has an associated SVG layout box return an [=unscaled=] {{DOMRectList}} object containing a single {{DOMRect}} object that describes the bounding box of the element as defined by the SVG specification, applying the transforms that apply to the element and its ancestors. 1. Return a {{DOMRectList}} object containing {{DOMRect}} objects in content order, one for each box fragment, describing its border area (including those with a height or width of zero) with the following constraints: * Apply the transforms that apply to the element and its ancestors. @@ -1625,14 +1624,14 @@ containing a list of {{DOMRect}} objects in content order that matches the follo * For each element selected by the range, whose parent is not selected by the range, include the border areas returned by invoking {{Element/getClientRects()}} on the element. * For each {{Text}} node selected or partially selected by the range (including when the - boundary-points are identical), include a {{DOMRect}} object (for the part that is selected, not + boundary-points are identical), include an [=unscaled=] {{DOMRect}} object (for the part that is selected, not the whole line box). The bounds of these {{DOMRect}} objects are computed using font metrics; thus, for horizontal writing, the vertical dimension of each box is determined by the font ascent and descent, and the horizontal dimension by the text advance width. If the range covers a partial typographic character unit (e.g. half a surrogate pair or part of a grapheme cluster), the full typographic character unit must be included for the purpose of computing the bounds of the relevant {{DOMRect}}. [[!CSS-TEXT-3]] The - transforms and 'zoom' that apply to the ancestors are applied. + transforms that apply to the ancestors are applied. Note: The {{DOMRect}} objects returned by {{Range/getClientRects()}} are not live. From 665e58868d2821004f092d086bb409da94a2b148 Mon Sep 17 00:00:00 2001 From: Chris Harrelson Date: Thu, 4 Jan 2024 11:59:00 -0800 Subject: [PATCH 20/33] fix unscaled --- cssom-view-1/Overview.bs | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/cssom-view-1/Overview.bs b/cssom-view-1/Overview.bs index 02ac7712c68..7a1593a2dab 100644 --- a/cssom-view-1/Overview.bs +++ b/cssom-view-1/Overview.bs @@ -1401,26 +1401,26 @@ The scrollHeight attribute must return the resu The clientTop attribute must run these steps: 1. If the element has no associated [=CSS/box=] or if the [=CSS/box=] is inline, return zero. -1. Return the unscaled computed value of the 'border-top-width' property plus the height of any scrollbar rendered between the top padding edge and the top border edge, ignoring any transforms that apply to the element and +1. Return the [=unscaled=] computed value of the 'border-top-width' property plus the height of any scrollbar rendered between the top padding edge and the top border edge, ignoring any transforms that apply to the element and its ancestors. The clientLeft attribute must run these steps: 1. If the element has no associated [=CSS/box=] or if the [=CSS/box=] is inline, return zero. -1. Return the unscaled computed value of the 'border-left-width' property plus the width of any scrollbar rendered between the left padding edge and the left border edge, ignoring any transforms that apply to the element and +1. Return the [=unscaled=] computed value of the 'border-left-width' property plus the width of any scrollbar rendered between the left padding edge and the left border edge, ignoring any transforms that apply to the element and its ancestors. The clientWidth attribute must run these steps: 1. If the element has no associated [=CSS/box=] or if the [=CSS/box=] is inline, return zero. 1. If the element is the [=root element=] and the element's node document is not in quirks mode, or if the element is the body element and the element's node document is in quirks mode, return the viewport width excluding the size of a rendered scroll bar (if any). -1. Return the unscaled width of the padding edge excluding the width of any rendered scrollbar between the padding edge and the border edge, ignoring any transforms or that apply to the element and its ancestors. +1. Return the [=unscaled=] width of the padding edge excluding the width of any rendered scrollbar between the padding edge and the border edge, ignoring any transforms or that apply to the element and its ancestors. The clientHeight attribute must run these steps: 1. If the element has no associated [=CSS/box=] or if the [=CSS/box=] is inline, return zero. 1. If the element is the [=root element=] and the element's node document is not in quirks mode, or if the element is the body element and the element's node document is in quirks mode, return the viewport height excluding the size of a rendered scroll bar (if any). -1. Return the unscaled height of the padding edge excluding the height of any rendered scrollbar between the padding edge and the border edge, ignoring any transforms that apply to the element and its ancestors. +1. Return the [=unscaled=] height of the padding edge excluding the height of any rendered scrollbar between the padding edge and the border edge, ignoring any transforms that apply to the element and its ancestors.

{{Element}} Scrolling Members

From 742955c222384aecb5a5e09b5455debcb3c1e486 Mon Sep 17 00:00:00 2001 From: Chris Harrelson Date: Thu, 4 Jan 2024 12:03:10 -0800 Subject: [PATCH 21/33] Fix newlines --- cssom-view-1/Overview.bs | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/cssom-view-1/Overview.bs b/cssom-view-1/Overview.bs index 7a1593a2dab..74e0dd2da0c 100644 --- a/cssom-view-1/Overview.bs +++ b/cssom-view-1/Overview.bs @@ -1401,14 +1401,12 @@ The scrollHeight attribute must return the resu The clientTop attribute must run these steps: 1. If the element has no associated [=CSS/box=] or if the [=CSS/box=] is inline, return zero. -1. Return the [=unscaled=] computed value of the 'border-top-width' property plus the height of any scrollbar rendered between the top padding edge and the top border edge, ignoring any transforms that apply to the element and -its ancestors. +1. Return the [=unscaled=] computed value of the 'border-top-width' property plus the height of any scrollbar rendered between the top padding edge and the top border edge, ignoring any transforms that apply to the element and its ancestors. The clientLeft attribute must run these steps: 1. If the element has no associated [=CSS/box=] or if the [=CSS/box=] is inline, return zero. -1. Return the [=unscaled=] computed value of the 'border-left-width' property plus the width of any scrollbar rendered between the left padding edge and the left border edge, ignoring any transforms that apply to the element and -its ancestors. +1. Return the [=unscaled=] computed value of the 'border-left-width' property plus the width of any scrollbar rendered between the left padding edge and the left border edge, ignoring any transforms that apply to the element and its ancestors. The clientWidth attribute must run these steps: @@ -1547,8 +1545,7 @@ The offsetParent attribute must return the The offsetTop attribute must return the result of running these steps: 1. If the element is the body element or does not have any associated [=CSS/box=] return zero and terminate this algorithm. -1. If the {{HTMLElement/offsetParent}} of the element is null return the -[=unscaled=] y-coordinate of the top border edge of the first [=CSS/box=] associated with the element, relative to the initial containing block origin, ignoring any transformsthat apply to the element and its ancestors and terminate this algorithm. +1. If the {{HTMLElement/offsetParent}} of the element is null return the [=unscaled=] y-coordinate of the top border edge of the first [=CSS/box=] associated with the element, relative to the initial containing block origin, ignoring any transformsthat apply to the element and its ancestors and terminate this algorithm. 1. Return the [=unscaled=] result of subtracting the y-coordinate of the top padding edge of the first [=CSS/box=] associated with the {{HTMLElement/offsetParent}} of the element from the y-coordinate of the top border edge From a7612a6ee322176b987a60eb4bcdd8d2c0ee4880 Mon Sep 17 00:00:00 2001 From: Chris Harrelson Date: Wed, 10 Jan 2024 08:09:20 -0800 Subject: [PATCH 22/33] Special-case 0 and 0% --- css-viewport/Overview.bs | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/css-viewport/Overview.bs b/css-viewport/Overview.bs index eae6c57cfb2..98d1d81bbdc 100644 --- a/css-viewport/Overview.bs +++ b/css-viewport/Overview.bs @@ -405,14 +405,16 @@ The values of this property have the following meanings: Positive floating point number indicating a zoom factor. Numbers smaller than 1.0 indicate a "zoom out" or minification effect, while numbers greater than 1.0 indicate a "zoom in" or magnification effect. + A 0 value is treated as if it was 1.
<>
Positive floating point number, followed by a percentage character ("%") which indicates a zoom factor multiplied by 100. + A 0 percentage is treated as if it was 100%. -Negative or zero values for 'zoom' are illegal. +Negative values for 'zoom' are illegal.
Example of the 'zoom' property applied during hover for magnification effect. From 9fa4adf62c94f0a41226c7b29a18659693eb1849 Mon Sep 17 00:00:00 2001 From: Chris Harrelson Date: Fri, 12 Jan 2024 09:13:54 -0800 Subject: [PATCH 23/33] HTMLImageElement.{x,y} should be scaled --- cssom-view-1/Overview.bs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/cssom-view-1/Overview.bs b/cssom-view-1/Overview.bs index 74e0dd2da0c..8e70f1d0bf0 100644 --- a/cssom-view-1/Overview.bs +++ b/cssom-view-1/Overview.bs @@ -1597,11 +1597,11 @@ partial interface HTMLImageElement { }; -The x attribute, on getting, must return the [=unscaled=] x-coordinate of the left border edge of the +The x attribute, on getting, must return the [=scaled=] x-coordinate of the left border edge of the first [=CSS/box=] associated with the element, relative to the initial containing block origin, ignoring any transforms that apply to the element and its ancestors, or zero if there is no [=CSS/box=]. -The y attribute, on getting, must return the [=unscaled=] y-coordinate of the top border edge of the +The y attribute, on getting, must return the [=scaled=] y-coordinate of the top border edge of the first [=CSS/box=] associated with the element, relative to the initial containing block origin, ignoring any transforms that apply to the element and its ancestors, or zero if there is no [=CSS/box=]. From 65cfc7db978417c1b74175f0c5f7f81af2666caa Mon Sep 17 00:00:00 2001 From: Chris Harrelson Date: Tue, 16 Jan 2024 20:58:37 -0800 Subject: [PATCH 24/33] Address code review feedback --- css-viewport/Overview.bs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css-viewport/Overview.bs b/css-viewport/Overview.bs index 98d1d81bbdc..5dab5360fa9 100644 --- a/css-viewport/Overview.bs +++ b/css-viewport/Overview.bs @@ -387,7 +387,7 @@ Note: 'zoom' does not affect or prevent 'transform' scaling. 
 	Name: zoom
-	Value: <>
+	Value: <> || <>
 	Initial: 1
 	Applies to: all <> property values of block-level elements
 	Inherited: no
@@ -424,7 +424,7 @@ Negative values for 'zoom' are illegal.
 			<div class="label">Text of the label</div>
 		</div>
 
-		<style type="text/css">
+		<style>
 		.messageBox {
 		    width: 10em;
 		    padding: 2em;

From 51a2dfcbb686dc7c4f6efb3a9afa0b2a5a5a4c38 Mon Sep 17 00:00:00 2001
From: Chris Harrelson 
Date: Wed, 17 Jan 2024 10:40:23 -0800
Subject: [PATCH 25/33] Address code review comments

---
 css-viewport/Overview.bs | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/css-viewport/Overview.bs b/css-viewport/Overview.bs
index 5dab5360fa9..f45a1573caa 100644
--- a/css-viewport/Overview.bs
+++ b/css-viewport/Overview.bs
@@ -389,11 +389,11 @@ Note: 'zoom' does not affect or prevent 'transform' scaling.
 	Name: zoom
 	Value: <> || <>
 	Initial: 1
-	Applies to: all <> property values of block-level elements
+	Applies to: all <> property values of all elements
 	Inherited: no
-	Percentages: Refer to all <> property values
+	Percentages: Converted to <>
 	Media: visual
-	Computed value: as specified
+	Computed value: as specified, but with <> converted to the equivalent <>
 	Animation type: not animatable
@@ -470,8 +470,8 @@ Negative values for 'zoom' are illegal. 
 	<div style="zoom: 2">
-		<img src="">
-		<iframe src="">
+		<img src="...">
+		<iframe src="..."></iframe>
 	<div>
From 75ba05bdcdfbccf2adb07f5734b39a64235cc485 Mon Sep 17 00:00:00 2001 From: Chris Harrelson Date: Wed, 17 Jan 2024 11:14:33 -0800 Subject: [PATCH 26/33] Fix flat tree --- css-viewport/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-viewport/Overview.bs b/css-viewport/Overview.bs index f45a1573caa..d341e87d058 100644 --- a/css-viewport/Overview.bs +++ b/css-viewport/Overview.bs @@ -364,7 +364,7 @@ only the value previously set to it. The 'zoom' property -An element becomes zoomed when the 'zoom' property has a positive computed value different than 1. +An element becomes zoomed when the 'zoom' property has a positive computed value different than 1 (or when a flat tree ancestor has zoom). 'zoom' affects computed property values and inherited property values. The computed value of 'zoom' is applied as a scalar to the used value of <> CSS properties for the element and its descendants (including inherited properties such as 'line-height' or 'font-size'), From 3729a022f4ff9e1326b281f18782f868c48db592 Mon Sep 17 00:00:00 2001 From: Chris Harrelson Date: Wed, 17 Jan 2024 11:16:57 -0800 Subject: [PATCH 27/33] Add notes about web compat --- css-viewport/Overview.bs | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/css-viewport/Overview.bs b/css-viewport/Overview.bs index d341e87d058..60470c6182c 100644 --- a/css-viewport/Overview.bs +++ b/css-viewport/Overview.bs @@ -407,11 +407,16 @@ The values of this property have the following meanings: while numbers greater than 1.0 indicate a "zoom in" or magnification effect. A 0 value is treated as if it was 1. + Note: The treatment of 0 is a web compatibility quirk. +
<>
Positive floating point number, followed by a percentage character ("%") which indicates a zoom factor multiplied by 100. A 0 percentage is treated as if it was 100%. + + Note: The treatment of 0 is a web compatibility quirk. + Negative values for 'zoom' are illegal. From 8cce793ef09164422f7248e46abcdb3d73fd183e Mon Sep 17 00:00:00 2001 From: Chris Harrelson Date: Wed, 17 Jan 2024 11:19:23 -0800 Subject: [PATCH 28/33] Fix references that should say 'scaled' --- cssom-view-1/Overview.bs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/cssom-view-1/Overview.bs b/cssom-view-1/Overview.bs index 8e70f1d0bf0..5f31f1e4c56 100644 --- a/cssom-view-1/Overview.bs +++ b/cssom-view-1/Overview.bs @@ -1141,7 +1141,7 @@ aborting on the first step that returns a value: 1. Return the {{DOMRect}} object in list at index 0. 1. If caret node is a text entry widget that is a replaced element, and that is in the document, - return an [=unscaled=] {{DOMRect}} object for the caret in the widget + return n [=scaled=] {{DOMRect}} object for the caret in the widget as represented by the caret offset value. The transforms that apply to the element and its ancestors are applied. 1. Return null. @@ -1190,7 +1190,7 @@ partial interface Element { The getClientRects() method, when invoked, must return the result of the following algorithm: 1. If the element on which it was invoked does not have an associated [=CSS/box=] return an empty {{DOMRectList}} object and stop this algorithm. -1. If the element has an associated SVG layout box return an [=unscaled=] {{DOMRectList}} object containing a single {{DOMRect}} object that describes the bounding box of the element as defined by the SVG specification, applying the transforms that apply to the element and its ancestors. +1. If the element has an associated SVG layout box return a [=scaled=] {{DOMRectList}} object containing a single {{DOMRect}} object that describes the bounding box of the element as defined by the SVG specification, applying the transforms that apply to the element and its ancestors. 1. Return a {{DOMRectList}} object containing {{DOMRect}} objects in content order, one for each box fragment, describing its border area (including those with a height or width of zero) with the following constraints: * Apply the transforms that apply to the element and its ancestors. @@ -1621,7 +1621,7 @@ containing a list of {{DOMRect}} objects in content order that matches the follo * For each element selected by the range, whose parent is not selected by the range, include the border areas returned by invoking {{Element/getClientRects()}} on the element. * For each {{Text}} node selected or partially selected by the range (including when the - boundary-points are identical), include an [=unscaled=] {{DOMRect}} object (for the part that is selected, not + boundary-points are identical), include [=scaled=] {{DOMRect}} object (for the part that is selected, not the whole line box). The bounds of these {{DOMRect}} objects are computed using font metrics; thus, for horizontal writing, the vertical dimension of each box is determined by the font ascent and descent, and the horizontal dimension by the text advance width. If the range covers From 652f315b66dc7c74d4a36805ba4bc18d5cff3fda Mon Sep 17 00:00:00 2001 From: Chris Harrelson Date: Wed, 17 Jan 2024 11:24:47 -0800 Subject: [PATCH 29/33] Clarify effective zoom --- css-viewport/Overview.bs | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/css-viewport/Overview.bs b/css-viewport/Overview.bs index 60470c6182c..5c2c216f963 100644 --- a/css-viewport/Overview.bs +++ b/css-viewport/Overview.bs @@ -374,6 +374,7 @@ and nested frames (except for fenced frames [[!FENCED-FRAME]]), resulting in a magnification or minification effect. Nested values of 'zoom' multiply, resulting in additional scaling of <> values. +This means that the used value for zoom is always its [=effective zoom=]. The 'zoom' property has no effect on <> property values with computed values that are 'auto' or <>. @@ -490,7 +491,7 @@ in particular it includes zoom. The unscaled value of a CSS length relative to an element is the [=scaled=] value divided by the element's [=effective zoom=].
- The effective zoom of an element in a nested frame may be a value other than 1 even if 'zoom' is never set on an element in that frame. This can be observed by authors via APIs such as {{Window/devicePixelRatio}} and {{Element/getBoundingClientRect}}. + The [=effective zoom=] of an element in a nested frame may be a value other than 1 even if 'zoom' is never set on an element in that frame. This can be observed by authors via APIs such as {{Window/devicePixelRatio}} and {{Element/getBoundingClientRect}}.

From 1f6d09a10fdcdc2cc3e2ab42fabf7085a6ab7a60 Mon Sep 17 00:00:00 2001 From: Chris Harrelson <3453258+chrishtr@users.noreply.github.com> Date: Thu, 18 Jan 2024 11:40:58 -0800 Subject: [PATCH 30/33] Fix typo Co-authored-by: Simon Pieters --- cssom-view-1/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cssom-view-1/Overview.bs b/cssom-view-1/Overview.bs index 5f31f1e4c56..615c6c7260e 100644 --- a/cssom-view-1/Overview.bs +++ b/cssom-view-1/Overview.bs @@ -1141,7 +1141,7 @@ aborting on the first step that returns a value: 1. Return the {{DOMRect}} object in list at index 0. 1. If caret node is a text entry widget that is a replaced element, and that is in the document, - return n [=scaled=] {{DOMRect}} object for the caret in the widget + return a [=scaled=] {{DOMRect}} object for the caret in the widget as represented by the caret offset value. The transforms that apply to the element and its ancestors are applied. 1. Return null. From 92d97344243a1c1fdd538e399378c4512a565675 Mon Sep 17 00:00:00 2001 From: Chris Harrelson Date: Mon, 22 Jan 2024 17:29:38 -0800 Subject: [PATCH 31/33] Switch to used value instead of computed style --- css-cascade-3/Overview.bs | 2 ++ css-viewport/Overview.bs | 26 +++++++++++++++++--------- 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/css-cascade-3/Overview.bs b/css-cascade-3/Overview.bs index 318ba7e4f31..c0d9e5aef28 100644 --- a/css-cascade-3/Overview.bs +++ b/css-cascade-3/Overview.bs @@ -465,6 +465,8 @@ Used Values

the result of taking the computed value and completing any remaining calculations to make it the absolute theoretical value used in the formatting of the document. + The effect of the 'zoom' property is applied during this stage, + and before any calculations that require layout.

For example, a declaration of ''width: auto'' can't be resolved into a length without knowing the layout of the element's ancestors, diff --git a/css-viewport/Overview.bs b/css-viewport/Overview.bs index 5c2c216f963..fa54d26c32e 100644 --- a/css-viewport/Overview.bs +++ b/css-viewport/Overview.bs @@ -364,17 +364,25 @@ only the value previously set to it. The 'zoom' property -An element becomes zoomed when the 'zoom' property has a positive computed value different than 1 (or when a flat tree ancestor has zoom). -'zoom' affects computed property values and inherited property values. -The computed value of 'zoom' is applied as a scalar to the used value of <> CSS properties for the element and its descendants -(including inherited properties such as 'line-height' or 'font-size'), -plus intrinsic sizing of all replaced elements, +An element becomes zoomed when the 'zoom' property has a positive computed value different than 1 +(or when a flat tree ancestor has zoom). + +To apply zoom, the [=used value=] of a CSS property is pre-multiplied +(before any other steps in the [=used value=] stage) +by the [=used value=] of 'zoom' for the element. +It also multiplies the [=natural size=] of all replaced elements, background images, -and nested frames (except for fenced frames [[!FENCED-FRAME]]), -resulting in a magnification or minification effect. +and nested frames +(except for fenced frames [[!FENCED-FRAME]]) +by the [=used value=] of 'zoom'. + +Note: This results in a magnification or minification effect. + +Note: Since this multiplication is on [=computed value=]s, it applies to +all inherited properties such as 'line-height' and 'font-size'. Nested values of 'zoom' multiply, resulting in additional scaling of <> values. -This means that the used value for zoom is always its [=effective zoom=]. +This means that the [=used value=] for zoom is always its [=effective zoom=]. The 'zoom' property has no effect on <> property values with computed values that are 'auto' or <>. @@ -485,7 +493,7 @@ Negative values for 'zoom' are illegal. The effective zoom of an element is the product of its computed value of 'zoom' and all ancestors' computed values of 'zoom'. -The scaled value of a CSS length is the used value of that length; +The scaled value of a CSS length is the [=used value=] of that length; in particular it includes zoom. The unscaled value of a CSS length relative to an element is the [=scaled=] value divided by the element's [=effective zoom=]. From ce7628cafe5bcadd338187f21fbdfadc3281cede Mon Sep 17 00:00:00 2001 From: Chris Harrelson Date: Mon, 22 Jan 2024 17:36:07 -0800 Subject: [PATCH 32/33] define used value instead of claiming it as a consequence --- css-viewport/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-viewport/Overview.bs b/css-viewport/Overview.bs index fa54d26c32e..4455895f300 100644 --- a/css-viewport/Overview.bs +++ b/css-viewport/Overview.bs @@ -382,7 +382,7 @@ Note: Since this multiplication is on [=computed value=]s, it applies to all inherited properties such as 'line-height' and 'font-size'. Nested values of 'zoom' multiply, resulting in additional scaling of <> values. -This means that the [=used value=] for zoom is always its [=effective zoom=]. +The [=used value=] for zoom is always its [=effective zoom=]. The 'zoom' property has no effect on <> property values with computed values that are 'auto' or <>. From 993c701585c562d596ffbcba7452d96120667b52 Mon Sep 17 00:00:00 2001 From: Chris Harrelson <3453258+chrishtr@users.noreply.github.com> Date: Tue, 30 Jan 2024 08:38:47 -0800 Subject: [PATCH 33/33] Clarify flat tree ancestors --- css-viewport/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-viewport/Overview.bs b/css-viewport/Overview.bs index 4455895f300..9ab06857391 100644 --- a/css-viewport/Overview.bs +++ b/css-viewport/Overview.bs @@ -491,7 +491,7 @@ Negative values for 'zoom' are illegal.

The effective zoom of an element is the product of its computed -value of 'zoom' and all ancestors' computed values of 'zoom'. +value of 'zoom' and all flat tree ancestors' computed values of 'zoom'. The scaled value of a CSS length is the [=used value=] of that length; in particular it includes zoom.