jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

images to svg

Browse source
This commit is contained in:
Ilya Kantor 2019-07-28 15:42:37 +03:00
parent a31e881856
commit 3ba28aa104
734 changed files with 11682 additions and 245 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 9 KiB

20
2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 7.9 KiB

BIN
2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 12 KiB

2
2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md
View file

@ -2,7 +2,7 @@ The ball has `position:absolute`. It means that its `left/top` coordinates are m
The coordinates start from the inner left-upper corner of the field:
![](field.png)
![](field.svg)
The inner field width/height is `clientWidth/clientHeight`. So the field center has coordinates `(clientWidth/2, clientHeight/2)`.

20
2-ui/1-document/09-size-and-scroll/article.md
View file

@ -28,7 +28,7 @@ It has the border, padding and scrolling. The full set of features. There are no
The element looks like this:
![](metric-css.png)
![](metric-css.svg)
You can [open the document in the sandbox](sandbox:metric).
@ -48,7 +48,7 @@ That's a note to avoid confusion, as `padding-bottom` is set in further examples
Here's the overall picture:
![](metric-all.png)
![](metric-all.svg)
Values of these properties are technically numbers, but these numbers are "of pixels", so these are pixel measurements.
@ -85,7 +85,7 @@ In the example below the inner `<div>` has `<main>` as `offsetParent` and `offse
</script>
```
![](metric-offset-parent.png)
![](metric-offset-parent.svg)
There are several occasions when `offsetParent` is `null`:
@ -100,7 +100,7 @@ Now let's move on to the element itself.
These two properties are the simplest ones. They provide the "outer" width/height of the element. Or, in other words, its full size including borders.
![](metric-offset-width-height.png)
![](metric-offset-width-height.svg)
For our sample element:
@ -136,7 +136,7 @@ In our example:
- `clientLeft = 25` -- left border width
- `clientTop = 25` -- top border width
![](metric-client-left-top.png)
![](metric-client-left-top.svg)
...But to be precise -- these properties are not border width/height, but rather relative coordinates of the inner side from the outer side.
@ -146,7 +146,7 @@ It becomes visible when the document is right-to-left (the operating system is i
In that case, `clientLeft` would be not `25`, but with the scrollbar width `25 + 16 = 41`:
![](metric-client-left-top-rtl.png)
![](metric-client-left-top-rtl.svg)
## clientWidth/Height
@ -154,7 +154,7 @@ These properties provide the size of the area inside the element borders.
They include the content width together with paddings, but without the scrollbar:
![](metric-client-width-height.png)
![](metric-client-width-height.svg)
On the picture above let's first consider `clientHeight`: it's easier to evaluate. There's no horizontal scrollbar, so it's exactly the sum of what's inside the borders: CSS-height `200px` plus top and bottom paddings (`2 * 20px`) total `240px`.
@ -162,7 +162,7 @@ Now `clientWidth` -- here the content width is not `300px`, but `284px`, because
**If there are no paddings, then `clientWidth/Height` is exactly the content area, inside the borders and the scrollbar (if any).**
![](metric-client-width-nopadding.png)
![](metric-client-width-nopadding.svg)
So when there's no padding we can use `clientWidth/clientHeight` to get the content area size.
@ -171,7 +171,7 @@ So when there's no padding we can use `clientWidth/clientHeight` to get the cont
- Properties `clientWidth/clientHeight` only account for the visible part of the element.
- Properties `scrollWidth/scrollHeight` also include the scrolled out (hidden) parts:
![](metric-scroll-width-height.png)
![](metric-scroll-width-height.svg)
On the picture above:
@ -201,7 +201,7 @@ Properties `scrollLeft/scrollTop` are the width/height of the hidden, scrolled o
On the picture below we can see `scrollHeight` and `scrollTop` for a block with a vertical scroll.
![](metric-scroll-top.png)
![](metric-scroll-top.svg)
In other words, `scrollTop` is "how much is scrolled up".

BIN
2-ui/1-document/09-size-and-scroll/metric-all.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 130 KiB

136
2-ui/1-document/09-size-and-scroll/metric-all.svg Normal file
View file

@ -0,0 +1,136 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="670px" height="602px" viewBox="0 0 670 602" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>metric-all.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#F1F1F1" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#F1F1F1" offset="100%"></stop>
</linearGradient>
</defs>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="metric-all.svg">
<text id="Introduction" font-family="OpenSans-Bold, Open Sans" font-size="16" font-weight="bold" fill="#5A4739">
<tspan x="160" y="94">Introduction</tspan>
<tspan x="260.726562" y="94" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"></tspan>
<tspan x="160" y="122" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">This Ecma Standard is based on several </tspan>
<tspan x="160" y="141" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">originating technologies, the most well </tspan>
<tspan x="160" y="160" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">known being JavaScript (Netscape) and </tspan>
<tspan x="160" y="179" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">JScript (Microsoft). The language was </tspan>
<tspan x="160" y="198" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">invented by Brendan Eich at Netscape and </tspan>
<tspan x="160" y="217" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">first appeared in that company’s Navigator </tspan>
<tspan x="160" y="236" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">2.0 browser. It has appeared in all </tspan>
<tspan x="160" y="255" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">subsequent browsers from Netscape and </tspan>
<tspan x="160" y="274" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">in all browsers from Microsoft starting with </tspan>
<tspan x="160" y="293" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">Internet Explorer 3.0.</tspan>
<tspan x="160" y="312" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">The development of this Standard started </tspan>
<tspan x="160" y="331" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">in November 1996. The first edition of this </tspan>
<tspan x="160" y="350" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">Ecma Standard was adopted by the Ecma </tspan>
<tspan x="160" y="369" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">General Assembly of June 1997.</tspan>
<tspan x="160" y="388" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">That Ecma Standard was submitted to ISO/</tspan>
<tspan x="160" y="407" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">IEC JTC 1 for adoption under the fast-track </tspan>
<tspan x="160" y="426" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">procedure, and approved as international </tspan>
<tspan x="160" y="445" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">standard ISO/IEC 16262, in April 1998. The </tspan>
<tspan x="160" y="464" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">Ecma General Assembly of June 1998 </tspan>
<tspan x="160" y="483" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">approved the second edition of ECMA-262 </tspan>
<tspan x="160" y="502" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">to keep it fully aligned with ISO/IEC 16262. </tspan>
<tspan x="160" y="521" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">Changes between the first and the second </tspan>
<tspan x="160" y="540" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">edition are editorial in nature.</tspan>
</text>
<path d="M466,187 L142,187 L142,427 L466,427 L466,187 Z M117,162 L491,162 L491,452 L117,452 L117,162 Z" id="Rectangle-1" fill-opacity="0.88" fill="#E8C48F"></path>
<rect id="Rectangle-2" stroke-opacity="0.8" stroke="#E8C48F" stroke-width="2" x="141" y="62" width="326" height="500"></rect>
<text id="scrollHeight" transform="translate(592.000000, 310.000000) rotate(-90.000000) translate(-592.000000, -310.000000) " font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="541.6" y="314.5">scrollHeight</tspan>
</text>
<text id="offsetHeight" transform="translate(558.000000, 310.000000) rotate(-90.000000) translate(-558.000000, -310.000000) " font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="507.6" y="314.5">offsetHeight</tspan>
</text>
<text id="scrollTop" transform="translate(508.000000, 114.000000) rotate(-90.000000) translate(-508.000000, -114.000000) " font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="470.2" y="118.5">scrollTop</tspan>
</text>
<path d="M466.5,62 L614.639999,62" id="Line-27" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path d="M492.5,163 L584.639999,163" id="Line-28" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path d="M492.5,451 L584.639999,451" id="Line-29" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path d="M467.5,189 L539.639999,189" id="Line-33" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path d="M467.5,427 L539.639999,427" id="Line-32" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path d="M466.5,561 L614.639999,561" id="Line-26" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path id="Line-25" d="M606,78.5 L606,544.5 L612,544.5 L605,558.5 L598,544.5 L604,544.5 L604,78.5 L598,78.5 L605,64.5 L612,78.5 L606,78.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-30" d="M572,178.5 L572,433.5 L578,433.5 L571,447.5 L564,433.5 L570,433.5 L570,178.5 L564,178.5 L571,164.5 L578,178.5 L572,178.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="clientHeight" transform="translate(514.000000, 304.000000) rotate(-90.000000) translate(-514.000000, -304.000000) " font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="463.6" y="308.5">clientHeight</tspan>
</text>
<path id="Line-34" d="M528,205.5 L528,411.5 L534,411.5 L527,425.5 L520,411.5 L526,411.5 L526,205.5 L520,205.5 L527,191.5 L534,205.5 L528,205.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="offsetTop" transform="translate(104.000000, 83.000000) rotate(-90.000000) translate(-104.000000, -83.000000) " font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="66.2" y="87.5">offsetTop</tspan>
</text>
<text id="clientLeft" transform="translate(130.500000, 237.000000) rotate(-90.000000) translate(-130.500000, -237.000000) " font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#C74A6C">
<tspan x="88.5" y="241.5">clientLeft</tspan>
</text>
<path id="Line-36" d="M118,18.5 L118,146.5 L124,146.5 L117,160.5 L110,146.5 L116,146.5 L116,18.5 L110,18.5 L117,4.5 L124,18.5 L118,18.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-31" d="M522,78.5 L522,143.5 L528,143.5 L521,157.5 L514,143.5 L520,143.5 L520,78.5 L514,78.5 L521,64.5 L528,78.5 L522,78.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-14" fill-opacity="0.88" fill="#FFFFFF" x="154" y="73" width="312" height="89"></rect>
<rect id="Rectangle-15" fill-opacity="0.88" fill="#FFFFFF" x="154" y="451" width="312" height="93"></rect>
<path id="Line-39" d="M159.639999,485.09 L430.999985,485.09 L430.999985,479.09 L444.999985,486.09 L430.999985,493.09 L430.999985,487.09 L159.639999,487.09 L159.639999,493.09 L145.639999,486.09 L159.639999,479.09 L159.639999,485.09 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path d="M445.639999,510 L445.639999,426" id="Line-42" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path d="M141.639999,510 L141.639999,426" id="Line-43" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<text id="clientWidth" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="261.3" y="478">clientWidth</tspan>
</text>
<path id="Line-41" d="M18.6399994,162.09 L100,162.09 L100,156.09 L114,163.09 L100,170.09 L100,164.09 L18.6399994,164.09 L18.6399994,170.09 L4.63999939,163.09 L18.6399994,156.09 L18.6399994,162.09 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="clientTop" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#C74A6C">
<tspan x="147.7" y="178">clientTop</tspan>
</text>
<text id="offsetLeft" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="17.5" y="154">offsetLeft</tspan>
</text>
<path id="Line-40" d="M134.639999,528.09 L474.999985,528.09 L474.999985,522.09 L488.999985,529.09 L474.999985,536.09 L474.999985,530.09 L134.639999,530.09 L134.639999,536.09 L120.639999,529.09 L134.639999,522.09 L134.639999,528.09 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path d="M490.639999,551 L490.639999,447" id="Line-45" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path d="M116.639999,551 L116.639999,447" id="Line-44" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<text id="offsetWidth" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="258.3" y="516">offsetWidth</tspan>
</text>
<rect id="Rectangle-233" stroke="#8A704D" stroke-width="2" x="1" y="1" width="668" height="600"></rect>
<g id="Scrollbar" transform="translate(450.000000, 187.000000)">
<rect id="Rectangle-19" stroke="#E9E9E9" fill="#F3F2F2" x="0.5" y="0.5" width="15" height="239" rx="3"></rect>
<g id="Rectangle-18-+-Triangle-1">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-1)" x="0.5" y="0.5" width="15" height="19" rx="3"></rect>
<polygon id="Triangle-1" fill="#92979F" points="8 7 11.2 13 4.8 13"></polygon>
</g>
<g id="Rectangle-18-+-Triangle-2" transform="translate(8.000000, 230.000000) scale(1, -1) translate(-8.000000, -230.000000) translate(0.000000, 220.000000)">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-1)" x="0.5" y="0.5" width="15" height="19" rx="3"></rect>
<polygon id="Triangle-1" fill="#92979F" points="8 7 11.2 13 4.8 13"></polygon>
</g>
<g id="Rectangle-18-+-Triangle-3-+-Group" transform="translate(0.000000, 50.000000)">
<g id="Rectangle-18-+-Triangle-3" transform="translate(8.000000, 25.500000) scale(1, -1) translate(-8.000000, -25.500000) " fill="url(#linearGradient-2)" stroke="#CFCFCF">
<rect id="Rectangle-18" x="0.5" y="0.5" width="15" height="50" rx="3"></rect>
</g>
<g id="Group" transform="translate(4.000000, 20.000000)" fill="#D8D8D8" stroke="#979797">
<rect id="Rectangle-22" x="0.5" y="0.5" width="7" height="1"></rect>
<rect id="Rectangle-23" x="0.5" y="3.5" width="7" height="1"></rect>
<rect id="Rectangle-24" x="0.5" y="6.5" width="7" height="1"></rect>
<rect id="Rectangle-25" x="0.5" y="9.5" width="7" height="1"></rect>
</g>
</g>
</g>
<g id="Group" transform="translate(115.000000, 162.000000)">
<g id="Line-4-+-Line-5" transform="translate(23.000000, 19.000000)" stroke="#C74A6C" stroke-linecap="square" stroke-width="2">
<path d="M2.5,0.5 L0,6" id="Line-4" transform="translate(1.500000, 3.000000) scale(1, -1) translate(-1.500000, -3.000000) "></path>
<path d="M5.5,0.5 L3,6" id="Line-5" transform="translate(4.500000, 3.000000) scale(-1, -1) translate(-4.500000, -3.000000) "></path>
</g>
<g id="Line-4-+-Line-6" transform="translate(26.000000, 4.000000) scale(1, -1) translate(-26.000000, -4.000000) translate(23.000000, 1.000000)" stroke="#C74A6C" stroke-linecap="square" stroke-width="2">
<path d="M2.5,0.5 L0,6" id="Line-4" transform="translate(1.500000, 3.000000) scale(1, -1) translate(-1.500000, -3.000000) "></path>
<path d="M5.5,0.5 L3,6" id="Line-5" transform="translate(4.500000, 3.000000) scale(-1, -1) translate(-4.500000, -3.000000) "></path>
</g>
<path d="M14,13.5 L14,38.5" id="Line-49" stroke="#C74A6C" stroke-width="2" stroke-linecap="round" stroke-linejoin="bevel" transform="translate(14.000000, 26.000000) rotate(-270.000000) translate(-14.000000, -26.000000) "></path>
<path d="M26,25.5 L26,0.5" id="Line-50" stroke="#C74A6C" stroke-width="2" stroke-linecap="round" stroke-linejoin="bevel"></path>
<path d="M23.8833908,26.1363636 L20.0861971,24.4103665 L19.1758306,23.9965635 L20.0034365,22.1758306 L20.9138029,22.5896335 L26.4138029,25.0896335 L27.3241694,25.5034365 L26.7348224,26.8 L26.8241694,26.9965635 L26.5989404,27.0989404 L26.4965635,27.3241694 L26.3,27.2348224 L25.9138029,27.4103665 L20.4138029,29.9103665 L19.5034365,30.3241694 L18.6758306,28.5034365 L19.5861971,28.0896335 L23.8833908,26.1363636 Z" id="Line-4" fill="#C74A6C" fill-rule="nonzero"></path>
<path d="M4.11660919,26.1363636 L8.41380294,28.0896335 L9.32416942,28.5034365 L8.49656353,30.3241694 L7.58619706,29.9103665 L2.08619706,27.4103665 L1.7,27.2348224 L1.50343647,27.3241694 L1.40105963,27.0989404 L1.17583058,26.9965635 L1.26517764,26.8 L0.675830578,25.5034365 L1.58619706,25.0896335 L7.08619706,22.5896335 L7.99656353,22.1758306 L8.82416942,23.9965635 L7.91380294,24.4103665 L4.11660919,26.1363636 Z" id="Line-4" fill="#C74A6C" fill-rule="nonzero"></path>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
2-ui/1-document/09-size-and-scroll/metric-all@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 302 KiB

BIN
2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 38 KiB

70
2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 140 KiB

BIN
2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 104 KiB

BIN
2-ui/1-document/09-size-and-scroll/metric-client-left-top.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 37 KiB

59
2-ui/1-document/09-size-and-scroll/metric-client-left-top.svg Normal file
View file

@ -0,0 +1,59 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="353px" height="316px" viewBox="0 0 353 316" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>metric-client-left-top.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<linearGradient x1="0%" y1="47.0960915%" x2="62.2987085%" y2="47.0960918%" id="linearGradient-1">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
</linearGradient>
</defs>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="metric-client-left-top.svg">
<rect fill="#FFFFFF" x="0" y="0" width="353" height="316"></rect>
<rect id="Rectangle-206" fill="#EBCB9D" x="12" y="15" width="50" height="300"></rect>
<rect id="Rectangle-207" fill="#EBCB9D" transform="translate(202.500000, 40.000000) rotate(-90.000000) translate(-202.500000, -40.000000) " x="177.5" y="-115.5" width="50" height="311"></rect>
<text id="Introduction" font-family="OpenSans-Bold, Open Sans" font-size="32" font-weight="bold" fill="#5A4739">
<tspan x="102" y="134">Introduction</tspan>
<tspan x="303.453125" y="134" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal"></tspan>
<tspan x="102" y="183" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal">This Ecma Standard is based on </tspan>
<tspan x="102" y="216" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal">several originating technologies, </tspan>
<tspan x="102" y="249" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal">the most well known being </tspan>
<tspan x="102" y="282" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal">JavaScript (Netscape) and JScript </tspan>
<tspan x="102" y="315" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal">(Microsoft). The language was </tspan>
<tspan x="102" y="348" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal">invented by Brendan Eich at </tspan>
<tspan x="102" y="381" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal">Netscape and first appeared in </tspan>
<tspan x="102" y="414" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal">that company’s Navigator 2.0 </tspan>
<tspan x="102" y="447" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal">browser. It has appeared in all </tspan>
<tspan x="102" y="480" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal">subsequent browsers from </tspan>
<tspan x="102" y="513" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal">Netscape and in all browsers </tspan>
<tspan x="102" y="546" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal">from Microsoft starting with </tspan>
<tspan x="102" y="579" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal">Internet Explorer 3.0.</tspan>
<tspan x="102" y="612" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal">The development of this </tspan>
<tspan x="102" y="645" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal">Standard started in November </tspan>
<tspan x="102" y="678" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal">1996. The first edition of this </tspan>
<tspan x="102" y="711" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal">Ecma Standard was adopted by </tspan>
<tspan x="102" y="744" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal">the Ecma General Assembly of </tspan>
<tspan x="102" y="777" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal">June 1997.</tspan>
</text>
<rect id="Rectangle-5" fill="url(#linearGradient-1)" transform="translate(179.500000, 216.500000) rotate(-180.000000) translate(-179.500000, -216.500000) " x="42" y="-7" width="275" height="447"></rect>
<rect id="Rectangle-6" fill="#FFFFFF" x="316" y="8" width="162" height="399"></rect>
<path id="Line-7" d="M63.4099998,29.6800003 L63.4099998,49.6800003 L69.4099998,49.6800003 L62.4099998,63.6800003 L55.4099998,49.6800003 L61.4099998,49.6800003 L61.4099998,29.6800003 L55.4099998,29.6800003 L62.4099998,15.6800003 L69.4099998,29.6800003 L63.4099998,29.6800003 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-28" d="M26.4099998,63.6800003 L46.4099998,63.6800003 L46.4099998,57.6800003 L60.4099998,64.6800003 L46.4099998,71.6800003 L46.4099998,65.6800003 L26.4099998,65.6800003 L26.4099998,71.6800003 L12.4099998,64.6800003 L26.4099998,57.6800003 L26.4099998,63.6800003 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="clientTop:25px-=-bor" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="75.7" y="43" fill="#EE6B47">clientTop:</tspan>
<tspan x="147.7" y="43" fill="#3B86C4">25px </tspan>
<tspan x="183.7" y="43" fill="#EE6B47">= border</tspan>
</text>
<text id="clientLeft:25px" transform="translate(37.320000, 136.000000) rotate(-90.000000) translate(-37.320000, -136.000000) " font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="-16.6800003" y="140" fill="#EE6B47">clientLeft:</tspan>
<tspan x="62.5199997" y="140" fill="#3B86C4">25px</tspan>
</text>
<g id="Rectangle-8-+-Rectangle-7" transform="translate(-45.000000, -3.000000)">
<rect id="Rectangle-8" fill="url(#linearGradient-1)" transform="translate(224.000000, 138.000000) rotate(-90.000000) translate(-224.000000, -138.000000) " x="86.5" y="-85.5" width="275" height="447"></rect>
<rect id="Rectangle-7" fill="#FFFFFF" transform="translate(233.000000, 355.500000) rotate(-270.000000) translate(-233.000000, -355.500000) " x="152" y="156" width="162" height="399"></rect>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
2-ui/1-document/09-size-and-scroll/metric-client-left-top@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 103 KiB

BIN
2-ui/1-document/09-size-and-scroll/metric-client-width-height.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 72 KiB

112
2-ui/1-document/09-size-and-scroll/metric-client-width-height.svg Normal file
View file

@ -0,0 +1,112 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="500px" height="493px" viewBox="0 0 500 493" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>metric-client-width-height.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#F1F1F1" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#F1F1F1" offset="100%"></stop>
</linearGradient>
</defs>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="metric-client-width-height.svg">
<path d="M386,155 L46,155 L46,395 L386,395 L386,155 Z M21,130 L411,130 L411,420 L21,420 L21,130 Z" id="Rectangle-2" fill-opacity="0.88" fill="#E8C48F"></path>
<path d="M67,177 L67,376 L350,376 L350,177 L67,177 Z" id="Rectangle-1" stroke="#EE6B47" stroke-width="2"></path>
<g id="Scrollbar" transform="translate(370.000000, 155.000000)">
<rect id="Rectangle-19" stroke="#E9E9E9" fill="#F3F2F2" x="0.5" y="0.5" width="15" height="239" rx="3"></rect>
<g id="Rectangle-18-+-Triangle-1">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-1)" x="0.5" y="0.5" width="15" height="19" rx="3"></rect>
<polygon id="Triangle-1" fill="#92979F" points="8 7 11.2 13 4.8 13"></polygon>
</g>
<g id="Rectangle-18-+-Triangle-2" transform="translate(8.000000, 230.000000) scale(1, -1) translate(-8.000000, -230.000000) translate(0.000000, 220.000000)">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-1)" x="0.5" y="0.5" width="15" height="19" rx="3"></rect>
<polygon id="Triangle-1" fill="#92979F" points="8 7 11.2 13 4.8 13"></polygon>
</g>
<g id="Rectangle-18-+-Triangle-3-+-Group" transform="translate(0.000000, 50.000000)">
<g id="Rectangle-18-+-Triangle-3" transform="translate(8.000000, 25.500000) scale(1, -1) translate(-8.000000, -25.500000) " fill="url(#linearGradient-2)" stroke="#CFCFCF">
<rect id="Rectangle-18" x="0.5" y="0.5" width="15" height="50" rx="3"></rect>
</g>
<g id="Group" transform="translate(4.000000, 20.000000)" fill="#D8D8D8" stroke="#979797">
<rect id="Rectangle-22" x="0.5" y="0.5" width="7" height="1"></rect>
<rect id="Rectangle-23" x="0.5" y="3.5" width="7" height="1"></rect>
<rect id="Rectangle-24" x="0.5" y="6.5" width="7" height="1"></rect>
<rect id="Rectangle-25" x="0.5" y="9.5" width="7" height="1"></rect>
</g>
</g>
</g>
<text id="border" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="12.9" y="75" fill="#EE6B47">border</tspan>
<tspan x="20.1" y="89" fill="#3B86C4">25px</tspan>
</text>
<text id="padding" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="32.3" y="45" fill="#EE6B47">padding</tspan>
<tspan x="43.1" y="59" fill="#3B86C4">20px</tspan>
</text>
<text id="content-width:284px" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="139.1" y="109" fill="#EE6B47">content width:</tspan>
<tspan x="239.9" y="109" fill="#3B86C4">284px</tspan>
</text>
<path id="Line-15" d="M82.6799927,116 L336.5,116 L336.5,110 L350.5,117 L336.5,124 L336.5,118 L82.6799927,118 L82.6799927,124 L68.6799927,117 L82.6799927,110 L82.6799927,116 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path d="M-0.46484375,114.945312 L42.5351562,114.945312" id="Line-14" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(21.480469, 114.945312) rotate(-270.000000) translate(-21.480469, -114.945312) "></path>
<path d="M26.5351562,113.945312 L67.5351562,113.945312" id="Line-13" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(47.480469, 113.945312) rotate(-270.000000) translate(-47.480469, -113.945312) "></path>
<text id="border-2" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="376.9" y="76" fill="#EE6B47">border</tspan>
<tspan x="384.1" y="90" fill="#3B86C4">25px</tspan>
</text>
<text id="padding-2" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="339.3" y="16" fill="#EE6B47">padding</tspan>
<tspan x="350.1" y="30" fill="#3B86C4">20px</tspan>
</text>
<text id="scrollbar" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="349.1" y="48" fill="#EE6B47">scrollbar</tspan>
<tspan x="367.1" y="62" fill="#3B86C4">16px</tspan>
</text>
<path d="M349.535156,114.945312 L392.535156,114.945312" id="Line-17" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(371.480469, 114.945312) rotate(-270.000000) translate(-371.480469, -114.945312) "></path>
<path d="M363.535156,114.945312 L406.535156,114.945312" id="Line-20" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(385.480469, 114.945312) rotate(-270.000000) translate(-385.480469, -114.945312) "></path>
<path d="M389.535156,113.945312 L430.535156,113.945312" id="Line-18" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(410.480469, 113.945312) rotate(-270.000000) translate(-410.480469, -113.945312) "></path>
<path d="M45.5351562,113.945312 L86.5351562,113.945312" id="Line-16" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(66.480469, 113.945312) rotate(-270.000000) translate(-66.480469, -113.945312) "></path>
<path d="M332.535156,113.945312 L373.535156,113.945312" id="Line-19" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(353.480469, 113.945312) rotate(-270.000000) translate(-353.480469, -113.945312) "></path>
<text id="clientWidth-=-20+284" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal">
<tspan x="80.3" y="473" fill="#EE6B47">clientWidth = </tspan>
<tspan x="197.9" y="473" fill="#3B86C4">20+284+20 </tspan>
<tspan x="281.9" y="473" fill="#F38158">=</tspan>
<tspan x="290.3" y="473" fill="#3B86C4"> 324px</tspan>
</text>
<path d="M46.5,376 L46.5,464.14193" id="Line-24" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path d="M370.5,376 L370.5,464.14193" id="Line-25" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path id="Line-22" d="M62,451.070965 L354,451.070965 L354,445.070965 L368,452.070965 L354,459.070965 L354,453.070965 L62,453.070965 L62,459.070965 L48,452.070965 L62,445.070965 L62,451.070965 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="clientHeight:240px" transform="translate(488.500000, 277.500000) rotate(-90.000000) translate(-488.500000, -277.500000) " font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal">
<tspan x="412.9" y="282" fill="#EE6B47">clientHeight:</tspan>
<tspan x="522.1" y="282" fill="#3B86C4">240px</tspan>
</text>
<path d="M365.5,156 L485.5,156" id="Line-27" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path d="M365.5,394 L485.5,394" id="Line-28" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path id="Line-26" d="M477,174 L477,375 L483,375 L476,389 L469,375 L475,375 L475,174 L469,174 L476,160 L483,174 L477,174 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="height:200px" transform="translate(422.500000, 274.000000) rotate(-90.000000) translate(-422.500000, -274.000000) " font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="379.3" y="278" fill="#EE6B47">height:</tspan>
<tspan x="429.7" y="278" fill="#3B86C4">200px</tspan>
</text>
<path d="M353.5,175 L441.64193,175" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path d="M353.5,377 L441.64193,377" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path id="Line" d="M436,191.5 L436,360 L442,360 L435,374 L428,360 L434,360 L434,191.5 L428,191.5 L435,177.5 L442,191.5 L436,191.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="Introduction" font-family="OpenSans-Bold, Open Sans" font-size="16" font-weight="bold" fill="#5A4739">
<tspan x="69" y="193">Introduction</tspan>
<tspan x="169.726562" y="193" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"></tspan>
<tspan x="69" y="221" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">This Ecma Standard is based on several </tspan>
<tspan x="69" y="240" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">originating technologies, the most well </tspan>
<tspan x="69" y="259" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">known being JavaScript (Netscape) and </tspan>
<tspan x="69" y="278" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">JScript (Microsoft). The language was </tspan>
<tspan x="69" y="297" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">invented by Brendan Eich at Netscape and </tspan>
<tspan x="69" y="316" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">first appeared in that company’s Navigator </tspan>
<tspan x="69" y="335" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">2.0 browser. It has appeared in all </tspan>
<tspan x="69" y="354" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">subsequent browsers from Netscape and </tspan>
<tspan x="69" y="373" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">in all browsers from Microsoft starting with </tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
2-ui/1-document/09-size-and-scroll/metric-client-width-height@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 168 KiB

BIN
2-ui/1-document/09-size-and-scroll/metric-client-width-nopadding.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 53 KiB

77
2-ui/1-document/09-size-and-scroll/metric-client-width-nopadding.svg Normal file
View file

@ -0,0 +1,77 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="409px" height="467px" viewBox="0 0 409 467" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>metric-client-width-nopadding.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#F1F1F1" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#F1F1F1" offset="100%"></stop>
</linearGradient>
</defs>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="metric-client-width-nopadding.svg">
<rect fill="#FFFFFF" x="0" y="0" width="409" height="467"></rect>
<path d="M364,156 L60,156 L60,356 L364,356 L364,156 Z M35,131 L389,131 L389,381 L35,381 L35,131 Z" id="Rectangle-1" fill-opacity="0.88" fill="#E8C48F"></path>
<text id="clientWidth:284px-=-" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="84.7" y="399.64193" fill="#EE6B47">clientWidth:</tspan>
<tspan x="171.1" y="399.64193" fill="#3B86C4">284px </tspan>
<tspan x="214.3" y="399.64193" fill="#EE6B47">= content width</tspan>
</text>
<path id="Line-44" d="M77.6799927,408.64193 L329.679993,408.64193 L329.679993,402.64193 L343.679993,409.64193 L329.679993,416.64193 L329.679993,410.64193 L77.6799927,410.64193 L77.6799927,416.64193 L63.6799927,409.64193 L77.6799927,402.64193 L77.6799927,408.64193 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="CSS-width:-300px" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="145.9" y="429.64193" fill="#F38158">CSS width:</tspan>
<tspan x="217.9" y="429.64193" fill="#3B86C4"> 300px</tspan>
</text>
<path id="Line-47" d="M76.6799927,433.64193 L349,433.64193 L349,427.64193 L363,434.64193 L349,441.64193 L349,435.64193 L76.6799927,435.64193 L76.6799927,441.64193 L62.6799927,434.64193 L76.6799927,427.64193 L76.6799927,433.64193 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="Introduction-This-Ec" font-family="OpenSans-Bold, Open Sans" font-size="16" font-weight="bold" fill="#5A4739">
<tspan x="62" y="173">Introduction</tspan>
<tspan x="162.726562" y="173" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"></tspan>
<tspan x="62" y="201" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">This Ecma Standard is based on several </tspan>
<tspan x="62" y="220" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">originating technologies, the most well </tspan>
<tspan x="62" y="239" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">known being JavaScript (Netscape) and </tspan>
<tspan x="62" y="258" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">JScript (Microsoft). The language was </tspan>
<tspan x="62" y="277" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">invented by Brendan Eich at Netscape and </tspan>
<tspan x="62" y="296" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">first appeared in that company’s Navigator </tspan>
<tspan x="62" y="315" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">2.0 browser. It has appeared in all </tspan>
<tspan x="62" y="334" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">subsequent browsers from Netscape and </tspan>
<tspan x="62" y="353" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">in all browsers from Microsoft starting with </tspan>
</text>
<ellipse id="Oval-5" stroke="#EE6B47" stroke-width="2" fill="#FFF9EB" cx="191" cy="58.8580704" rx="76" ry="43.5"></ellipse>
<path id="Line" d="M190,114.638622 L190,103 L192,103 L192,114.638622 L198,114.638622 L191,128.638622 L184,114.638622 L190,114.638622 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="padding:-0;" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#8A704D">
<tspan x="136" y="52">padding: 0;</tspan>
<tspan x="136" y="70">width: 300px;</tspan>
</text>
<g id="Group-2" transform="translate(348.000000, 156.000000)">
<rect id="Rectangle-19" stroke="#E9E9E9" fill="#F3F2F2" x="0.5" y="0.5" width="15" height="199" rx="3"></rect>
<g id="Rectangle-18-+-Triangle-1">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-1)" x="0.5" y="0.5" width="15" height="19" rx="3"></rect>
<polygon id="Triangle-1" fill="#92979F" points="8 7 11.2 13 4.8 13"></polygon>
</g>
<g id="Rectangle-18-+-Triangle-2" transform="translate(8.000000, 190.000000) scale(1, -1) translate(-8.000000, -190.000000) translate(0.000000, 180.000000)">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-1)" x="0.5" y="0.5" width="15" height="19" rx="3"></rect>
<polygon id="Triangle-1" fill="#92979F" points="8 7 11.2 13 4.8 13"></polygon>
</g>
<g id="Rectangle-18-+-Triangle-3-+-Group" transform="translate(0.000000, 50.000000)">
<g id="Rectangle-18-+-Triangle-3" transform="translate(8.000000, 25.500000) scale(1, -1) translate(-8.000000, -25.500000) " fill="url(#linearGradient-2)" stroke="#CFCFCF">
<rect id="Rectangle-18" x="0.5" y="0.5" width="15" height="50" rx="3"></rect>
</g>
<g id="Group" transform="translate(4.000000, 20.000000)" fill="#D8D8D8" stroke="#979797">
<rect id="Rectangle-22" x="0.5" y="0.5" width="7" height="1"></rect>
<rect id="Rectangle-23" x="0.5" y="3.5" width="7" height="1"></rect>
<rect id="Rectangle-24" x="0.5" y="6.5" width="7" height="1"></rect>
<rect id="Rectangle-25" x="0.5" y="9.5" width="7" height="1"></rect>
</g>
</g>
</g>
<path d="M60.5,354.64193 L60.5,450.64193" id="Line-46" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path d="M345.5,354.64193 L345.5,414" id="Line-45" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path d="M363.5,354.64193 L363.5,450.64193" id="Line-48" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 7.2 KiB

BIN
2-ui/1-document/09-size-and-scroll/metric-client-width-nopadding@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 138 KiB

BIN
2-ui/1-document/09-size-and-scroll/metric-css.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 68 KiB

109
2-ui/1-document/09-size-and-scroll/metric-css.svg Normal file
View file

@ -0,0 +1,109 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="566px" height="469px" viewBox="0 0 566 469" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>metric-css.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#F1F1F1" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#F1F1F1" offset="100%"></stop>
</linearGradient>
</defs>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="metric-css.svg">
<path d="M177,184 L177,383 L460,383 L460,184 L177,184 Z" id="Rectangle-1" stroke="#EE6B47" stroke-width="2"></path>
<path d="M496,164 L156,164 L156,404 L496,404 L496,164 Z M131,139 L521,139 L521,429 L131,429 L131,139 Z" id="Rectangle-1" fill-opacity="0.88" fill="#E8C48F"></path>
<g id="Scrollbar" transform="translate(480.000000, 163.000000)">
<rect id="Rectangle-19" stroke="#E9E9E9" fill="#F3F2F2" x="0.5" y="0.5" width="15" height="239" rx="3"></rect>
<g id="Rectangle-18-+-Triangle-1">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-1)" x="0.5" y="0.5" width="15" height="19" rx="3"></rect>
<polygon id="Triangle-1" fill="#92979F" points="8 7 11.2 13 4.8 13"></polygon>
</g>
<g id="Rectangle-18-+-Triangle-2" transform="translate(8.000000, 230.000000) scale(1, -1) translate(-8.000000, -230.000000) translate(0.000000, 220.000000)">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-1)" x="0.5" y="0.5" width="15" height="19" rx="3"></rect>
<polygon id="Triangle-1" fill="#92979F" points="8 7 11.2 13 4.8 13"></polygon>
</g>
<g id="Rectangle-18-+-Triangle-3-+-Group" transform="translate(0.000000, 50.000000)">
<g id="Rectangle-18-+-Triangle-3" transform="translate(8.000000, 25.500000) scale(1, -1) translate(-8.000000, -25.500000) " fill="url(#linearGradient-2)" stroke="#CFCFCF">
<rect id="Rectangle-18" x="0.5" y="0.5" width="15" height="50" rx="3"></rect>
</g>
<g id="Group" transform="translate(4.000000, 20.000000)" fill="#D8D8D8" stroke="#979797">
<rect id="Rectangle-22" x="0.5" y="0.5" width="7" height="1"></rect>
<rect id="Rectangle-23" x="0.5" y="3.5" width="7" height="1"></rect>
<rect id="Rectangle-24" x="0.5" y="6.5" width="7" height="1"></rect>
<rect id="Rectangle-25" x="0.5" y="9.5" width="7" height="1"></rect>
</g>
</g>
</g>
<text id="padding:20px" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="7" y="176" fill="#EE6B47">padding:</tspan>
<tspan x="64.6" y="176" fill="#3B86C4">20px</tspan>
</text>
<text id="height:200px" transform="translate(530.500000, 282.000000) rotate(-90.000000) translate(-530.500000, -282.000000) " font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="487.3" y="286" fill="#EE6B47">height:</tspan>
<tspan x="537.7" y="286" fill="#3B86C4">200px</tspan>
</text>
<path d="M461.5,183 L549.64193,183" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path d="M93.5,184 L181.64193,184" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path d="M93.5,162 L181.64193,162" id="Line-4" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path d="M461.5,385 L549.64193,385" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path id="Line" d="M544,199.5 L544,368 L550,368 L543,382 L536,368 L542,368 L542,199.5 L536,199.5 L543,185.5 L550,199.5 L544,199.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="padding:20px-2" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="7" y="396" fill="#EE6B47">padding:</tspan>
<tspan x="64.6" y="396" fill="#3B86C4">20px</tspan>
</text>
<path d="M93.5,404 L181.64193,404" id="Line-5" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path d="M93.5,382 L181.64193,382" id="Line-6" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<text id="border" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="122.9" y="83" fill="#EE6B47">border</tspan>
<tspan x="130.1" y="97" fill="#3B86C4">25px</tspan>
</text>
<text id="padding" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="142.3" y="53" fill="#EE6B47">padding</tspan>
<tspan x="153.1" y="67" fill="#3B86C4">20px</tspan>
</text>
<text id="content-width:284px" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="249.1" y="117" fill="#EE6B47">content width:</tspan>
<tspan x="349.9" y="117" fill="#3B86C4">284px</tspan>
</text>
<path id="Line-21" d="M192.679993,124 L446.5,124 L446.5,118 L460.5,125 L446.5,132 L446.5,126 L192.679993,126 L192.679993,132 L178.679993,125 L192.679993,118 L192.679993,124 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path d="M109.535156,122.945312 L152.535156,122.945312" id="Line-14" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(131.480469, 122.945312) rotate(-270.000000) translate(-131.480469, -122.945312) "></path>
<path d="M136.535156,121.945312 L177.535156,121.945312" id="Line-13" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(157.480469, 121.945312) rotate(-270.000000) translate(-157.480469, -121.945312) "></path>
<text id="border-2" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="486.9" y="84" fill="#EE6B47">border</tspan>
<tspan x="494.1" y="98" fill="#3B86C4">25px</tspan>
</text>
<text id="padding-2" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="449.3" y="24" fill="#EE6B47">padding</tspan>
<tspan x="460.1" y="38" fill="#3B86C4">20px</tspan>
</text>
<text id="scrollbar" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="459.1" y="56" fill="#EE6B47">scrollbar</tspan>
<tspan x="477.1" y="70" fill="#3B86C4">16px</tspan>
</text>
<text id="Introduction" font-family="OpenSans-Bold, Open Sans" font-size="16" font-weight="bold" fill="#5A4739">
<tspan x="178" y="200">Introduction</tspan>
<tspan x="278.726562" y="200" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"></tspan>
<tspan x="178" y="228" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">This Ecma Standard is based on several </tspan>
<tspan x="178" y="247" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">originating technologies, the most well </tspan>
<tspan x="178" y="266" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">known being JavaScript (Netscape) and </tspan>
<tspan x="178" y="285" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">JScript (Microsoft). The language was </tspan>
<tspan x="178" y="304" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">invented by Brendan Eich at Netscape and </tspan>
<tspan x="178" y="323" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">first appeared in that company’s Navigator </tspan>
<tspan x="178" y="342" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">2.0 browser. It has appeared in all </tspan>
<tspan x="178" y="361" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">subsequent browsers from Netscape and in </tspan>
<tspan x="178" y="380" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">all browsers from Microsoft starting with</tspan>
<tspan x="178" y="399" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"> </tspan>
</text>
<path d="M459.535156,122.945312 L502.535156,122.945312" id="Line-17" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(481.480469, 122.945312) rotate(-270.000000) translate(-481.480469, -122.945312) "></path>
<path d="M473.535156,122.945312 L516.535156,122.945312" id="Line-20" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(495.480469, 122.945312) rotate(-270.000000) translate(-495.480469, -122.945312) "></path>
<path d="M499.535156,121.945312 L540.535156,121.945312" id="Line-18" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(520.480469, 121.945312) rotate(-270.000000) translate(-520.480469, -121.945312) "></path>
<path d="M155.535156,121.945312 L196.535156,121.945312" id="Line-16" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(176.480469, 121.945312) rotate(-270.000000) translate(-176.480469, -121.945312) "></path>
<path d="M442.535156,121.945312 L483.535156,121.945312" id="Line-19" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(463.480469, 121.945312) rotate(-270.000000) translate(-463.480469, -121.945312) "></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
2-ui/1-document/09-size-and-scroll/metric-css@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 160 KiB

BIN
2-ui/1-document/09-size-and-scroll/metric-offset-parent.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 104 KiB

88
2-ui/1-document/09-size-and-scroll/metric-offset-parent.svg Normal file
View file

@ -0,0 +1,88 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="597px" height="520px" viewBox="0 0 597 520" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>metric-offset-parent.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<pattern id="pattern-1" width="30" height="30" x="-12" y="-6" patternUnits="userSpaceOnUse">
<use xlink:href="#image-2"></use>
</pattern>
<image id="image-2" width="30" height="30" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAEGWlDQ1BrQ0dDb2xvclNwYWNlR2VuZXJpY1JHQgAAOI2NVV1oHFUUPrtzZyMkzlNsNIV0qD8NJQ2TVjShtLp/3d02bpZJNtoi6GT27s6Yyc44M7v9oU9FUHwx6psUxL+3gCAo9Q/bPrQvlQol2tQgKD60+INQ6Ium65k7M5lpurHeZe58853vnnvuuWfvBei5qliWkRQBFpquLRcy4nOHj4g9K5CEh6AXBqFXUR0rXalMAjZPC3e1W99Dwntf2dXd/p+tt0YdFSBxH2Kz5qgLiI8B8KdVy3YBevqRHz/qWh72Yui3MUDEL3q44WPXw3M+fo1pZuQs4tOIBVVTaoiXEI/MxfhGDPsxsNZfoE1q66ro5aJim3XdoLFw72H+n23BaIXzbcOnz5mfPoTvYVz7KzUl5+FRxEuqkp9G/Ajia219thzg25abkRE/BpDc3pqvphHvRFys2weqvp+krbWKIX7nhDbzLOItiM8358pTwdirqpPFnMF2xLc1WvLyOwTAibpbmvHHcvttU57y5+XqNZrLe3lE/Pq8eUj2fXKfOe3pfOjzhJYtB/yll5SDFcSDiH+hRkH25+L+sdxKEAMZahrlSX8ukqMOWy/jXW2m6M9LDBc31B9LFuv6gVKg/0Szi3KAr1kGq1GMjU/aLbnq6/lRxc4XfJ98hTargX++DbMJBSiYMIe9Ck1YAxFkKEAG3xbYaKmDDgYyFK0UGYpfoWYXG+fAPPI6tJnNwb7ClP7IyF+D+bjOtCpkhz6CFrIa/I6sFtNl8auFXGMTP34sNwI/JhkgEtmDz14ySfaRcTIBInmKPE32kxyyE2Tv+thKbEVePDfW/byMM1Kmm0XdObS7oGD/MypMXFPXrCwOtoYjyyn7BV29/MZfsVzpLDdRtuIZnbpXzvlf+ev8MvYr/Gqk4H/kV/G3csdazLuyTMPsbFhzd1UabQbjFvDRmcWJxR3zcfHkVw9GfpbJmeev9F08WW8uDkaslwX6avlWGU6NRKz0g/SHtCy9J30o/ca9zX3Kfc19zn3BXQKRO8ud477hLnAfc1/G9mrzGlrfexZ5GLdn6ZZrrEohI2wVHhZywjbhUWEy8icMCGNCUdiBlq3r+xafL549HQ5jH+an+1y+LlYBifuxAvRN/lVVVOlwlCkdVm9NOL5BE4wkQ2SMlDZU97hX86EilU/lUmkQUztTE6mx1EEPh7OmdqBtAvv8HdWpbrJS6tJj3n0CWdM6busNzRV3S9KTYhqvNiqWmuroiKgYhshMjmhTh9ptWhsF7970j/SbMrsPE1suR5z7DMC+P/Hs+y7ijrQAlhyAgccjbhjPygfeBTjzhNqy28EdkUh8C+DU9+z2v/oyeH791OncxHOs5y2AtTc7nb/f73TWPkD/qwBnjX8BoJ98VQNcC+8AAADqSURBVEgN7ZVdDgIhDISl19KrrOFoBD2KXsOjkO1slAQBaVjovthHdjIfP7Otcc69iOjK9ThVijVn/nQbqTMzTCWbNDjkEfANfAQ8grXhCVgTnoG14EWwBrwKng0n7/0FkFJZa5+8voQQWDZWRzNMJZv8d66hg4DzUfVLUq3ZsxMwkv2G33kELoJR2a3LwIAjlUh7a/7u0RXBGvAqeDacfv3seGNcd6vJ9OianavHVHIYsycgeI7vkvptbywVj9TFcI00xS20/CJYIv5ca8tUokvAmvAMrAUvgjXgVfBsOCEogJRqVvNAJ1wBMfROw+AwCxUAAAAASUVORK5CYII="></image>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#F1F1F1" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-4">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#F1F1F1" offset="100%"></stop>
</linearGradient>
</defs>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="metric-offset-parent.svg">
<rect fill="#FFFFFF" x="0" y="0" width="597" height="520"></rect>
<rect id="Rectangle-10" stroke="#E9E9E9" stroke-width="3" fill-opacity="0.5" fill="url(#pattern-1)" x="19.5" y="25.5" width="558" height="479"></rect>
<path d="M527,210 L203,210 L203,450 L527,450 L527,210 Z M178,185 L552,185 L552,475 L178,475 L178,185 Z" id="Rectangle-1" fill-opacity="0.88" fill="#E8C48F"></path>
<text id="offsetTop:180px" transform="translate(163.000000, 104.320000) rotate(-90.000000) translate(-163.000000, -104.320000) " font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal">
<tspan x="100" y="108.82" fill="#EE6B47">offsetTop:</tspan>
<tspan x="184" y="108.82" fill="#3B86C4">180px</tspan>
</text>
<text id="offsetLeft:180px" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal">
<tspan x="34.3" y="179.32" fill="#EE6B47">offsetLeft:</tspan>
<tspan x="126.7" y="179.32" fill="#3B86C4">180px</tspan>
</text>
<text id="Introduction" font-family="OpenSans-Bold, Open Sans" font-size="16" font-weight="bold" fill="#5A4739">
<tspan x="223" y="247">Introduction</tspan>
<tspan x="323.726562" y="247" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"></tspan>
<tspan x="223" y="275" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">This Ecma Standard is based on several </tspan>
<tspan x="223" y="294" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">originating technologies, the most well </tspan>
<tspan x="223" y="313" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">known being JavaScript (Netscape) and </tspan>
<tspan x="223" y="332" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">JScript (Microsoft). The language was </tspan>
<tspan x="223" y="351" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">invented by Brendan Eich at Netscape </tspan>
<tspan x="223" y="370" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">and first appeared in that company’s </tspan>
<tspan x="223" y="389" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">Navigator 2.0 browser. It has appeared </tspan>
<tspan x="223" y="408" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">in all subsequent browsers from </tspan>
<tspan x="223" y="427" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">Netscape and in all browsers from </tspan>
<tspan x="223" y="446" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">Microsoft</tspan>
</text>
<path id="Line-40" d="M180,40.5 L180,169.320007 L186,169.320007 L179,183.320007 L172,169.320007 L178,169.320007 L178,40.5 L172,40.5 L179,26.5 L186,40.5 L180,40.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-41" d="M34.5899963,185.910004 L163.410004,185.910004 L163.410004,179.910004 L177.410004,186.910004 L163.410004,193.910004 L163.410004,187.910004 L34.5899963,187.910004 L34.5899963,193.910004 L20.5899963,186.910004 L34.5899963,179.910004 L34.5899963,185.910004 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<circle id="Oval-2" fill="#3B86C4" cx="203" cy="211" r="2"></circle>
<circle id="Oval-2" fill="#3B86C4" cx="179" cy="186" r="3"></circle>
<ellipse id="Oval-6" stroke="#EE6B47" stroke-width="2" fill="#FFF9EB" cx="364.25" cy="104" rx="100" ry="50"></ellipse>
<path id="Line" d="M364,168.017216 L364,156.378593 L366,156.378593 L366,168.017216 L372,168.017216 L365,182.017216 L358,168.017216 L364,168.017216 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="position:-absolute;" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="296.5" y="95.7926559">position: absolute;</tspan>
<tspan x="296.5" y="110.792656">left: 180px;</tspan>
<tspan x="296.5" y="125.792656">top: 180px;</tspan>
</text>
<text id="offsetParent-&lt;MAIN&gt;-" font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#8A704D">
<tspan x="20.5" y="19.3785934">offsetParent &lt;MAIN&gt; </tspan>
</text>
<text id="&lt;DIV&gt;" font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#8A704D">
<tspan x="183.5" y="180.378593">&lt;DIV&gt;</tspan>
</text>
<g id="Scrollbar" transform="translate(511.000000, 210.000000)">
<rect id="Rectangle-19" stroke="#E9E9E9" fill="#F3F2F2" x="0.5" y="0.5" width="15" height="239" rx="3"></rect>
<g id="Rectangle-18-+-Triangle-1">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-3)" x="0.5" y="0.5" width="15" height="19" rx="3"></rect>
<polygon id="Triangle-1" fill="#92979F" points="8 7 11.2 13 4.8 13"></polygon>
</g>
<g id="Rectangle-18-+-Triangle-2" transform="translate(8.000000, 230.000000) scale(1, -1) translate(-8.000000, -230.000000) translate(0.000000, 220.000000)">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-3)" x="0.5" y="0.5" width="15" height="19" rx="3"></rect>
<polygon id="Triangle-1" fill="#92979F" points="8 7 11.2 13 4.8 13"></polygon>
</g>
<g id="Rectangle-18-+-Triangle-3-+-Group" transform="translate(0.000000, 50.000000)">
<g id="Rectangle-18-+-Triangle-3" transform="translate(8.000000, 25.500000) scale(1, -1) translate(-8.000000, -25.500000) " fill="url(#linearGradient-4)" stroke="#CFCFCF">
<rect id="Rectangle-18" x="0.5" y="0.5" width="15" height="50" rx="3"></rect>
</g>
<g id="Group" transform="translate(4.000000, 20.000000)" fill="#D8D8D8" stroke="#979797">
<rect id="Rectangle-22" x="0.5" y="0.5" width="7" height="1"></rect>
<rect id="Rectangle-23" x="0.5" y="3.5" width="7" height="1"></rect>
<rect id="Rectangle-24" x="0.5" y="6.5" width="7" height="1"></rect>
<rect id="Rectangle-25" x="0.5" y="9.5" width="7" height="1"></rect>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 9.6 KiB

BIN
2-ui/1-document/09-size-and-scroll/metric-offset-parent@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 300 KiB

BIN
2-ui/1-document/09-size-and-scroll/metric-offset-width-height.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 74 KiB

112
2-ui/1-document/09-size-and-scroll/metric-offset-width-height.svg Normal file
View file

@ -0,0 +1,112 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="508px" height="509px" viewBox="0 0 508 509" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>metric-offset-width-height.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#F1F1F1" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#F1F1F1" offset="100%"></stop>
</linearGradient>
</defs>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="metric-offset-width-height.svg">
<path d="M394,155 L54,155 L54,395 L394,395 L394,155 Z M29,130 L419,130 L419,420 L29,420 L29,130 Z" id="Rectangle-2" fill-opacity="0.88" fill="#E8C48F"></path>
<path d="M75,177 L75,376 L358,376 L358,177 L75,177 Z" id="Rectangle-1" stroke="#EE6B47" stroke-width="2"></path>
<g id="Scrollbar" transform="translate(378.000000, 155.000000)">
<rect id="Rectangle-19" stroke="#E9E9E9" fill="#F3F2F2" x="0.5" y="0.5" width="15" height="239" rx="3"></rect>
<g id="Rectangle-18-+-Triangle-1">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-1)" x="0.5" y="0.5" width="15" height="19" rx="3"></rect>
<polygon id="Triangle-1" fill="#92979F" points="8 7 11.2 13 4.8 13"></polygon>
</g>
<g id="Rectangle-18-+-Triangle-2" transform="translate(8.000000, 230.000000) scale(1, -1) translate(-8.000000, -230.000000) translate(0.000000, 220.000000)">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-1)" x="0.5" y="0.5" width="15" height="19" rx="3"></rect>
<polygon id="Triangle-1" fill="#92979F" points="8 7 11.2 13 4.8 13"></polygon>
</g>
<g id="Rectangle-18-+-Triangle-3-+-Group" transform="translate(0.000000, 50.000000)">
<g id="Rectangle-18-+-Triangle-3" transform="translate(8.000000, 25.500000) scale(1, -1) translate(-8.000000, -25.500000) " fill="url(#linearGradient-2)" stroke="#CFCFCF">
<rect id="Rectangle-18" x="0.5" y="0.5" width="15" height="50" rx="3"></rect>
</g>
<g id="Group" transform="translate(4.000000, 20.000000)" fill="#D8D8D8" stroke="#979797">
<rect id="Rectangle-22" x="0.5" y="0.5" width="7" height="1"></rect>
<rect id="Rectangle-23" x="0.5" y="3.5" width="7" height="1"></rect>
<rect id="Rectangle-24" x="0.5" y="6.5" width="7" height="1"></rect>
<rect id="Rectangle-25" x="0.5" y="9.5" width="7" height="1"></rect>
</g>
</g>
</g>
<text id="border" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="20.9" y="75" fill="#EE6B47">border</tspan>
<tspan x="28.1" y="89" fill="#3B86C4">25px</tspan>
</text>
<text id="padding" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="40.3" y="45" fill="#EE6B47">padding</tspan>
<tspan x="51.1" y="59" fill="#3B86C4">20px</tspan>
</text>
<text id="content-width:284px" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="147.1" y="109" fill="#EE6B47">content width:</tspan>
<tspan x="247.9" y="109" fill="#3B86C4">284px</tspan>
</text>
<text id="height:200px" transform="translate(428.500000, 274.000000) rotate(-90.000000) translate(-428.500000, -274.000000) " font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="385.3" y="278" fill="#EE6B47">height:</tspan>
<tspan x="435.7" y="278" fill="#3B86C4">200px</tspan>
</text>
<path d="M359.5,175 L447.64193,175" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path d="M359.5,377 L447.64193,377" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path id="Line" d="M442,191.5 L442,360 L448,360 L441,374 L434,360 L440,360 L440,191.5 L434,191.5 L441,177.5 L448,191.5 L442,191.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-15" d="M90.6799927,116 L344.5,116 L344.5,110 L358.5,117 L344.5,124 L344.5,118 L90.6799927,118 L90.6799927,124 L76.6799927,117 L90.6799927,110 L90.6799927,116 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path d="M7.53515625,114.945312 L50.5351562,114.945312" id="Line-14" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(29.480469, 114.945312) rotate(-270.000000) translate(-29.480469, -114.945312) "></path>
<path d="M34.5351562,113.945312 L75.5351562,113.945312" id="Line-13" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(55.480469, 113.945312) rotate(-270.000000) translate(-55.480469, -113.945312) "></path>
<text id="border-2" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="384.9" y="76" fill="#EE6B47">border</tspan>
<tspan x="392.1" y="90" fill="#3B86C4">25px</tspan>
</text>
<text id="padding-2" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="347.3" y="16" fill="#EE6B47">padding</tspan>
<tspan x="358.1" y="30" fill="#3B86C4">20px</tspan>
</text>
<text id="scrollbar" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="357.1" y="48" fill="#EE6B47">scrollbar</tspan>
<tspan x="375.1" y="62" fill="#3B86C4">16px</tspan>
</text>
<path d="M357.535156,114.945312 L400.535156,114.945312" id="Line-17" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(379.480469, 114.945312) rotate(-270.000000) translate(-379.480469, -114.945312) "></path>
<path d="M371.535156,114.945312 L414.535156,114.945312" id="Line-20" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(393.480469, 114.945312) rotate(-270.000000) translate(-393.480469, -114.945312) "></path>
<path d="M397.535156,113.945312 L438.535156,113.945312" id="Line-18" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(418.480469, 113.945312) rotate(-270.000000) translate(-418.480469, -113.945312) "></path>
<path d="M53.5351562,113.945312 L94.5351562,113.945312" id="Line-16" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(74.480469, 113.945312) rotate(-270.000000) translate(-74.480469, -113.945312) "></path>
<path d="M340.535156,113.945312 L381.535156,113.945312" id="Line-19" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(361.480469, 113.945312) rotate(-270.000000) translate(-361.480469, -113.945312) "></path>
<text id="offsetWidth-=-25+20+" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal">
<tspan x="55.5" y="484" fill="#EE6B47">offsetWidth = </tspan>
<tspan x="173.1" y="484" fill="#3B86C4">25+20+284+20+16+25 </tspan>
<tspan x="332.7" y="484" fill="#F38158">=</tspan>
<tspan x="341.1" y="484" fill="#3B86C4"> 390px</tspan>
</text>
<path d="M29.5,419 L29.5,497" id="Line-24" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path d="M418.5,419 L418.5,499" id="Line-25" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path id="Line-22" d="M46.0899963,462.070965 L402,462.070965 L402,456.070965 L416,463.070965 L402,470.070965 L402,464.070965 L46.0899963,464.070965 L46.0899963,470.070965 L32.0899963,463.070965 L46.0899963,456.070965 L46.0899963,462.070965 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="offsetHeight:290px" transform="translate(482.500000, 280.500000) rotate(-90.000000) translate(-482.500000, -280.500000) " font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal">
<tspan x="406.9" y="285" fill="#EE6B47">offsetHeight:</tspan>
<tspan x="516.1" y="285" fill="#3B86C4">290px</tspan>
</text>
<path d="M416.5,131 L504.64193,131" id="Line-27" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path d="M416.5,420 L504.64193,420" id="Line-28" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path id="Line-26" d="M469,146.589996 L469,405.410004 L475,405.410004 L468,419.410004 L461,405.410004 L467,405.410004 L467,146.589996 L461,146.589996 L468,132.589996 L475,146.589996 L469,146.589996 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="Introduction" font-family="OpenSans-Bold, Open Sans" font-size="16" font-weight="bold" fill="#5A4739">
<tspan x="78" y="193">Introduction</tspan>
<tspan x="178.726562" y="193" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"></tspan>
<tspan x="78" y="221" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">This Ecma Standard is based on several </tspan>
<tspan x="78" y="240" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">originating technologies, the most well </tspan>
<tspan x="78" y="259" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">known being JavaScript (Netscape) and </tspan>
<tspan x="78" y="278" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">JScript (Microsoft). The language was </tspan>
<tspan x="78" y="297" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">invented by Brendan Eich at Netscape and </tspan>
<tspan x="78" y="316" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">first appeared in that company’s Navigator </tspan>
<tspan x="78" y="335" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">2.0 browser. It has appeared in all </tspan>
<tspan x="78" y="354" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">subsequent browsers from Netscape and </tspan>
<tspan x="78" y="373" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">in all browsers from Microsoft starting with </tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
2-ui/1-document/09-size-and-scroll/metric-offset-width-height@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 172 KiB

BIN
2-ui/1-document/09-size-and-scroll/metric-scroll-top.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 98 KiB

87
2-ui/1-document/09-size-and-scroll/metric-scroll-top.svg Normal file
View file

@ -0,0 +1,87 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="489px" height="542px" viewBox="0 0 489 542" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>metric-scroll-top.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#F1F1F1" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#F1F1F1" offset="100%"></stop>
</linearGradient>
</defs>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="metric-scroll-top.svg">
<rect fill="#FFFFFF" x="0" y="0" width="489" height="542"></rect>
<text id="Introduction" font-family="OpenSans-Bold, Open Sans" font-size="16" font-weight="bold" fill="#5A4739">
<tspan x="94" y="54">Introduction</tspan>
<tspan x="194.726562" y="54" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"></tspan>
<tspan x="94" y="82" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">This Ecma Standard is based on several </tspan>
<tspan x="94" y="101" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">originating technologies, the most well </tspan>
<tspan x="94" y="120" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">known being JavaScript (Netscape) and </tspan>
<tspan x="94" y="139" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">JScript (Microsoft). The language was </tspan>
<tspan x="94" y="158" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">invented by Brendan Eich at Netscape and </tspan>
<tspan x="94" y="177" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">first appeared in that company’s Navigator </tspan>
<tspan x="94" y="196" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">2.0 browser. It has appeared in all </tspan>
<tspan x="94" y="215" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">subsequent browsers from Netscape and </tspan>
<tspan x="94" y="234" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">in all browsers from Microsoft starting with </tspan>
<tspan x="94" y="253" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">Internet Explorer 3.0.</tspan>
<tspan x="94" y="272" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">The development of this Standard started </tspan>
<tspan x="94" y="291" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">in November 1996. The first edition of this </tspan>
<tspan x="94" y="310" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">Ecma Standard was adopted by the Ecma </tspan>
<tspan x="94" y="329" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">General Assembly of June 1997.</tspan>
<tspan x="94" y="348" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">That Ecma Standard was submitted to ISO/</tspan>
<tspan x="94" y="367" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">IEC JTC 1 for adoption under the fast-track </tspan>
<tspan x="94" y="386" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">procedure, and approved as international </tspan>
<tspan x="94" y="405" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">standard ISO/IEC 16262, in April 1998. The </tspan>
<tspan x="94" y="424" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">Ecma General Assembly of June 1998 </tspan>
<tspan x="94" y="443" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">approved the second edition of ECMA-262 </tspan>
<tspan x="94" y="462" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">to keep it fully aligned with ISO/IEC 16262. </tspan>
<tspan x="94" y="481" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">Changes between the first and the second </tspan>
<tspan x="94" y="500" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">edition are editorial in nature.</tspan>
</text>
<path d="M400,147 L76,147 L76,387 L400,387 L400,147 Z M51,122 L425,122 L425,412 L51,412 L51,122 Z" id="Rectangle-1" fill-opacity="0.88" fill="#E8C48F"></path>
<rect id="Rectangle-2" stroke-opacity="0.8" stroke="#E8C48F" stroke-width="2" x="75" y="22" width="326" height="500"></rect>
<text id="scrollTop" transform="translate(16.500000, 84.000000) rotate(-90.000000) translate(-16.500000, -84.000000) " font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#EE6B47">
<tspan x="-15.9" y="88">scrollTop</tspan>
</text>
<path d="M9.5,147 L75.6399994,147" id="Line-43" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path d="M10.5,21 L76.6399994,21" id="Line-42" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path id="Line-39" d="M36,34.5 L36,132.32 L42,132.32 L35,146.32 L28,132.32 L34,132.32 L34,34.5 L28,34.5 L35,20.5 L42,34.5 L36,34.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-14" fill-opacity="0.8" fill="#FFFFFF" x="88" y="33" width="312" height="89"></rect>
<rect id="Rectangle-15" fill-opacity="0.8" fill="#FFFFFF" x="88" y="411" width="312" height="89"></rect>
<text id="scrollHeight:723px" transform="translate(449.000000, 270.000000) rotate(-90.000000) translate(-449.000000, -270.000000) " font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal">
<tspan x="373.4" y="274.5" fill="#EE6B47">scrollHeight:</tspan>
<tspan x="482.6" y="274.5" fill="#3B86C4">723px</tspan>
</text>
<path d="M393.5,22 L471.639999,22" id="Line-27" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path d="M393.5,522 L471.639999,522" id="Line-28" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path id="Line-25" d="M463,38.5 L463,504.5 L469,504.5 L462,518.5 L455,504.5 L461,504.5 L461,38.5 L455,38.5 L462,24.5 L469,38.5 L463,38.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<g id="Scrollbar" transform="translate(384.000000, 147.000000)">
<rect id="Rectangle-19" stroke="#E9E9E9" fill="#F3F2F2" x="0.5" y="0.5" width="15" height="239" rx="3"></rect>
<g id="Rectangle-18-+-Triangle-1">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-1)" x="0.5" y="0.5" width="15" height="19" rx="3"></rect>
<polygon id="Triangle-1" fill="#92979F" points="8 7 11.2 13 4.8 13"></polygon>
</g>
<g id="Rectangle-18-+-Triangle-2" transform="translate(8.000000, 230.000000) scale(1, -1) translate(-8.000000, -230.000000) translate(0.000000, 220.000000)">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-1)" x="0.5" y="0.5" width="15" height="19" rx="3"></rect>
<polygon id="Triangle-1" fill="#92979F" points="8 7 11.2 13 4.8 13"></polygon>
</g>
<g id="Rectangle-18-+-Triangle-3-+-Group" transform="translate(0.000000, 50.000000)">
<g id="Rectangle-18-+-Triangle-3" transform="translate(8.000000, 25.500000) scale(1, -1) translate(-8.000000, -25.500000) " fill="url(#linearGradient-2)" stroke="#CFCFCF">
<rect id="Rectangle-18" x="0.5" y="0.5" width="15" height="50" rx="3"></rect>
</g>
<g id="Group" transform="translate(4.000000, 20.000000)" fill="#D8D8D8" stroke="#979797">
<rect id="Rectangle-22" x="0.5" y="0.5" width="7" height="1"></rect>
<rect id="Rectangle-23" x="0.5" y="3.5" width="7" height="1"></rect>
<rect id="Rectangle-24" x="0.5" y="6.5" width="7" height="1"></rect>
<rect id="Rectangle-25" x="0.5" y="9.5" width="7" height="1"></rect>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
2-ui/1-document/09-size-and-scroll/metric-scroll-top@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 230 KiB

BIN
2-ui/1-document/09-size-and-scroll/metric-scroll-width-height.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 100 KiB

91
2-ui/1-document/09-size-and-scroll/metric-scroll-width-height.svg Normal file
View file

@ -0,0 +1,91 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="463px" height="524px" viewBox="0 0 463 524" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>metric-scroll-width-height.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#F1F1F1" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#F1F1F1" offset="100%"></stop>
</linearGradient>
</defs>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="metric-scroll-width-height.svg">
<rect fill="#FFFFFF" x="0" y="0" width="463" height="524"></rect>
<text id="Introduction" font-family="OpenSans-Bold, Open Sans" font-size="16" font-weight="bold" fill="#5A4739">
<tspan x="66" y="54">Introduction</tspan>
<tspan x="166.726562" y="54" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"></tspan>
<tspan x="66" y="82" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">This Ecma Standard is based on several </tspan>
<tspan x="66" y="101" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">originating technologies, the most well </tspan>
<tspan x="66" y="120" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">known being JavaScript (Netscape) and </tspan>
<tspan x="66" y="139" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">JScript (Microsoft). The language was </tspan>
<tspan x="66" y="158" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">invented by Brendan Eich at Netscape </tspan>
<tspan x="66" y="177" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">and first appeared in that company’s </tspan>
<tspan x="66" y="196" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">Navigator 2.0 browser. It has appeared </tspan>
<tspan x="66" y="215" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">in all subsequent browsers from </tspan>
<tspan x="66" y="234" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">Netscape and in all browsers from </tspan>
<tspan x="66" y="253" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">Microsoft starting with Internet Explorer </tspan>
<tspan x="66" y="272" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">3.0.</tspan>
<tspan x="66" y="291" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">The development of this Standard </tspan>
<tspan x="66" y="310" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">started in November 1996. The first </tspan>
<tspan x="66" y="329" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">edition of this Ecma Standard was </tspan>
<tspan x="66" y="348" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">adopted by the Ecma General Assembly </tspan>
<tspan x="66" y="367" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">of June 1997.</tspan>
<tspan x="66" y="386" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">That Ecma Standard was submitted to </tspan>
<tspan x="66" y="405" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">ISO/IEC JTC 1 for adoption under the </tspan>
<tspan x="66" y="424" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">fast-track procedure, and approved as </tspan>
<tspan x="66" y="443" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">international standard ISO/IEC 16262, in </tspan>
<tspan x="66" y="462" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">April 1998. The Ecma General Assembly </tspan>
<tspan x="66" y="481" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">of June 1998 approved the second </tspan>
<tspan x="66" y="500" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">edition of ECMA-262 to keep it fully </tspan>
<tspan x="66" y="519" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">aligned with ISO/IEC 16262. Changes </tspan>
<tspan x="66" y="538" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">between the first and the second </tspan>
<tspan x="66" y="557" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">edition are editorial in nature.</tspan>
</text>
<rect id="Rectangle-15" fill-opacity="0.8" fill="#FFFFFF" x="58" y="410" width="312" height="111"></rect>
<rect id="Rectangle-14" fill-opacity="0.8" fill="#FFFFFF" x="58" y="35" width="312" height="89"></rect>
<path d="M370,148 L46,148 L46,388 L370,388 L370,148 Z M21,123 L395,123 L395,413 L21,413 L21,123 Z" id="Rectangle-1" fill-opacity="0.88" fill="#E8C48F"></path>
<rect id="Rectangle-2" stroke-opacity="0.8" stroke="#E8C48F" stroke-width="2" x="45" y="22" width="326" height="502"></rect>
<text id="scrollHeight:723px" transform="translate(426.000000, 270.500000) rotate(-90.000000) translate(-426.000000, -270.500000) " font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal">
<tspan x="350.4" y="275" fill="#EE6B47">scrollHeight:</tspan>
<tspan x="459.6" y="275" fill="#3B86C4">723px</tspan>
</text>
<path d="M371,22 L449,22" id="Line-27" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path d="M371,524 L449,524" id="Line-26" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path id="Line-25" d="M440,40 L440,506 L446,506 L439,520 L432,506 L438,506 L438,40 L432,40 L439,26 L446,40 L440,40 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-39" d="M64,108 L335.359985,108 L335.359985,102 L349.359985,109 L335.359985,116 L335.359985,110 L64,110 L64,116 L50,109 L64,102 L64,108 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path d="M352,154 L352,100" id="Line-42" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path d="M47,154 L47,100" id="Line-43" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<text id="scrollWidth-=-324px" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal">
<tspan x="149.2" y="105" fill="#EE6B47">scrollWidth = </tspan>
<tspan x="266.8" y="105" fill="#3B86C4">324px</tspan>
</text>
<g id="Scrollbar" transform="translate(354.000000, 148.000000)">
<rect id="Rectangle-19" stroke="#E9E9E9" fill="#F3F2F2" x="0.5" y="0.5" width="15" height="239" rx="3"></rect>
<g id="Rectangle-18-+-Triangle-1">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-1)" x="0.5" y="0.5" width="15" height="19" rx="3"></rect>
<polygon id="Triangle-1" fill="#92979F" points="8 7 11.2 13 4.8 13"></polygon>
</g>
<g id="Rectangle-18-+-Triangle-2" transform="translate(8.000000, 230.000000) scale(1, -1) translate(-8.000000, -230.000000) translate(0.000000, 220.000000)">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-1)" x="0.5" y="0.5" width="15" height="19" rx="3"></rect>
<polygon id="Triangle-1" fill="#92979F" points="8 7 11.2 13 4.8 13"></polygon>
</g>
<g id="Rectangle-18-+-Triangle-3-+-Group" transform="translate(0.000000, 50.000000)">
<g id="Rectangle-18-+-Triangle-3" transform="translate(8.000000, 25.500000) scale(1, -1) translate(-8.000000, -25.500000) " fill="url(#linearGradient-2)" stroke="#CFCFCF">
<rect id="Rectangle-18" x="0.5" y="0.5" width="15" height="50" rx="3"></rect>
</g>
<g id="Group" transform="translate(4.000000, 20.000000)" fill="#D8D8D8" stroke="#979797">
<rect id="Rectangle-22" x="0.5" y="0.5" width="7" height="1"></rect>
<rect id="Rectangle-23" x="0.5" y="3.5" width="7" height="1"></rect>
<rect id="Rectangle-24" x="0.5" y="6.5" width="7" height="1"></rect>
<rect id="Rectangle-25" x="0.5" y="9.5" width="7" height="1"></rect>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 9.4 KiB

BIN
2-ui/1-document/09-size-and-scroll/metric-scroll-width-height@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 233 KiB