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

2
2-ui/1-document/01-browser-environment/article.md
View file

@ -8,7 +8,7 @@ A host environment provides platform-specific objects and functions additional t
Here's a bird's-eye view of what we have when JavaScript runs in a web-browser:
![](windowObjects.png)
![](windowObjects.svg)
There's a "root" object called `window`. It has two roles:

BIN
2-ui/1-document/01-browser-environment/windowObjects.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 21 KiB

72
2-ui/1-document/01-browser-environment/windowObjects.svg Normal file
View file

@ -0,0 +1,72 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="354px" height="308px" viewBox="0 0 354 308" 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>windowObjects.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="windowObjects.svg">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="136" y="10" width="78" height="28"></rect>
<text id="window" font-family="Consolas" font-size="14" font-weight="normal" fill="#707175">
<tspan x="152" y="28">window</tspan>
</text>
<rect id="Rectangle-2" stroke="#CFCE95" stroke-width="2" fill="#F5F4D8" x="18" y="80" width="78" height="26"></rect>
<rect id="Rectangle-2" stroke="#C74A6C" stroke-width="2" fill="#FCDFE1" x="255" y="118" width="78" height="26"></rect>
<rect id="Rectangle-2" stroke="#99C0C3" stroke-width="2" fill="#EDFCFD" x="110" y="270" width="132" height="26"></rect>
<text id="document" font-family="Consolas" font-size="14" font-weight="normal" fill="#727155">
<tspan x="26" y="97">document</tspan>
</text>
<rect id="Rectangle-2" stroke="#C74A6C" stroke-width="2" fill="#FCDFE1" x="255" y="80" width="78" height="26"></rect>
<text id="Object" font-family="Consolas" font-size="14" font-weight="normal" fill="#924565">
<tspan x="271" y="97">Object</tspan>
</text>
<rect id="Rectangle-2" stroke="#99C0C3" stroke-width="2" fill="#EDFCFD" x="135" y="80" width="78" height="26"></rect>
<text id="navigator" font-family="Consolas" font-size="14" font-weight="normal" fill="#366378">
<tspan x="139.5" y="97">navigator</tspan>
</text>
<rect id="Rectangle-2" stroke="#99C0C3" stroke-width="2" fill="#EDFCFD" x="135" y="118" width="78" height="26"></rect>
<text id="screen" font-family="Consolas" font-size="14" font-weight="normal" fill="#366378">
<tspan x="151" y="135">screen</tspan>
</text>
<rect id="Rectangle-2" stroke="#99C0C3" stroke-width="2" fill="#EDFCFD" x="135" y="156" width="78" height="26"></rect>
<text id="location" font-family="Consolas" font-size="14" font-weight="normal" fill="#366378">
<tspan x="143.5" y="173">location</tspan>
</text>
<rect id="Rectangle-2" stroke="#99C0C3" stroke-width="2" fill="#EDFCFD" x="135" y="194" width="78" height="26"></rect>
<text id="frames" font-family="Consolas" font-size="14" font-weight="normal" fill="#366378">
<tspan x="151" y="211">frames</tspan>
</text>
<rect id="Rectangle-2" stroke="#99C0C3" stroke-width="2" fill="#EDFCFD" x="135" y="232" width="78" height="26"></rect>
<text id="history" font-family="Consolas" font-size="14" font-weight="normal" fill="#366378">
<tspan x="147.5" y="249">history</tspan>
</text>
<text id="Array" font-family="Consolas" font-size="14" font-weight="normal" fill="#924565">
<tspan x="275" y="135">Array</tspan>
</text>
<rect id="Rectangle-3" stroke="#C74A6C" stroke-width="2" fill="#FCDFE1" x="255" y="156" width="78" height="26"></rect>
<text id="Function" font-family="Consolas" font-size="14" font-weight="normal" fill="#924565">
<tspan x="263.5" y="173">Function</tspan>
</text>
<text id="XMLHttpRequest" font-family="Consolas" font-size="14" font-weight="normal" fill="#366378">
<tspan x="122" y="287">XMLHttpRequest</tspan>
</text>
<text id="BOM" font-family="Consolas" font-size="14" font-weight="normal" fill="#99C0C3">
<tspan x="135" y="73">BOM</tspan>
</text>
<text id="JavaScript" font-family="Consolas" font-size="14" font-weight="normal" fill="#C74A6C">
<tspan x="271" y="73">JavaScript</tspan>
</text>
<text id="DOM" font-family="Consolas" font-size="14" font-weight="normal" fill="#CFCE95">
<tspan x="17" y="73">DOM</tspan>
</text>
<path id="Line" d="M173.5,58.5 L173.5,40.5 L175.5,40.5 L175.5,58.5 L181.5,58.5 L174.5,72.5 L167.5,58.5 L173.5,58.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-2" d="M97.4216083,64.684192 L132.749841,40.1080303 L133.89197,41.7498407 L98.5637373,66.3260024 L101.990124,71.2514336 L86.5,73.5 L93.9952214,59.7587608 L97.4216083,64.684192 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="…" font-family="Consolas" font-size="24" font-weight="normal" fill="#727155">
<tspan x="50" y="122">…</tspan>
</text>
<text id="…-2" font-family="Consolas" font-size="24" font-weight="normal" fill="#924565">
<tspan x="287" y="201">…</tspan>
</text>
<path id="Line" d="M255.37175,67.4660359 L216.101095,40.7504484 L217.226047,39.0968214 L256.496703,65.8124089 L259.87156,60.851528 L267.509615,74.5138889 L251.996893,72.4269168 L255.37175,67.4660359 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
2-ui/1-document/01-browser-environment/windowObjects@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 49 KiB

4
2-ui/1-document/03-dom-navigation/article.md
View file

@ -13,7 +13,7 @@ All operations on the DOM start with the `document` object. From it we can acces
Here's a picture of links that allow for travel between DOM nodes:
![](dom-links.png)
![](dom-links.svg)
Let's discuss them in more detail.
@ -216,7 +216,7 @@ But for many tasks we don't want text or comment nodes. We want to manipulate el
So let's see more navigation links that only take *element nodes* into account:
![](dom-links-elements.png)
![](dom-links-elements.svg)
The links are similar to those given above, just with `Element` word inside:

BIN
2-ui/1-document/03-dom-navigation/dom-links-elements.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 29 KiB

63
2-ui/1-document/03-dom-navigation/dom-links-elements.svg Normal file
View file

@ -0,0 +1,63 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="440px" height="316px" viewBox="0 0 440 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>dom-links-elements.svg</title>
<desc>Created with sketchtool.</desc>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="dom-links-elements.svg">
<rect id="Rectangle-8" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="129" y="10" width="198" height="28"></rect>
<text id="document.documentEle" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="142.6" y="29">document.documentElement </tspan>
</text>
<text id="Type-something" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="336.9" y="29">&lt;HTML&gt;</tspan>
</text>
<rect id="Rectangle-7" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="163" y="78" width="117" height="28"></rect>
<text id="document.body--" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="174.2" y="95">document.body </tspan>
</text>
<text id="(if-inside-body)" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="300.9" y="95">(if inside body)</tspan>
</text>
<path d="M14.5,115 L427,115" id="Line-5" stroke="#8A704D" stroke-width="2" stroke-linecap="square"></path>
<text id="parentElement" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="175" y="172" fill="#8A704D">parent</tspan>
<tspan x="218.2" y="172" fill="#EE6B47">Element</tspan>
</text>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="180" y="213" width="80" height="28"></rect>
<text id="&lt;DIV&gt;" font-family="OpenSans-Regular, Open Sans" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="204.191508" y="232">&lt;DIV&gt;</tspan>
</text>
<path id="Line-6" d="M219.5,184.567507 L214.131314,194.111837 L212.388163,193.131314 L220.5,178.710271 L228.611837,193.131314 L226.868686,194.111837 L221.5,184.567507 L221.5,208.5 L219.5,208.5 L219.5,184.567507 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-7" d="M423.932493,225.5 L414.388163,220.131314 L415.368686,218.388163 L429.789729,226.5 L415.368686,234.611837 L414.388163,232.868686 L423.932493,227.5 L266.5,227.5 L266.5,225.5 L423.932493,225.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="nextElementSibling" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="276" y="212" fill="#8A704D">next</tspan>
<tspan x="304.8" y="212" fill="#EE6B47">Element</tspan>
<tspan x="355.2" y="212" fill="#8A704D">Sibling</tspan>
</text>
<path id="Line-8" d="M15.0675066,227.5 L24.6118368,232.868686 L23.6313143,234.611837 L9.21027114,226.5 L23.6313143,218.388163 L24.6118368,220.131314 L15.0675066,225.5 L169,225.5 L169,227.5 L15.0675066,227.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="previousElementSibli" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="6" y="212" fill="#8A704D">previous</tspan>
<tspan x="63.6" y="212" fill="#EE6B47">Element</tspan>
<tspan x="114" y="212" fill="#8A704D">Sibling</tspan>
</text>
<path id="Line" d="M119.63364,284.731951 L130.574131,284.260077 L130.660313,286.258219 L114.129734,286.971199 L122.10455,272.473934 L123.856915,273.437894 L118.578914,283.032671 L174.822277,248.122997 L175.877003,249.822277 L119.63364,284.731951 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-3" d="M322.986552,283.478964 L317.962163,273.748982 L319.739221,272.831341 L327.330841,287.532895 L310.824666,286.38635 L310.963255,284.391158 L321.887595,285.14998 L268.115014,249.78603 L269.21397,248.115014 L322.986552,283.478964 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="children" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#EE6B47">
<tspan x="188" y="273">children</tspan>
</text>
<text id="firstElementChild--" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="43" y="307" fill="#8A704D">first</tspan>
<tspan x="79" y="307" fill="#EE6B47">Element</tspan>
<tspan x="129.4" y="307" fill="#8A704D">Child </tspan>
</text>
<text id="lastElementChild" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="273" y="307" fill="#8A704D">last</tspan>
<tspan x="301.8" y="307" fill="#EE6B47">Element</tspan>
<tspan x="352.2" y="307" fill="#8A704D">Child</tspan>
</text>
<path id="Line-Copy-2" d="M220.5,131.067507 L215.131314,140.611837 L213.388163,139.631314 L221.5,125.210271 L229.611837,139.631314 L227.868686,140.611837 L222.5,131.067507 L222.5,131.5 L220.5,131.5 L220.5,131.067507 Z M222.5,155.5 L220.5,155.5 L220.5,151.5 L222.5,151.5 L222.5,155.5 Z M222.5,149.5 L220.5,149.5 L220.5,145.5 L222.5,145.5 L222.5,149.5 Z M222.5,143.5 L220.5,143.5 L220.5,139.5 L222.5,139.5 L222.5,143.5 Z M222.5,137.5 L220.5,137.5 L220.5,133.5 L222.5,133.5 L222.5,137.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-2-Copy" d="M220.5,50.5675066 L215.131314,60.1118368 L213.388163,59.1313143 L221.5,44.7102711 L229.611837,59.1313143 L227.868686,60.1118368 L222.5,50.5675066 L222.5,72.0953973 L220.5,72.0953973 L220.5,50.5675066 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6 KiB

BIN
2-ui/1-document/03-dom-navigation/dom-links-elements@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 66 KiB

BIN
2-ui/1-document/03-dom-navigation/dom-links.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 28 KiB

59
2-ui/1-document/03-dom-navigation/dom-links.svg Normal file
View file

@ -0,0 +1,59 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="420px" height="388px" viewBox="0 0 420 388" 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>dom-links.svg</title>
<desc>Created with sketchtool.</desc>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="dom-links.svg">
<rect id="Rectangle-9" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="150" y="20" width="117" height="28"></rect>
<rect id="Rectangle-7" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="151" y="154" width="117" height="28"></rect>
<rect id="Rectangle-8" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="117" y="87" width="198" height="28"></rect>
<text id="document" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="179.7" y="38">document</tspan>
</text>
<text id="document.documentEle" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="129.6" y="105">document.documentElement </tspan>
</text>
<text id="Type-something" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="324.9" y="105">&lt;HTML&gt;</tspan>
</text>
<text id="document.body--" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="164.2" y="173">document.body </tspan>
</text>
<text id="(if-inside-body)" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="283.9" y="173">(if inside body)</tspan>
</text>
<path id="Line" d="M208.5,125.567507 L203.131314,135.111837 L201.388163,134.131314 L209.5,119.710271 L217.611837,134.131314 L215.868686,135.111837 L210.5,125.567507 L210.5,149.352424 L208.5,149.352424 L208.5,125.567507 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-2" d="M208.5,58.5675066 L203.131314,68.1118368 L201.388163,67.1313143 L209.5,52.7102711 L217.611837,67.1313143 L215.868686,68.1118368 L210.5,58.5675066 L210.5,80.0953973 L208.5,80.0953973 L208.5,58.5675066 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path d="M2.5,191 L415,191" id="Line" stroke="#8A704D" stroke-width="2" stroke-linecap="square"></path>
<text id="parentNode" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="172" y="248">parentNode</tspan>
</text>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="169" y="289" width="80" height="28"></rect>
<text id="&lt;DIV&gt;" font-family="OpenSans-Regular, Open Sans" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="192.191508" y="308">&lt;DIV&gt;</tspan>
</text>
<path id="Line" d="M207.5,260.067507 L202.131314,269.611837 L200.388163,268.631314 L208.5,254.210271 L216.611837,268.631314 L214.868686,269.611837 L209.5,260.067507 L209.5,284.5 L207.5,284.5 L207.5,260.067507 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy" d="M207.5,206.067507 L202.131314,215.611837 L200.388163,214.631314 L208.5,200.210271 L216.611837,214.631314 L214.868686,215.611837 L209.5,206.067507 L209.5,206.5 L207.5,206.5 L207.5,206.067507 Z M209.5,230.5 L207.5,230.5 L207.5,226.5 L209.5,226.5 L209.5,230.5 Z M209.5,224.5 L207.5,224.5 L207.5,220.5 L209.5,220.5 L209.5,224.5 Z M209.5,218.5 L207.5,218.5 L207.5,214.5 L209.5,214.5 L209.5,218.5 Z M209.5,212.5 L207.5,212.5 L207.5,208.5 L209.5,208.5 L209.5,212.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line" d="M364.932493,301.5 L355.388163,296.131314 L356.368686,294.388163 L370.789729,302.5 L356.368686,310.611837 L355.388163,308.868686 L364.932493,303.5 L254.5,303.5 L254.5,301.5 L364.932493,301.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="nextSibling" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="264" y="288">nextSibling</tspan>
</text>
<path id="Line" d="M53.0675066,303.5 L62.6118368,308.868686 L61.6313143,310.611837 L47.2102711,302.5 L61.6313143,294.388163 L62.6118368,296.131314 L53.0675066,301.5 L165.5,301.5 L165.5,303.5 L53.0675066,303.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="previousSibling" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="50" y="288">previousSibling</tspan>
</text>
<path id="Line" d="M107.63364,360.731951 L118.574131,360.260077 L118.660313,362.258219 L102.129734,362.971199 L110.10455,348.473934 L111.856915,349.437894 L106.578914,359.032671 L162.822277,324.122997 L163.877003,325.822277 L107.63364,360.731951 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-3" d="M310.986552,359.478964 L305.962163,349.748982 L307.739221,348.831341 L315.330841,363.532895 L298.824666,362.38635 L298.963255,360.391158 L309.887595,361.14998 L256.115014,325.78603 L257.21397,324.115014 L310.986552,359.478964 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="childNodes" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="170" y="343">childNodes</tspan>
</text>
<text id="firstChild--" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="64" y="379">firstChild </tspan>
</text>
<text id="Type-something" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="279" y="379">lastChild</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6 KiB

BIN
2-ui/1-document/03-dom-navigation/dom-links@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 66 KiB

2
2-ui/1-document/05-basic-dom-node-properties/article.md
View file

@ -14,7 +14,7 @@ The root of the hierarchy is [EventTarget](https://dom.spec.whatwg.org/#eventtar
Here's the picture, explanations to follow:
![](dom-class-hierarchy.png)
![](dom-class-hierarchy.svg)
The classes are:

BIN
2-ui/1-document/05-basic-dom-node-properties/dom-class-hierarchy.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 30 KiB

85
2-ui/1-document/05-basic-dom-node-properties/dom-class-hierarchy.svg Normal file
View file

@ -0,0 +1,85 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="478px" height="364px" viewBox="0 0 478 364" 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>dom-class-hierarchy.svg</title>
<desc>Created with sketchtool.</desc>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="dom-class-hierarchy.svg">
<rect id="Rectangle-9" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="181" y="6" width="118" height="28"></rect>
<rect id="Rectangle-8" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="181" y="74" width="118" height="28"></rect>
<text id="EventTarget" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="200.9" y="24">EventTarget</tspan>
</text>
<text id="Node" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="225.6" y="91">Node </tspan>
</text>
<path id="Line-2" d="M241.5,53.5 L241.5,70.5 L239.5,70.5 L239.5,53.5 L233.5,53.5 L240.5,39.5 L247.5,53.5 L241.5,53.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-8-Copy" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="181" y="144" width="118" height="28"></rect>
<text id="Element" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="214.8" y="161">Element </tspan>
</text>
<path id="Line-2-Copy" d="M241.5,123.5 L241.5,140.5 L239.5,140.5 L239.5,123.5 L233.5,123.5 L240.5,109.5 L247.5,123.5 L241.5,123.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-8-Copy-4" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="181" y="230" width="118" height="28"></rect>
<text id="HTMLElement" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="200.4" y="247">HTMLElement </tspan>
</text>
<path id="Line-2-Copy-4" d="M241.5,209.5 L241.5,226.5 L239.5,226.5 L239.5,209.5 L233.5,209.5 L240.5,195.5 L247.5,209.5 L241.5,209.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-8-Copy-6" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="171" y="300" width="138" height="28"></rect>
<text id="HTMLBodyElement" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="186" y="317">HTMLBodyElement </tspan>
</text>
<path id="Line-2-Copy-6" d="M241.5,279.5 L241.5,296.5 L239.5,296.5 L239.5,279.5 L233.5,279.5 L240.5,265.5 L247.5,279.5 L241.5,279.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-8-Copy-7" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="12" y="300" width="138" height="28"></rect>
<text id="HTMLInputElement" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="24.4" y="317">HTMLInputElement </tspan>
</text>
<path id="Line-2-Copy-7" d="M159.56301,270.384521 L129.324588,293.903293 L128.096707,292.324588 L158.335128,268.805816 L154.651485,264.069703 L170,261 L163.246653,275.120634 L159.56301,270.384521 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-8-Copy-8" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="332" y="300" width="138" height="28"></rect>
<text id="HTMLAnchorElement" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="341.3" y="317">HTMLAnchorElement </tspan>
</text>
<path id="Line-2-Copy-8" d="M317.084628,268.762186 L338.41207,292.577831 L336.922169,293.91207 L315.594727,270.096426 L311.125024,274.099145 L307,259 L321.55433,264.759468 L317.084628,268.762186 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-8-Copy-2" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="45" y="126" width="118" height="28"></rect>
<text id="Text" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="89.6" y="144">Text </tspan>
</text>
<path id="Line-2-Copy-2" d="M160.67283,105.505239 L141.340917,120.905238 L140.094762,119.340917 L159.426676,103.940918 L155.688214,99.2479546 L171,96 L164.411292,110.198202 L160.67283,105.505239 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-8-Copy-3" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="315" y="126" width="118" height="28"></rect>
<text id="Comment" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="348.8" y="144">Comment </tspan>
</text>
<path id="Line-2-Copy-3" d="M318.637855,103.84604 L338.40389,119.329434 L337.170566,120.90389 L317.404531,105.420496 L313.704559,110.143864 L307,96 L322.337827,99.1226713 L318.637855,103.84604 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-2-Copy-9" d="M318.637855,181.84604 L338.40389,197.329434 L337.170566,198.90389 L317.404531,183.420496 L313.704559,188.143864 L307,174 L322.337827,177.122671 L318.637855,181.84604 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-8-Copy-5" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="315" y="205" width="118" height="28"></rect>
<text id="SVGElement" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="338" y="223">SVGElement </tspan>
</text>
<text id="&lt;div&gt;Text&lt;/div&gt;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="48" y="171" fill="#8A704D">&lt;div&gt;</tspan>
<tspan x="84" y="171" fill="#F5A623">Text</tspan>
<tspan x="112.8" y="171" fill="#8A704D">&lt;/div&gt;</tspan>
</text>
<text id="&lt;input-type=&quot;…&quot;&gt;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#F5A623">
<tspan x="24.4" y="341">&lt;input type="…"&gt;</tspan>
</text>
<text id="&lt;body&gt;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#F5A623">
<tspan x="220.4" y="341">&lt;body&gt;</tspan>
</text>
<text id="&lt;a-href=&quot;…&quot;&gt;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#F5A623">
<tspan x="358.8" y="341">&lt;a href="…"&gt;</tspan>
</text>
<text id="&lt;div&gt;Text&lt;/div&gt;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="189" y="188" fill="#8A704D">&lt;</tspan>
<tspan x="196.2" y="188" fill="#F5A623">div</tspan>
<tspan x="217.8" y="188" fill="#8A704D">&gt;</tspan>
<tspan x="225" y="188" fill="#998364">Text</tspan>
<tspan x="253.8" y="188" fill="#8A704D">&lt;/</tspan>
<tspan x="268.2" y="188" fill="#F5A623">div</tspan>
<tspan x="289.8" y="188" fill="#8A704D">&gt;</tspan>
</text>
<text id="&lt;!--comment--&gt;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#F5A623">
<tspan x="327.6" y="171">&lt;!--comment--&gt;</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 7.6 KiB

BIN
2-ui/1-document/05-basic-dom-node-properties/dom-class-hierarchy@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 68 KiB

4
2-ui/1-document/07-modifying-document/article.md
View file

@ -189,7 +189,7 @@ Here's an example of using these methods to add more items to a list and the tex
Here's a small picture what methods do:
![](before-prepend-append-after.png)
![](before-prepend-append-after.svg)
So the final list will be:
@ -269,7 +269,7 @@ That's how we can append an arbitrary HTML to our page.
Here's the picture of insertion variants:
![](insert-adjacent.png)
![](insert-adjacent.svg)
We can easily notice similarities between this and the previous picture. The insertion points are actually the same, but this method inserts HTML.

BIN
2-ui/1-document/07-modifying-document/before-prepend-append-after.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 19 KiB

70
2-ui/1-document/07-modifying-document/before-prepend-append-after.svg Normal file
View file

@ -0,0 +1,70 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="409px" height="203px" viewBox="0 0 409 203" 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>before-prepend-append-after.svg</title>
<desc>Created with sketchtool.</desc>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="before-prepend-append-after.svg">
<g id="&lt;ol&gt;-&lt;li&gt;0&lt;/li&gt;-&lt;li&gt;" transform="translate(18.630000, 60.200000)" fill-rule="nonzero">
<polygon id="&lt;" fill="#999999" points="-2.91322522e-13 5.53 -2.91322522e-13 5.124 6.594 1.106 7.126 1.974 1.568 5.264 7.14 8.498 6.608 9.338"></polygon>
<path d="M8.568,6.3 C8.568,5.17066102 8.86199706,4.27700329 9.45,3.619 C10.0380029,2.96099671 10.8779945,2.632 11.97,2.632 C12.5580029,2.632 13.0643312,2.72766571 13.489,2.919 C13.9136688,3.11033429 14.2659986,3.3693317 14.546,3.696 C14.8260014,4.0226683 15.033666,4.40999776 15.169,4.858 C15.304334,5.30600224 15.372,5.7866641 15.372,6.3 C15.372,6.8600028 15.2973341,7.36633107 15.148,7.819 C14.9986659,8.27166893 14.7793348,8.65666508 14.49,8.974 C14.2006652,9.29133492 13.8436688,9.53633247 13.419,9.709 C12.9943312,9.88166753 12.511336,9.968 11.97,9.968 C11.3913304,9.968 10.8873355,9.87233429 10.458,9.681 C10.0286645,9.48966571 9.6740014,9.2306683 9.394,8.904 C9.1139986,8.5773317 8.90633401,8.19000224 8.771,7.742 C8.63566599,7.29399776 8.568,6.8133359 8.568,6.3 Z M9.73,6.3 C9.73,6.6266683 9.76966627,6.9533317 9.849,7.28 C9.92833373,7.6066683 10.0566658,7.90066536 10.234,8.162 C10.4113342,8.42333464 10.6423319,8.63333254 10.927,8.792 C11.2116681,8.95066746 11.5593313,9.03 11.97,9.03 C12.7166704,9.03 13.2789981,8.79900231 13.657,8.337 C14.0350019,7.87499769 14.224,7.19600448 14.224,6.3 C14.224,5.96399832 14.1843337,5.63500161 14.105,5.313 C14.0256663,4.99099839 13.8950009,4.69933464 13.713,4.438 C13.5309991,4.17666536 13.2976681,3.96666746 13.013,3.808 C12.7283319,3.64933254 12.3806687,3.57 11.97,3.57 C11.2233296,3.57 10.6633352,3.79866438 10.29,4.256 C9.9166648,4.71333562 9.73,5.39466214 9.73,6.3 Z M17.836,-1.42108547e-14 L20.16,-1.42108547e-14 L20.16,7.448 C20.16,8.01733618 20.2556657,8.4186655 20.447,8.652 C20.6383343,8.8853345 20.9206648,9.002 21.294,9.002 C21.5553346,9.002 21.8049988,8.9553338 22.043,8.862 C22.2810012,8.7686662 22.5446652,8.61000112 22.834,8.386 L23.338,9.156 C23.1886659,9.28666732 23.0253342,9.40333282 22.848,9.506 C22.6706658,9.60866718 22.4886676,9.69499965 22.302,9.765 C22.1153324,9.83500035 21.9286676,9.88866648 21.742,9.926 C21.5553324,9.96333352 21.3826675,9.982 21.224,9.982 C20.8786649,9.982 20.570668,9.93766711 20.3,9.849 C20.029332,9.76033289 19.8030009,9.61800098 19.621,9.422 C19.4389991,9.22599902 19.3013338,8.96700161 19.208,8.645 C19.1146662,8.32299839 19.068,7.92400238 19.068,7.448 L19.068,0.938 L17.836,0.938 L17.836,-1.42108547e-14 Z" id="ol" fill="#990055"></path>
<path d="M25.732,9.338 L25.2,8.498 L30.772,5.264 L25.214,1.974 L25.746,1.106 L32.34,5.124 L32.34,5.53 L25.732,9.338 Z M16.8,25.53 L16.8,25.124 L23.394,21.106 L23.926,21.974 L18.368,25.264 L23.94,28.498 L23.408,29.338 L16.8,25.53 Z" id="&gt;&lt;" fill="#999999"></path>
<path d="M26.236,20 L28.56,20 L28.56,27.448 C28.56,28.0173362 28.6556657,28.4186655 28.847,28.652 C29.0383343,28.8853345 29.3206648,29.002 29.694,29.002 C29.9553346,29.002 30.2049988,28.9553338 30.443,28.862 C30.6810012,28.7686662 30.9446652,28.6100011 31.234,28.386 L31.738,29.156 C31.5886659,29.2866673 31.4253342,29.4033328 31.248,29.506 C31.0706658,29.6086672 30.8886676,29.6949996 30.702,29.765 C30.5153324,29.8350003 30.3286676,29.8886665 30.142,29.926 C29.9553324,29.9633335 29.7826675,29.982 29.624,29.982 C29.2786649,29.982 28.970668,29.9376671 28.7,29.849 C28.429332,29.7603329 28.2030009,29.618001 28.021,29.422 C27.8389991,29.225999 27.7013338,28.9670016 27.608,28.645 C27.5146662,28.3229984 27.468,27.9240024 27.468,27.448 L27.468,20.938 L26.236,20.938 L26.236,20 Z M34.44,29.8 L34.44,28.862 L36.876,28.862 L36.876,23.738 L34.44,23.738 L34.44,22.8 L37.996,22.8 L37.996,28.862 L40.376,28.862 L40.376,29.8 L34.44,29.8 Z M36.498,20.812 C36.498,20.5599987 36.5819992,20.3430009 36.75,20.161 C36.9180008,19.9789991 37.1326654,19.888 37.394,19.888 C37.664668,19.888 37.8909991,19.9789991 38.073,20.161 C38.2550009,20.3430009 38.346,20.5599987 38.346,20.812 C38.346,21.0546679 38.2550009,21.2599992 38.073,21.428 C37.8909991,21.5960008 37.664668,21.68 37.394,21.68 C37.1326654,21.68 36.9180008,21.5960008 36.75,21.428 C36.5819992,21.2599992 36.498,21.0546679 36.498,20.812 Z" id="li" fill="#990055"></path>
<polygon id="&gt;" fill="#999999" points="42.532 29.338 42 28.498 47.572 25.264 42.014 21.974 42.546 21.106 49.14 25.124 49.14 25.53"></polygon>
<path d="M50.54,24.9 C50.54,24.1066627 50.6099993,23.3950031 50.75,22.765 C50.8900007,22.1349968 51.0999986,21.6030022 51.38,21.169 C51.6600014,20.7349978 52.0146645,20.4036678 52.444,20.175 C52.8733355,19.9463322 53.3819971,19.832 53.97,19.832 C54.5953365,19.832 55.1249978,19.9439989 55.559,20.168 C55.9930022,20.3920011 56.345332,20.7186645 56.616,21.148 C56.886668,21.5773355 57.0826661,22.1069968 57.204,22.737 C57.3253339,23.3670031 57.386,24.0879959 57.386,24.9 C57.386,25.6933373 57.3160007,26.4049968 57.176,27.035 C57.0359993,27.6650031 56.8260014,28.1969978 56.546,28.631 C56.2659986,29.0650022 55.9113355,29.3963322 55.482,29.625 C55.0526645,29.8536678 54.5440029,29.968 53.956,29.968 C53.3399969,29.968 52.8150022,29.8443346 52.381,29.597 C51.9469978,29.3496654 51.5923347,29.0020022 51.317,28.554 C51.0416653,28.1059978 50.8433339,27.5716698 50.722,26.951 C50.6006661,26.3303302 50.54,25.6466704 50.54,24.9 Z M56.238,24.9 C56.238,24.4053309 56.2100003,23.9340022 56.154,23.486 L51.996,27.28 C52.1546675,27.8120027 52.3926651,28.2366651 52.71,28.554 C53.0273349,28.8713349 53.4426641,29.03 53.956,29.03 C54.7773374,29.03 55.3629982,28.6893367 55.713,28.008 C56.0630017,27.3266633 56.238,26.2906736 56.238,24.9 Z M51.702,24.9 C51.702,25.1333345 51.7089999,25.3573323 51.723,25.572 C51.7370001,25.7866677 51.7533332,25.9966656 51.772,26.202 L55.944,22.422 C55.7853325,21.9179975 55.5496682,21.5166682 55.237,21.218 C54.9243318,20.9193318 54.5020027,20.77 53.97,20.77 C53.1393292,20.77 52.5536684,21.1129966 52.213,21.799 C51.8723316,22.4850034 51.702,23.5186598 51.702,24.9 Z" id="0" fill="#000000"></path>
<path d="M58.8,25.53 L58.8,25.124 L65.394,21.106 L65.926,21.974 L60.368,25.264 L65.94,28.498 L65.408,29.338 L58.8,25.53 Z M72.884,19.832 L73.766,20.224 L68.656,31.76 L67.774,31.368 L72.884,19.832 Z" id="&lt;/" fill="#999999"></path>
<path d="M76.636,20 L78.96,20 L78.96,27.448 C78.96,28.0173362 79.0556657,28.4186655 79.247,28.652 C79.4383343,28.8853345 79.7206648,29.002 80.094,29.002 C80.3553346,29.002 80.6049988,28.9553338 80.843,28.862 C81.0810012,28.7686662 81.3446652,28.6100011 81.634,28.386 L82.138,29.156 C81.9886659,29.2866673 81.8253342,29.4033328 81.648,29.506 C81.4706658,29.6086672 81.2886676,29.6949996 81.102,29.765 C80.9153324,29.8350003 80.7286676,29.8886665 80.542,29.926 C80.3553324,29.9633335 80.1826675,29.982 80.024,29.982 C79.6786649,29.982 79.370668,29.9376671 79.1,29.849 C78.829332,29.7603329 78.6030009,29.618001 78.421,29.422 C78.2389991,29.225999 78.1013338,28.9670016 78.008,28.645 C77.9146662,28.3229984 77.868,27.9240024 77.868,27.448 L77.868,20.938 L76.636,20.938 L76.636,20 Z M84.84,29.8 L84.84,28.862 L87.276,28.862 L87.276,23.738 L84.84,23.738 L84.84,22.8 L88.396,22.8 L88.396,28.862 L90.776,28.862 L90.776,29.8 L84.84,29.8 Z M86.898,20.812 C86.898,20.5599987 86.9819992,20.3430009 87.15,20.161 C87.3180008,19.9789991 87.5326654,19.888 87.794,19.888 C88.064668,19.888 88.2909991,19.9789991 88.473,20.161 C88.6550009,20.3430009 88.746,20.5599987 88.746,20.812 C88.746,21.0546679 88.6550009,21.2599992 88.473,21.428 C88.2909991,21.5960008 88.064668,21.68 87.794,21.68 C87.5326654,21.68 87.3180008,21.5960008 87.15,21.428 C86.9819992,21.2599992 86.898,21.0546679 86.898,20.812 Z" id="li" fill="#990055"></path>
<path d="M92.932,29.338 L92.4,28.498 L97.972,25.264 L92.414,21.974 L92.946,21.106 L99.54,25.124 L99.54,25.53 L92.932,29.338 Z M16.8,45.53 L16.8,45.124 L23.394,41.106 L23.926,41.974 L18.368,45.264 L23.94,48.498 L23.408,49.338 L16.8,45.53 Z" id="&gt;&lt;" fill="#999999"></path>
<path d="M26.236,40 L28.56,40 L28.56,47.448 C28.56,48.0173362 28.6556657,48.4186655 28.847,48.652 C29.0383343,48.8853345 29.3206648,49.002 29.694,49.002 C29.9553346,49.002 30.2049988,48.9553338 30.443,48.862 C30.6810012,48.7686662 30.9446652,48.6100011 31.234,48.386 L31.738,49.156 C31.5886659,49.2866673 31.4253342,49.4033328 31.248,49.506 C31.0706658,49.6086672 30.8886676,49.6949996 30.702,49.765 C30.5153324,49.8350003 30.3286676,49.8886665 30.142,49.926 C29.9553324,49.9633335 29.7826675,49.982 29.624,49.982 C29.2786649,49.982 28.970668,49.9376671 28.7,49.849 C28.429332,49.7603329 28.2030009,49.618001 28.021,49.422 C27.8389991,49.225999 27.7013338,48.9670016 27.608,48.645 C27.5146662,48.3229984 27.468,47.9240024 27.468,47.448 L27.468,40.938 L26.236,40.938 L26.236,40 Z M34.44,49.8 L34.44,48.862 L36.876,48.862 L36.876,43.738 L34.44,43.738 L34.44,42.8 L37.996,42.8 L37.996,48.862 L40.376,48.862 L40.376,49.8 L34.44,49.8 Z M36.498,40.812 C36.498,40.5599987 36.5819992,40.3430009 36.75,40.161 C36.9180008,39.9789991 37.1326654,39.888 37.394,39.888 C37.664668,39.888 37.8909991,39.9789991 38.073,40.161 C38.2550009,40.3430009 38.346,40.5599987 38.346,40.812 C38.346,41.0546679 38.2550009,41.2599992 38.073,41.428 C37.8909991,41.5960008 37.664668,41.68 37.394,41.68 C37.1326654,41.68 36.9180008,41.5960008 36.75,41.428 C36.5819992,41.2599992 36.498,41.0546679 36.498,40.812 Z" id="li" fill="#990055"></path>
<polygon id="&gt;" fill="#999999" points="42.532 49.338 42 48.498 47.572 45.264 42.014 41.974 42.546 41.106 49.14 45.124 49.14 45.53"></polygon>
<polygon id="1" fill="#000000" points="51.548 48.792 53.746 48.792 53.746 41.428 51.506 42.996 50.96 42.198 54.04 40 54.824 40 54.824 48.792 56.98 48.792 56.98 49.8 51.548 49.8"></polygon>
<path d="M58.8,45.53 L58.8,45.124 L65.394,41.106 L65.926,41.974 L60.368,45.264 L65.94,48.498 L65.408,49.338 L58.8,45.53 Z M72.884,39.832 L73.766,40.224 L68.656,51.76 L67.774,51.368 L72.884,39.832 Z" id="&lt;/" fill="#999999"></path>
<path d="M76.636,40 L78.96,40 L78.96,47.448 C78.96,48.0173362 79.0556657,48.4186655 79.247,48.652 C79.4383343,48.8853345 79.7206648,49.002 80.094,49.002 C80.3553346,49.002 80.6049988,48.9553338 80.843,48.862 C81.0810012,48.7686662 81.3446652,48.6100011 81.634,48.386 L82.138,49.156 C81.9886659,49.2866673 81.8253342,49.4033328 81.648,49.506 C81.4706658,49.6086672 81.2886676,49.6949996 81.102,49.765 C80.9153324,49.8350003 80.7286676,49.8886665 80.542,49.926 C80.3553324,49.9633335 80.1826675,49.982 80.024,49.982 C79.6786649,49.982 79.370668,49.9376671 79.1,49.849 C78.829332,49.7603329 78.6030009,49.618001 78.421,49.422 C78.2389991,49.225999 78.1013338,48.9670016 78.008,48.645 C77.9146662,48.3229984 77.868,47.9240024 77.868,47.448 L77.868,40.938 L76.636,40.938 L76.636,40 Z M84.84,49.8 L84.84,48.862 L87.276,48.862 L87.276,43.738 L84.84,43.738 L84.84,42.8 L88.396,42.8 L88.396,48.862 L90.776,48.862 L90.776,49.8 L84.84,49.8 Z M86.898,40.812 C86.898,40.5599987 86.9819992,40.3430009 87.15,40.161 C87.3180008,39.9789991 87.5326654,39.888 87.794,39.888 C88.064668,39.888 88.2909991,39.9789991 88.473,40.161 C88.6550009,40.3430009 88.746,40.5599987 88.746,40.812 C88.746,41.0546679 88.6550009,41.2599992 88.473,41.428 C88.2909991,41.5960008 88.064668,41.68 87.794,41.68 C87.5326654,41.68 87.3180008,41.5960008 87.15,41.428 C86.9819992,41.2599992 86.898,41.0546679 86.898,40.812 Z" id="li" fill="#990055"></path>
<path d="M92.932,49.338 L92.4,48.498 L97.972,45.264 L92.414,41.974 L92.946,41.106 L99.54,45.124 L99.54,45.53 L92.932,49.338 Z M16.8,65.53 L16.8,65.124 L23.394,61.106 L23.926,61.974 L18.368,65.264 L23.94,68.498 L23.408,69.338 L16.8,65.53 Z" id="&gt;&lt;" fill="#999999"></path>
<path d="M26.236,60 L28.56,60 L28.56,67.448 C28.56,68.0173362 28.6556657,68.4186655 28.847,68.652 C29.0383343,68.8853345 29.3206648,69.002 29.694,69.002 C29.9553346,69.002 30.2049988,68.9553338 30.443,68.862 C30.6810012,68.7686662 30.9446652,68.6100011 31.234,68.386 L31.738,69.156 C31.5886659,69.2866673 31.4253342,69.4033328 31.248,69.506 C31.0706658,69.6086672 30.8886676,69.6949996 30.702,69.765 C30.5153324,69.8350003 30.3286676,69.8886665 30.142,69.926 C29.9553324,69.9633335 29.7826675,69.982 29.624,69.982 C29.2786649,69.982 28.970668,69.9376671 28.7,69.849 C28.429332,69.7603329 28.2030009,69.618001 28.021,69.422 C27.8389991,69.225999 27.7013338,68.9670016 27.608,68.645 C27.5146662,68.3229984 27.468,67.9240024 27.468,67.448 L27.468,60.938 L26.236,60.938 L26.236,60 Z M34.44,69.8 L34.44,68.862 L36.876,68.862 L36.876,63.738 L34.44,63.738 L34.44,62.8 L37.996,62.8 L37.996,68.862 L40.376,68.862 L40.376,69.8 L34.44,69.8 Z M36.498,60.812 C36.498,60.5599987 36.5819992,60.3430009 36.75,60.161 C36.9180008,59.9789991 37.1326654,59.888 37.394,59.888 C37.664668,59.888 37.8909991,59.9789991 38.073,60.161 C38.2550009,60.3430009 38.346,60.5599987 38.346,60.812 C38.346,61.0546679 38.2550009,61.2599992 38.073,61.428 C37.8909991,61.5960008 37.664668,61.68 37.394,61.68 C37.1326654,61.68 36.9180008,61.5960008 36.75,61.428 C36.5819992,61.2599992 36.498,61.0546679 36.498,60.812 Z" id="li" fill="#990055"></path>
<polygon id="&gt;" fill="#999999" points="42.532 69.338 42 68.498 47.572 65.264 42.014 61.974 42.546 61.106 49.14 65.124 49.14 65.53"></polygon>
<path d="M56.77,62.478 C56.77,63.336671 56.3640041,64.2933281 55.552,65.348 C54.7399959,66.4026719 53.6060073,67.5506605 52.15,68.792 L57.078,68.792 L57.078,69.8 L50.862,69.8 L50.862,68.792 C51.0393342,68.6239992 51.2819985,68.404668 51.59,68.134 C51.8980015,67.863332 52.2293316,67.562335 52.584,67.231 C52.9386684,66.899665 53.3003315,66.5426686 53.669,66.16 C54.0376685,65.7773314 54.3713318,65.3853353 54.67,64.984 C54.9686682,64.5826647 55.2113324,64.1813353 55.398,63.78 C55.5846676,63.3786647 55.678,62.9913352 55.678,62.618 C55.678,62.0579972 55.5310015,61.6170016 55.237,61.295 C54.9429985,60.9729984 54.5020029,60.812 53.914,60.812 C53.4099975,60.812 52.9853351,60.8679994 52.64,60.98 C52.2946649,61.0920006 51.9820014,61.2553323 51.702,61.47 L51.226,60.7 C51.6460021,60.4013318 52.0916643,60.1820007 52.563,60.042 C53.0343357,59.9019993 53.5499972,59.832 54.11,59.832 C54.9873377,59.832 55.6499978,60.0699976 56.098,60.546 C56.5460022,61.0220024 56.77,61.6659959 56.77,62.478 Z" id="2" fill="#000000"></path>
<path d="M58.8,65.53 L58.8,65.124 L65.394,61.106 L65.926,61.974 L60.368,65.264 L65.94,68.498 L65.408,69.338 L58.8,65.53 Z M72.884,59.832 L73.766,60.224 L68.656,71.76 L67.774,71.368 L72.884,59.832 Z" id="&lt;/" fill="#999999"></path>
<path d="M76.636,60 L78.96,60 L78.96,67.448 C78.96,68.0173362 79.0556657,68.4186655 79.247,68.652 C79.4383343,68.8853345 79.7206648,69.002 80.094,69.002 C80.3553346,69.002 80.6049988,68.9553338 80.843,68.862 C81.0810012,68.7686662 81.3446652,68.6100011 81.634,68.386 L82.138,69.156 C81.9886659,69.2866673 81.8253342,69.4033328 81.648,69.506 C81.4706658,69.6086672 81.2886676,69.6949996 81.102,69.765 C80.9153324,69.8350003 80.7286676,69.8886665 80.542,69.926 C80.3553324,69.9633335 80.1826675,69.982 80.024,69.982 C79.6786649,69.982 79.370668,69.9376671 79.1,69.849 C78.829332,69.7603329 78.6030009,69.618001 78.421,69.422 C78.2389991,69.225999 78.1013338,68.9670016 78.008,68.645 C77.9146662,68.3229984 77.868,67.9240024 77.868,67.448 L77.868,60.938 L76.636,60.938 L76.636,60 Z M84.84,69.8 L84.84,68.862 L87.276,68.862 L87.276,63.738 L84.84,63.738 L84.84,62.8 L88.396,62.8 L88.396,68.862 L90.776,68.862 L90.776,69.8 L84.84,69.8 Z M86.898,60.812 C86.898,60.5599987 86.9819992,60.3430009 87.15,60.161 C87.3180008,59.9789991 87.5326654,59.888 87.794,59.888 C88.064668,59.888 88.2909991,59.9789991 88.473,60.161 C88.6550009,60.3430009 88.746,60.5599987 88.746,60.812 C88.746,61.0546679 88.6550009,61.2599992 88.473,61.428 C88.2909991,61.5960008 88.064668,61.68 87.794,61.68 C87.5326654,61.68 87.3180008,61.5960008 87.15,61.428 C86.9819992,61.2599992 86.898,61.0546679 86.898,60.812 Z" id="li" fill="#990055"></path>
<path d="M92.932,69.338 L92.4,68.498 L97.972,65.264 L92.414,61.974 L92.946,61.106 L99.54,65.124 L99.54,65.53 L92.932,69.338 Z M-4.8316906e-13,85.53 L-4.8316906e-13,85.124 L6.594,81.106 L7.126,81.974 L1.568,85.264 L7.14,88.498 L6.608,89.338 L-4.8316906e-13,85.53 Z M14.084,79.832 L14.966,80.224 L9.856,91.76 L8.974,91.368 L14.084,79.832 Z" id="&gt;&lt;/" fill="#999999"></path>
<path d="M16.968,86.3 C16.968,85.170661 17.2619971,84.2770033 17.85,83.619 C18.4380029,82.9609967 19.2779945,82.632 20.37,82.632 C20.9580029,82.632 21.4643312,82.7276657 21.889,82.919 C22.3136688,83.1103343 22.6659986,83.3693317 22.946,83.696 C23.2260014,84.0226683 23.433666,84.4099978 23.569,84.858 C23.704334,85.3060022 23.772,85.7866641 23.772,86.3 C23.772,86.8600028 23.6973341,87.3663311 23.548,87.819 C23.3986659,88.2716689 23.1793348,88.6566651 22.89,88.974 C22.6006652,89.2913349 22.2436688,89.5363325 21.819,89.709 C21.3943312,89.8816675 20.911336,89.968 20.37,89.968 C19.7913304,89.968 19.2873355,89.8723343 18.858,89.681 C18.4286645,89.4896657 18.0740014,89.2306683 17.794,88.904 C17.5139986,88.5773317 17.306334,88.1900022 17.171,87.742 C17.035666,87.2939978 16.968,86.8133359 16.968,86.3 Z M18.13,86.3 C18.13,86.6266683 18.1696663,86.9533317 18.249,87.28 C18.3283337,87.6066683 18.4566658,87.9006654 18.634,88.162 C18.8113342,88.4233346 19.0423319,88.6333325 19.327,88.792 C19.6116681,88.9506675 19.9593313,89.03 20.37,89.03 C21.1166704,89.03 21.6789981,88.7990023 22.057,88.337 C22.4350019,87.8749977 22.624,87.1960045 22.624,86.3 C22.624,85.9639983 22.5843337,85.6350016 22.505,85.313 C22.4256663,84.9909984 22.2950009,84.6993346 22.113,84.438 C21.9309991,84.1766654 21.6976681,83.9666675 21.413,83.808 C21.1283319,83.6493325 20.7806687,83.57 20.37,83.57 C19.6233296,83.57 19.0633352,83.7986644 18.69,84.256 C18.3166648,84.7133356 18.13,85.3946621 18.13,86.3 Z M26.236,80 L28.56,80 L28.56,87.448 C28.56,88.0173362 28.6556657,88.4186655 28.847,88.652 C29.0383343,88.8853345 29.3206648,89.002 29.694,89.002 C29.9553346,89.002 30.2049988,88.9553338 30.443,88.862 C30.6810012,88.7686662 30.9446652,88.6100011 31.234,88.386 L31.738,89.156 C31.5886659,89.2866673 31.4253342,89.4033328 31.248,89.506 C31.0706658,89.6086672 30.8886676,89.6949996 30.702,89.765 C30.5153324,89.8350004 30.3286676,89.8886665 30.142,89.926 C29.9553324,89.9633335 29.7826675,89.982 29.624,89.982 C29.2786649,89.982 28.970668,89.9376671 28.7,89.849 C28.429332,89.7603329 28.2030009,89.618001 28.021,89.422 C27.8389991,89.225999 27.7013338,88.9670016 27.608,88.645 C27.5146662,88.3229984 27.468,87.9240024 27.468,87.448 L27.468,80.938 L26.236,80.938 L26.236,80 Z" id="ol" fill="#990055"></path>
<polygon id="&gt;" fill="#999999" points="34.132 89.338 33.6 88.498 39.172 85.264 33.614 81.974 34.146 81.106 40.74 85.124 40.74 85.53"></polygon>
</g>
<g id="Line-Copy-5-+-Line-Copy-4-+-Line-Copy-3" transform="translate(132.000000, 163.000000) rotate(90.000000) translate(-132.000000, -163.000000) translate(116.500000, 73.500000)" stroke="#EE6B47" stroke-linecap="square" stroke-width="3">
<path d="M0.52734375,0.625 C0.52734375,0.625 30.8847656,-3.5 30.8847656,81.25 C30.8847656,166 15.7060547,175.972656 15.7060547,175.972656" id="Line-Copy-5"></path>
<path d="M15,178 L15,161" id="Line"></path>
<path d="M15,178 L30,173" id="Line-Copy"></path>
</g>
<g id="Line-Copy-5-+-Line-Copy-4-+-Line-Copy-3-Copy-Copy" transform="translate(143.500000, 132.500000) rotate(90.000000) translate(-143.500000, -132.500000) translate(129.000000, 51.000000)" stroke="#EE6B47" stroke-linecap="square" stroke-width="3">
<path d="M0.256764482,0.737190855 C0.256764482,0.737190855 21.4618426,8.32592025 21.4618426,93.8558282 C21.4618426,179.385736 21.4618426,161.098869 21.4618426,161.098869" id="Line-Copy-5"></path>
<path d="M21.4085366,162.661043 L14.5,150.5" id="Line"></path>
<path d="M21.4756098,162.490798 L27.5,150.5" id="Line-Copy"></path>
</g>
<g id="Line-Copy-5-+-Line-Copy-4-+-Line-Copy-3-Copy-Copy-Copy" transform="translate(143.500000, 81.500000) scale(1, -1) rotate(90.000000) translate(-143.500000, -81.500000) translate(129.000000, 0.000000)" stroke="#EE6B47" stroke-linecap="square" stroke-width="3">
<path d="M0.256764482,0.737190855 C0.256764482,0.737190855 21.4618426,8.32592025 21.4618426,93.8558282 C21.4618426,179.385736 21.4618426,161.098869 21.4618426,161.098869" id="Line-Copy-5"></path>
<path d="M21.4085366,162.661043 L14.5,150.5" id="Line"></path>
<path d="M21.4756098,162.490798 L27.5,150.5" id="Line-Copy"></path>
</g>
<path d="M45.5,35.5 L50.5,49.5" id="Line-Copy-3" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" transform="translate(48.000000, 42.500000) scale(1, -1) translate(-48.000000, -42.500000) "></path>
<path d="M45.5,49.5 L59.5,49.5" id="Line-Copy-2" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" transform="translate(52.500000, 49.500000) scale(1, -1) translate(-52.500000, -49.500000) "></path>
<text id="ol.after" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="113" y="193">ol.after</tspan>
</text>
<text id="ol.append" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="113" y="156">ol.append</tspan>
</text>
<text id="ol.prepend" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="113" y="66">ol.prepend</tspan>
</text>
<g id="Line-Copy-5-+-Line-Copy-4-+-Line-Copy-3-Copy" transform="translate(134.500000, 49.000000) scale(1, -1) rotate(90.000000) translate(-134.500000, -49.000000) translate(119.000000, -39.000000)" stroke="#EE6B47" stroke-linecap="square" stroke-width="3">
<path d="M0.52734375,0.625 C0.52734375,0.625 30.8847656,-3.5 30.8847656,81.25 C30.8847656,166 15.7060547,175.972656 15.7060547,175.972656" id="Line-Copy-5"></path>
</g>
<text id="ol.before" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="111" y="26">ol.before</tspan>
</text>
<text id="ol.*(…nodes-or-strin" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8B572A">
<tspan x="198" y="112">ol.*(…nodes or strings)</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
2-ui/1-document/07-modifying-document/before-prepend-append-after@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 47 KiB

BIN
2-ui/1-document/07-modifying-document/insert-adjacent.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 21 KiB

70
2-ui/1-document/07-modifying-document/insert-adjacent.svg Normal file
View file

@ -0,0 +1,70 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="409px" height="203px" viewBox="0 0 409 203" 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>insert-adjacent.svg</title>
<desc>Created with sketchtool.</desc>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="insert-adjacent.svg">
<g id="&lt;ol&gt;-&lt;li&gt;0&lt;/li&gt;-&lt;li&gt;" transform="translate(18.630000, 60.200000)" fill-rule="nonzero">
<polygon id="&lt;" fill="#999999" points="-2.91322522e-13 5.53 -2.91322522e-13 5.124 6.594 1.106 7.126 1.974 1.568 5.264 7.14 8.498 6.608 9.338"></polygon>
<path d="M8.568,6.3 C8.568,5.17066102 8.86199706,4.27700329 9.45,3.619 C10.0380029,2.96099671 10.8779945,2.632 11.97,2.632 C12.5580029,2.632 13.0643312,2.72766571 13.489,2.919 C13.9136688,3.11033429 14.2659986,3.3693317 14.546,3.696 C14.8260014,4.0226683 15.033666,4.40999776 15.169,4.858 C15.304334,5.30600224 15.372,5.7866641 15.372,6.3 C15.372,6.8600028 15.2973341,7.36633107 15.148,7.819 C14.9986659,8.27166893 14.7793348,8.65666508 14.49,8.974 C14.2006652,9.29133492 13.8436688,9.53633247 13.419,9.709 C12.9943312,9.88166753 12.511336,9.968 11.97,9.968 C11.3913304,9.968 10.8873355,9.87233429 10.458,9.681 C10.0286645,9.48966571 9.6740014,9.2306683 9.394,8.904 C9.1139986,8.5773317 8.90633401,8.19000224 8.771,7.742 C8.63566599,7.29399776 8.568,6.8133359 8.568,6.3 Z M9.73,6.3 C9.73,6.6266683 9.76966627,6.9533317 9.849,7.28 C9.92833373,7.6066683 10.0566658,7.90066536 10.234,8.162 C10.4113342,8.42333464 10.6423319,8.63333254 10.927,8.792 C11.2116681,8.95066746 11.5593313,9.03 11.97,9.03 C12.7166704,9.03 13.2789981,8.79900231 13.657,8.337 C14.0350019,7.87499769 14.224,7.19600448 14.224,6.3 C14.224,5.96399832 14.1843337,5.63500161 14.105,5.313 C14.0256663,4.99099839 13.8950009,4.69933464 13.713,4.438 C13.5309991,4.17666536 13.2976681,3.96666746 13.013,3.808 C12.7283319,3.64933254 12.3806687,3.57 11.97,3.57 C11.2233296,3.57 10.6633352,3.79866438 10.29,4.256 C9.9166648,4.71333562 9.73,5.39466214 9.73,6.3 Z M17.836,-1.42108547e-14 L20.16,-1.42108547e-14 L20.16,7.448 C20.16,8.01733618 20.2556657,8.4186655 20.447,8.652 C20.6383343,8.8853345 20.9206648,9.002 21.294,9.002 C21.5553346,9.002 21.8049988,8.9553338 22.043,8.862 C22.2810012,8.7686662 22.5446652,8.61000112 22.834,8.386 L23.338,9.156 C23.1886659,9.28666732 23.0253342,9.40333282 22.848,9.506 C22.6706658,9.60866718 22.4886676,9.69499965 22.302,9.765 C22.1153324,9.83500035 21.9286676,9.88866648 21.742,9.926 C21.5553324,9.96333352 21.3826675,9.982 21.224,9.982 C20.8786649,9.982 20.570668,9.93766711 20.3,9.849 C20.029332,9.76033289 19.8030009,9.61800098 19.621,9.422 C19.4389991,9.22599902 19.3013338,8.96700161 19.208,8.645 C19.1146662,8.32299839 19.068,7.92400238 19.068,7.448 L19.068,0.938 L17.836,0.938 L17.836,-1.42108547e-14 Z" id="ol" fill="#990055"></path>
<path d="M25.732,9.338 L25.2,8.498 L30.772,5.264 L25.214,1.974 L25.746,1.106 L32.34,5.124 L32.34,5.53 L25.732,9.338 Z M16.8,25.53 L16.8,25.124 L23.394,21.106 L23.926,21.974 L18.368,25.264 L23.94,28.498 L23.408,29.338 L16.8,25.53 Z" id="&gt;&lt;" fill="#999999"></path>
<path d="M26.236,20 L28.56,20 L28.56,27.448 C28.56,28.0173362 28.6556657,28.4186655 28.847,28.652 C29.0383343,28.8853345 29.3206648,29.002 29.694,29.002 C29.9553346,29.002 30.2049988,28.9553338 30.443,28.862 C30.6810012,28.7686662 30.9446652,28.6100011 31.234,28.386 L31.738,29.156 C31.5886659,29.2866673 31.4253342,29.4033328 31.248,29.506 C31.0706658,29.6086672 30.8886676,29.6949996 30.702,29.765 C30.5153324,29.8350003 30.3286676,29.8886665 30.142,29.926 C29.9553324,29.9633335 29.7826675,29.982 29.624,29.982 C29.2786649,29.982 28.970668,29.9376671 28.7,29.849 C28.429332,29.7603329 28.2030009,29.618001 28.021,29.422 C27.8389991,29.225999 27.7013338,28.9670016 27.608,28.645 C27.5146662,28.3229984 27.468,27.9240024 27.468,27.448 L27.468,20.938 L26.236,20.938 L26.236,20 Z M34.44,29.8 L34.44,28.862 L36.876,28.862 L36.876,23.738 L34.44,23.738 L34.44,22.8 L37.996,22.8 L37.996,28.862 L40.376,28.862 L40.376,29.8 L34.44,29.8 Z M36.498,20.812 C36.498,20.5599987 36.5819992,20.3430009 36.75,20.161 C36.9180008,19.9789991 37.1326654,19.888 37.394,19.888 C37.664668,19.888 37.8909991,19.9789991 38.073,20.161 C38.2550009,20.3430009 38.346,20.5599987 38.346,20.812 C38.346,21.0546679 38.2550009,21.2599992 38.073,21.428 C37.8909991,21.5960008 37.664668,21.68 37.394,21.68 C37.1326654,21.68 36.9180008,21.5960008 36.75,21.428 C36.5819992,21.2599992 36.498,21.0546679 36.498,20.812 Z" id="li" fill="#990055"></path>
<polygon id="&gt;" fill="#999999" points="42.532 29.338 42 28.498 47.572 25.264 42.014 21.974 42.546 21.106 49.14 25.124 49.14 25.53"></polygon>
<path d="M50.54,24.9 C50.54,24.1066627 50.6099993,23.3950031 50.75,22.765 C50.8900007,22.1349968 51.0999986,21.6030022 51.38,21.169 C51.6600014,20.7349978 52.0146645,20.4036678 52.444,20.175 C52.8733355,19.9463322 53.3819971,19.832 53.97,19.832 C54.5953365,19.832 55.1249978,19.9439989 55.559,20.168 C55.9930022,20.3920011 56.345332,20.7186645 56.616,21.148 C56.886668,21.5773355 57.0826661,22.1069968 57.204,22.737 C57.3253339,23.3670031 57.386,24.0879959 57.386,24.9 C57.386,25.6933373 57.3160007,26.4049968 57.176,27.035 C57.0359993,27.6650031 56.8260014,28.1969978 56.546,28.631 C56.2659986,29.0650022 55.9113355,29.3963322 55.482,29.625 C55.0526645,29.8536678 54.5440029,29.968 53.956,29.968 C53.3399969,29.968 52.8150022,29.8443346 52.381,29.597 C51.9469978,29.3496654 51.5923347,29.0020022 51.317,28.554 C51.0416653,28.1059978 50.8433339,27.5716698 50.722,26.951 C50.6006661,26.3303302 50.54,25.6466704 50.54,24.9 Z M56.238,24.9 C56.238,24.4053309 56.2100003,23.9340022 56.154,23.486 L51.996,27.28 C52.1546675,27.8120027 52.3926651,28.2366651 52.71,28.554 C53.0273349,28.8713349 53.4426641,29.03 53.956,29.03 C54.7773374,29.03 55.3629982,28.6893367 55.713,28.008 C56.0630017,27.3266633 56.238,26.2906736 56.238,24.9 Z M51.702,24.9 C51.702,25.1333345 51.7089999,25.3573323 51.723,25.572 C51.7370001,25.7866677 51.7533332,25.9966656 51.772,26.202 L55.944,22.422 C55.7853325,21.9179975 55.5496682,21.5166682 55.237,21.218 C54.9243318,20.9193318 54.5020027,20.77 53.97,20.77 C53.1393292,20.77 52.5536684,21.1129966 52.213,21.799 C51.8723316,22.4850034 51.702,23.5186598 51.702,24.9 Z" id="0" fill="#000000"></path>
<path d="M58.8,25.53 L58.8,25.124 L65.394,21.106 L65.926,21.974 L60.368,25.264 L65.94,28.498 L65.408,29.338 L58.8,25.53 Z M72.884,19.832 L73.766,20.224 L68.656,31.76 L67.774,31.368 L72.884,19.832 Z" id="&lt;/" fill="#999999"></path>
<path d="M76.636,20 L78.96,20 L78.96,27.448 C78.96,28.0173362 79.0556657,28.4186655 79.247,28.652 C79.4383343,28.8853345 79.7206648,29.002 80.094,29.002 C80.3553346,29.002 80.6049988,28.9553338 80.843,28.862 C81.0810012,28.7686662 81.3446652,28.6100011 81.634,28.386 L82.138,29.156 C81.9886659,29.2866673 81.8253342,29.4033328 81.648,29.506 C81.4706658,29.6086672 81.2886676,29.6949996 81.102,29.765 C80.9153324,29.8350003 80.7286676,29.8886665 80.542,29.926 C80.3553324,29.9633335 80.1826675,29.982 80.024,29.982 C79.6786649,29.982 79.370668,29.9376671 79.1,29.849 C78.829332,29.7603329 78.6030009,29.618001 78.421,29.422 C78.2389991,29.225999 78.1013338,28.9670016 78.008,28.645 C77.9146662,28.3229984 77.868,27.9240024 77.868,27.448 L77.868,20.938 L76.636,20.938 L76.636,20 Z M84.84,29.8 L84.84,28.862 L87.276,28.862 L87.276,23.738 L84.84,23.738 L84.84,22.8 L88.396,22.8 L88.396,28.862 L90.776,28.862 L90.776,29.8 L84.84,29.8 Z M86.898,20.812 C86.898,20.5599987 86.9819992,20.3430009 87.15,20.161 C87.3180008,19.9789991 87.5326654,19.888 87.794,19.888 C88.064668,19.888 88.2909991,19.9789991 88.473,20.161 C88.6550009,20.3430009 88.746,20.5599987 88.746,20.812 C88.746,21.0546679 88.6550009,21.2599992 88.473,21.428 C88.2909991,21.5960008 88.064668,21.68 87.794,21.68 C87.5326654,21.68 87.3180008,21.5960008 87.15,21.428 C86.9819992,21.2599992 86.898,21.0546679 86.898,20.812 Z" id="li" fill="#990055"></path>
<path d="M92.932,29.338 L92.4,28.498 L97.972,25.264 L92.414,21.974 L92.946,21.106 L99.54,25.124 L99.54,25.53 L92.932,29.338 Z M16.8,45.53 L16.8,45.124 L23.394,41.106 L23.926,41.974 L18.368,45.264 L23.94,48.498 L23.408,49.338 L16.8,45.53 Z" id="&gt;&lt;" fill="#999999"></path>
<path d="M26.236,40 L28.56,40 L28.56,47.448 C28.56,48.0173362 28.6556657,48.4186655 28.847,48.652 C29.0383343,48.8853345 29.3206648,49.002 29.694,49.002 C29.9553346,49.002 30.2049988,48.9553338 30.443,48.862 C30.6810012,48.7686662 30.9446652,48.6100011 31.234,48.386 L31.738,49.156 C31.5886659,49.2866673 31.4253342,49.4033328 31.248,49.506 C31.0706658,49.6086672 30.8886676,49.6949996 30.702,49.765 C30.5153324,49.8350003 30.3286676,49.8886665 30.142,49.926 C29.9553324,49.9633335 29.7826675,49.982 29.624,49.982 C29.2786649,49.982 28.970668,49.9376671 28.7,49.849 C28.429332,49.7603329 28.2030009,49.618001 28.021,49.422 C27.8389991,49.225999 27.7013338,48.9670016 27.608,48.645 C27.5146662,48.3229984 27.468,47.9240024 27.468,47.448 L27.468,40.938 L26.236,40.938 L26.236,40 Z M34.44,49.8 L34.44,48.862 L36.876,48.862 L36.876,43.738 L34.44,43.738 L34.44,42.8 L37.996,42.8 L37.996,48.862 L40.376,48.862 L40.376,49.8 L34.44,49.8 Z M36.498,40.812 C36.498,40.5599987 36.5819992,40.3430009 36.75,40.161 C36.9180008,39.9789991 37.1326654,39.888 37.394,39.888 C37.664668,39.888 37.8909991,39.9789991 38.073,40.161 C38.2550009,40.3430009 38.346,40.5599987 38.346,40.812 C38.346,41.0546679 38.2550009,41.2599992 38.073,41.428 C37.8909991,41.5960008 37.664668,41.68 37.394,41.68 C37.1326654,41.68 36.9180008,41.5960008 36.75,41.428 C36.5819992,41.2599992 36.498,41.0546679 36.498,40.812 Z" id="li" fill="#990055"></path>
<polygon id="&gt;" fill="#999999" points="42.532 49.338 42 48.498 47.572 45.264 42.014 41.974 42.546 41.106 49.14 45.124 49.14 45.53"></polygon>
<polygon id="1" fill="#000000" points="51.548 48.792 53.746 48.792 53.746 41.428 51.506 42.996 50.96 42.198 54.04 40 54.824 40 54.824 48.792 56.98 48.792 56.98 49.8 51.548 49.8"></polygon>
<path d="M58.8,45.53 L58.8,45.124 L65.394,41.106 L65.926,41.974 L60.368,45.264 L65.94,48.498 L65.408,49.338 L58.8,45.53 Z M72.884,39.832 L73.766,40.224 L68.656,51.76 L67.774,51.368 L72.884,39.832 Z" id="&lt;/" fill="#999999"></path>
<path d="M76.636,40 L78.96,40 L78.96,47.448 C78.96,48.0173362 79.0556657,48.4186655 79.247,48.652 C79.4383343,48.8853345 79.7206648,49.002 80.094,49.002 C80.3553346,49.002 80.6049988,48.9553338 80.843,48.862 C81.0810012,48.7686662 81.3446652,48.6100011 81.634,48.386 L82.138,49.156 C81.9886659,49.2866673 81.8253342,49.4033328 81.648,49.506 C81.4706658,49.6086672 81.2886676,49.6949996 81.102,49.765 C80.9153324,49.8350003 80.7286676,49.8886665 80.542,49.926 C80.3553324,49.9633335 80.1826675,49.982 80.024,49.982 C79.6786649,49.982 79.370668,49.9376671 79.1,49.849 C78.829332,49.7603329 78.6030009,49.618001 78.421,49.422 C78.2389991,49.225999 78.1013338,48.9670016 78.008,48.645 C77.9146662,48.3229984 77.868,47.9240024 77.868,47.448 L77.868,40.938 L76.636,40.938 L76.636,40 Z M84.84,49.8 L84.84,48.862 L87.276,48.862 L87.276,43.738 L84.84,43.738 L84.84,42.8 L88.396,42.8 L88.396,48.862 L90.776,48.862 L90.776,49.8 L84.84,49.8 Z M86.898,40.812 C86.898,40.5599987 86.9819992,40.3430009 87.15,40.161 C87.3180008,39.9789991 87.5326654,39.888 87.794,39.888 C88.064668,39.888 88.2909991,39.9789991 88.473,40.161 C88.6550009,40.3430009 88.746,40.5599987 88.746,40.812 C88.746,41.0546679 88.6550009,41.2599992 88.473,41.428 C88.2909991,41.5960008 88.064668,41.68 87.794,41.68 C87.5326654,41.68 87.3180008,41.5960008 87.15,41.428 C86.9819992,41.2599992 86.898,41.0546679 86.898,40.812 Z" id="li" fill="#990055"></path>
<path d="M92.932,49.338 L92.4,48.498 L97.972,45.264 L92.414,41.974 L92.946,41.106 L99.54,45.124 L99.54,45.53 L92.932,49.338 Z M16.8,65.53 L16.8,65.124 L23.394,61.106 L23.926,61.974 L18.368,65.264 L23.94,68.498 L23.408,69.338 L16.8,65.53 Z" id="&gt;&lt;" fill="#999999"></path>
<path d="M26.236,60 L28.56,60 L28.56,67.448 C28.56,68.0173362 28.6556657,68.4186655 28.847,68.652 C29.0383343,68.8853345 29.3206648,69.002 29.694,69.002 C29.9553346,69.002 30.2049988,68.9553338 30.443,68.862 C30.6810012,68.7686662 30.9446652,68.6100011 31.234,68.386 L31.738,69.156 C31.5886659,69.2866673 31.4253342,69.4033328 31.248,69.506 C31.0706658,69.6086672 30.8886676,69.6949996 30.702,69.765 C30.5153324,69.8350003 30.3286676,69.8886665 30.142,69.926 C29.9553324,69.9633335 29.7826675,69.982 29.624,69.982 C29.2786649,69.982 28.970668,69.9376671 28.7,69.849 C28.429332,69.7603329 28.2030009,69.618001 28.021,69.422 C27.8389991,69.225999 27.7013338,68.9670016 27.608,68.645 C27.5146662,68.3229984 27.468,67.9240024 27.468,67.448 L27.468,60.938 L26.236,60.938 L26.236,60 Z M34.44,69.8 L34.44,68.862 L36.876,68.862 L36.876,63.738 L34.44,63.738 L34.44,62.8 L37.996,62.8 L37.996,68.862 L40.376,68.862 L40.376,69.8 L34.44,69.8 Z M36.498,60.812 C36.498,60.5599987 36.5819992,60.3430009 36.75,60.161 C36.9180008,59.9789991 37.1326654,59.888 37.394,59.888 C37.664668,59.888 37.8909991,59.9789991 38.073,60.161 C38.2550009,60.3430009 38.346,60.5599987 38.346,60.812 C38.346,61.0546679 38.2550009,61.2599992 38.073,61.428 C37.8909991,61.5960008 37.664668,61.68 37.394,61.68 C37.1326654,61.68 36.9180008,61.5960008 36.75,61.428 C36.5819992,61.2599992 36.498,61.0546679 36.498,60.812 Z" id="li" fill="#990055"></path>
<polygon id="&gt;" fill="#999999" points="42.532 69.338 42 68.498 47.572 65.264 42.014 61.974 42.546 61.106 49.14 65.124 49.14 65.53"></polygon>
<path d="M56.77,62.478 C56.77,63.336671 56.3640041,64.2933281 55.552,65.348 C54.7399959,66.4026719 53.6060073,67.5506605 52.15,68.792 L57.078,68.792 L57.078,69.8 L50.862,69.8 L50.862,68.792 C51.0393342,68.6239992 51.2819985,68.404668 51.59,68.134 C51.8980015,67.863332 52.2293316,67.562335 52.584,67.231 C52.9386684,66.899665 53.3003315,66.5426686 53.669,66.16 C54.0376685,65.7773314 54.3713318,65.3853353 54.67,64.984 C54.9686682,64.5826647 55.2113324,64.1813353 55.398,63.78 C55.5846676,63.3786647 55.678,62.9913352 55.678,62.618 C55.678,62.0579972 55.5310015,61.6170016 55.237,61.295 C54.9429985,60.9729984 54.5020029,60.812 53.914,60.812 C53.4099975,60.812 52.9853351,60.8679994 52.64,60.98 C52.2946649,61.0920006 51.9820014,61.2553323 51.702,61.47 L51.226,60.7 C51.6460021,60.4013318 52.0916643,60.1820007 52.563,60.042 C53.0343357,59.9019993 53.5499972,59.832 54.11,59.832 C54.9873377,59.832 55.6499978,60.0699976 56.098,60.546 C56.5460022,61.0220024 56.77,61.6659959 56.77,62.478 Z" id="2" fill="#000000"></path>
<path d="M58.8,65.53 L58.8,65.124 L65.394,61.106 L65.926,61.974 L60.368,65.264 L65.94,68.498 L65.408,69.338 L58.8,65.53 Z M72.884,59.832 L73.766,60.224 L68.656,71.76 L67.774,71.368 L72.884,59.832 Z" id="&lt;/" fill="#999999"></path>
<path d="M76.636,60 L78.96,60 L78.96,67.448 C78.96,68.0173362 79.0556657,68.4186655 79.247,68.652 C79.4383343,68.8853345 79.7206648,69.002 80.094,69.002 C80.3553346,69.002 80.6049988,68.9553338 80.843,68.862 C81.0810012,68.7686662 81.3446652,68.6100011 81.634,68.386 L82.138,69.156 C81.9886659,69.2866673 81.8253342,69.4033328 81.648,69.506 C81.4706658,69.6086672 81.2886676,69.6949996 81.102,69.765 C80.9153324,69.8350003 80.7286676,69.8886665 80.542,69.926 C80.3553324,69.9633335 80.1826675,69.982 80.024,69.982 C79.6786649,69.982 79.370668,69.9376671 79.1,69.849 C78.829332,69.7603329 78.6030009,69.618001 78.421,69.422 C78.2389991,69.225999 78.1013338,68.9670016 78.008,68.645 C77.9146662,68.3229984 77.868,67.9240024 77.868,67.448 L77.868,60.938 L76.636,60.938 L76.636,60 Z M84.84,69.8 L84.84,68.862 L87.276,68.862 L87.276,63.738 L84.84,63.738 L84.84,62.8 L88.396,62.8 L88.396,68.862 L90.776,68.862 L90.776,69.8 L84.84,69.8 Z M86.898,60.812 C86.898,60.5599987 86.9819992,60.3430009 87.15,60.161 C87.3180008,59.9789991 87.5326654,59.888 87.794,59.888 C88.064668,59.888 88.2909991,59.9789991 88.473,60.161 C88.6550009,60.3430009 88.746,60.5599987 88.746,60.812 C88.746,61.0546679 88.6550009,61.2599992 88.473,61.428 C88.2909991,61.5960008 88.064668,61.68 87.794,61.68 C87.5326654,61.68 87.3180008,61.5960008 87.15,61.428 C86.9819992,61.2599992 86.898,61.0546679 86.898,60.812 Z" id="li" fill="#990055"></path>
<path d="M92.932,69.338 L92.4,68.498 L97.972,65.264 L92.414,61.974 L92.946,61.106 L99.54,65.124 L99.54,65.53 L92.932,69.338 Z M-4.8316906e-13,85.53 L-4.8316906e-13,85.124 L6.594,81.106 L7.126,81.974 L1.568,85.264 L7.14,88.498 L6.608,89.338 L-4.8316906e-13,85.53 Z M14.084,79.832 L14.966,80.224 L9.856,91.76 L8.974,91.368 L14.084,79.832 Z" id="&gt;&lt;/" fill="#999999"></path>
<path d="M16.968,86.3 C16.968,85.170661 17.2619971,84.2770033 17.85,83.619 C18.4380029,82.9609967 19.2779945,82.632 20.37,82.632 C20.9580029,82.632 21.4643312,82.7276657 21.889,82.919 C22.3136688,83.1103343 22.6659986,83.3693317 22.946,83.696 C23.2260014,84.0226683 23.433666,84.4099978 23.569,84.858 C23.704334,85.3060022 23.772,85.7866641 23.772,86.3 C23.772,86.8600028 23.6973341,87.3663311 23.548,87.819 C23.3986659,88.2716689 23.1793348,88.6566651 22.89,88.974 C22.6006652,89.2913349 22.2436688,89.5363325 21.819,89.709 C21.3943312,89.8816675 20.911336,89.968 20.37,89.968 C19.7913304,89.968 19.2873355,89.8723343 18.858,89.681 C18.4286645,89.4896657 18.0740014,89.2306683 17.794,88.904 C17.5139986,88.5773317 17.306334,88.1900022 17.171,87.742 C17.035666,87.2939978 16.968,86.8133359 16.968,86.3 Z M18.13,86.3 C18.13,86.6266683 18.1696663,86.9533317 18.249,87.28 C18.3283337,87.6066683 18.4566658,87.9006654 18.634,88.162 C18.8113342,88.4233346 19.0423319,88.6333325 19.327,88.792 C19.6116681,88.9506675 19.9593313,89.03 20.37,89.03 C21.1166704,89.03 21.6789981,88.7990023 22.057,88.337 C22.4350019,87.8749977 22.624,87.1960045 22.624,86.3 C22.624,85.9639983 22.5843337,85.6350016 22.505,85.313 C22.4256663,84.9909984 22.2950009,84.6993346 22.113,84.438 C21.9309991,84.1766654 21.6976681,83.9666675 21.413,83.808 C21.1283319,83.6493325 20.7806687,83.57 20.37,83.57 C19.6233296,83.57 19.0633352,83.7986644 18.69,84.256 C18.3166648,84.7133356 18.13,85.3946621 18.13,86.3 Z M26.236,80 L28.56,80 L28.56,87.448 C28.56,88.0173362 28.6556657,88.4186655 28.847,88.652 C29.0383343,88.8853345 29.3206648,89.002 29.694,89.002 C29.9553346,89.002 30.2049988,88.9553338 30.443,88.862 C30.6810012,88.7686662 30.9446652,88.6100011 31.234,88.386 L31.738,89.156 C31.5886659,89.2866673 31.4253342,89.4033328 31.248,89.506 C31.0706658,89.6086672 30.8886676,89.6949996 30.702,89.765 C30.5153324,89.8350004 30.3286676,89.8886665 30.142,89.926 C29.9553324,89.9633335 29.7826675,89.982 29.624,89.982 C29.2786649,89.982 28.970668,89.9376671 28.7,89.849 C28.429332,89.7603329 28.2030009,89.618001 28.021,89.422 C27.8389991,89.225999 27.7013338,88.9670016 27.608,88.645 C27.5146662,88.3229984 27.468,87.9240024 27.468,87.448 L27.468,80.938 L26.236,80.938 L26.236,80 Z" id="ol" fill="#990055"></path>
<polygon id="&gt;" fill="#999999" points="34.132 89.338 33.6 88.498 39.172 85.264 33.614 81.974 34.146 81.106 40.74 85.124 40.74 85.53"></polygon>
</g>
<text id="ol.insertAdjacentHTM" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8B572A">
<tspan x="156" y="112">ol.insertAdjacentHTML(*, html)</tspan>
</text>
<g id="Line-Copy-5-+-Line-Copy-4-+-Line-Copy-3" transform="translate(132.000000, 163.000000) rotate(90.000000) translate(-132.000000, -163.000000) translate(116.500000, 73.500000)" stroke="#EE6B47" stroke-linecap="square" stroke-width="3">
<path d="M0.52734375,0.625 C0.52734375,0.625 30.8847656,-3.5 30.8847656,81.25 C30.8847656,166 15.7060547,175.972656 15.7060547,175.972656" id="Line-Copy-5"></path>
<path d="M15,178 L15,161" id="Line"></path>
<path d="M15,178 L30,173" id="Line-Copy"></path>
</g>
<g id="Line-Copy-5-+-Line-Copy-4-+-Line-Copy-3-Copy-Copy" transform="translate(143.500000, 132.500000) rotate(90.000000) translate(-143.500000, -132.500000) translate(129.000000, 51.000000)" stroke="#EE6B47" stroke-linecap="square" stroke-width="3">
<path d="M0.256764482,0.737190855 C0.256764482,0.737190855 21.4618426,8.32592025 21.4618426,93.8558282 C21.4618426,179.385736 21.4618426,161.098869 21.4618426,161.098869" id="Line-Copy-5"></path>
<path d="M21.4085366,162.661043 L14.5,150.5" id="Line"></path>
<path d="M21.4756098,162.490798 L27.5,150.5" id="Line-Copy"></path>
</g>
<g id="Line-Copy-5-+-Line-Copy-4-+-Line-Copy-3-Copy-Copy-Copy" transform="translate(143.500000, 81.500000) scale(1, -1) rotate(90.000000) translate(-143.500000, -81.500000) translate(129.000000, 0.000000)" stroke="#EE6B47" stroke-linecap="square" stroke-width="3">
<path d="M0.256764482,0.737190855 C0.256764482,0.737190855 21.4618426,8.32592025 21.4618426,93.8558282 C21.4618426,179.385736 21.4618426,161.098869 21.4618426,161.098869" id="Line-Copy-5"></path>
<path d="M21.4085366,162.661043 L14.5,150.5" id="Line"></path>
<path d="M21.4756098,162.490798 L27.5,150.5" id="Line-Copy"></path>
</g>
<path d="M45.5,35.5 L50.5,49.5" id="Line-Copy-3" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" transform="translate(48.000000, 42.500000) scale(1, -1) translate(-48.000000, -42.500000) "></path>
<path d="M45.5,49.5 L59.5,49.5" id="Line-Copy-2" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" transform="translate(52.500000, 49.500000) scale(1, -1) translate(-52.500000, -49.500000) "></path>
<text id="afterend" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="113" y="193">afterend</tspan>
</text>
<text id="beforeend" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="113" y="156">beforeend</tspan>
</text>
<text id="afterbegin" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="113" y="66">afterbegin</tspan>
</text>
<g id="Line-Copy-5-+-Line-Copy-4-+-Line-Copy-3-Copy" transform="translate(134.500000, 49.000000) scale(1, -1) rotate(90.000000) translate(-134.500000, -49.000000) translate(119.000000, -39.000000)" stroke="#EE6B47" stroke-linecap="square" stroke-width="3">
<path d="M0.52734375,0.625 C0.52734375,0.625 30.8847656,-3.5 30.8847656,81.25 C30.8847656,166 15.7060547,175.972656 15.7060547,175.972656" id="Line-Copy-5"></path>
</g>
<text id="beforebegin" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="111" y="26">beforebegin</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
2-ui/1-document/07-modifying-document/insert-adjacent@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 51 KiB

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

2
2-ui/1-document/10-size-and-scroll-window/article.md
View file

@ -8,7 +8,7 @@ From the DOM point of view, the root document element is `document.documentEleme
Properties `clientWidth/clientHeight` of `document.documentElement` is exactly what we want here:
![](document-client-width-height.png)
![](document-client-width-height.svg)
```online
For instance, this button shows the height of your window:

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

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 15 KiB

28
2-ui/1-document/10-size-and-scroll-window/document-client-width-height.svg Normal file
View file

@ -0,0 +1,28 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="508px" height="203px" viewBox="0 0 508 203" 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>document-client-width-height.svg</title>
<desc>Created with sketchtool.</desc>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="document-client-width-height.svg">
<g id="noun_69008_cc" transform="translate(275.000000, 8.000000)" fill="#E8C48E">
<path d="M179.1875,145 L3.8125,145 C1.708,145 0,143.36875 0,141.375 L0,3.625 C0,1.63125 1.708,0 3.8125,0 L179.1875,0 C181.284375,0 183,1.63125 183,3.625 L183,141.375 C183,143.36875 181.284375,145 179.1875,145 L179.1875,145 Z M7.625,137.75 L175.375,137.75 L175.375,7.25 L7.625,7.25 L7.625,137.75 L7.625,137.75 Z" id="Shape"></path>
<path d="M175.375,36.25 L7.625,36.25 C5.5205,36.25 3.8125,34.61875 3.8125,32.625 C3.8125,30.63125 5.5205,29 7.625,29 L175.375,29 C177.471875,29 179.1875,30.63125 179.1875,32.625 C179.1875,34.61875 177.471875,36.25 175.375,36.25 L175.375,36.25 Z" id="Shape"></path>
<path d="M61.32025,126.57775 C60.0545,126.57775 58.811625,125.98325 58.08725,124.89575 L34.892,89.84925 C34.060875,88.57325 34.121875,86.97825 35.052125,85.7675 L58.247375,55.86125 C59.497875,54.23 61.876875,53.8965 63.57725,55.1145 C65.27,56.3035 65.636,58.57275 64.377875,60.18225 L42.7305,88.102 L64.538,121.05325 C65.658875,122.7425 65.125125,124.99 63.340875,126.04125 C62.72325,126.411 62.014125,126.57775 61.32025,126.57775 L61.32025,126.57775 Z" id="Shape"></path>
<path d="M122,126.57775 C121.306125,126.57775 120.597,126.411 119.97175,126.0195 C118.1875,124.961 117.646125,122.72075 118.774625,121.0315 L140.582125,88.08025 L118.927125,60.15325 C117.676625,58.5365 118.035,56.2745 119.72775,55.0855 C121.4205,53.88925 123.807125,54.23725 125.057625,55.84675 L148.24525,85.753 C149.183125,86.9565 149.244125,88.57325 148.405375,89.83475 L125.210125,124.88125 C124.501,125.98325 123.26575,126.57775 122,126.57775 L122,126.57775 Z" id="Shape"></path>
<path d="M76.25,119.93675 C75.617125,119.93675 74.98425,119.7845 74.3895,119.48 C72.551875,118.50125 71.896125,116.29725 72.9255,114.521 L103.10525,63.162 C104.134625,61.4075 106.445,60.77675 108.3055,61.79175 C110.1355,62.7705 110.79125,64.96725 109.761875,66.729 L79.582125,118.088 C78.880625,119.26975 77.584375,119.93675 76.25,119.93675 L76.25,119.93675 Z" id="Shape"></path>
<path d="M22.875,18.125 C22.875,20.1278125 21.1689062,21.75 19.0625,21.75 C16.9560938,21.75 15.25,20.1278125 15.25,18.125 C15.25,16.1221875 16.9560938,14.5 19.0625,14.5 C21.1689062,14.5 22.875,16.1221875 22.875,18.125 L22.875,18.125 Z" id="Shape"></path>
<path d="M38.125,18.125 C38.125,20.1278125 36.4189062,21.75 34.3125,21.75 C32.2060938,21.75 30.5,20.1278125 30.5,18.125 C30.5,16.1221875 32.2060938,14.5 34.3125,14.5 C36.4189062,14.5 38.125,16.1221875 38.125,18.125 L38.125,18.125 Z" id="Shape"></path>
<path d="M53.375,18.125 C53.375,20.1278125 51.6689062,21.75 49.5625,21.75 C47.4560938,21.75 45.75,20.1278125 45.75,18.125 C45.75,16.1221875 47.4560938,14.5 49.5625,14.5 C51.6689062,14.5 53.375,16.1221875 53.375,18.125 L53.375,18.125 Z" id="Shape"></path>
</g>
<text id="documentElement.clie" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="12" y="101">documentElement.clientHeight</tspan>
</text>
<text id="documentElement.clie" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="257" y="195">documentElement.clientWidth</tspan>
</text>
<path id="Line-3-Copy" d="M431.024582,169.653273 L299.024582,169.653273 L299.024582,177.653273 L280.024582,168.153273 L299.024582,158.653273 L299.024582,166.653273 L431.024582,166.653273 L431.024582,158.653273 L450.024582,168.153273 L431.024582,177.653273 L431.024582,169.653273 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line" d="M255,128 L255,64 L247,64 L256.5,45 L266,64 L258,64 L258,128 L266,128 L256.5,147 L247,128 L255,128 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.3 KiB

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

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 33 KiB

6
2-ui/1-document/11-coordinates/article.md
View file

@ -13,7 +13,7 @@ When the page is scrolled to the top, so that the top/left corner of the window
Here's the picture, the left part is before the scroll, and the right part - after scrolling the page up:
![](document-and-window-coordinates-scrolled.png)
![](document-and-window-coordinates-scrolled.svg)
As the document moved up:
- `pageY` - document-relative coordinate of the same point stayed the same, it's counted from the document top (now scrolled out).
@ -60,7 +60,7 @@ If you scroll the page and repeat, you'll notice that as window-relative button
Here's the picture of `elem.getBoundingClientRect()` output:
![](coordinates.png)
![](coordinates.svg)
As you can see, `x/y` and `width/height` fully describe the rectangle. Derived properties can be easily calculated:
- `left = x`
@ -80,7 +80,7 @@ Technically it's possible for `width/height` to be negative, that's useful for
Here's a rectangle with negative `width` and `height` (e.g. `width=-200`, `height=-100`):
![](coordinates-negative.png)
![](coordinates-negative.svg)
The rectangle starts at its bottom-right corner and then spans left/up, as negative `width/height` lead it backwards by coordinates.

BIN
2-ui/1-document/11-coordinates/coordinates-negative.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 45 KiB

64
2-ui/1-document/11-coordinates/coordinates-negative.svg Normal file
View file

@ -0,0 +1,64 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="521px" height="411px" viewBox="0 0 521 411" 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>coordinates-negative.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<filter x="-2.3%" y="-13.6%" width="104.5%" height="127.3%" filterUnits="objectBoundingBox" id="filter-1">
<feGaussianBlur stdDeviation="1" in="SourceGraphic"></feGaussianBlur>
</filter>
</defs>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="coordinates-negative.svg">
<g id="noun_69008_cc" transform="translate(13.000000, 11.000000)" fill="#E8C48E">
<path d="M455.3125,330 L9.6875,330 C4.34,330 0,326.2875 0,321.75 L0,8.25 C0,3.7125 4.34,0 9.6875,0 L455.3125,0 C460.640625,0 465,3.7125 465,8.25 L465,321.75 C465,326.2875 460.640625,330 455.3125,330 L455.3125,330 Z M9.43204868,318.938547 L453.681542,318.938547 L453.681542,11.0614525 L9.43204868,11.0614525 L9.43204868,318.938547 L9.43204868,318.938547 Z" id="Shape"></path>
<path d="M19.673913,46 C14.333913,46 10,44.875 10,43.5 C10,42.125 14.333913,41 19.673913,41 L445.326087,41 C450.646739,41 455,42.125 455,43.5 C455,44.875 450.646739,46 445.326087,46 L19.673913,46 Z" id="Shape"></path>
<path d="M31,27.5 C31,30.53875 28.53875,33 25.5,33 C22.46125,33 20,30.53875 20,27.5 C20,24.46125 22.46125,22 25.5,22 C28.53875,22 31,24.46125 31,27.5 L31,27.5 Z" id="Shape"></path>
<path d="M59,27.5 C59,30.53875 56.53875,33 53.5,33 C50.46125,33 48,30.53875 48,27.5 C48,24.46125 50.46125,22 53.5,22 C56.53875,22 59,24.46125 59,27.5 L59,27.5 Z" id="Shape"></path>
<path d="M87,27.5 C87,30.53875 84.53875,33 81.5,33 C78.46125,33 76,30.53875 76,27.5 C76,24.46125 78.46125,22 81.5,22 C84.53875,22 87,24.46125 87,27.5 L87,27.5 Z" id="Shape"></path>
</g>
<text id="bottom" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#999999">
<tspan x="414" y="196">bottom</tspan>
</text>
<path d="M392,290 L392,327" id="Line-30-Copy-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path d="M394,288 L463,288" id="Line-29-Copy" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<text id="(x,y)" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="395" y="305">(x,y)</tspan>
</text>
<text id="(x,y)-copy" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="395" y="305">(x,y)</tspan>
</text>
<text id="left" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#999999">
<tspan x="50" y="129">left</tspan>
</text>
<path id="Line-Copy" d="M407,269.5 L407,59 L410,59 L410,269.5 L418,269.5 L408.5,288.5 L399,269.5 L407,269.5 Z" fill="#999999" fill-rule="nonzero"></path>
<text id="right" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#999999">
<tspan x="188" y="323">right</tspan>
</text>
<path id="Line-3-Copy-2" d="M371,306 L21.0045776,306 L21.0045776,303 L371,303 L371,295 L390,304.5 L371,314 L371,306 Z" fill="#999999" fill-rule="nonzero"></path>
<path d="M382,123 L129,123 L129,278 L382,278 L382,123 Z M118,113 L392.628906,113 L392.628906,288 L118,288 L118,113 Z" id="Rectangle-1" fill-opacity="0.88" fill="#E8C48F"></path>
<text id="Introduction-This-Ec" opacity="0.7" font-family="OpenSans-Bold, Open Sans" font-size="16" font-weight="bold" fill="#5A4739">
<tspan x="138.946273" y="147.8">Introduction</tspan>
<tspan x="239.672835" y="147.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"></tspan>
<tspan x="138.946273" y="175.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">This Ecma Standard is based on </tspan>
<tspan x="138.946273" y="194.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">several originating technologies, </tspan>
<tspan x="138.946273" y="213.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">the most well known being </tspan>
<tspan x="138.946273" y="232.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">JavaScript (Netscape) and JScript </tspan>
<tspan x="138.946273" y="251.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">(Microsoft). The language was </tspan>
<tspan x="138.946273" y="270.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">invented by Brendan Eich at </tspan>
</text>
<text id="top" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#999999">
<tspan x="125" y="90">top</tspan>
</text>
<path id="Line-3" d="M99.9923616,114.902612 L21.9921261,114.492085 L22.0079154,111.492126 L100.008151,111.902654 L100.050256,103.902765 L118.999993,113.502632 L99.9502569,122.902501 L99.9923616,114.902612 Z" fill="#999999" fill-rule="nonzero"></path>
<path id="Line-2" d="M134.422652,122.148497 L391.570294,285.387525 L389.962475,287.920294 L132.814833,124.681266 L128.527317,131.435317 L117.577872,113.23203 L138.710168,115.394446 L134.422652,122.148497 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-3-Copy" d="M116.002972,94.7501302 L115.99987,59.0001302 L118.99987,58.9998698 L119.002972,94.7498699 L127.002972,94.7491757 L117.504621,113.75 L108.002972,94.7508245 L116.002972,94.7501302 Z" fill="#999999" fill-rule="nonzero"></path>
<g id="Group" transform="translate(270.970081, 195.848048) rotate(32.500000) translate(-270.970081, -195.848048) translate(204.470081, 184.848048)">
<rect id="Rectangle" fill="#FFFFFF" filter="url(#filter-1)" x="0" y="0" width="133" height="22"></rect>
<text id="(width,height)" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="8.68187117" y="15.3779674">(width,height)</tspan>
</text>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
2-ui/1-document/11-coordinates/coordinates-negative@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 112 KiB

BIN
2-ui/1-document/11-coordinates/coordinates.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 40 KiB

62
2-ui/1-document/11-coordinates/coordinates.svg Normal file
View file

@ -0,0 +1,62 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="521px" height="411px" viewBox="0 0 521 411" 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>coordinates.svg</title>
<desc>Created with sketchtool.</desc>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="coordinates.svg">
<g id="noun_69008_cc" transform="translate(13.000000, 11.000000)" fill="#E8C48E">
<path d="M490.5625,386 L10.4375,386 C4.676,386 0,381.6575 0,376.35 L0,9.65 C0,4.3425 4.676,0 10.4375,0 L490.5625,0 C496.303125,0 501,4.3425 501,9.65 L501,376.35 C501,381.6575 496.303125,386 490.5625,386 L490.5625,386 Z M10.1622718,373.061453 L488.805274,373.061453 L488.805274,12.9385475 L10.1622718,12.9385475 L10.1622718,373.061453 L10.1622718,373.061453 Z" id="Shape"></path>
<path d="M20.8588913,54.1005587 C15.1062833,54.1005587 10.4375,52.952933 10.4375,51.5502793 C10.4375,50.1476257 15.1062833,49 20.8588913,49 L479.40011,49 C485.131875,49 489.821501,50.1476257 489.821501,51.5502793 C489.821501,52.952933 485.131875,54.1005587 479.40011,54.1005587 L20.8588913,54.1005587 Z" id="Shape"></path>
<path d="M33.8,31.6271484 C33.8,34.9571479 31.1038125,37.6542969 27.775,37.6542969 C24.4461875,37.6542969 21.75,34.9571479 21.75,31.6271484 C21.75,28.2971489 24.4461875,25.6 27.775,25.6 C31.1038125,25.6 33.8,28.2971489 33.8,31.6271484 L33.8,31.6271484 Z" id="Shape"></path>
<path d="M63.9882812,31.6271484 C63.9882812,34.9571479 61.2920937,37.6542969 57.9632812,37.6542969 C54.6344687,37.6542969 51.9382812,34.9571479 51.9382812,31.6271484 C51.9382812,28.2971489 54.6344687,25.6 57.9632812,25.6 C61.2920937,25.6 63.9882812,28.2971489 63.9882812,31.6271484 L63.9882812,31.6271484 Z" id="Shape"></path>
<path d="M94.1765625,31.6271484 C94.1765625,34.9571479 91.480375,37.6542969 88.1515625,37.6542969 C84.82275,37.6542969 82.1265625,34.9571479 82.1265625,31.6271484 C82.1265625,28.2971489 84.82275,25.6 88.1515625,25.6 C91.480375,25.6 94.1765625,28.2971489 94.1765625,31.6271484 L94.1765625,31.6271484 Z" id="Shape"></path>
</g>
<text id="height" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="417" y="208">height</tspan>
</text>
<text id="bottom" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#999999">
<tspan x="451" y="311">bottom</tspan>
</text>
<path d="M395,293 L498,293" id="Line-28" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path d="M392,296 L392,370.5" id="Line-30" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path d="M119,296 L119,342" id="Line-30-Copy" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path d="M396,120 L426,120" id="Line-29" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<text id="x" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="62" y="113">x</tspan>
</text>
<text id="left" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#999999">
<tspan x="50" y="135">left</tspan>
</text>
<text id="y" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="125" y="79">y</tspan>
</text>
<text id="width" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="234" y="339">width</tspan>
</text>
<path id="Line" d="M411,273 L411,118.5 L414,118.5 L414,273 L422,273 L412.5,292 L403,273 L411,273 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy" d="M473,273 L473,65 L476,65 L476,273 L484,273 L474.5,292 L465,273 L473,273 Z" fill="#999999" fill-rule="nonzero"></path>
<path id="Line-2" d="M371,320 L116,320 L116,317 L371,317 L371,309 L390,318.5 L371,328 L371,320 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-3" d="M99.9923616,120.902612 L21.9921261,120.492085 L22.0079154,117.492126 L100.008151,117.902654 L100.050256,109.902765 L118.999993,119.502632 L99.9502569,128.902501 L99.9923616,120.902612 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="right" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#999999">
<tspan x="180" y="375">right</tspan>
</text>
<path id="Line-3-Copy-2" d="M371,361 L21.0045776,361 L21.0045776,358 L371,358 L371,350 L390,359.5 L371,369 L371,361 Z" fill="#999999" fill-rule="nonzero"></path>
<path id="Line-3-Copy" d="M116.002972,100.75013 L115.99987,65.0001302 L118.99987,64.9998698 L119.002972,100.74987 L127.002972,100.749176 L117.504621,119.75 L108.002972,100.750824 L116.002972,100.75013 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path d="M382,129 L129,129 L129,284 L382,284 L382,129 Z M118,119 L392.628906,119 L392.628906,294 L118,294 L118,119 Z" id="Rectangle-1" fill-opacity="0.88" fill="#E8C48F"></path>
<text id="Introduction-This-Ec" opacity="0.8" font-family="OpenSans-Bold, Open Sans" font-size="16" font-weight="bold" fill="#5A4739">
<tspan x="138.946273" y="153.8">Introduction</tspan>
<tspan x="239.672835" y="153.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"></tspan>
<tspan x="138.946273" y="181.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">This Ecma Standard is based on </tspan>
<tspan x="138.946273" y="200.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">several originating technologies, </tspan>
<tspan x="138.946273" y="219.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">the most well known being </tspan>
<tspan x="138.946273" y="238.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">JavaScript (Netscape) and JScript </tspan>
<tspan x="138.946273" y="257.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">(Microsoft). The language was </tspan>
<tspan x="138.946273" y="276.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">invented by Brendan Eich at </tspan>
</text>
<text id="top" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#999999">
<tspan x="125" y="96">top</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6.9 KiB

BIN
2-ui/1-document/11-coordinates/coordinates@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 95 KiB

BIN
2-ui/1-document/11-coordinates/document-and-window-coordinates-scrolled.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 99 KiB

113
2-ui/1-document/11-coordinates/document-and-window-coordinates-scrolled.svg Normal file
View file

@ -0,0 +1,113 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="728px" height="358px" viewBox="0 0 728 358" 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>document-and-window-coordinates-scrolled.svg</title>
<desc>Created with sketchtool.</desc>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="document-and-window-coordinates-scrolled.svg">
<rect fill="#FFFFFF" x="0" y="0" width="728" height="358"></rect>
<text id="Introduction-This-Ec" opacity="0.7" font-family="OpenSans-Bold, Open Sans" font-size="16" font-weight="bold" fill="#5A4739">
<tspan x="34" y="176">Introduction</tspan>
<tspan x="134.726562" y="176" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"></tspan>
<tspan x="34" y="204" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">This Ecma Standard is based on several </tspan>
<tspan x="34" y="223" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">originating technologies, the most well </tspan>
<tspan x="34" y="242" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">known being JavaScript (Netscape) and </tspan>
<tspan x="34" y="261" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">JScript (Microsoft). The language was </tspan>
<tspan x="34" y="280" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">invented by Brendan Eich at Netscape and </tspan>
<tspan x="34" y="299" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">first appeared in that company’s Navigator </tspan>
<tspan x="34" y="318" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">2.0 browser. </tspan>
<tspan x="34" y="337" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"> </tspan>
<tspan x="34" y="356" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">It has appeared in all subsequent browsers </tspan>
<tspan x="34" y="375" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">from Netscape and in all browsers from </tspan>
<tspan x="34" y="394" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">Microsoft starting with Internet Explorer </tspan>
<tspan x="34" y="413" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">3.0. The development of this Standard </tspan>
<tspan x="34" y="432" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">started in November 1996. </tspan>
<tspan x="34" y="451" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">The first edition of this Ecma Standard was </tspan>
<tspan x="34" y="470" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">adopted by the Ecma General Assembly of </tspan>
<tspan x="34" y="489" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">June 1997.</tspan>
<tspan x="34" y="508" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">That Ecma Standard was submitted to ISO/</tspan>
<tspan x="34" y="527" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">IEC JTC 1 for adoption under the fast-track </tspan>
<tspan x="34" y="546" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">procedure, and approved as international </tspan>
<tspan x="34" y="565" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">standard ISO/IEC 16262, in April 1998. The </tspan>
<tspan x="34" y="584" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">Ecma General Assembly of June 1998 </tspan>
<tspan x="34" y="603" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">approved the second edition of ECMA-262 </tspan>
<tspan x="34" y="622" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">to keep it fully aligned with ISO/IEC 16262. </tspan>
<tspan x="34" y="641" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">Changes between the first and the second </tspan>
<tspan x="34" y="660" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">edition are editorial in nature.</tspan>
</text>
<text id="😍" font-family="AppleColorEmoji, Apple Color Emoji" font-size="18" font-weight="normal" fill="#5A4739">
<tspan x="139" y="330">😍</tspan>
</text>
<path id="Line-39" d="M148.5,298 L148.5,131 L150.5,131 L150.5,298 L156.5,298 L149.5,312 L142.5,298 L148.5,298 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="pageY" font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="157" y="155">pageY</tspan>
</text>
<text id="clientY" font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="156.4" y="177">clientY</tspan>
</text>
<path id="Line-39-Copy" d="M126,323.5 L13,323.5 L12,323.5 L12,321.5 L126,321.5 L126,315.5 L140,322.5 L126,329.5 L126,323.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="pageX" font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="23" y="316">pageX</tspan>
</text>
<text id="clientX" font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="22.4" y="337">clientX</tspan>
</text>
<g id="np_browser_551045_E8C48F" transform="translate(-1.000000, 68.000000)" fill="#E8C48F" fill-rule="nonzero">
<path d="M22.8007131,0 C7.75885978,0 0,8.15688571 0,24 L0,266 C0,281.843114 7.75885978,290 22.8007131,290 L332.145811,290 C347.187664,290 354,282.843114 354,267 L354,24 C354,8.15688571 347.187664,0 332.145811,0 L22.8007131,0 Z M17.3747837,15.2857143 L335.552488,15.2857143 C338.087318,15.2857143 339.739037,17.2978173 339.739037,20.3857143 L338,55.328125 L13.188235,55.328125 L13.188235,20.3857143 C13.188235,17.2978173 14.8399541,15.2857143 17.3747837,15.2857143 Z M38.5340462,29.1428571 C34.6323815,29.1428571 31.4666667,32.4703619 31.4666667,36.5714286 C31.4666667,40.6724953 34.6323815,44.0000001 38.5340462,44.0000001 C42.4357108,44.0000001 45.6014257,40.6724953 45.6014257,36.5714286 C45.6014257,32.4703619 42.4357108,29.1428571 38.5340462,29.1428571 Z M70.0007129,29.1428571 C66.0990482,29.1428571 62.9333333,32.4703619 62.9333333,36.5714286 C62.9333333,40.6724953 66.0990482,44.0000001 70.0007129,44.0000001 C73.9023775,44.0000001 77.0680924,40.6724953 77.0680924,36.5714286 C77.0680924,32.4703619 73.9023775,29.1428571 70.0007129,29.1428571 Z M101.46738,29.1428571 C97.5657149,29.1428571 94.4,32.4703619 94.4,36.5714286 C94.4,40.6724953 97.5657149,44.0000001 101.46738,44.0000001 C105.369044,44.0000001 108.534759,40.6724953 108.534759,36.5714286 C108.534759,32.4703619 105.369044,29.1428571 101.46738,29.1428571 Z M14,71.171875 L338,71.171875 L339.86524,269.547619 C339.86524,272.329898 338.213521,274.142857 335.678691,274.142857 C263.454865,274.142857 209.286995,274.142857 173.175081,274.142857 C138.580838,274.142857 86.6894732,274.142857 17.5009866,274.142857 C14.9661569,274.142857 13.3144379,272.329898 13.3144379,269.547619 L14,71.171875 Z" id="Shape"></path>
</g>
<text id="Introduction-This-Ec" opacity="0.7" font-family="OpenSans-Bold, Open Sans" font-size="16" font-weight="bold" fill="#5A4739">
<tspan x="409" y="34">Introduction</tspan>
<tspan x="509.726562" y="34" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"></tspan>
<tspan x="409" y="62" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">This Ecma Standard is based on several </tspan>
<tspan x="409" y="81" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">originating technologies, the most well </tspan>
<tspan x="409" y="100" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">known being JavaScript (Netscape) and </tspan>
<tspan x="409" y="119" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">JScript (Microsoft). The language was </tspan>
<tspan x="409" y="138" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">invented by Brendan Eich at Netscape and </tspan>
<tspan x="409" y="157" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">first appeared in that company’s Navigator </tspan>
<tspan x="409" y="176" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">2.0 browser. </tspan>
<tspan x="409" y="195" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"> </tspan>
<tspan x="409" y="214" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">It has appeared in all subsequent browsers </tspan>
<tspan x="409" y="233" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">from Netscape and in all browsers from </tspan>
<tspan x="409" y="252" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">Microsoft starting with Internet Explorer </tspan>
<tspan x="409" y="271" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">3.0. The development of this Standard </tspan>
<tspan x="409" y="290" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">started in November 1996. </tspan>
<tspan x="409" y="309" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">The first edition of this Ecma Standard was </tspan>
<tspan x="409" y="328" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">adopted by the Ecma General Assembly of </tspan>
<tspan x="409" y="347" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">June 1997.</tspan>
<tspan x="409" y="366" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">That Ecma Standard was submitted to ISO/</tspan>
<tspan x="409" y="385" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">IEC JTC 1 for adoption under the fast-track </tspan>
<tspan x="409" y="404" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">procedure, and approved as international </tspan>
<tspan x="409" y="423" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">standard ISO/IEC 16262, in April 1998. The </tspan>
<tspan x="409" y="442" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">Ecma General Assembly of June 1998 </tspan>
<tspan x="409" y="461" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">approved the second edition of ECMA-262 </tspan>
<tspan x="409" y="480" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">to keep it fully aligned with ISO/IEC 16262. </tspan>
<tspan x="409" y="499" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">Changes between the first and the second </tspan>
<tspan x="409" y="518" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">edition are editorial in nature.</tspan>
</text>
<rect id="Rectangle" fill="#FFFFFF" opacity="0.6" x="392" y="87" width="307" height="42"></rect>
<g id="np_browser_551045_E8C48F" transform="translate(374.000000, 71.000000)" fill="#E8C48F" fill-rule="nonzero">
<path d="M22.8007131,0 C7.75885978,0 0,8.15688571 0,24 L0,266 C0,281.843114 7.75885978,290 22.8007131,290 L332.145811,290 C347.187664,290 354,282.843114 354,267 L354,24 C354,8.15688571 347.187664,0 332.145811,0 L22.8007131,0 Z M17.3747837,15.2857143 L335.552488,15.2857143 C338.087318,15.2857143 339.739037,17.2978173 339.739037,20.3857143 L338,55.328125 L13.188235,55.328125 L13.188235,20.3857143 C13.188235,17.2978173 14.8399541,15.2857143 17.3747837,15.2857143 Z M38.5340462,29.1428571 C34.6323815,29.1428571 31.4666667,32.4703619 31.4666667,36.5714286 C31.4666667,40.6724953 34.6323815,44.0000001 38.5340462,44.0000001 C42.4357108,44.0000001 45.6014257,40.6724953 45.6014257,36.5714286 C45.6014257,32.4703619 42.4357108,29.1428571 38.5340462,29.1428571 Z M70.0007129,29.1428571 C66.0990482,29.1428571 62.9333333,32.4703619 62.9333333,36.5714286 C62.9333333,40.6724953 66.0990482,44.0000001 70.0007129,44.0000001 C73.9023775,44.0000001 77.0680924,40.6724953 77.0680924,36.5714286 C77.0680924,32.4703619 73.9023775,29.1428571 70.0007129,29.1428571 Z M101.46738,29.1428571 C97.5657149,29.1428571 94.4,32.4703619 94.4,36.5714286 C94.4,40.6724953 97.5657149,44.0000001 101.46738,44.0000001 C105.369044,44.0000001 108.534759,40.6724953 108.534759,36.5714286 C108.534759,32.4703619 105.369044,29.1428571 101.46738,29.1428571 Z M14,71.171875 L338,71.171875 L339.86524,269.547619 C339.86524,272.329898 338.213521,274.142857 335.678691,274.142857 C263.454865,274.142857 209.286995,274.142857 173.175081,274.142857 C138.580838,274.142857 86.6894732,274.142857 17.5009866,274.142857 C14.9661569,274.142857 13.3144379,272.329898 13.3144379,269.547619 L14,71.171875 Z" id="Shape"></path>
</g>
<rect id="Rectangle-2" stroke-opacity="0.8" stroke="#E8C48F" stroke-width="2" x="387" y="7" width="326" height="351"></rect>
<rect id="Rectangle-14" fill-opacity="0.8" fill="#FFFFFF" x="395" y="8" width="312" height="61"></rect>
<path id="Line-39" d="M517.5,166 L517.5,7 L519.5,7 L519.5,166 L525.5,166 L518.5,180 L511.5,166 L517.5,166 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-39-Copy-2" d="M530.5,166 L530.5,137 L532.5,137 L532.5,166 L538.5,166 L531.5,180 L524.5,166 L530.5,166 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="pageY" font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="525" y="23">pageY</tspan>
</text>
<text id="clientY" font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="542.4" y="172">clientY</tspan>
</text>
<path id="Line-39-Copy" d="M501,190.5 L389,190.5 L388,190.5 L388,188.5 L501,188.5 L501,182.5 L515,189.5 L501,196.5 L501,190.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="pageX" font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="398" y="183">pageX</tspan>
</text>
<text id="clientX" font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="397.4" y="204">clientX</tspan>
</text>
<text id="😍" font-family="AppleColorEmoji, Apple Color Emoji" font-size="18" font-weight="normal" fill="#5A4739">
<tspan x="514" y="197">😍</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
2-ui/1-document/11-coordinates/document-and-window-coordinates-scrolled@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 234 KiB

BIN
2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 21 KiB

51
2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords.svg Normal file
View file

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

After

Width:  |  Height:  |  Size: 19 KiB

BIN
2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 44 KiB

2
2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md
View file

@ -26,7 +26,7 @@ Next we need to assign the correct `ball.style.position.left/top`. They contain
Here's the picture:
![](move-ball-coords.png)
![](move-ball-coords.svg)
We have `event.clientX/clientY` -- window-relative coordinates of the click.

BIN
2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 11 KiB

31
2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1.svg Normal file
View file

@ -0,0 +1,31 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="488px" height="246px" viewBox="0 0 488 246" 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>carousel1.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="carousel1.svg">
<rect id="Rectangle-18" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" x="41.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-19" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" x="109.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-20" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" x="177.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-21" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" opacity="0.5" x="245.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-22" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" opacity="0.5" x="313.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-23" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" opacity="0.5" x="381.5" y="98.5" width="63" height="63" rx="10"></rect>
<text id="…-2" font-family="Consolas" font-size="24" font-weight="normal" fill="#8A704D">
<tspan x="406" y="131">…</tspan>
</text>
<rect id="Rectangle-24" stroke="#EE6B47" stroke-width="2" x="38" y="95" width="412" height="70"></rect>
<path d="M244,59 L36,59 L36,196 L244,196 L244,59 Z M19,42 L261,42 L261,213 L19,213 L19,42 Z" id="Rectangle-1" fill-opacity="0.88" fill="#E8C48F"></path>
<text id="div-(container)" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="82.5" y="32">div (container)</tspan>
</text>
<text id="130x130" font-family="Consolas" font-size="13" font-weight="normal" fill="#8A704D">
<tspan x="48" y="133">130x130</tspan>
</text>
<text id="ul-(width:-9999px)" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="71.5" y="82">ul (width: 9999px)</tspan>
</text>
<rect id="Rectangle-36" fill="#FFFFFF" x="447" y="90" width="16" height="84"></rect>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 25 KiB

BIN
2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 12 KiB

33
2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2.svg Normal file
View file

@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="639px" height="246px" viewBox="0 0 639 246" 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>carousel2.svg</title>
<desc>Created with sketchtool.</desc>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="carousel2.svg">
<rect id="Rectangle-18" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" opacity="0.5" x="41.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-19" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" opacity="0.5" x="109.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-20" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" opacity="0.5" x="177.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-21" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" x="245.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-22" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" x="313.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-23" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" x="381.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-26" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" opacity="0.5" x="449.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-25" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" opacity="0.5" x="517.5" y="98.5" width="63" height="63" rx="10"></rect>
<text id="…-3" font-family="PTMono-Regular, PT Mono" font-size="24" font-weight="normal" fill="#8A704D">
<tspan x="542" y="131">…</tspan>
</text>
<rect id="Rectangle-24" stroke="#EE6B47" stroke-width="2" x="38" y="95" width="546" height="70"></rect>
<path d="M450,59 L242,59 L242,196 L450,196 L450,59 Z M225,42 L467,42 L467,213 L225,213 L225,42 Z" id="Rectangle-1" fill-opacity="0.88" fill="#E8C48F"></path>
<text id="div-(container)" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="288.5" y="32">div (container)</tspan>
</text>
<text id="130x130" font-family="PTMono-Regular, PT Mono" font-size="13" font-weight="normal" fill="#8A704D">
<tspan x="252" y="133">130x130</tspan>
</text>
<text id="ul-(margin-left:--35" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="246.5" y="82">ul (margin-left: -350px)</tspan>
</text>
<rect id="Rectangle-36" fill="#FFFFFF" x="582" y="83" width="16" height="84"></rect>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 30 KiB

4
2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md
View file

@ -2,7 +2,7 @@ The images ribbon can be represented as `ul/li` list of images `<img>`.
Normally, such a ribbon is wide, but we put a fixed-size `<div>` around to "cut" it, so that only a part of the ribbon is visibble:
![](carousel1.png)
![](carousel1.svg)
To make the list show horizontally we need to apply correct CSS properties for `<li>`, like `display: inline-block`.
@ -10,7 +10,7 @@ For `<img>` we should also adjust `display`, because by default it's `inline`. T
To do the scrolling, we can shift `<ul>`. There are many ways to do it, for instance by changing `margin-left` or (better performance) use `transform: translateX()`:
![](carousel2.png)
![](carousel2.svg)
The outer `<div>` has a fixed width, so "extra" images are cut.

4
2-ui/2-events/02-bubbling-and-capturing/article.md
View file

@ -41,7 +41,7 @@ A click on the inner `<p>` first runs `onclick`:
3. Then on the outer `<form>`.
4. And so on upwards till the `document` object.
![](event-order-bubbling.png)
![](event-order-bubbling.svg)
So if we click on `<p>`, then we'll see 3 alerts: `p` -> `div` -> `form`.
@ -128,7 +128,7 @@ The standard [DOM Events](http://www.w3.org/TR/DOM-Level-3-Events/) describes 3
Here's the picture of a click on `<td>` inside a table, taken from the specification:
![](eventflow.png)
![](eventflow.svg)
That is: for a click on `<td>` the event first goes through the ancestors chain down to the element (capturing phase), then it reaches the target and triggers there (target phase), and then it goes up (bubbling phase), calling handlers on its way.

BIN
2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 10 KiB

28
2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.svg Normal file
View file

@ -0,0 +1,28 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="353px" height="216px" viewBox="0 0 353 216" 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>event-order-bubbling.svg</title>
<desc>Created with sketchtool.</desc>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="event-order-bubbling.svg">
<polygon id="Rectangle-210" fill="#FFDE99" points="159.48764 140 174 186 60 186 74.51236 140"></polygon>
<path d="M173.633566,81 L59.3664344,81 L43.2766439,132 L189.723356,132 L173.633566,81 Z" id="Rectangle-209" stroke="#CFCE95" stroke-width="18"></path>
<path d="M193.013506,29 L39.9864943,29 L17.2759239,101 L215.724076,101 L193.013506,29 Z" id="Rectangle-208" stroke="#99C0C3" stroke-width="18"></path>
<path d="M121.499875,123 L112.500875,123 L112.500875,110 L121.499875,110 L121.499875,123 Z M121.499875,141 L121.499875,154.816139 C121.499875,157.302139 119.484875,159.316139 117.000875,159.316139 C114.514875,159.316139 112.500875,157.302139 112.500875,154.816139 L112.500875,141 L121.499875,141 Z M121.499875,92 L112.500875,92 L112.500875,35.6981394 L102.361875,45.8351394 C100.605875,47.5921394 97.756875,47.5921394 95.998875,45.8351394 C94.240875,44.0771394 94.240875,41.2281394 95.998875,39.4711394 L113.637875,21.8311394 C114.563875,20.9071394 115.789875,20.4821394 117.000875,20.5311394 C118.210875,20.4821394 119.437875,20.9071394 120.361875,21.8311394 L138.001875,39.4711394 C139.758875,41.2281394 139.758875,44.0771394 138.001875,45.8351394 C136.243875,47.5921394 133.394875,47.5921394 131.637875,45.8351394 L121.499875,35.6981394 L121.499875,92 Z" id="Fill-46" fill="#5A4739"></path>
<text id="1" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#5A4739">
<tspan x="210" y="105">1</tspan>
</text>
<text id="2" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#5A4739">
<tspan x="185" y="136">2</tspan>
</text>
<text id="3" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="157" y="181">3</tspan>
</text>
<text id="Most-deeply-nested-e" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="228.480469" y="175">Most deeply </tspan>
<tspan x="216.305664" y="194">nested element</tspan>
</text>
<path d="M179.5,177.5 L209.5,177.5" id="Line-30" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 24 KiB

BIN
2-ui/2-events/02-bubbling-and-capturing/eventflow.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 70 KiB

198
2-ui/2-events/02-bubbling-and-capturing/eventflow.svg Normal file
View file

@ -0,0 +1,198 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="641px" height="633px" viewBox="0 0 641 633" 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>eventflow.svg</title>
<desc>Created with sketchtool.</desc>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="eventflow.svg">
<g id="eventflow" transform="translate(22.000000, 28.000000)">
<g id="nodes">
<g id="Window-node" transform="translate(224.684713, 0.000000)">
<g id="Group">
<rect id="Rectangle-path" stroke="#000000" fill="#DCDCDC" x="0" y="0" width="134.426752" height="34.5671642"></rect>
<text id="Window" fill="#000000" font-family="OpenSans-Regular, Open Sans" font-size="15.5552239" font-weight="normal">
<tspan x="39.3678344" y="21.9134328">Window</tspan>
</text>
</g>
</g>
<g id="document-node" transform="translate(234.286624, 60.492537)">
<g id="Group">
<rect id="Rectangle-path" stroke="#000000" fill="#DCDCDC" x="0" y="0" width="115.22293" height="34.5671642"></rect>
<text id="Document" fill="#000000" font-family="OpenSans-Regular, Open Sans" font-size="15.5552239" font-weight="normal">
<tspan x="22.0843949" y="21.9134328">Document</tspan>
</text>
</g>
</g>
<g id="html-node" transform="translate(243.888535, 120.985075)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;html&gt;" fill="#000000" font-family="OpenSans-Regular, Open Sans" font-size="15.5552239" font-weight="normal">
<tspan x="23.044586" y="21.9134328">&lt;html&gt;</tspan>
</text>
</g>
<g id="body-node" transform="translate(243.888535, 181.477612)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;body&gt;" fill="#000000" font-family="OpenSans-Regular, Open Sans" font-size="15.5552239" font-weight="normal">
<tspan x="23.044586" y="21.9134328">&lt;body&gt;</tspan>
</text>
</g>
<g id="table-node" transform="translate(243.888535, 241.970149)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;table&gt;" fill="#000000" font-family="OpenSans-Regular, Open Sans" font-size="15.5552239" font-weight="normal">
<tspan x="23.044586" y="21.9134328">&lt;table&gt;</tspan>
</text>
</g>
<g id="tbody-node" transform="translate(243.888535, 302.462687)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;tbody&gt;" fill="#000000" font-family="OpenSans-Regular, Open Sans" font-size="15.5552239" font-weight="normal">
<tspan x="19.2038217" y="21.9134328">&lt;tbody&gt;</tspan>
</text>
</g>
<g id="tr_1-node" transform="translate(80.656051, 380.238806)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;tr&gt;" fill="#000000" font-family="OpenSans-Regular, Open Sans" font-size="15.5552239" font-weight="normal">
<tspan x="35.5270701" y="21.9134328">&lt;tr&gt;</tspan>
</text>
</g>
<g id="tr_2-node" transform="translate(426.324841, 380.238806)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;tr&gt;" fill="#000000" font-family="OpenSans-Regular, Open Sans" font-size="15.5552239" font-weight="normal">
<tspan x="33.6066879" y="21.9134328">&lt;tr&gt;</tspan>
</text>
</g>
<g id="tr_1_td_1-node" transform="translate(13.442675, 458.014925)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;td&gt;" fill="#000000" font-family="OpenSans-Regular, Open Sans" font-size="15.5552239" font-weight="normal">
<tspan x="31.6863057" y="21.9134328">&lt;td&gt;</tspan>
</text>
</g>
<g id="tr_1_td_1_text-node" transform="translate(0.000000, 518.507463)">
<ellipse id="Oval" stroke="#000000" fill="#4682B4" cx="61.4522293" cy="30.2462687" rx="61.4522293" ry="30.2462687"></ellipse>
<text id="Shady-Grove" fill="#FFFFFF" font-family="OpenSans-Regular, Open Sans" font-size="12.9626866" font-weight="normal">
<tspan x="19.2038217" y="34.6044776">Shady Grove</tspan>
</text>
</g>
<g id="tr_1_td_2-node" transform="translate(147.869427, 458.014925)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;td&gt;" fill="#000000" font-family="OpenSans-Regular, Open Sans" font-size="15.5552239" font-weight="normal">
<tspan x="33.6066879" y="21.9134328">&lt;td&gt;</tspan>
</text>
</g>
<g id="tr_1_td_2_text-node" transform="translate(134.426752, 518.507463)">
<ellipse id="Oval" stroke="#000000" fill="#4682B4" cx="61.4522293" cy="30.2462687" rx="61.4522293" ry="30.2462687"></ellipse>
<text id="Aeolian" fill="#FFFFFF" font-family="OpenSans-Regular, Open Sans" font-size="12.9626866" font-weight="normal">
<tspan x="36.9673567" y="34.6044776">Aeolian</tspan>
</text>
</g>
<g id="tr_2_td_1-node" transform="translate(359.111465, 458.014925)">
<rect id="Rectangle-path" stroke="#000000" fill="#0000FF" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;td&gt;" fill="#FFFFFF" font-family="PTMono-Regular, PT Mono" font-size="15.5552239" font-weight="normal">
<tspan x="27.8455414" y="22.3701493">&lt;td&gt;</tspan>
</text>
</g>
<g id="tr_2_td_1_text-node" transform="translate(345.668790, 518.507463)">
<ellipse id="Oval" stroke="#000000" fill="#4682B4" cx="61.4522293" cy="30.2462687" rx="61.4522293" ry="30.2462687"></ellipse>
<g id="Group" transform="translate(12.482484, 14.555224)" fill="#FFFFFF" font-family="OpenSans-Regular, Open Sans" font-size="12.9626866" font-weight="normal">
<text id="Over-the-River,">
<tspan x="0.480095541" y="14">Over the River,</tspan>
</text>
<text id="Charlie">
<tspan x="25.9251592" y="31.2835821">Charlie</tspan>
</text>
</g>
</g>
<g id="tr_2_td_2-node" transform="translate(493.538217, 458.014925)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;td&gt;" fill="#000000" font-family="OpenSans-Regular, Open Sans" font-size="15.5552239" font-weight="normal">
<tspan x="33.6066879" y="21.9134328">&lt;td&gt;</tspan>
</text>
</g>
<g id="tr_2_td_2_text-node" transform="translate(480.095541, 518.507463)">
<ellipse id="Oval" stroke="#000000" fill="#4682B4" cx="61.4522293" cy="30.2462687" rx="61.4522293" ry="30.2462687"></ellipse>
<text id="Dorian" fill="#FFFFFF" font-family="OpenSans-Regular, Open Sans" font-size="12.9626866" font-weight="normal">
<tspan x="39.8479299" y="34.6044776">Dorian</tspan>
</text>
</g>
</g>
<g id="edges" transform="translate(61.452229, 34.567164)" stroke="#000000" stroke-width="2">
<path d="M230.44586,0 L230.44586,19.8761194" id="window-document" fill="#000000"></path>
<path d="M230.44586,60.4925373 L230.44586,80.3686567" id="document-html" fill="#000000"></path>
<path d="M230.44586,120.985075 L230.44586,140.861194" id="html-body" fill="#000000"></path>
<path d="M230.44586,181.477612 L230.44586,201.353731" id="body-table" fill="#000000"></path>
<path d="M230.44586,241.970149 L230.44586,261.846269" id="table-tbody" fill="#000000"></path>
<path d="M230.44586,302.462687 C230.44586,313.985075 214.442675,319.746269 182.436306,319.746269 L86.4171975,319.746269 C73.6146497,319.746269 67.2133758,326.371642 67.2133758,339.622388" id="tbody-tr_1"></path>
<path d="M230.44586,302.462687 C230.44586,313.985075 252.850318,319.746269 297.659236,319.746269 L393.678344,319.746269 C406.480892,319.746269 412.882166,326.371642 412.882166,339.622388" id="tbody-tr_2"></path>
<path d="M67.2133758,380.238806 C67.2133758,391.761194 60.8121019,397.522388 48.0095541,397.522388 L19.2038217,397.522388 C6.40127389,397.522388 0,404.147761 0,417.398507" id="tr_1-tr_2_td_1"></path>
<path d="M67.2133758,380.238806 C67.2133758,391.761194 73.6146497,397.522388 86.4171975,397.522388 L115.22293,397.522388 C128.025478,397.522388 134.426752,404.147761 134.426752,417.398507" id="tr_1-tr_2_td_2"></path>
<path d="M412.882166,380.238806 C412.882166,391.761194 406.480892,397.522388 393.678344,397.522388 L364.872611,397.522388 C352.070064,397.522388 345.66879,404.147761 345.66879,417.398507" id="tr_2-tr_2_td_1"></path>
<path d="M412.882166,380.238806 C412.882166,391.761194 425.684713,397.522388 451.289809,397.522388 L460.89172,397.522388 C473.694268,397.522388 480.095541,404.147761 480.095541,417.398507" id="tr_2-tr_2_td_2"></path>
<path d="M0,458.014925 L0,477.891045" id="tr_1_td_1-text" fill="#000000"></path>
<path d="M134.426752,458.014925 L134.426752,477.891045" id="tr_1_td_2-text" fill="#000000"></path>
<path d="M345.66879,458.014925 L345.66879,477.891045" id="tr_2_td_1-text" fill="#000000"></path>
<path d="M482.015924,458.014925 L482.015924,477.891045" id="tr_2_td_2-text" fill="#000000"></path>
</g>
<g id="event-flow" transform="translate(103.700637, 14.691045)">
<g id="target_phase" transform="translate(186.277070, 443.323881)">
<text id="Target" fill="#0000FF" font-family="OpenSans-Regular, Open Sans" font-size="17.2835821" font-weight="normal">
<tspan x="0.960191083" y="34.1477612">Target</tspan>
</text>
<text id="Phase" fill="#0000FF" font-family="OpenSans-Regular, Open Sans" font-size="17.2835821" font-weight="normal">
<tspan x="0.480095541" y="51.4313433">Phase</tspan>
</text>
<text id="(2)" fill="#0000FF" font-family="OpenSans-Regular, Open Sans" font-size="17.2835821" font-weight="normal">
<tspan x="15.8431529" y="68.7149254">(2)</tspan>
</text>
<rect id="Rectangle-path" stroke="#000000" stroke-width="5" x="69.133758" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
</g>
<g id="capture_phase">
<text id="Capture" fill="#FF0000" font-family="OpenSans-Regular, Open Sans" font-size="17.2835821" font-weight="normal">
<tspan x="0" y="166.367164">Capture</tspan>
</text>
<text id="Phase" fill="#FF0000" font-family="OpenSans-Regular, Open Sans" font-size="17.2835821" font-weight="normal">
<tspan x="7.20143312" y="183.650746">Phase</tspan>
</text>
<text id="(1)" fill="#FF0000" font-family="OpenSans-Regular, Open Sans" font-size="17.2835821" font-weight="normal">
<tspan x="22.5644904" y="200.934328">(1)</tspan>
</text>
<path d="M116.183121,0.864179104 C77.7754777,-1.72835821 77.7754777,41.480597 119.063694,50.1223881" id="capture_phase_arrow" stroke="#FF0000" stroke-width="3"></path>
<g id="capture_phase_arrow-link" transform="translate(92.178344, 60.492537)" stroke="#FF0000" stroke-width="3">
<path d="M28.8057325,0.864179104 C-9.60191083,-1.72835821 -9.60191083,41.480597 31.6863057,50.1223881" id="capture_phase_arrow"></path>
</g>
<g id="capture_phase_arrow-link" transform="translate(96.979299, 120.985075)" stroke="#FF0000" stroke-width="3">
<path d="M28.8057325,0.864179104 C-9.60191083,-1.72835821 -9.60191083,41.480597 31.6863057,50.1223881" id="capture_phase_arrow"></path>
</g>
<g id="capture_phase_arrow-link" transform="translate(96.979299, 181.477612)" stroke="#FF0000" stroke-width="3">
<path d="M28.8057325,0.864179104 C-9.60191083,-1.72835821 -9.60191083,41.480597 31.6863057,50.1223881" id="capture_phase_arrow"></path>
</g>
<g id="capture_phase_arrow-link" transform="translate(96.979299, 241.970149)" stroke="#FF0000" stroke-width="3">
<path d="M28.8057325,0.864179104 C-9.60191083,-1.72835821 -9.60191083,41.480597 31.6863057,50.1223881" id="capture_phase_arrow"></path>
</g>
<path d="M125.785032,303.326866 C87.3773885,300.734328 87.3773885,385.423881 301.5,372.461194" id="capture_phase_arrow2" stroke="#FF0000" stroke-width="3"></path>
<path d="M301.5,385.423881 C207.401274,382.831343 207.401274,437.274627 239.08758,450.237313" id="capture_phase_arrow3" stroke="#FF0000" stroke-width="3"></path>
</g>
<g id="bubble_phase" transform="translate(250.609873, 12.962687)">
<text id="Bubbling" fill="#008000" font-family="OpenSans-Regular, Open Sans" font-size="17.2835821" font-weight="normal">
<tspan x="72.9745223" y="239.822388">Bubbling</tspan>
</text>
<text id="Phase" fill="#008000" font-family="OpenSans-Regular, Open Sans" font-size="17.2835821" font-weight="normal">
<tspan x="83.0565287" y="257.10597">Phase</tspan>
</text>
<text id="(3)" fill="#008000" font-family="OpenSans-Regular, Open Sans" font-size="17.2835821" font-weight="normal">
<tspan x="98.419586" y="274.389552">(3)</tspan>
</text>
<path d="M112.342357,437.274627 C244.848726,381.102985 244.848726,369.868657 179.555732,372.461194" id="bubble_phase_arrow3" stroke="#008000" stroke-width="3"></path>
<path d="M182.436306,358.634328 C220.843949,349.992537 220.843949,307.647761 1.92038217,299.00597" id="bubble_phase_arrow2" stroke="#008000" stroke-width="3"></path>
<path d="M0,287.771642 C38.4076433,285.179104 38.4076433,250.61194 0,241.970149" id="bubble_phase_arrow" stroke="#008000" stroke-width="3"></path>
<g id="bubble_phase_arrow-link" transform="translate(0.000000, 181.477612)" stroke="#008000" stroke-width="3">
<path d="M0,45.8014925 C38.4076433,43.2089552 38.4076433,8.64179104 0,0" id="bubble_phase_arrow"></path>
</g>
<g id="bubble_phase_arrow-link" transform="translate(0.000000, 120.985075)" stroke="#008000" stroke-width="3">
<path d="M0,45.8014925 C38.4076433,43.2089552 38.4076433,8.64179104 0,0" id="bubble_phase_arrow"></path>
</g>
<path d="M0,106.29403 C48.0095541,103.701493 48.0095541,69.1343284 9.60191083,60.4925373" id="bubble_phase_arrow4" stroke="#008000" stroke-width="3"></path>
<path d="M9.60191083,45.8014925 C57.611465,43.2089552 57.611465,8.64179104 19.2038217,0" id="bubble_phase_arrow" stroke="#008000" stroke-width="3"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
2-ui/2-events/02-bubbling-and-capturing/eventflow@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 160 KiB

2
2-ui/2-events/03-event-delegation/article.md
View file

@ -81,7 +81,7 @@ In our case if we take a look inside the HTML, we can see nested tags inside `<t
Naturally, if a click happens on that `<strong>` then it becomes the value of `event.target`.
![](bagua-bubble.png)
![](bagua-bubble.svg)
In the handler `table.onclick` we should take such `event.target` and find out whether the click was inside `<td>` or not.

BIN
2-ui/2-events/03-event-delegation/bagua-bubble.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 12 KiB

27
2-ui/2-events/03-event-delegation/bagua-bubble.svg Normal file
View file

@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="369px" height="216px" viewBox="0 0 369 216" 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>bagua-bubble.svg</title>
<desc>Created with sketchtool.</desc>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="bagua-bubble.svg">
<polygon id="Rectangle-210" fill="#FFDE99" points="202.48764 140 217 186 103 186 117.51236 140"></polygon>
<path d="M216.633566,81 L102.366434,81 L86.2766439,132 L232.723356,132 L216.633566,81 Z" id="Rectangle-209" stroke="#CFCE95" stroke-width="18"></path>
<path d="M236.013506,29 L82.9864943,29 L60.2759239,101 L258.724076,101 L236.013506,29 Z" id="Rectangle-208" stroke="#99C0C3" stroke-width="18"></path>
<path d="M164.499875,123 L155.500875,123 L155.500875,110 L164.499875,110 L164.499875,123 Z M164.499875,141 L164.499875,154.816139 C164.499875,157.302139 162.484875,159.316139 160.000875,159.316139 C157.514875,159.316139 155.500875,157.302139 155.500875,154.816139 L155.500875,141 L164.499875,141 Z M164.499875,92 L155.500875,92 L155.500875,35.6981394 L145.361875,45.8351394 C143.605875,47.5921394 140.756875,47.5921394 138.998875,45.8351394 C137.240875,44.0771394 137.240875,41.2281394 138.998875,39.4711394 L156.637875,21.8311394 C157.563875,20.9071394 158.789875,20.4821394 160.000875,20.5311394 C161.210875,20.4821394 162.437875,20.9071394 163.361875,21.8311394 L181.001875,39.4711394 C182.758875,41.2281394 182.758875,44.0771394 181.001875,45.8351394 C179.243875,47.5921394 176.394875,47.5921394 174.637875,45.8351394 L164.499875,35.6981394 L164.499875,92 Z" id="Fill-46" fill="#5A4739"></path>
<text id="&lt;table&gt;" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#99C0C3">
<tspan x="9" y="30">&lt;table&gt;</tspan>
</text>
<text id="&lt;td&gt;" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#CFCE95">
<tspan x="36" y="136">&lt;td&gt;</tspan>
</text>
<text id="&lt;strong&gt;" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#E8C48E">
<tspan x="35" y="181">&lt;strong&gt;</tspan>
</text>
<text id="event.target" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="271.745605" y="181">event.target</tspan>
</text>
<path d="M229.5,177.5 L259.5,177.5" id="Line-30" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
2-ui/2-events/03-event-delegation/bagua-bubble@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 27 KiB

8
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
View file

@ -6,7 +6,7 @@ Let's dive into more details about events that happen when mouse moves between e
The `mouseover` event occurs when a mouse pointer comes over an element, and `mouseout` -- when it leaves.
![](mouseover-mouseout.png)
![](mouseover-mouseout.svg)
These events are special, because they have a `relatedTarget`.
@ -46,7 +46,7 @@ The browser checks the mouse position from time to time. And if it notices chang
That means that if the visitor is moving the mouse very fast then DOM-elements may be skipped:
![](mouseover-mouseout-over-elems.png)
![](mouseover-mouseout-over-elems.svg)
If the mouse moves very fast from `#FROM` to `#TO` elements as painted above, then intermediate `<div>` (or some of them) may be skipped. The `mouseout` event may trigger on `#FROM` and then immediately `mouseover` on `#TO`.
@ -56,7 +56,7 @@ On the other hand, we should keep in mind that we can't assume that the mouse sl
In particular it's possible that the cursor jumps right inside the middle of the page from out of the window. And `relatedTarget=null`, because it came from "nowhere":
![](mouseover-mouseout-from-outside.png)
![](mouseover-mouseout-from-outside.svg)
<div style="display:none">
In case of a fast move, intermediate elements may trigger no events. But if the mouse enters the element (`mouseover`), when we're guaranteed to have `mouseout` when it leaves it.
@ -76,7 +76,7 @@ Also try to move the pointer over the red `div`, and then move it out quickly do
Imagine -- a mouse pointer entered an element. The `mouseover` triggered. Then the cursor goes into a child element. The interesting fact is that `mouseout` triggers in that case. The cursor is still in the element, but we have a `mouseout` from it!
![](mouseover-to-child.png)
![](mouseover-to-child.svg)
That seems strange, but can be easily explained.

BIN
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 9.7 KiB

35
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside.svg Normal file
View file

@ -0,0 +1,35 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="440px" height="183px" viewBox="0 0 440 183" 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>mouseover-mouseout-from-outside.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<rect id="path-1" x="202" y="57" width="126" height="93"></rect>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="126" height="93" fill="white">
<use xlink:href="#path-1"></use>
</mask>
</defs>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="mouseover-mouseout-from-outside.svg">
<use id="Rectangle-10" stroke="#E8C48E" mask="url(#mask-2)" stroke-width="8" fill="#FFF9EB" opacity="0.6" stroke-dasharray="5,1,5,1" xlink:href="#path-1"></use>
<g id="noun_69008_cc" transform="translate(171.000000, 8.000000)" fill="#E8C48E">
<path d="M234.020833,169 L4.97916667,169 C2.23066667,169 0,167.09875 0,164.775 L0,4.225 C0,1.90125 2.23066667,0 4.97916667,0 L234.020833,0 C236.759375,0 239,1.90125 239,4.225 L239,164.775 C239,167.09875 236.759375,169 234.020833,169 L234.020833,169 Z M9.95833333,160.55 L229.041667,160.55 L229.041667,8.45 L9.95833333,8.45 L9.95833333,160.55 L9.95833333,160.55 Z" id="Shape"></path>
<path d="M229.041667,42.25 L9.95833333,42.25 C7.20983333,42.25 4.97916667,40.34875 4.97916667,38.025 C4.97916667,35.70125 7.20983333,33.8 9.95833333,33.8 L229.041667,33.8 C231.780208,33.8 234.020833,35.70125 234.020833,38.025 C234.020833,40.34875 231.780208,42.25 229.041667,42.25 L229.041667,42.25 Z" id="Shape"></path>
<path d="M27.9166667,20.9 C27.9166667,23.11 26.1266667,24.9 23.9166667,24.9 C21.7066667,24.9 19.9166667,23.11 19.9166667,20.9 C19.9166667,18.69 21.7066667,16.9 23.9166667,16.9 C26.1266667,16.9 27.9166667,18.69 27.9166667,20.9 L27.9166667,20.9 Z" id="Shape"></path>
<path d="M47.8333333,20.9 C47.8333333,23.11 46.0433333,24.9 43.8333333,24.9 C41.6233333,24.9 39.8333333,23.11 39.8333333,20.9 C39.8333333,18.69 41.6233333,16.9 43.8333333,16.9 C46.0433333,16.9 47.8333333,18.69 47.8333333,20.9 L47.8333333,20.9 Z" id="Shape"></path>
<path d="M67.75,20.9 C67.75,23.11 65.96,24.9 63.75,24.9 C61.54,24.9 59.75,23.11 59.75,20.9 C59.75,18.69 61.54,16.9 63.75,16.9 C65.96,16.9 67.75,18.69 67.75,20.9 L67.75,20.9 Z" id="Shape"></path>
</g>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="232" y="86" width="67" height="34"></rect>
<text id="#TO" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="250.99681" y="109">#TO</tspan>
</text>
<polygon id="Fill-21" fill="#EE6B47" transform="translate(159.000000, 103.646000) scale(-1, 1) translate(-159.000000, -103.646000) " points="223.12832 94.6353921 217.344468 101.853926 105.198001 101.853926 108.348404 94.146 82 103.645409 108.348404 113.146 105.235092 105.438074 217.204218 105.438074 223.12832 112.830378 236 112.830378 228.709332 103.733476 236 94.6353921"></polygon>
<text id="target" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="240" y="80">target</tspan>
</text>
<text id="relatedTarget-=-null" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="1" y="85">relatedTarget = null</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 21 KiB

BIN
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 8.2 KiB

51
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems.svg Normal file
View file

@ -0,0 +1,51 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="508px" height="92px" viewBox="0 0 508 92" 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>mouseover-mouseout-over-elems.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<rect id="path-1" x="124" y="31" width="69.0072917" height="52.4511719"></rect>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="69.0072917" height="52.4511719" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<rect id="path-3" x="207" y="31" width="69.0072917" height="52.4511719"></rect>
<mask id="mask-4" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="69.0072917" height="52.4511719" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<rect id="path-5" x="291" y="31" width="69.0072917" height="52.4511719"></rect>
<mask id="mask-6" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="69.0072917" height="52.4511719" fill="white">
<use xlink:href="#path-5"></use>
</mask>
</defs>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="mouseover-mouseout-over-elems.svg">
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="375" y="22" width="88.0136719" height="50.4511719"></rect>
<text id="#TO" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="404.99681" y="53">#TO</tspan>
</text>
<rect id="Rectangle-7" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="17" y="22" width="88.0136719" height="50.4511719"></rect>
<text id="#FROM" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="36.3473958" y="53">#FROM</tspan>
</text>
<use id="Rectangle-8" stroke="#E8C48E" mask="url(#mask-2)" stroke-width="8" fill="#FFF9EB" opacity="0.6" stroke-dasharray="5,1,5,1" xlink:href="#path-1"></use>
<text id="&lt;DIV&gt;" opacity="0.6" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="138.964095" y="63">&lt;DIV&gt;</tspan>
</text>
<use id="Rectangle-9" stroke="#E8C48E" mask="url(#mask-4)" stroke-width="8" fill="#FFF9EB" opacity="0.6" stroke-dasharray="5,1,5,1" xlink:href="#path-3"></use>
<text id="&lt;DIV&gt;-2" opacity="0.6" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="221.964095" y="63">&lt;DIV&gt;</tspan>
</text>
<use id="Rectangle-10" stroke="#E8C48E" mask="url(#mask-6)" stroke-width="8" fill="#FFF9EB" opacity="0.6" stroke-dasharray="5,1,5,1" xlink:href="#path-5"></use>
<text id="&lt;DIV&gt;-3" opacity="0.6" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="305.964095" y="63">&lt;DIV&gt;</tspan>
</text>
<polyline id="Fill-21" fill="#EE6B47" transform="translate(247.500000, 47.646000) scale(-1, 1) translate(-247.500000, -47.646000) " points="401 38.6353921 375.340223 38.6353921 363.810075 45.8539263 140.245366 45.8539263 146.525714 38.146 94 47.6454089 146.525714 57.146 140.319306 49.4380737 363.530486 49.4380737 375.340223 56.8303775 401 56.8303775 386.466006 47.7334759 401 38.6353921"></polyline>
<text id="mouseover" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="340" y="17">mouseover</tspan>
</text>
<text id="mouseout" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="75" y="18">mouseout</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4 KiB

BIN
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 18 KiB

Some files were not shown because too many files have changed in this diff Show more