├── LICENSE.md
├── README.md
├── demos
    ├── .gitignore
    ├── .prettierrc
    ├── README.md
    ├── netlify.toml
    ├── package-lock.json
    ├── package.json
    └── src
    │   ├── base.css
    │   ├── combined
    │       ├── icb-fixed-visual
    │       │   └── index.html
    │       └── viewport-units
    │       │   └── index.html
    │   ├── core.js
    │   ├── index.html
    │   ├── individual
    │       ├── icb
    │       │   ├── fixedmeta.html
    │       │   ├── index.html
    │       │   ├── nometa.html
    │       │   └── viewport-fit.html
    │       ├── layout-viewport
    │       │   └── index.html
    │       ├── pwa
    │       │   ├── contain.html
    │       │   ├── cover.html
    │       │   ├── index.html
    │       │   ├── manifest-contain.json
    │       │   └── manifest-cover.json
    │       ├── safe-inset-areas
    │       │   ├── index.html
    │       │   ├── viewport-fit-auto.html
    │       │   ├── viewport-fit-contain.html
    │       │   └── viewport-fit-cover.html
    │       ├── virtual-keyboard
    │       │   └── index.html
    │       └── visual-viewport
    │       │   └── index.html
    │   └── scrollbar-gutter
    │       ├── long-both-edges
    │           └── index.html
    │       ├── long-stable
    │           └── index.html
    │       ├── scrollbar-gutter-bars.css
    │       ├── scrollbar-gutter-bars.js
    │       ├── short-both-edges
    │           └── index.html
    │       └── short-stable
    │           └── index.html
└── explainers
    ├── README.md
    ├── icb.md
    ├── illustrations
        ├── icb+layout-viewport.png
        ├── icb-desktop-content-long--classic-scrollbar.png
        ├── icb-desktop-content-long.png
        ├── icb-desktop-content-short.png
        ├── icb-mobile--uaui-expanded.png
        ├── icb-mobile--uaui-retracted.png
        ├── layout-viewport-desktop-content-long--classic-scrollbar.png
        ├── layout-viewport-desktop-content-long--scrolled.png
        ├── layout-viewport-desktop-content-long.png
        ├── layout-viewport-desktop-content-short.png
        ├── layout-viewport-desktop.png
        ├── layout-viewport-mobile--uaui-expanded.png
        ├── layout-viewport-mobile--uaui-retracted.png
        ├── uaui-expanded.png
        ├── uaui-retracted.png
        ├── viewport-units-desktop-long-content--classic-scrollbar.png
        ├── viewport-units-desktop-long-content.png
        ├── viewport-units-desktop.png
        ├── viewport-units-mobile-dvh--mobilesafari.png
        ├── viewport-units-mobile-naming-things.png
        ├── viewport-units-mobile-svh+lvh--with-icb--mobilesafari.png
        ├── viewport-units-mobile-svh+lvh--with-icb--uaui-expanded.png
        ├── viewport-units-mobile-svh+lvh--with-icb--uaui-retracted.png
        ├── viewport-units-mobile-vh--uaui-expanded.png
        ├── viewport-units-mobile-vh--uaui-retracted.png
        ├── virtual-keyboard-api-overlayscontent.png
        ├── virtual-keyboard-api-three-behaviors.png
        ├── virtual-keyboard-input-focus--with-everything---offset-layout-viewport.png
        ├── virtual-keyboard-input-focus--with-everything.png
        ├── virtual-keyboard-input-focus--with-icb--with-viewport-units.png
        ├── virtual-keyboard-input-focus--with-icb.png
        ├── virtual-keyboard-input-focus--with-layout-viewport-1.png
        ├── virtual-keyboard-input-focus--with-layout-viewport-2.png
        ├── virtual-keyboard-input-focus.png
        ├── virtual-keyboard-input-nofocus--with-icb.png
        ├── virtual-keyboard-input-nofocus--with-layout-viewport.png
        ├── virtual-keyboard-input-nofocus.png
        ├── visual-viewport-desktop--pinch-zoomed-in-1.png
        ├── visual-viewport-desktop--pinch-zoomed-in-2.png
        ├── visual-viewport-desktop--pinch-zoomed-in-alt-1.png
        ├── visual-viewport-desktop--pinch-zoomed-in-alt-2.png
        ├── visual-viewport-desktop.png
        ├── visual-viewport-mobile--pinch-zoomed-in.png
        ├── visual-viewport-mobile--uaui-expanded.png
        └── visual-viewport-mobile--uaui-retracted.png
    ├── layout-viewport.md
    ├── screenshots
        ├── visual-viewport-mobile-safari-over-pinch-zoom-out-1.jpeg
        └── visual-viewport-mobile-safari-over-pinch-zoom-out-2.jpeg
    ├── scrolling.md
    ├── sizing.md
    ├── videos
        ├── visual-viewport-desktop-overscroll--chrome-with-flag.mp4
        ├── visual-viewport-desktop-overscroll--chrome.mp4
        ├── visual-viewport-desktop-overscroll--firefox.mp4
        ├── visual-viewport-desktop-overscroll--safari--different-behaviors.mp4
        ├── visual-viewport-desktop-overscroll--safari.mp4
        ├── visual-viewport-mobile-over-pinch-zoom-out--safari--different-behaviors.mp4
        ├── visual-viewport-mobile-over-pinch-zoom-out--safari.mp4
        ├── visual-viewport-mobile-overscroll--safari--different-behaviors.mp4
        └── visual-viewport-mobile-overscroll--safari.mp4
    ├── viewport-units.md
    ├── virtual-keyboard-api.md
    ├── virtual-keyboard.md
    └── visual-viewport.md


/LICENSE.md:
--------------------------------------------------------------------------------
 1 | # The 3-Clause BSD License
 2 | 
 3 | Copyright © web-platform-tests contributors
 4 | 
 5 | Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
 6 | 
 7 | 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
 8 | 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
 9 | 3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
10 | 
11 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
12 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Interop 2022: Viewport
 2 | 
 3 | Work on the [viewport investigation project](https://github.com/web-platform-tests/interop-2022/issues/41) for Interop 2022.
 4 | 
 5 | > To sort out any confusion about what “viewport” means, and what browsers _(especially on mobile devices)_ should be doing with various viewport measurements & sizing. To make recommendations for what should change to improve interoperability.
 6 | >
 7 | > - Open any issues at CSSWG, WHATWG, wherever if we find underspecified standards on what these measurements should be in relationship to the viewport — so that the appropriate standards group can take it from there & define any missing details.
 8 | > - Open any issues/bugs with the appropriate browsers, noting places where they are not aligned with the standard. Or if the standard is unclear, where they are not aligned with each other.
 9 | 
10 | ## Definitions and Findings
11 | 
12 | In this effort we are looking at various viewport-related aspects. Their definitions and initial findings are collected in the [./explainers](./explainers) folder:
13 | 
14 | - [Layout Viewport](./explainers/layout-viewport.md)
15 | - [Initial Containing Block (ICB)](./explainers/icb.md)
16 | - [Visual Viewport](./explainers/visual-viewport.md)
17 | - [Virtual Keyboard](./explainers/virtual-keyboard.md)
18 | - [Virtual Keyboard API](./explainers/virtual-keyboard-api.md)
19 | - [Viewport Units](./explainers/viewport-units.md)
20 | 
21 | ## Demos
22 | 
23 | There are a bunch of demos available to visualize, debug, and test the behavior of certain viewport-related aspects in browsers.
24 | 
25 | These demos are published at [https://interop-2022-viewport.netlify.app/](https://interop-2022-viewport.netlify.app/)
26 | The results of some tests ran against these demos can be reviewed at [https://goo.gle/interop-2022-viewport-testresults](https://goo.gle/interop-2022-viewport-testresults)
27 | 
28 | Included tests:
29 | 
30 | - [Initial Containing Block (ICB)](https://interop-2022-viewport.netlify.app/individual/icb/)
31 | - [Layout Viewport](https://interop-2022-viewport.netlify.app/individual/layout-viewport/)
32 | - [Visual Viewport](https://interop-2022-viewport.netlify.app/individual/visual-viewport/)
33 | - [Virtual Keyboard API](https://interop-2022-viewport.netlify.app/individual/virtual-keyboard/)
34 | - [Viewport Units + window.innerHeight](https://interop-2022-viewport.netlify.app/combined/viewport-units/)
35 | - [Viewport Units + -webkit-fill-available](https://devinrousso.com/demo/WebKit/css/viewport-units.html) _(external)_
36 | - [ICB + Fixed Viewport + Visual Viewport + Event Debugger](https://interop-2022-viewport.netlify.app/combined/icb-fixed-visual/)
37 | 
38 | The source of the non-external demos is [included in this repository’s `demos` folder](./demos).
39 | 
40 | ## Recommendations
41 | 
42 | - TODO


--------------------------------------------------------------------------------
/demos/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .netlify


--------------------------------------------------------------------------------
/demos/.prettierrc:
--------------------------------------------------------------------------------
 1 | semi: true
 2 | singleQuote: true
 3 | trailingComma: "es5"
 4 | useTabs: true
 5 | printWidth: 9999
 6 | overrides:
 7 |   - files: "*.json"
 8 |     options:
 9 |       useTabs: false
10 |   - files: "*.css"
11 |     options:
12 |       singleQuote: false
13 | 


--------------------------------------------------------------------------------
/demos/README.md:
--------------------------------------------------------------------------------
 1 | # Interop 2022: Viewport: Demos
 2 | 
 3 | A collection of demos that allow you to debug and test the behavior of certain viewport and viewport-related aspects, part of the Interop 2022 Viewport Investigation Effort
 4 | 
 5 | - View online: https://interop-2022-viewport.netlify.app/
 6 | - Tested Scenarios + Results: https://goo.gle/interop-2022-viewport-testresults
 7 | 
 8 | ## Installation
 9 | 
10 | ```
11 | npm i
12 | ```
13 | 
14 | ## Running the project
15 | 
16 | ```
17 | npm start
18 | ```
19 | 
20 | A local dev server will be spun up, serving the content of `.src/` at [http://localhost:3000](http://localhost:3000)
21 | 


--------------------------------------------------------------------------------
/demos/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 |   publish = "src/"


--------------------------------------------------------------------------------
/demos/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "interop-2022-viewport-demos",
 3 |   "version": "1.0.0",
 4 |   "description": "A collection of demos that allow you to debug and test the behavior of certain viewport and viewport-related aspects",
 5 |   "scripts": {
 6 |     "start": "serve src",
 7 |     "deploy": "netlify deploy --prod",
 8 |     "test": "echo \"Error: no test specified\" && exit 1"
 9 |   },
10 |   "keywords": [
11 |     "viewports",
12 |     "interop2022"
13 |   ],
14 |   "author": "",
15 |   "license": "ISC",
16 |   "devDependencies": {
17 |     "serve": "^14.0.1"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/demos/src/base.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | *::after,
  3 | *::before {
  4 | 	box-sizing: border-box;
  5 | }
  6 | 
  7 | html,
  8 | body {
  9 | 	margin: 0;
 10 | 	padding: 0;
 11 | 	height: 100%;
 12 | 	width: 100%;
 13 | }
 14 | 
 15 | /* This code effectively outlines the ICB */
 16 | html {
 17 | 	outline: 10px dashed red;
 18 | 	outline-offset: -10px;
 19 | }
 20 | 
 21 | body {
 22 | 	background-color: aliceblue;
 23 | 	background-image: linear-gradient(to right, rgb(0 0 0 / 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgb(0 0 0 / 0.05) 1px, transparent 1px);
 24 | 	background-size: 50px 50px;
 25 | 	height: 300%; /* Add some scroll estate */
 26 | 	position: relative;
 27 | }
 28 | /* Element that goes vertically and indicates the start and end of each 100% block */
 29 | .heightdebugger {
 30 | 	position: absolute;
 31 | 	top: 0;
 32 | 	left: calc(50% - 1em);
 33 | 	bottom: 0;
 34 | 	width: 2em;
 35 | 	background: cyan;
 36 | 	background-image: linear-gradient(to bottom, darkmagenta 10px, transparent 1px), linear-gradient(to top, slateblue 10px, transparent 1px);
 37 | 	background-size: 100% calc(100% / 3);
 38 | 	z-index: -1;
 39 | }
 40 | 
 41 | /* To prevent auto-zoom on iOS */
 42 | input {
 43 | 	font-size: 16px;
 44 | }
 45 | 
 46 | #debug,
 47 | #visualviewport,
 48 | #layoutviewport {
 49 | 	padding: 1em;
 50 | 	overflow-y: hidden;
 51 | 	pointer-events: none;
 52 | }
 53 | 
 54 | [id$="-values"] {
 55 | 	margin-bottom: 1em;
 56 | 	white-space: pre-wrap;
 57 | 	font-family: monospace;
 58 | }
 59 | 
 60 | #layoutviewport {
 61 | 	position: fixed;
 62 | 	inset: 0;
 63 | 	border: 5px dotted blue;
 64 | 	z-index: 999;
 65 | }
 66 | 
 67 | #debug,
 68 | [data-vv-positioning="absolute"] #visualviewport {
 69 | 	position: absolute;
 70 | 	top: var(--vvpt, 0px);
 71 | 	left: var(--vvpl, 0px);
 72 | 	width: var(--vvw, 100%);
 73 | 	height: var(--vvh, 100vh);
 74 | 	font-size: calc(1em / var(--vvz, 1));
 75 | }
 76 | 
 77 | [data-vv-positioning="fixed"] #visualviewport {
 78 | 	position: fixed;
 79 | 	top: var(--vvot, 0px);
 80 | 	left: var(--vvol, 0px);
 81 | 	width: var(--vvw, 100%);
 82 | 	height: var(--vvh, 100v);
 83 | 	right: var(--vvol, 0px) + var(--vvw, 0px);
 84 | 	bottom: var(--vvol, 0px) + var(--vvh, 0px);
 85 | }
 86 | 
 87 | #visualviewport {
 88 | 	border: 8px solid;
 89 | 	border-image: repeating-linear-gradient(45deg, orange, orange 10px, transparent 10px, transparent 20px) 10;
 90 | }
 91 | 
 92 | #inputwrapper {
 93 | 	position: absolute;
 94 | 	right: 10vw;
 95 | 	top: 20vh;
 96 | 	z-index: 999;
 97 | 	opacity: 0.5;
 98 | }
 99 | 
100 | /* Tweak Lists */
101 | :not(li) > ul,
102 | :not(li) > ol {
103 | 	margin-block-start: 1em;
104 | 	margin-block-end: 1em;
105 | 	padding-inline-start: 2em;
106 | }
107 | 
108 | li {
109 | 	margin-block-end: 0.2em;
110 | }
111 | 
112 | /* The Options Box */
113 | #options[open] {
114 | 	padding: 1em;
115 | 	background-color: white;
116 | 	border-radius: 1em;
117 | 	display: flex;
118 | 	flex-direction: column;
119 | 	gap: 2rem;
120 | 	max-width: 80ch;
121 | }
122 | 
123 | #options[open]::backdrop {
124 | 	backdrop-filter: blur(0.5em);
125 | }
126 | 
127 | #options header {
128 | 	display: flex;
129 | 	flex-direction: row-reverse;
130 | 	justify-content: space-between;
131 | 	align-items: center;
132 | }
133 | 
134 | #options header > * {
135 | 	margin: 0;
136 | }
137 | 
138 | #options section {
139 | 	display: flex;
140 | 	flex-direction: column;
141 | 	width: 100%;
142 | 	justify-content: flex-start;
143 | 	overflow-y: scroll;
144 | }
145 | 
146 | #options :is(h1, h2, h3, h4, h5, h6) {
147 | 	margin: 0;
148 | }
149 | 
150 | #options section > p {
151 | 	margin: 1em 0 0.25em 0;
152 | }
153 | 
154 | .option {
155 | 	display: flex;
156 | 	align-items: center;
157 | 	gap: 0.5em;
158 | }
159 | 
160 | .option :is(input[type="checkbox"], input[type="radio"]) {
161 | 	width: 2em;
162 | 	height: 2em;
163 | }
164 | 
165 | :disabled + label {
166 | 	text-decoration: line-through;
167 | 	cursor: not-allowed;
168 | 	user-select: none;
169 | }
170 | 
171 | #btnOptions {
172 | 	position: fixed;
173 | 	right: 1em;
174 | 	top: 1em;
175 | }
176 | 
177 | .hidden {
178 | 	display: none !important;
179 | }
180 | 


--------------------------------------------------------------------------------
/demos/src/combined/icb-fixed-visual/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 | 	<meta charset="UTF-8" />
  6 | 	<title>Visual Viewport Debugger</title>
  7 | 	<meta name="viewport" content="width=device-width, initial-scale=1" />
  8 | 	<link rel="stylesheet" href="../../base.css" />
  9 | 	<style>
 10 | 		html {
 11 | 			border: 10px dashed red;
 12 | 		}
 13 | 
 14 | 		body {
 15 | 			height: 300%;
 16 | 		}
 17 | 
 18 | 		input[type="text"] {
 19 | 			font-size: 16px;
 20 | 			border: 2px solid grey;
 21 | 			margin-bottom: 0.5em;
 22 | 			width: 10em;
 23 | 		}
 24 | 
 25 | 		main {
 26 | 			position: fixed;
 27 | 			right: 3em;
 28 | 			top: 25%;
 29 | 			transform: translate3d(0, -100%, 0);
 30 | 
 31 | 			display: flex;
 32 | 			flex-direction: column;
 33 | 			z-index: 9999999;
 34 | 		}
 35 | 
 36 | 		.fixed {
 37 | 			position: fixed;
 38 | 			min-height: 2em;
 39 | 			background: lime;
 40 | 
 41 | 			line-height: 2em;
 42 | 			text-align: center;
 43 | 		}
 44 | 
 45 | 		.fixed--top,
 46 | 		.fixed--bottom {
 47 | 			left: 25vw;
 48 | 			width: 50vw;
 49 | 		}
 50 | 
 51 | 		.fixed--top {
 52 | 			top: 0;
 53 | 		}
 54 | 
 55 | 		.fixed--bottom {
 56 | 			bottom: calc(env(keyboard-inset-height, 0px) / 2);
 57 | 		}
 58 | 
 59 | 		/*
 60 | 		.has-virtual-keyboard .fixed--bottom {
 61 | 			bottom: calc(env(keyboard-inset-height, 0px) / 2);
 62 | 		}
 63 | 
 64 | 		.no-virtual-keyboard .fixed--bottom {
 65 | 			bottom: var(--keyboard-inset-height, 0);
 66 | 		}
 67 | 		*/
 68 | 
 69 | 		.breaker {
 70 | 			position: absolute;
 71 | 			top: 50%;
 72 | 			left: 50%;
 73 | 			border: 5px dashed gray;
 74 | 		}
 75 | 
 76 | 		.breaker--horizontal {
 77 | 			width: 100vw;
 78 | 			height: 0;
 79 | 		}
 80 | 
 81 | 		.breaker--vertical {
 82 | 			height: 100vh;
 83 | 			width: 0;
 84 | 		}
 85 | 
 86 | 		#fixedviewport {
 87 | 			position: fixed;
 88 | 			top: 0;
 89 | 			left: 0;
 90 | 			bottom: 0;
 91 | 			right: 0;
 92 | 			border: 5px dotted blue;
 93 | 			pointer-events: none;
 94 | 			z-index: 999;
 95 | 		}
 96 | 
 97 | 		/*
 98 | 		.unzoomed {
 99 | 			transform: scale(calc(1 / var(--vvz, 1)));
100 | 		}
101 | 		*/
102 | 
103 | 		#visualviewport {
104 | 			/*
105 | 			position: absolute;
106 | 			top: var(--vvtabs, 0px);
107 | 			left: var(--vvlabs, 0px);
108 | 			height: var(--vvhabs, 100vh);
109 | 			width: var(--vvwsabs, 100vw);
110 | 			*/
111 | 
112 | 			position: fixed;
113 | 			top: var(--vvt, 0px);
114 | 			left: var(--vvl, 0px);
115 | 			height: var(--vvh, 100%);
116 | 			width: var(--vvw, 100%);
117 | 
118 | 			border: 8px solid;
119 | 			border-image: repeating-linear-gradient(45deg,
120 | 					orange,
121 | 					orange 10px,
122 | 					transparent 10px,
123 | 					transparent 20px) 10;
124 | 			pointer-events: none;
125 | 		}
126 | 
127 | 		.fixed--vvtop,
128 | 		.fixed--vvbottom {
129 | 			background: orange;
130 | 			min-width: 10em;
131 | 			padding: 0 0.5em;
132 | 			white-space: nowrap;
133 | 			max-width: var(--vvw, 0px);
134 | 			overflow-x: auto;
135 | 
136 | 			z-index: 999998;
137 | 			outline: 1px solid aliceblue;
138 | 
139 | 			--unzoomed-em: calc(1rem / var(--vvz, 1));
140 | 		}
141 | 
142 | 		.fixed--vvtop {
143 | 			top: calc(var(--vvt, 0px));
144 | 			left: calc(var(--vvl, 0px));
145 | 		}
146 | 
147 | 		.fixed--vvbottom {
148 | 			bottom: calc(var(--lvph, 0px) - var(--vvb, 0px));
149 | 			right: calc(var(--lvpw, 0px) - var(--vvr, 0px));
150 | 		}
151 | 
152 | 		.unzoomed {
153 | 			font-size: calc(1em / var(--vvz, 1));
154 | 		}
155 | 
156 | 		#debug {
157 | 			position: fixed;
158 | 			top: calc(3em + var(--vvt, 0px));
159 | 			left: calc(3em + var(--vvl, 0px));
160 | 			bottom: calc(3em + var(--lvph, 0px) - var(--vvb, 0px));
161 | 			right: calc(3em + var(--lvpw, 0px) - var(--vvr, 0px));
162 | 
163 | 			text-shadow: 0 0 1px aliceblue;
164 | 			z-index: 999999;
165 | 			pointer-events: none;
166 | 		}
167 | 
168 | 		#debug ul {
169 | 			list-style: none;
170 | 		}
171 | 
172 | 		[data-ref]::before {
173 | 			content: attr(data-ref) " = ";
174 | 		}
175 | 
176 | 		.cols {
177 | 			display: flex;
178 | 			flex-direction: row;
179 | 			gap: 1em;
180 | 		}
181 | 
182 | 		li {
183 | 			white-space: nowrap;
184 | 		}
185 | 
186 | 		#eventlogger {
187 | 			max-height: calc(var(--vvh, 100vh) * 0.9);
188 | 			display: flex;
189 | 			flex-direction: column-reverse;
190 | 		}
191 | 	</style>
192 | 
193 | 	<script type="module">
194 | 		// This code requires the Visual Viewport API
195 | 		if (!window.visualViewport) {
196 | 			throw "Visual Viewport not supported";
197 | 		}
198 | 
199 | 		const INCLUDE_FIXES = false; // Whether to include extra offset or event fixes
200 | 		const AUTO_UPDATE = true; // Whether to constantly update the values
201 | 
202 | 		const LOG_W_RESIZE = true;
203 | 		const LOG_W_SCROLL = true;
204 | 		const LOG_VV_RESIZE = true;
205 | 		const LOG_VV_SCROLL = true;
206 | 
207 | 		// Flushes the gathered values into the DOM
208 | 		function assignValues(values) {
209 | 			for (const [key, value] of Object.entries(values)) {
210 | 				document.documentElement.style.setProperty(key, value);
211 | 				if (document.querySelector(`[data-ref="${key}"] output`)) {
212 | 					document.querySelector(`[data-ref="${key}"] output`).innerText = value;
213 | 				}
214 | 			}
215 | 		}
216 | 
217 | 		// Visual Viewport
218 | 		function getVisualViewport() {
219 | 
220 | 			// @NOTE: Limiting offsetX to 0 here, as some browsers go negative
221 | 			// when overscrolling, even though the
222 | 			let offsetTop = visualViewport.offsetTop;
223 | 			let offsetLeft = visualViewport.offsetLeft;
224 | 			if (INCLUDE_FIXES) {
225 | 				offsetTop = Math.max(offsetTop, 0);
226 | 				offsetLeft = Math.max(offsetLeft, 0);
227 | 			}
228 | 
229 | 			return {
230 | 				width: visualViewport.width,
231 | 				height: visualViewport.height,
232 | 				zoom: visualViewport.scale,
233 | 				pageLeft: visualViewport.pageLeft,
234 | 				pageTop: visualViewport.pageTop,
235 | 				offsetLeft: visualViewport.offsetLeft,
236 | 				offsetTop: visualViewport.offsetTop,
237 | 
238 | 				// For when you to use position: absolute on the VV
239 | 				absLeft: visualViewport.pageLeft,
240 | 				absTop: visualViewport.pageTop,
241 | 				absRight: visualViewport.pageLeft + visualViewport.width, // @TODO: Update value right here, instead of adding/subtracting in CSS
242 | 				absBottom: visualViewport.pageTop + visualViewport.height, // @TODO: Update value right here, instead of adding/subtracting in CSS
243 | 
244 | 				// For when you to use position: fixed on the VV
245 | 				top: offsetTop,
246 | 				left: offsetLeft,
247 | 				right: offsetLeft + visualViewport.width, // @TODO: Update value right here, instead of adding/subtracting in CSS
248 | 				bottom: offsetTop + visualViewport.height // @TODO: Update value right here, instead of adding/subtracting in CSS
249 | 			};
250 | 		}
251 | 		const updateVisualViewport = () => {
252 | 			const values = {};
253 | 			const vv = getVisualViewport();
254 | 
255 | 			values["--vvh"] = `${vv.height.toFixed(2)}px`;
256 | 			values["--vvw"] = `${vv.width.toFixed(2)}px`;
257 | 			values["--vvpt"] = `${vv.pageTop.toFixed(2)}px`;
258 | 			values["--vvpl"] = `${vv.pageLeft.toFixed(2)}px`;
259 | 			values["--vvot"] = `${vv.offsetTop.toFixed(2)}px`;
260 | 			values["--vvol"] = `${vv.offsetLeft.toFixed(2)}px`;
261 | 			values["--vvz"] = `${vv.zoom}`;
262 | 
263 | 			values["--vvt"] = `${vv.top.toFixed(2)}px`;
264 | 			values["--vvl"] = `${vv.left.toFixed(2)}px`;
265 | 			values["--vvb"] = `${vv.bottom.toFixed(2)}px`;
266 | 			values["--vvr"] = `${vv.right.toFixed(2)}px`;
267 | 
268 | 			values["--vvtabs"] = `${vv.absTop.toFixed(2)}px`;
269 | 			values["--vvlabs"] = `${vv.absLeft.toFixed(2)}px`;
270 | 			values["--vvbabs"] = `${vv.absBottom.toFixed(2)}px`;
271 | 			values["--vvrabs"] = `${vv.absRight.toFixed(2)}px`;
272 | 
273 | 			assignValues(values);
274 | 		};
275 | 		window.addEventListener("load", updateVisualViewport);
276 | 		window.visualViewport.addEventListener("scroll", updateVisualViewport);
277 | 		window.visualViewport.addEventListener("resize", () => {
278 | 			// @NOTE: Also update window size, as that resizes as well
279 | 			// @TODO: Check if browsers consistently trigger window.resize
280 | 			updateVisualViewport();
281 | 			updateWindowSize();
282 | 
283 | 			// @NOTE: We trigger an extra updateLayoutViewport because some browers
284 | 			// do not behave correctly (Looking at you, Firefox and Edge on iOS)
285 | 			//
286 | 			// You can test this by:
287 | 			// - Disabling the line below
288 | 			// - Scrolling the page down
289 | 			// - Pinch Zooming
290 | 			// Worth noting:
291 | 			// - The vv-bottom elements will be off-position
292 | 			// - The value for --lvph will be wrong, as it was measured too early
293 | 			if (INCLUDE_FIXES) {
294 | 				setTimeout(updateLayoutViewport, 250);
295 | 				setTimeout(updateWindowSize, 250);
296 | 			}
297 | 		});
298 | 
299 | 		// ICB
300 | 		const getICB = () => {
301 | 			// @NOTE: Instead of measuring the ICB element, we use
302 | 			// documentElement.clientX/clientY which yield the same value
303 | 
304 | 			// return document.querySelector('html').getBoundingClientRect();
305 | 
306 | 			return {
307 | 				height: document.documentElement.clientHeight,
308 | 				width: document.documentElement.clientWidth
309 | 			};
310 | 		};
311 | 
312 | 		const updateICB = () => {
313 | 			const values = {};
314 | 			const ICB = getICB();
315 | 
316 | 			values["--icbh"] = `${ICB.height}px`;
317 | 			values["--icbw"] = `${ICB.width}px`;
318 | 
319 | 			assignValues(values);
320 | 		};
321 | 		window.addEventListener("load", updateICB);
322 | 		window.addEventListener("resize", updateICB);
323 | 
324 | 		// Scroll Position
325 | 		const getScrollPosition = () => {
326 | 			// document.documentElement.scrollTop/Left (= window.scrollY/scrollX = window.pageXOffset/pageYOffset)
327 | 
328 | 			// @NOTE: includes hack/workaround where documentElement.scrollTop/scrollLeft don’t get updated properly
329 | 			// in Chrome/Firefox in case one has zoomed in. There, the value remains 0 until you cross the end of the
330 | 			// ICB. On iOS the value updates immediately as you scroll.
331 | 			// @TODO: file bug for the above
332 | 			if (INCLUDE_FIXES) {
333 | 				return {
334 | 					scrollTop: Math.max(window.scrollY, visualViewport.pageTop),
335 | 					scrollLeft: Math.max(window.scrollX, visualViewport.pageLeft)
336 | 				};
337 | 			}
338 | 
339 | 			return {
340 | 				scrollTop: window.scrollY,
341 | 				scrollLeft: window.scrollX,
342 | 			}
343 | 		};
344 | 
345 | 		const getDocumentClientSize = () => {
346 | 			return {
347 | 				clientWidth: document.documentElement.clientWidth,
348 | 				clientHeight: document.documentElement.clientHeight,
349 | 			}
350 | 		};
351 | 
352 | 		const updateDocumentRelatedValues = () => {
353 | 			const values = {};
354 | 			const scrollPos = getScrollPosition();
355 | 			const size = getDocumentClientSize();
356 | 
357 | 			values["--d-st"] = `${scrollPos.scrollTop.toFixed(2)}px`;
358 | 			values["--d-sl"] = `${scrollPos.scrollLeft.toFixed(2)}px`;
359 | 			values["--d-cw"] = `${size.clientWidth}px`;
360 | 			values["--d-ch"] = `${size.clientHeight}px`;
361 | 
362 | 			assignValues(values);
363 | 		};
364 | 		window.addEventListener("load", updateDocumentRelatedValues);
365 | 		window.addEventListener("scroll", updateDocumentRelatedValues);
366 | 
367 | 		// WindowSize
368 | 		const getWindowSize = () => {
369 | 			return {
370 | 				innerHeight: window.innerHeight,
371 | 				innerWidth: window.innerWidth,
372 | 			};
373 | 		};
374 | 		const updateWindowSize = () => {
375 | 			const values = {};
376 | 			const windowSize = getWindowSize();
377 | 
378 | 			values["--w-ih"] = `${windowSize.innerHeight}px`;
379 | 			values["--w-iw"] = `${windowSize.innerWidth}px`;
380 | 
381 | 			assignValues(values);
382 | 		};
383 | 		window.addEventListener("load", updateWindowSize);
384 | 		window.addEventListener("resize", updateWindowSize);
385 | 
386 | 		// Layout Viewport
387 | 		const getLayoutViewport = () => {
388 | 			// @NOTE: You might think we could use window.innerHeight/innerWidth for this
389 | 			// but this is not true: when overscrolling Safari into a pull-to-refresh,
390 | 			// the window.innerHeight shrinks, but the layout viewport remains the same.
391 | 			const layoutViewport = document.querySelector("#fixedviewport");
392 | 			return layoutViewport.getBoundingClientRect();
393 | 		};
394 | 
395 | 		const updateLayoutViewport = () => {
396 | 			const values = {};
397 | 			const layoutViewport = getLayoutViewport();
398 | 
399 | 			values["--lvph"] = `${layoutViewport.height.toFixed(2)}px`;
400 | 			values["--lvpw"] = `${layoutViewport.width.toFixed(2)}px`;
401 | 
402 | 			assignValues(values);
403 | 		};
404 | 		window.addEventListener("load", updateLayoutViewport);
405 | 		window.addEventListener("resize", () => {
406 | 			updateWindowSize();
407 | 
408 | 			// @NOTE: We trigger an extra resize because some browers fire the resize
409 | 			// event too soon when the UA UI gets shown (Looking at you, Firefox 
410 | 			// and Edge on iOS). In those browsers, the event gets fired *WHILE* the
411 | 			// UA UI Elements are still animating, instead of *AFTER* the animation.
412 | 			//
413 | 			// You can test this by:
414 | 			// - Disabling the line below
415 | 			// - Scrolling the page a bit down and back up again
416 | 			// Worth noting:
417 | 			// - The vv-bottom elements will be off-position
418 | 			// - The value for --lvph will be wrong, as it was measured too early
419 | 			if (INCLUDE_FIXES) {
420 | 				setTimeout(updateLayoutViewport, 250);
421 | 			}
422 | 		});
423 | 
424 | 		const updateAll = () => {
425 | 			updateICB();
426 | 			updateWindowSize();
427 | 			updateLayoutViewport();
428 | 			updateScrollPosition();
429 | 			updateVisualViewport();
430 | 		};
431 | 
432 | 		// Update all when input gets focussed, as not all browsers trigger resize events
433 | 		// (Looking at you, Firefox on iOS) + it takes some time before they have transitioned
434 | 		if (INCLUDE_FIXES) {
435 | 			document.querySelector('input[type="text"]').addEventListener('focus', () => {
436 | 				log('input.focus');
437 | 				setTimeout(updateAll, 250);
438 | 				setTimeout(() => {
439 | 					log(JSON.stringify(getVisualViewport(), null, 4));
440 | 				}, 500);
441 | 			});
442 | 			document.querySelector('input[type="text"]').addEventListener('blur', () => {
443 | 				log('input.blur');
444 | 				setTimeout(updateAll, 250);
445 | 				setTimeout(() => {
446 | 					updateWindowSize();
447 | 					log(JSON.stringify(getVisualViewport(), null, 4));
448 | 				}, 500);
449 | 			});
450 | 		}
451 | 
452 | 		// Logggggg
453 | 		const log = (msg) => {
454 | 			const li = document.createElement('li');
455 | 			li.innerText = msg;
456 | 			document.querySelector('#eventlogger').prepend(li);
457 | 		};
458 | 		window.addEventListener('DOMContentLoaded', (e) => log('DOMContentLoaded'));
459 | 		window.addEventListener('load', (e) => log('window.load'));
460 | 		window.addEventListener('resize', (e) => LOG_W_RESIZE && log('window.resize'));
461 | 		window.addEventListener('scroll', (e) => LOG_W_SCROLL && log('window.scroll'));
462 | 		window.visualViewport.addEventListener('resize', (e) => LOG_VV_RESIZE && log('visualViewport.resize'));
463 | 		window.visualViewport.addEventListener('scroll', (e) => LOG_VV_SCROLL && log('visualViewport.scroll'));
464 | 
465 | 		if ("virtualKeyboard" in navigator) {
466 | 			document.getElementById("overlaysContent").addEventListener("change", (e) => {
467 | 				navigator.virtualKeyboard.overlaysContent = e.target.checked;
468 | 			});
469 | 		} else {
470 | 			document.getElementById("overlaysContent").disabled = true;
471 | 		}
472 | 
473 | 		// Constant update
474 | 		if (AUTO_UPDATE) {
475 | 			setInterval(updateAll, 100);
476 | 		}
477 | 	</script>
478 | </head>
479 | 
480 | <body translate="no">
481 | 	<main>
482 | 		<input type="text" />
483 | 		<label>
484 | 			<input type="checkbox" id="overlaysContent"> overlaysContent
485 | 		</label>
486 | 	</main>
487 | 
488 | 	<h1>I am root</h1>
489 | 
490 | 	<div id="debug" class="unzoomed">
491 | 		<div class="cols">
492 | 			<ul id="units">
493 | 				<li data-ref="--icbh"><output></output></li>
494 | 				<li data-ref="--icbw"><output></output></li>
495 | 				<li data-ref="--d-ch"><output></output></li>
496 | 				<li data-ref="--d-cw"><output></output></li>
497 | 
498 | 				<li data-ref="--w-ih"><output></output></li>
499 | 				<li data-ref="--w-iw"><output></output></li>
500 | 				<li data-ref="--d-st"><output></output></li>
501 | 				<li data-ref="--d-sl"><output></output></li>
502 | 
503 | 				<li data-ref="--lvph"><output></output></li>
504 | 				<li data-ref="--lvpw"><output></output></li>
505 | 
506 | 				<li data-ref="--vvh"><output></output></li>
507 | 				<li data-ref="--vvw"><output></output></li>
508 | 				<li data-ref="--vvt"><output></output></li>
509 | 				<li data-ref="--vvl"><output></output></li>
510 | 				<!-- <li data-ref="--vvb"><output></output></li>
511 | 				<li data-ref="--vvr"><output></output></li> -->
512 | 				<li data-ref="--vvpl"><output></output></li>
513 | 				<li data-ref="--vvpt"><output></output></li>
514 | 				<li data-ref="--vvol"><output></output></li>
515 | 				<li data-ref="--vvot"><output></output></li>
516 | 			</ul>
517 | 			<ol id="eventlogger" reversed></ol>
518 | 		</div>
519 | 	</div>
520 | 
521 | 	<div class="fixed fixed--top">.fixed--top</div>
522 | 	<div class="fixed fixed--bottom">.fixed--bottom</div>
523 | 
524 | 	<div class="fixed fixed--vvtop">.fixed--vvtop</div>
525 | 	<div class="fixed fixed--vvbottom">.fixed--vvbottom</div>
526 | 
527 | 	<div class="fixed fixed--vvtop unzoomed">.fixed--vvtop.unzoomed</div>
528 | 	<div class="fixed fixed--vvbottom unzoomed">.fixed--vvbottom.unzoomed</div>
529 | 
530 | 	<div id="fixedviewport"></div>
531 | 	<div id="visualviewport"></div>
532 | </body>
533 | 
534 | </html>


--------------------------------------------------------------------------------
/demos/src/combined/viewport-units/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 | 	<meta charset="UTF-8" />
  6 | 	<title>Viewport Units Debugger – Interop 2022 Viewport Investigation Effort Demo Pages</title>
  7 | 	<meta name="viewport" content="width=device-width, initial-scale=1" />
  8 | 	<link rel="stylesheet" href="../../base.css" />
  9 | 	<style>
 10 | 		body {
 11 | 			height: 2000px;
 12 | 		}
 13 | 
 14 | 		.template {
 15 | 			display: none;
 16 | 		}
 17 | 
 18 | 		div.bar {
 19 | 			width: 20px;
 20 | 			top: 0px;
 21 | 			white-space: nowrap;
 22 | 		}
 23 | 
 24 | 		.bar>.text {
 25 | 			box-sizing: border-box;
 26 | 			width: 65vh;
 27 | 			background-color: white;
 28 | 			opacity: 0.7;
 29 | 			height: 20px;
 30 | 			padding: 0px 80px;
 31 | 			transform: rotate(90deg);
 32 | 			transform-origin: left bottom 0;
 33 | 		}
 34 | 
 35 | 		.fixedpercent {
 36 | 			position: fixed;
 37 | 			height: 99%;
 38 | 			border-bottom: 1% solid hotpink;
 39 | 			background-color: lightsteelblue;
 40 | 		}
 41 | 
 42 | 		.fixedvh {
 43 | 			position: fixed;
 44 | 			height: 99vh;
 45 | 			border-bottom: 1vh solid hotpink;
 46 | 			background-color: lightskyblue;
 47 | 		}
 48 | 
 49 | 		.abspercent {
 50 | 			position: absolute;
 51 | 			height: 99%;
 52 | 			border-bottom: 1% solid hotpink;
 53 | 			background-color: darksalmon;
 54 | 		}
 55 | 
 56 | 		.absvh {
 57 | 			position: absolute;
 58 | 			height: 99vh;
 59 | 			border-bottom: 1vh solid hotpink;
 60 | 			background-color: coral;
 61 | 		}
 62 | 
 63 | 		.textfixed {
 64 | 			box-sizing: border-box;
 65 | 			width: 65vh;
 66 | 			background-color: white;
 67 | 			opacity: 0.7;
 68 | 			height: 20px;
 69 | 			padding: 0px 80px;
 70 | 			transform: rotate(90deg);
 71 | 			transform-origin: left bottom 0;
 72 | 		}
 73 | 
 74 | 		.textabs {
 75 | 			box-sizing: border-box;
 76 | 			width: 65vh;
 77 | 			background-color: white;
 78 | 			opacity: 0.7;
 79 | 			height: 20px;
 80 | 			padding: 0px 80px;
 81 | 			transform: rotate(90deg);
 82 | 			transform-origin: left bottom 0;
 83 | 		}
 84 | 
 85 | 		#consoleContainer {
 86 | 			position: absolute;
 87 | 			left: 0px;
 88 | 			right: 0px;
 89 | 			height: 100vh;
 90 | 		}
 91 | 
 92 | 		#console {
 93 | 			position: absolute;
 94 | 			left: 0px;
 95 | 			right: 100px;
 96 | 		}
 97 | 
 98 | 		.innerHeightLog {
 99 | 			position: fixed;
100 | 			top: 0;
101 | 			right: 100px;
102 | 			width: 180px;
103 | 			height: 20px;
104 | 			background-color: chartreuse;
105 | 		}
106 | 
107 | 		#optionsbox {
108 | 			position: fixed;
109 | 			padding: 5px;
110 | 			left: 15px;
111 | 			right: 15px;
112 | 			top: 15px;
113 | 			bottom: 15px;
114 | 			background-color: white;
115 | 			border-radius: 10px;
116 | 			box-shadow: 7px 6px 14px 0px black;
117 | 			z-index: 999;
118 | 		}
119 | 
120 | 		#optionsbox h1 {
121 | 			margin: 0;
122 | 		}
123 | 
124 | 		#optionsbox>.optionsheader {
125 | 			display: flex;
126 | 			justify-content: space-between;
127 | 			margin: 10px 10px 0 10px;
128 | 		}
129 | 
130 | 		#optionsbox>.container {
131 | 			display: flex;
132 | 			flex-direction: column;
133 | 			height: 100%;
134 | 			width: 100%;
135 | 			justify-content: flex-start;
136 | 		}
137 | 
138 | 		#optionsbox>.container>* {
139 | 			width: 100%;
140 | 			height: 50px;
141 | 		}
142 | 
143 | 		.option {
144 | 			display: flex;
145 | 			align-items: center;
146 | 		}
147 | 
148 | 		.hidden {
149 | 			display: none;
150 | 		}
151 | 
152 | 		.option input[type="checkbox"] {
153 | 			width: 2em;
154 | 			height: 2em;
155 | 		}
156 | 
157 | 		:disabled+label {
158 | 			text-decoration: line-through;
159 | 		}
160 | 
161 | 		#btnClose:after {
162 | 			width: 37px;
163 | 			text-align: center;
164 | 			font-size: xx-large;
165 | 			font-weight: 300;
166 | 			display: inline-block;
167 | 			content: "\00d7";
168 | 			/* This will render the 'X' */
169 | 		}
170 | 
171 | 		#the-input {
172 | 			position: fixed;
173 | 			top: 50%;
174 | 			left: 50%;
175 | 			transform: translate3d(-50%, -50%, 0);
176 | 			z-index: 998;
177 | 			font-size: 16px;
178 | 		}
179 | 
180 | 		#fixedviewport {
181 | 			position: fixed;
182 | 			top: 0;
183 | 			left: 0;
184 | 			bottom: 0;
185 | 			right: 0;
186 | 			border: 5px dotted blue;
187 | 			pointer-events: none;
188 | 		}
189 | 	</style>
190 | 
191 | 	<script type="module">
192 | 		let options = {
193 | 			enableLog: true,
194 | 			posFixed: true,
195 | 			posAbsolute: true,
196 | 			percentEnable: true,
197 | 			vhEnable: true,
198 | 			lvhEnable: true,
199 | 			svhEnable: true,
200 | 			dvhEnable: true,
201 | 			virtualKeyboardOverlaysContent: false,
202 | 		};
203 | 
204 | 		const spinner = ["/", "-", "\\", "|"];
205 | 		let spinnerIx = 0;
206 | 
207 | 		let bars = [];
208 | 
209 | 		function regenerateBars() {
210 | 			let template = elem("templateBar");
211 | 			for (let bar of bars) {
212 | 				bar.remove();
213 | 			}
214 | 
215 | 			bars = [];
216 | 
217 | 			let units = [];
218 | 			if (options.vhEnable) units.push("vh");
219 | 			if (options.lvhEnable) units.push("lvh");
220 | 			if (options.svhEnable) units.push("svh");
221 | 			if (options.dvhEnable) units.push("dvh");
222 | 			if (options.percentEnable) units.push("%");
223 | 
224 | 			let positions = [];
225 | 			if (options.posFixed) positions.push("fixed");
226 | 			if (options.posAbsolute) positions.push("absolute");
227 | 
228 | 			let h = 28;
229 | 			let right = 5;
230 | 			for (let position of positions) {
231 | 				let s = 100;
232 | 				let l = 80;
233 | 
234 | 				for (let unit of units) {
235 | 					s -= 15;
236 | 					l -= 8;
237 | 					let newBar = template.cloneNode(true);
238 | 					newBar.classList.remove("template");
239 | 					newBar.style.right = `${right}px`;
240 | 					newBar.style.position = position;
241 | 					newBar.style.height = `100${unit}`;
242 | 					// newBar.style.borderBottom = `1${unit} solid hotpink`;
243 | 					newBar.style.backgroundColor = `hsl(${h}, ${s}%, ${l}%)`;
244 | 
245 | 					newBar.querySelector(
246 | 						".text"
247 | 					).innerHTML = `100${unit} position:${position} <span class="height"></span>`;
248 | 					bars.push(newBar);
249 | 
250 | 					elem("barContainer").appendChild(newBar);
251 | 
252 | 					right += 25;
253 | 				}
254 | 				h = 205;
255 | 			}
256 | 		}
257 | 
258 | 		function updateText() {
259 | 			for (let e of bars) {
260 | 				e.querySelector(".text .height").innerText = `(${Math.round(e.clientHeight)}px)`;
261 | 			}
262 | 			document.querySelector(".innerHeightLog").innerText = "innerHeight: " + window.innerHeight + "px " + spinner[spinnerIx];
263 | 			spinnerIx = (spinnerIx + 1) % spinner.length;
264 | 		}
265 | 		function resized() {
266 | 			if (options.enableLog) {
267 | 				var console = document.getElementById("console");
268 | 				console.innerHTML +=
269 | 					"*Resize! window.innerHeight: " +
270 | 					window.innerHeight +
271 | 					",  documentElement.clientHeight: " +
272 | 					document.documentElement.clientHeight +
273 | 					"<br>";
274 | 			}
275 | 			updateText();
276 | 		}
277 | 
278 | 		function elem(id) {
279 | 			return document.getElementById(id);
280 | 		}
281 | 
282 | 		function syncVirtualKeyboardSetting() {
283 | 			if ("virtualKeyboard" in navigator) {
284 | 				navigator.virtualKeyboard.overlaysContent = options.virtualKeyboardOverlaysContent;
285 | 			} else {
286 | 				elem("optVirtualKeyboardOverlaysContent").disabled = true;
287 | 			}
288 | 		}
289 | 
290 | 		function openOptions() {
291 | 			elem("optPosAbs").checked = options.posAbsolute;
292 | 			elem("optPosFixed").checked = options.posFixed;
293 | 			elem("optPercent").checked = options.percentEnable;
294 | 			elem("optVh").checked = options.vhEnable;
295 | 			elem("optLvh").checked = options.lvhEnable;
296 | 			elem("optSvh").checked = options.svhEnable;
297 | 			elem("optDvh").checked = options.dvhEnable;
298 | 			elem("optLogging").checked = options.enableLog;
299 | 			elem("optVirtualKeyboardOverlaysContent").checked = options.virtualKeyboardOverlaysContent;
300 | 
301 | 			const elemOptions = document.getElementById("optionsbox");
302 | 			elemOptions.classList.remove("hidden");
303 | 		}
304 | 
305 | 		function readOptions() {
306 | 			options.posAbsolute = elem("optPosAbs").checked;
307 | 			options.posFixed = elem("optPosFixed").checked;
308 | 			options.percentEnable = elem("optPercent").checked;
309 | 			options.vhEnable = elem("optVh").checked;
310 | 			options.lvhEnable = elem("optLvh").checked;
311 | 			options.svhEnable = elem("optSvh").checked;
312 | 			options.dvhEnable = elem("optDvh").checked;
313 | 			options.enableLog = elem("optLogging").checked;
314 | 			options.virtualKeyboardOverlaysContent = elem("optVirtualKeyboardOverlaysContent").checked;
315 | 
316 | 			window.localStorage.setItem(
317 | 				"urlbarsize_options",
318 | 				JSON.stringify(options)
319 | 			);
320 | 		}
321 | 
322 | 		function closeOptions() {
323 | 			const elemOptions = document.getElementById("optionsbox");
324 | 			elemOptions.classList.add("hidden");
325 | 
326 | 			readOptions();
327 | 			regenerateBars();
328 | 			syncVirtualKeyboardSetting();
329 | 		}
330 | 
331 | 		var fullscreen = false;
332 | 		addEventListener("load", function () {
333 | 			const stored_options_str =
334 | 				window.localStorage.getItem("urlbarsize_options");
335 | 			if (stored_options_str) {
336 | 				options = JSON.parse(stored_options_str);
337 | 			}
338 | 			let consoleContainer = document.getElementById("consoleContainer");
339 | 			let btnClose = document.getElementById("btnClose");
340 | 
341 | 			btnClose.addEventListener("click", closeOptions);
342 | 			btnOptions.addEventListener("click", openOptions);
343 | 
344 | 			// @TODO: Restore Fullscreen?
345 | 			// consoleContainer.addEventListener("click", function () {
346 | 			//   if (fullscreen) document.webkitExitFullscreen();
347 | 			//   else document.documentElement.webkitRequestFullscreen();
348 | 
349 | 			//   fullscreen = !fullscreen;
350 | 			// });
351 | 
352 | 			visualViewport.addEventListener("resize", () => {
353 | 				if (options.enableLog) {
354 | 					var console = document.getElementById("console");
355 | 					console.innerHTML +=
356 | 						"*VV Resize: " + visualViewport.height + " <br>";
357 | 				}
358 | 				updateText();
359 | 			});
360 | 
361 | 			regenerateBars();
362 | 			syncVirtualKeyboardSetting();
363 | 
364 | 			updateText();
365 | 			setInterval(updateText, 500);
366 | 		});
367 | 	</script>
368 | </head>
369 | 
370 | <body translate="no" onresize="resized()">
371 | 	<div id="fixedviewport"></div>
372 | 	<button id="btnOptions">Options</button>
373 | 	<input type="text" id="the-input" />
374 | 	<div id="consoleContainer">
375 | 		<div id="console">
376 | 			<br />
377 | 			OnResize handler calls will be displayed below with window.innerWidth
378 | 			and documentElement.clientHeight<br /><br />
379 | 		</div>
380 | 	</div>
381 | 	<div id="templateBar" class="template bar">
382 | 		<div class="text">unit-text position:</div>
383 | 	</div>
384 | 	<div id="barContainer"></div>
385 | 	<div class="innerHeightLog"></div>
386 | 	<div id="optionsbox" class="hidden">
387 | 		<div class="optionsheader">
388 | 			<h1>Options</h1>
389 | 			<button style="background-color: transparent; border: none">
390 | 				<div id="btnClose"></div>
391 | 			</button>
392 | 		</div>
393 | 		<div class="container">
394 | 			<div>
395 | 				<h3>Position:</h3>
396 | 			</div>
397 | 			<div class="option">
398 | 				<input type="checkbox" id="optPosAbs" name="optPosAbs" checked />
399 | 				<label for="optPosAbs">position: absolute</label>
400 | 			</div>
401 | 			<div class="option">
402 | 				<input type="checkbox" id="optPosFixed" name="optPosFixed" checked />
403 | 				<label for="optPosFixed">position: fixed</label>
404 | 			</div>
405 | 			<div>
406 | 				<h3>Units:</h3>
407 | 			</div>
408 | 			<div class="option">
409 | 				<input type="checkbox" id="optPercent" name="optPercent" checked />
410 | 				<label for="optPercent">precentage-based</label>
411 | 			</div>
412 | 			<div class="option">
413 | 				<input type="checkbox" id="optVh" name="optVh" checked />
414 | 				<label for="optVh">vh</label>
415 | 			</div>
416 | 			<div class="option">
417 | 				<input type="checkbox" id="optLvh" name="optLvh" checked />
418 | 				<label for="optLvh">lvh</label>
419 | 			</div>
420 | 			<div class="option">
421 | 				<input type="checkbox" id="optSvh" name="optSvh" checked />
422 | 				<label for="optSvh">svh</label>
423 | 			</div>
424 | 			<div class="option">
425 | 				<input type="checkbox" id="optDvh" name="optSvh" checked />
426 | 				<label for="optDvh">dvh</label>
427 | 			</div>
428 | 			<div>
429 | 				<h3>Misc:</h3>
430 | 			</div>
431 | 			<div class="option">
432 | 				<input type="checkbox" id="optLogging" name="optLogging" checked />
433 | 				<label for="optLogging">Enable Resize Event Logging</label>
434 | 			</div>
435 | 			<div class="option">
436 | 				<input type="checkbox" id="optVirtualKeyboardOverlaysContent" name="optVirtualKeyboardOverlaysContent" />
437 | 				<label for="optVirtualKeyboardOverlaysContent">Virtual Keyboard Overlays Content</label>
438 | 			</div>
439 | 		</div>
440 | 	</div>
441 | </body>
442 | 
443 | </html>


--------------------------------------------------------------------------------
/demos/src/core.js:
--------------------------------------------------------------------------------
  1 | const clamp = (val, min, max) => Math.min(Math.max(val, min), max);
  2 | export { clamp };
  3 | 
  4 | const write = (vals, $el, prefix = '') => {
  5 | 	if (!$el) return;
  6 | 	$el.innerText = `${prefix} ${vals ? JSON.stringify(vals, null, 4) : 'N/A'}`.trim();
  7 | };
  8 | export { write };
  9 | 
 10 | const browserUpdatesScrollPositionsOnOverscroll = () => {
 11 | 	// WebKit based browsers do this.
 12 | 	// @TODO: Move away from UA Sniffing
 13 | 	return CSS.supports('selector(:nth-child(1 of x))');
 14 | };
 15 | 
 16 | const getVisualViewPortValues = ({ clampOffsets = false, resizeDimensions = false }) => {
 17 | 	let { width, height, widthOrig = null, heightOrig = null, scale, offsetTop, offsetLeft, offsetTopOrig = null, offsetLeftOrig = null, pageLeft, pageTop, pageLeftOrig = null, pageTopOrig = null } = window.visualViewport;
 18 | 
 19 | 	// Adjust values by clamping
 20 | 	if (clampOffsets) {
 21 | 		// Cache original values
 22 | 		pageTopOrig = pageTop;
 23 | 		pageLeftOrig = pageLeft;
 24 | 		offsetTopOrig = offsetTop;
 25 | 		offsetLeftOrig = offsetLeft;
 26 | 
 27 | 		// Offsets measured against the page cannot go negative, nor exceed the max scroll offset
 28 | 		// @note: Values below only used for absolute positioning
 29 | 		pageTop = clamp(pageTop, 0, document.body.offsetHeight - height);
 30 | 		pageLeft = clamp(pageLeft, 0, document.body.offsetWidth - width);
 31 | 
 32 | 		// Offsets measured against the Layout Viewport cannot go negative, nor exceed the max offset within the Layout Viewport
 33 | 		// @note: Values below only used for fixed positioning
 34 | 		const layoutViewportHeight = window.innerHeight * scale; // @TODO: This only is true when window.innerHeight resizes. Which is not always the case when pinch-zooming (or which happens too late as UA UI shows/hides)
 35 | 		const layoutViewportWidth = window.innerWidth * scale; // @TODO: This only is true when window.innerHeight resizes. Which is not always the case when pinch-zooming (or which happens too late as UA UI shows/hides)
 36 | 		offsetTop = clamp(offsetTop, 0, layoutViewportHeight - height);
 37 | 		offsetLeft = clamp(offsetLeft, 0, layoutViewportWidth - width);
 38 | 	}
 39 | 
 40 | 	// Adjust values by resizing height/width
 41 | 	// Only needed for browsers that expose overscrolling through scrollX/scrollY
 42 | 	if (resizeDimensions) {
 43 | 		widthOrig = width;
 44 | 		heightOrig = height;
 45 | 		pageTopOrig = pageTop;
 46 | 		pageLeftOrig = pageLeft;
 47 | 		offsetTopOrig = offsetTop;
 48 | 		offsetLeftOrig = offsetLeft;
 49 | 
 50 | 		// Mobile Safari: Fixed Viewport does overscroll. Max value can overshoot 0 (inverse of overScrollY) and min value can exceed inverted max scroll distance
 51 | 		// Desktop Safari: Fixed Viewport does not overscroll. Max value is 0, Min value is inverted max scroll distance.
 52 | 		// We need a way to distinguish between both, because they need a different fix
 53 | 		// @TODO: No longer rely on UA sniffing here, and find a way to detect wether the Fixed Viewport can overscroll or not …
 54 | 		const isMobileSafari = !!window.navigator.userAgent.match(/iPad/i) || !!window.navigator.userAgent.match(/iPhone/i);
 55 | 		const isDesktopSafari = !isMobileSafari;
 56 | 
 57 | 		// Overscrolling at the right edge
 58 | 		if (width + pageLeft > document.body.offsetWidth) {
 59 | 			width = document.body.offsetWidth - pageLeft;
 60 | 
 61 | 			// @note: Value below only used for fixed positioning
 62 | 			if (isMobileSafari) {
 63 | 				if (scale == 1) offsetLeft -= widthOrig - width;
 64 | 				if (offsetLeft < 0) offsetLeft = -offsetLeft;
 65 | 			} else {
 66 | 				offsetLeft += widthOrig - width; // Add overscroll value to the offset
 67 | 			}
 68 | 		}
 69 | 
 70 | 		// Overscrolling at the bottom edge
 71 | 		if (height + pageTop > document.body.offsetHeight) {
 72 | 			height = document.body.offsetHeight - pageTop;
 73 | 
 74 | 			// @note: Value below only used for fixed positioning
 75 | 			if (isMobileSafari) {
 76 | 				if (scale == 1) offsetTop -= heightOrig - height;
 77 | 				if (offsetTop < 0) offsetTop = -offsetTop;
 78 | 			} else {
 79 | 				offsetTop += heightOrig - height; // Add overscroll value to the offset
 80 | 			}
 81 | 		}
 82 | 
 83 | 		// Overscrolling at the left edge
 84 | 		// @note: Might be tricky to achieve as you might trigger back navigation
 85 | 		if (pageLeft < 0) {
 86 | 			width += pageLeft;
 87 | 
 88 | 			// @note: Value below only used for abs position
 89 | 			pageLeft = 0;
 90 | 
 91 | 			// @note: Value below only used for fixed positioning
 92 | 			offsetLeft = Math.abs(offsetLeft);
 93 | 		}
 94 | 
 95 | 		// Overscrolling at the top edge
 96 | 		// @note: Might be tricky to achieve as you might trigger pull-to-refresh
 97 | 		if (pageTop < 0) {
 98 | 			height += pageTop;
 99 | 
100 | 			// @note: Value below only used for abs positioning
101 | 			pageTop = 0;
102 | 
103 | 			// @note: Value below only used for fixed positioning
104 | 			offsetTop = Math.abs(offsetTop);
105 | 		}
106 | 	}
107 | 
108 | 	return Object.fromEntries(
109 | 		Object.entries({
110 | 			width,
111 | 			widthOrig,
112 | 			height,
113 | 			heightOrig,
114 | 			scale,
115 | 			offsetTop,
116 | 			offsetTopOrig,
117 | 			offsetLeft,
118 | 			offsetLeftOrig,
119 | 			pageLeft,
120 | 			pageLeftOrig,
121 | 			pageTop,
122 | 			pageTopOrig,
123 | 			widthXscale: Math.round(width * scale),
124 | 			heightXscale: Math.round(height * scale),
125 | 		}).filter(([k, v]) => v !== null)
126 | 	);
127 | };
128 | export { getVisualViewPortValues };
129 | 
130 | const syncVisualViewportValuesToCustomProperties = (vvv, $el = document.documentElement) => {
131 | 	$el.style.setProperty('--vvw', `${vvv.width}px`);
132 | 	$el.style.setProperty('--vvh', `${vvv.height}px`);
133 | 	$el.style.setProperty('--vvpt', `${vvv.pageTop}px`);
134 | 	$el.style.setProperty('--vvpl', `${vvv.pageLeft}px`);
135 | 	$el.style.setProperty('--vvot', `${vvv.offsetTop}px`);
136 | 	$el.style.setProperty('--vvol', `${vvv.offsetLeft}px`);
137 | 	$el.style.setProperty('--vvz', vvv.scale);
138 | };
139 | export { syncVisualViewportValuesToCustomProperties };
140 | 
141 | const getScrollValues = () => {
142 | 	// @note: document.documentElement.scrollTop/Left = window.scrollY/scrollX = window.pageYOffset/pageXOffset
143 | 	let { scrollX, scrollY } = window;
144 | 
145 | 	// Calc overscroll
146 | 	const overScrollX = scrollX < 0 ? scrollX : Math.max(0, scrollX + window.innerWidth - document.body.offsetWidth);
147 | 	const overScrollY = scrollY < 0 ? scrollY : Math.max(0, scrollY + window.innerHeight - document.body.offsetHeight);
148 | 
149 | 	return {
150 | 		scrollX,
151 | 		scrollY,
152 | 		overScrollX,
153 | 		overScrollY,
154 | 	};
155 | };
156 | export { getScrollValues };
157 | 
158 | const getBodyValues = () => {
159 | 	let { offsetHeight, offsetWidth } = document.body;
160 | 
161 | 	return {
162 | 		offsetHeight,
163 | 		offsetWidth,
164 | 	};
165 | };
166 | export { getBodyValues };
167 | 
168 | const getLayoutViewportValues = () => {
169 | 	// @NOTE: You might think we could use window.innerHeight/innerWidth for this
170 | 	// but this is not true: when overscrolling Safari into a pull-to-refresh,
171 | 	// the window.innerHeight shrinks, but the layout viewport remains the same.
172 | 	const layoutViewport = document.querySelector('#layoutviewport');
173 | 
174 | 	if (!layoutViewport) return;
175 | 
176 | 	const { width, height } = layoutViewport.getBoundingClientRect();
177 | 
178 | 	return {
179 | 		width,
180 | 		height,
181 | 	};
182 | };
183 | export { getLayoutViewportValues };
184 | 
185 | const getICBValues = () => {
186 | 	// @NOTE: Instead of getting the values through by measuring the root element
187 | 	// (i.e `document.documentElement.getBoundingClientRect()`), we can use
188 | 	// `documentElement.clientHeight/clientWidth` which yield the correct values.
189 | 	// These values do not require the ICB to be sized as 100% x 100%.
190 | 	return {
191 | 		width: document.documentElement.clientWidth,
192 | 		height: document.documentElement.clientHeight,
193 | 	};
194 | };
195 | export { getICBValues };
196 | 
197 | const getICBValuesByMeasuringTheRootElement = () => {
198 | 	const rect = document.documentElement.getBoundingClientRect();
199 | 	return {
200 | 		width: rect.width,
201 | 		height: rect.height,
202 | 	};
203 | };
204 | export { getICBValuesByMeasuringTheRootElement };
205 | 
206 | const getWindowValues = () => {
207 | 	let { innerWidth, innerHeight, outerWidth, outerHeight } = window;
208 | 
209 | 	return {
210 | 		innerWidth,
211 | 		innerHeight,
212 | 		outerWidth,
213 | 		outerHeight,
214 | 	};
215 | };
216 | export { getWindowValues };
217 | 
218 | const getScreenValues = () => {
219 | 	let { width, height } = screen;
220 | 
221 | 	return {
222 | 		width,
223 | 		height,
224 | 	};
225 | };
226 | export { getScreenValues };
227 | 
228 | const initOptionsModal = (update) => {
229 | 	if (!document.querySelector('#btnOptions')) return;
230 | 
231 | 	// Show/Hide Modal
232 | 	document.querySelector('#btnOptions').addEventListener('click', (e) => {
233 | 		e.preventDefault();
234 | 		document.querySelector('#options').showModal();
235 | 	});
236 | 	document.querySelector('#btnOptionsClose').addEventListener('click', (e) => {
237 | 		e.preventDefault();
238 | 		document.querySelector('#options').close();
239 | 	});
240 | 
241 | 	// Update after closing the options
242 | 	document.querySelector('#options').addEventListener('close', update);
243 | };
244 | 
245 | const initFullscreenToggle = () => {
246 | 	if (!document.querySelector('#optGoFullScreen')) return;
247 | 
248 | 	// Need to put spec names first, as Chrome doesn’t fire events when webkit-prefixed
249 | 	// @see http://crbug.com/1511367
250 | 	const exitFullscreen = document.exitFullscreen || document.webkitExitFullscreen;
251 | 	const requestFullscreen = document.requestFullscreen || document.webkitRequestFullscreen;
252 | 
253 | 	let fullscreen = false;
254 | 	document.querySelector('#optGoFullScreen').addEventListener("click", function () {
255 | 		if (fullscreen) document.exitFullscreen();
256 | 		else document.documentElement.requestFullscreen();
257 | 	});
258 | 	
259 | 	document.addEventListener("fullscreenchange", (e) => {
260 | 		console.log(document.fullscreenElement);
261 | 		fullscreen = document.fullscreenElement ? true : false
262 | 		document.querySelector('#optGoFullScreen').checked = fullscreen;
263 | 		document.querySelector('#options').close(); // Workaround for fullscreen element getting drawn on top of open dialog
264 | 		document.querySelector('#options').showModal(); // Workaround for fullscreen element getting drawn on top of open dialog
265 | 	});
266 | }
267 | 
268 | const initVirtualKeyboardIntegration = () => {
269 | 	if (!document.querySelector('#optVirtualKeyboardOverlaysContent')) return;
270 | 
271 | 	if ('virtualKeyboard' in navigator) {
272 | 		navigator.virtualKeyboard.overlaysContent = document.querySelectorAll('#optVirtualKeyboardOverlaysContent:checked').length > 0;
273 | 
274 | 		navigator.virtualKeyboard.addEventListener('geometrychange', () => {
275 | 			// Values a reported by Virtual Keyboard API
276 | 			write(navigator.virtualKeyboard.boundingRect, document.querySelector('#vk-values'), 'Virtual Keyboard');
277 | 
278 | 			// Read values from the #vkdebugger
279 | 			const rect = document.querySelector('#vkdebugger').getBoundingClientRect();
280 | 			write({ width: rect.width, height: rect.height }, document.querySelector('#vkdebugger-values'), 'Virtual Keyboard Spacetaker');
281 | 		});
282 | 
283 | 		// Hook up toggle
284 | 		document.querySelector('#optVirtualKeyboardOverlaysContent').addEventListener('change', (e) => {
285 | 			navigator.virtualKeyboard.overlaysContent = e.target.checked;
286 | 		});
287 | 
288 | 		// Values on load
289 | 		const vkRect = navigator.virtualKeyboard.boundingRect;
290 | 		write({ width: vkRect.width, height: vkRect.height }, document.querySelector('#vk-values'), 'Virtual Keyboard');
291 | 
292 | 		if (document.querySelector('#vkdebugger')) {
293 | 			const rect = document.querySelector('#vkdebugger').getBoundingClientRect();
294 | 			write({ width: rect.width, height: rect.height }, document.querySelector('#vkdebugger-values'), 'Virtual Keyboard Spacetaker');
295 | 		}
296 | 	} else {
297 | 		document.querySelector('#optVirtualKeyboardOverlaysContent').disabled = 'disabled';
298 | 
299 | 		if (document.querySelector('#vk-values')) {
300 | 			write(null, document.querySelector('#vk-values'), 'Virtual Keyboard');
301 | 		}
302 | 
303 | 		if (document.querySelector('#vkdebugger')) {
304 | 			const rect = document.querySelector('#vkdebugger').getBoundingClientRect();
305 | 			write({ width: rect.width, height: rect.height }, document.querySelector('#vkdebugger-values'), 'Virtual Keyboard Spacetaker');
306 | 		}
307 | 	}
308 | };
309 | const initVisualViewportIntegration = () => {
310 | 	// Browsers that do no update scroll position on overscroll do not need this
311 | 	if (browserUpdatesScrollPositionsOnOverscroll()) return;
312 | 
313 | 	// No options included? Bail out
314 | 	if (!document.querySelectorAll('[name="vvAdjustValues"]').length) return;
315 | 
316 | 	document.querySelectorAll('[name="vvAdjustValues"]').forEach((checkbox) => {
317 | 		checkbox.disabled = 'disabled';
318 | 	});
319 | };
320 | 
321 | const init = (update, autoTick = 0) => {
322 | 	initOptionsModal(update);
323 | 	initVirtualKeyboardIntegration();
324 | 	initVisualViewportIntegration();
325 | 	initFullscreenToggle();
326 | 
327 | 	// Update on scroll/resize
328 | 	window.addEventListener('scroll', update, { passive: true });
329 | 	window.visualViewport.addEventListener('scroll', update, { passive: true });
330 | 	window.visualViewport.addEventListener('resize', update, { passive: true });
331 | 
332 | 	// Make sure we have values on load
333 | 	setTimeout(update, 100);
334 | 
335 | 	if (autoTick) {
336 | 		setInterval(update, autoTick);
337 | 	}
338 | };
339 | export { init };
340 | 


--------------------------------------------------------------------------------
/demos/src/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 | 	<meta charset="UTF-8" />
  6 | 	<title>Interop 2022 Viewport Investigation Effort Demo Pages</title>
  7 | 	<meta name="viewport" content="width=device-width, initial-scale=1" />
  8 | 	<link rel="stylesheet" href="base.css" />
  9 | 	<style>
 10 | 		body {
 11 | 			display: flex;
 12 | 		}
 13 | 
 14 | 		main {
 15 | 			max-width: 80ch;
 16 | 			width: 90%;
 17 | 			margin: 0 auto;
 18 | 			background: rgb(255 255 255 / 0.5);
 19 | 			border: 1px solid rgb(0 0 0 / 0.2);
 20 | 			padding: 1rem;
 21 | 			margin: 3rem auto;
 22 | 		}
 23 | 	</style>
 24 | 	<script type="module">
 25 | 		import * as core from './core.js';
 26 | 
 27 | 		const update = () => {
 28 | 			document.body.setAttribute('data-vv-positioning', document.querySelector('[name="vvPosition"]:checked')?.value ?? 'absolute');
 29 | 
 30 | 			const vvv = core.getVisualViewPortValues({
 31 | 				clampOffsets: true,
 32 | 			});
 33 | 			core.syncVisualViewportValuesToCustomProperties(vvv);
 34 | 		};
 35 | 
 36 | 		core.init(update);
 37 | 	</script>
 38 | </head>
 39 | 
 40 | <body translate="no" data-vv-positioning="absolute">
 41 | 	<main>
 42 | 		<h1>Interop 2022 Viewport Investigation Effort Demo Pages</h1>
 43 | 
 44 | 		<p>A collection of demos that allow you to debug and test the behavior of certain viewport and viewport-related aspects.</p>
 45 | 
 46 | 		<p>These demos are part of the <a href="https://github.com/web-platform-tests/interop-2022-viewport">Viewport Investigation Effort</a></p>
 47 | 
 48 | 		<h2>Individual Viewports and related aspects</h2>
 49 | 		<ol>
 50 | 			<li>Initial Containing Block (ICB)
 51 | 				<ul>
 52 | 					<li><a href="individual/icb/">With viewport meta tag (<code>width=device-width</code>)</a></li>
 53 | 					<li><a href="individual/icb/fixedmeta.html">With fixed viewport meta tag (<code>width=1024</code>)</a></li>
 54 | 					<li><a href="individual/icb/nometa.html">Without viewport meta tag</a></li>
 55 | 					<li><a href="individual/icb/viewport-fit.html">With <code>viewport-fit=cover</code> in the viewport meta tag</a></li>
 56 | 				</ul>
 57 | 			</li>
 58 | 			<li><a href="individual/layout-viewport/">Layout Viewport</a></li>
 59 | 			<li><a href="individual/visual-viewport/">Visual Viewport</a></li>
 60 | 			<li><a href="individual/virtual-keyboard/">Virtual Keyboard API</a></li>
 61 | 		</ol>
 62 | 
 63 | 		<h2>Viewport Units</h2>
 64 | 		<ol>
 65 | 			<li>
 66 | 				<a href="combined/viewport-units/">Viewport Units + <code>window.innerHeight</code></a><br>
 67 | 				<small><i>(Adapted from <a href="https://bokand.github.io/demo/urlbarsize.html">https://bokand.github.io/demo/urlbarsize.html</a>)</i></small>
 68 | 			</li>
 69 | 			<li>
 70 | 				<a href="https://devinrousso.com/demo/WebKit/css/viewport-units.html">Viewport Units + <code>-webkit-fill-available</code></a>
 71 | 			</li>
 72 | 		</ol>
 73 | 
 74 | 		<h2>Events / All-in-one</h2>
 75 | 
 76 | 		<ul>
 77 | 			<li><a href="combined/icb-fixed-visual/">ICB + Fixed Viewport + Visual Viewport</a></li>
 78 | 		</ul>
 79 | 
 80 | 		<h2>Scrollbar Gutter</h2>
 81 | 
 82 | 		<ul>
 83 | 			<li>
 84 | 				<code>scrollbar-gutter: stable;</code>
 85 | 				<ul>
 86 | 					<li><a href="scrollbar-gutter/short-stable/">Short Content</a></li>
 87 | 					<li><a href="scrollbar-gutter/long-stable/">Long Content</a></li>
 88 | 				</ul>
 89 | 			</li>
 90 | 			<li>
 91 | 				<code>scrollbar-gutter: stable both-edges;</code>
 92 | 				<ul>
 93 | 					<li><a href="scrollbar-gutter/short-both-edges/">Short Content</a></li>
 94 | 					<li><a href="scrollbar-gutter/long-both-edges/">Long Content</a></li>
 95 | 				</ul>
 96 | 			</li>
 97 | 		</ul>
 98 | 
 99 | 		<h2>Safe Inset Areas</h2>
100 | 		<ol>
101 | 			<li><a href="individual/safe-inset-areas/">With viewport meta tag (<code>width=device-width</code>) but no <code>viewport-fit</code></a></a></li>
102 | 			<li><a href="individual/safe-inset-areas/viewport-fit-auto.html">With <code>viewport-fit=auto</code> in the viewport meta tag</a></li>
103 | 			<li><a href="individual/safe-inset-areas/viewport-fit-cover.html">With <code>viewport-fit=cover</code> in the viewport meta tag</a></li>
104 | 			<li><a href="individual/safe-inset-areas/viewport-fit-contain.html">With <code>viewport-fit=contain</code> in the viewport meta tag</a></li>
105 | 		</ol>
106 | 
107 | 		<h2>Legend</h2>
108 | 		<ul>
109 | 			<li>Red dashed line = ICB</li>
110 | 			<li>Blue dotted line = Layout Viewport</li>
111 | 			<li>Orange slanted line = Visual Viewport</li>
112 | 		</ul>
113 | 	</main>
114 | 
115 | 	<div id="visualviewport"></div>
116 | 	<div id="layoutviewport"></div>
117 | 
118 | 	<div class="heightdebugger"></div>
119 | </body>


--------------------------------------------------------------------------------
/demos/src/individual/icb/fixedmeta.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 | 	<meta charset="UTF-8" />
 6 | 	<title>ICB Debugger (fixed meta tag) – Interop 2022 Viewport Investigation Effort Demo Pages</title>
 7 | 	<meta name="viewport" content="width=1024, initial-scale=1" />
 8 | 	<link rel="stylesheet" href="../../base.css" />
 9 | 
10 | 	<script type="module">
11 | 		import * as core from '../../core.js';
12 | 
13 | 		const update = () => {
14 | 			document.body.setAttribute('data-vv-positioning', document.querySelector('[name="vvPosition"]:checked')?.value ?? 'absolute');
15 | 
16 | 			const vvv = core.getVisualViewPortValues({
17 | 				clampOffsets: true,
18 | 			});
19 | 			core.syncVisualViewportValuesToCustomProperties(vvv);
20 | 
21 | 			const icbv = core.getICBValues();
22 | 			core.write(icbv, document.querySelector("#icb-values"), 'icb (document.documentElement)');
23 | 
24 | 			const wv = core.getWindowValues();
25 | 			core.write(wv, document.querySelector("#window-values"), 'window');
26 | 		};
27 | 
28 | 		core.init(update);
29 | 	</script>
30 | </head>
31 | 
32 | <body translate="no">
33 | 	<div id="inputwrapper"><input type="text" /></div>
34 | 
35 | 	<div id="debug">
36 | 		<h1>ICB Debugger <em>(fixed meta)</em></h1>
37 | 		<div id="icb-values"></div>
38 | 		<div id="window-values"></div>
39 | 	</div>
40 | 
41 | 	<div class="heightdebugger"></div>
42 | 
43 | 	<button id="btnOptions">options</button>
44 | 	<dialog id="options">
45 | 		<header>
46 | 			<button id="btnOptionsClose">close</button>
47 | 			<h1>Options</h1>
48 | 		</header>
49 | 		<section>
50 | 			<h3>Virtual Keyboard</h3>
51 | 			<div class="option"><input type="checkbox" id="optVirtualKeyboardOverlaysContent" name="optVirtualKeyboardOverlaysContent" /><label for="optVirtualKeyboardOverlaysContent">Virtual Keyboard Overlays Content</label></div>
52 | 		</section>
53 | 		<section>
54 | 			<h3>Fullscreen</h3>
55 | 			<div class="option"><input type="checkbox" id="optGoFullScreen" name="optGoFullScreen" /><label for="optGoFullScreen">Fullscreen</label></div>
56 | 		</section>
57 | 	</dialog>
58 | </body>
59 | 
60 | </html>


--------------------------------------------------------------------------------
/demos/src/individual/icb/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 | 	<meta charset="UTF-8" />
 6 | 	<title>ICB Debugger – Interop 2022 Viewport Investigation Effort Demo Pages</title>
 7 | 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 8 | 	<link rel="stylesheet" href="../../base.css" />
 9 | 
10 | 	<script type="module">
11 | 		import * as core from '../../core.js';
12 | 
13 | 		const update = () => {
14 | 			document.body.setAttribute('data-vv-positioning', document.querySelector('[name="vvPosition"]:checked')?.value ?? 'absolute');
15 | 
16 | 			const vvv = core.getVisualViewPortValues({
17 | 				clampOffsets: true,
18 | 			});
19 | 			core.syncVisualViewportValuesToCustomProperties(vvv);
20 | 
21 | 			const icbv = core.getICBValues();
22 | 			core.write(icbv, document.querySelector("#icb-values"), 'icb (document.documentElement)');
23 | 
24 | 			const wv = core.getWindowValues();
25 | 			core.write(wv, document.querySelector("#window-values"), 'window');
26 | 		};
27 | 
28 | 		core.init(update);
29 | 	</script>
30 | </head>
31 | 
32 | <body translate="no">
33 | 	<div id="inputwrapper"><input type="text" /></div>
34 | 
35 | 	<div id="debug">
36 | 		<h1>ICB Debugger</h1>
37 | 		<div id="icb-values"></div>
38 | 		<div id="window-values"></div>
39 | 	</div>
40 | 
41 | 	<div class="heightdebugger"></div>
42 | 
43 | 	<button id="btnOptions">options</button>
44 | 	<dialog id="options">
45 | 		<header>
46 | 			<button id="btnOptionsClose">close</button>
47 | 			<h1>Options</h1>
48 | 		</header>
49 | 		<section>
50 | 			<h3>Virtual Keyboard</h3>
51 | 			<div class="option"><input type="checkbox" id="optVirtualKeyboardOverlaysContent" name="optVirtualKeyboardOverlaysContent" /><label for="optVirtualKeyboardOverlaysContent">Virtual Keyboard Overlays Content</label></div>
52 | 		</section>
53 | 		<section>
54 | 			<h3>Fullscreen</h3>
55 | 			<div class="option"><input type="checkbox" id="optGoFullScreen" name="optGoFullScreen" /><label for="optGoFullScreen">Fullscreen</label></div>
56 | 		</section>
57 | 	</dialog>
58 | </body>
59 | 
60 | </html>


--------------------------------------------------------------------------------
/demos/src/individual/icb/nometa.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 | 	<meta charset="UTF-8" />
 6 | 	<title>ICB Debugger (no meta tag) – Interop 2022 Viewport Investigation Effort Demo Pages</title>
 7 | 	<link rel="stylesheet" href="../../base.css" />
 8 | 
 9 | 	<script type="module">
10 | 		import * as core from '../../core.js';
11 | 
12 | 		const update = () => {
13 | 			document.body.setAttribute('data-vv-positioning', document.querySelector('[name="vvPosition"]:checked')?.value ?? 'absolute');
14 | 
15 | 			const vvv = core.getVisualViewPortValues({
16 | 				clampOffsets: true,
17 | 			});
18 | 			core.syncVisualViewportValuesToCustomProperties(vvv);
19 | 
20 | 			const icbv = core.getICBValues();
21 | 			core.write(icbv, document.querySelector("#icb-values"), 'icb (document.documentElement)');
22 | 
23 | 			const wv = core.getWindowValues();
24 | 			core.write(wv, document.querySelector("#window-values"), 'window');
25 | 		};
26 | 
27 | 		core.init(update);
28 | 	</script>
29 | </head>
30 | 
31 | <body translate="no">
32 | 	<div id="inputwrapper"><input type="text" /></div>
33 | 
34 | 	<div id="debug">
35 | 		<h1>ICB Debugger <em>(no meta)</em></h1>
36 | 		<div id="icb-values"></div>
37 | 		<div id="window-values"></div>
38 | 	</div>
39 | 
40 | 	<div class="heightdebugger"></div>
41 | 
42 | 	<button id="btnOptions">options</button>
43 | 	<dialog id="options">
44 | 		<header>
45 | 			<button id="btnOptionsClose">close</button>
46 | 			<h1>Options</h1>
47 | 		</header>
48 | 		<section>
49 | 			<h3>Virtual Keyboard</h3>
50 | 			<div class="option"><input type="checkbox" id="optVirtualKeyboardOverlaysContent" name="optVirtualKeyboardOverlaysContent" /><label for="optVirtualKeyboardOverlaysContent">Virtual Keyboard Overlays Content</label></div>
51 | 		</section>
52 | 		<section>
53 | 			<h3>Fullscreen</h3>
54 | 			<div class="option"><input type="checkbox" id="optGoFullScreen" name="optGoFullScreen" /><label for="optGoFullScreen">Fullscreen</label></div>
55 | 		</section>
56 | 	</dialog>
57 | </body>
58 | 
59 | </html>


--------------------------------------------------------------------------------
/demos/src/individual/icb/viewport-fit.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 | 	<meta charset="UTF-8" />
 6 | 	<title>ICB Debugger (viewport-fit) – Interop 2022 Viewport Investigation Effort Demo Pages</title>
 7 | 	<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
 8 | 	<link rel="stylesheet" href="../../base.css" />
 9 | 
10 | 	<script type="module">
11 | 		import * as core from '../../core.js';
12 | 
13 | 		const update = () => {
14 | 			document.body.setAttribute('data-vv-positioning', document.querySelector('[name="vvPosition"]:checked')?.value ?? 'absolute');
15 | 
16 | 			const vvv = core.getVisualViewPortValues({
17 | 				clampOffsets: true,
18 | 			});
19 | 			core.syncVisualViewportValuesToCustomProperties(vvv);
20 | 
21 | 			const icbv = core.getICBValues();
22 | 			core.write(icbv, document.querySelector("#icb-values"), 'icb (document.documentElement)');
23 | 
24 | 			const wv = core.getWindowValues();
25 | 			core.write(wv, document.querySelector("#window-values"), 'window');
26 | 		};
27 | 
28 | 		core.init(update);
29 | 	</script>
30 | </head>
31 | 
32 | <body translate="no">
33 | 	<div id="inputwrapper"><input type="text" /></div>
34 | 
35 | 	<div id="debug">
36 | 		<h1>ICB Debugger</h1>
37 | 		<div id="icb-values"></div>
38 | 		<div id="window-values"></div>
39 | 	</div>
40 | 
41 | 	<div class="heightdebugger"></div>
42 | 
43 | 	<button id="btnOptions">options</button>
44 | 	<dialog id="options">
45 | 		<header>
46 | 			<button id="btnOptionsClose">close</button>
47 | 			<h1>Options</h1>
48 | 		</header>
49 | 		<section>
50 | 			<h3>Virtual Keyboard</h3>
51 | 			<div class="option"><input type="checkbox" id="optVirtualKeyboardOverlaysContent" name="optVirtualKeyboardOverlaysContent" /><label for="optVirtualKeyboardOverlaysContent">Virtual Keyboard Overlays Content</label></div>
52 | 		</section>
53 | 		<section>
54 | 			<h3>Fullscreen</h3>
55 | 			<div class="option"><input type="checkbox" id="optGoFullScreen" name="optGoFullScreen" /><label for="optGoFullScreen">Fullscreen</label></div>
56 | 		</section>
57 | 	</dialog>
58 | </body>
59 | 
60 | </html>


--------------------------------------------------------------------------------
/demos/src/individual/layout-viewport/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 | 	<meta charset="UTF-8" />
 6 | 	<title>Layout Viewport Debugger – Interop 2022 Viewport Investigation Effort Demo Pages</title>
 7 | 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 8 | 	<link rel="stylesheet" href="../../base.css" />
 9 | 
10 | 	<script type="module">
11 | 		import * as core from '../../core.js';
12 | 
13 | 		const update = () => {
14 | 			document.body.setAttribute('data-vv-positioning', document.querySelector('[name="vvPosition"]:checked')?.value ?? 'absolute');
15 | 
16 | 			const vvv = core.getVisualViewPortValues({
17 | 				clampOffsets: true,
18 | 			});
19 | 			core.syncVisualViewportValuesToCustomProperties(vvv);
20 | 
21 | 			const icbv = core.getICBValues();
22 | 			core.write(icbv, document.querySelector("#icb-values"), 'icb');
23 | 
24 | 			const wv = core.getWindowValues();
25 | 			core.write(wv, document.querySelector("#window-values"), 'window');
26 | 
27 | 			const lv = core.getLayoutViewportValues();
28 | 			core.write(lv, document.querySelector("#lv-values"), 'layout viewport');
29 | 
30 | 			const sv = core.getScreenValues();
31 | 			core.write(sv, document.querySelector("#screen-values"), 'screen');
32 | 		};
33 | 
34 | 		core.init(update);
35 | 	</script>
36 | </head>
37 | 
38 | <body translate="no">
39 | 	<div id="inputwrapper"><input type="text" /></div>
40 | 
41 | 	<div id="debug">
42 | 		<h1>Layout Viewport Debugger</h1>
43 | 		<div id="window-values"></div>
44 | 		<div id="lv-values"></div>
45 | 		<div id="icb-values"></div>
46 | 		<div id="screen-values"></div>
47 | 	</div>
48 | 
49 | 	<div id="layoutviewport"></div>
50 | 	<div class="heightdebugger"></div>
51 | 
52 | 	<button id="btnOptions">options</button>
53 | 	<dialog id="options">
54 | 		<header>
55 | 			<button id="btnOptionsClose">close</button>
56 | 			<h1>Options</h1>
57 | 		</header>
58 | 		<section>
59 | 			<h3>Virtual Keyboard</h3>
60 | 			<div class="option"><input type="checkbox" id="optVirtualKeyboardOverlaysContent" name="optVirtualKeyboardOverlaysContent" /><label for="optVirtualKeyboardOverlaysContent">Virtual Keyboard Overlays Content</label></div>
61 | 		</section>
62 | 		<section>
63 | 			<h3>Fullscreen</h3>
64 | 			<div class="option"><input type="checkbox" id="optGoFullScreen" name="optGoFullScreen" /><label for="optGoFullScreen">Fullscreen</label></div>
65 | 		</section>
66 | 	</dialog>
67 | </body>
68 | 
69 | </html>


--------------------------------------------------------------------------------
/demos/src/individual/pwa/contain.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 | 	<meta charset="UTF-8" />
  6 | 	<title>Fullscreen PWA – Interop 2022 Viewport Investigation Effort Demo Pages</title>
  7 | 
  8 | 	<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=contain" />
  9 | 
 10 |   <link rel="manifest" href="manifest-contain.json" />
 11 |   <meta name="mobile-web-app-capable" content="yes">
 12 |   <meta name="apple-mobile-web-app-capable" content="yes">
 13 |   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 14 | 
 15 | 	<link rel="stylesheet" href="../../base.css" />
 16 | 
 17 | 	<script type="module">
 18 | 		import * as core from '../../core.js';
 19 | 
 20 | 		const update = () => {
 21 | 			document.body.setAttribute('data-vv-positioning', document.querySelector('[name="vvPosition"]:checked')?.value ?? 'absolute');
 22 | 
 23 | 			const vvv = core.getVisualViewPortValues({
 24 | 				clampOffsets: true,
 25 | 			});
 26 | 			core.syncVisualViewportValuesToCustomProperties(vvv);
 27 | 
 28 | 			const icbv = core.getICBValues();
 29 | 			core.write(icbv, document.querySelector("#icb-values"), 'icb (document.documentElement)');
 30 | 
 31 | 			const wv = core.getWindowValues();
 32 | 			core.write(wv, document.querySelector("#window-values"), 'window');
 33 | 		};
 34 | 
 35 | 		core.init(update);
 36 | 	</script>
 37 | 	<style>
 38 | 		#fixer {
 39 | 			position: fixed;
 40 | 			pointer-events: none;
 41 | 			background-color: rgb(0 255 0 / 0.2);
 42 | 			top: env(safe-area-inset-top, 0);
 43 | 			right: env(safe-area-inset-right, 0);
 44 | 			bottom: env(safe-area-inset-bottom, 0);
 45 | 			left: env(safe-area-inset-left, 0);
 46 | 		}
 47 | 
 48 | 		#fixer0 {
 49 | 			position: fixed;
 50 | 			pointer-events: none;
 51 | 			background-color: rgb(0 0 255 / 0.2);
 52 | 			inset: 0;
 53 | 		}
 54 | 
 55 | 		#bottom, #top {
 56 | 			position: fixed;
 57 | 			height: 5px;
 58 | 			pointer-events: none;
 59 | 			background: lime;
 60 | 			z-index: 1;
 61 | 			width: 75vw;
 62 | 			left: 12.5vw;
 63 | 		}
 64 | 		#bottom {
 65 | 			bottom: 0;
 66 | 		}
 67 | 		#top {
 68 | 			top: 0
 69 | 		}
 70 | 
 71 | 	#left, #right {
 72 | 		position: fixed;
 73 | 		width: 5px;
 74 | 		pointer-events: none;
 75 | 		background: hotpink;
 76 | 		z-index: 1;
 77 | 		height: 75vh;
 78 | 		top: 12.5vh;
 79 | 	}
 80 | 	#left {
 81 | 		left: 0;
 82 | 	}
 83 | 	#right {
 84 | 		right: 0
 85 | 	}
 86 | 	</style>
 87 | </head>
 88 | 
 89 | <body translate="no">
 90 | 	<div id="inputwrapper"><input type="text" /></div>
 91 | 
 92 | 	<div id="debug">
 93 | 		<h1>PWA <code>fullscreen</code> + <code>viewport-fit=contain</code> + <code>mobile-web-app-capable</code></h1>
 94 | 		<div id="icb-values"></div>
 95 | 		<div id="window-values"></div>
 96 | 	</div>
 97 | 
 98 | 	<div class="heightdebugger"></div>
 99 | 
100 | 	<div id="fixer"></div>
101 | 	<div id="fixer0"></div>
102 | 
103 | 	<div id="top"></div>
104 | 	<div id="bottom"></div>
105 | 	<div id="left"></div>
106 | 	<div id="right"></div>
107 | 
108 | 	<button id="btnOptions">options</button>
109 | 	<dialog id="options">
110 | 		<header>
111 | 			<button id="btnOptionsClose">close</button>
112 | 			<h1>Options</h1>
113 | 		</header>
114 | 		<section>
115 | 			<h3>Virtual Keyboard</h3>
116 | 			<div class="option"><input type="checkbox" id="optVirtualKeyboardOverlaysContent" name="optVirtualKeyboardOverlaysContent" /><label for="optVirtualKeyboardOverlaysContent">Virtual Keyboard Overlays Content</label></div>
117 | 		</section>
118 | 		<section>
119 | 			<h3>Fullscreen</h3>
120 | 			<div class="option"><input type="checkbox" id="optGoFullScreen" name="optGoFullScreen" /><label for="optGoFullScreen">Fullscreen</label></div>
121 | 		</section>
122 | 	</dialog>
123 | </body>
124 | 
125 | </html>


--------------------------------------------------------------------------------
/demos/src/individual/pwa/cover.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 | 	<meta charset="UTF-8" />
  6 | 	<title>Fullscreen PWA – Interop 2022 Viewport Investigation Effort Demo Pages</title>
  7 | 
  8 | 	<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
  9 | 
 10 |   <link rel="manifest" href="manifest-cover.json" />
 11 |   <meta name="mobile-web-app-capable" content="yes">
 12 |   <meta name="apple-mobile-web-app-capable" content="yes">
 13 |   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 14 | 
 15 | 	<link rel="stylesheet" href="../../base.css" />
 16 | 
 17 | 	<script type="module">
 18 | 		import * as core from '../../core.js';
 19 | 
 20 | 		const update = () => {
 21 | 			document.body.setAttribute('data-vv-positioning', document.querySelector('[name="vvPosition"]:checked')?.value ?? 'absolute');
 22 | 
 23 | 			const vvv = core.getVisualViewPortValues({
 24 | 				clampOffsets: true,
 25 | 			});
 26 | 			core.syncVisualViewportValuesToCustomProperties(vvv);
 27 | 
 28 | 			const icbv = core.getICBValues();
 29 | 			core.write(icbv, document.querySelector("#icb-values"), 'icb (document.documentElement)');
 30 | 
 31 | 			const wv = core.getWindowValues();
 32 | 			core.write(wv, document.querySelector("#window-values"), 'window');
 33 | 		};
 34 | 
 35 | 		core.init(update);
 36 | 	</script>
 37 | 	<style>
 38 | 		#fixer {
 39 | 			position: fixed;
 40 | 			pointer-events: none;
 41 | 			background-color: rgb(0 255 0 / 0.2);
 42 | 			top: env(safe-area-inset-top, 0);
 43 | 			right: env(safe-area-inset-right, 0);
 44 | 			bottom: env(safe-area-inset-bottom, 0);
 45 | 			left: env(safe-area-inset-left, 0);
 46 | 		}
 47 | 
 48 | 		#fixer0 {
 49 | 			position: fixed;
 50 | 			pointer-events: none;
 51 | 			background-color: rgb(0 0 255 / 0.2);
 52 | 			inset: 0;
 53 | 		}
 54 | 
 55 | 		#bottom, #top {
 56 | 			position: fixed;
 57 | 			height: 5px;
 58 | 			pointer-events: none;
 59 | 			background: lime;
 60 | 			z-index: 1;
 61 | 			width: 75vw;
 62 | 			left: 12.5vw;
 63 | 		}
 64 | 		#bottom {
 65 | 			bottom: 0;
 66 | 		}
 67 | 		#top {
 68 | 			top: 0
 69 | 		}
 70 | 
 71 | 	#left, #right {
 72 | 		position: fixed;
 73 | 		width: 5px;
 74 | 		pointer-events: none;
 75 | 		background: hotpink;
 76 | 		z-index: 1;
 77 | 		height: 75vh;
 78 | 		top: 12.5vh;
 79 | 	}
 80 | 	#left {
 81 | 		left: 0;
 82 | 	}
 83 | 	#right {
 84 | 		right: 0
 85 | 	}
 86 | 	</style>
 87 | </head>
 88 | 
 89 | <body translate="no">
 90 | 	<div id="inputwrapper"><input type="text" /></div>
 91 | 
 92 | 	<div id="debug">
 93 | 		<h1>PWA <code>fullscreen</code> + <code>viewport-fit=cover</code> + <code>mobile-web-app-capable</code></h1>
 94 | 		<div id="icb-values"></div>
 95 | 		<div id="window-values"></div>
 96 | 	</div>
 97 | 
 98 | 	<div class="heightdebugger"></div>
 99 | 
100 | 	<div id="fixer"></div>
101 | 	<div id="fixer0"></div>
102 | 
103 | 	<div id="top"></div>
104 | 	<div id="bottom"></div>
105 | 	<div id="left"></div>
106 | 	<div id="right"></div>
107 | 
108 | 	<button id="btnOptions">options</button>
109 | 	<dialog id="options">
110 | 		<header>
111 | 			<button id="btnOptionsClose">close</button>
112 | 			<h1>Options</h1>
113 | 		</header>
114 | 		<section>
115 | 			<h3>Virtual Keyboard</h3>
116 | 			<div class="option"><input type="checkbox" id="optVirtualKeyboardOverlaysContent" name="optVirtualKeyboardOverlaysContent" /><label for="optVirtualKeyboardOverlaysContent">Virtual Keyboard Overlays Content</label></div>
117 | 		</section>
118 | 		<section>
119 | 			<h3>Fullscreen</h3>
120 | 			<div class="option"><input type="checkbox" id="optGoFullScreen" name="optGoFullScreen" /><label for="optGoFullScreen">Fullscreen</label></div>
121 | 		</section>
122 | 	</dialog>
123 | </body>
124 | 
125 | </html>


--------------------------------------------------------------------------------
/demos/src/individual/pwa/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <title>Document</title>
 7 | </head>
 8 | <body>
 9 |   <li><a href="contain.html">PWA <code>fullscreen</code> + <code>viewport-fit=contain</code> + <code>mobile-web-app-capable</code></a></li>
10 |   <li><a href="cover.html">PWA <code>fullscreen</code> + <code>viewport-fit=cover</code> + <code>mobile-web-app-capable</code></a></li>
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/demos/src/individual/pwa/manifest-contain.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "PWA (contain)",
 3 |   "start_url": "contain.html",
 4 |   "id": "interop-2022-viewport.netlify.app/individual/pwa/contain",
 5 |   "icons": [
 6 |     {
 7 |       "src": "https://cdn.glitch.me/d0334cc3-be72-47b5-a25f-d3fbe953f5ff%2Fapple-touch-icon.png?v=1636974061118",
 8 |       "type": "image/png",
 9 |       "sizes": "257x257"
10 |     }
11 |   ],
12 |   "display": "fullscreen"
13 | }


--------------------------------------------------------------------------------
/demos/src/individual/pwa/manifest-cover.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "PWA (cover)",
 3 |   "start_url": "cover.html",
 4 |   "id": "interop-2022-viewport.netlify.app/individual/pwa/cover",
 5 |   "icons": [
 6 |     {
 7 |       "src": "https://cdn.glitch.me/d0334cc3-be72-47b5-a25f-d3fbe953f5ff%2Fapple-touch-icon.png?v=1636974061118",
 8 |       "type": "image/png",
 9 |       "sizes": "257x257"
10 |     }
11 |   ],
12 |   "display": "fullscreen"
13 | }


--------------------------------------------------------------------------------
/demos/src/individual/safe-inset-areas/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 | 	<meta charset="UTF-8" />
  6 | 	<title>Safe Inset Areas – Interop 2022 Viewport Investigation Effort Demo Pages</title>
  7 | 	<meta name="viewport" content="width=device-width, initial-scale=1" />
  8 | 	<link rel="stylesheet" href="../../base.css" />
  9 | 
 10 | 	<script type="module">
 11 | 		import * as core from '../../core.js';
 12 | 
 13 | 		const update = () => {
 14 | 			document.body.setAttribute('data-vv-positioning', document.querySelector('[name="vvPosition"]:checked')?.value ?? 'absolute');
 15 | 
 16 | 			const vvv = core.getVisualViewPortValues({
 17 | 				clampOffsets: true,
 18 | 			});
 19 | 			core.syncVisualViewportValuesToCustomProperties(vvv);
 20 | 
 21 | 			const icbv = core.getICBValues();
 22 | 			core.write(icbv, document.querySelector("#icb-values"), 'icb (document.documentElement)');
 23 | 
 24 | 			const wv = core.getWindowValues();
 25 | 			core.write(wv, document.querySelector("#window-values"), 'window');
 26 | 		};
 27 | 
 28 | 		core.init(update);
 29 | 	</script>
 30 | 	<style>
 31 | 		#fixer {
 32 | 			position: fixed;
 33 | 			pointer-events: none;
 34 | 			background-color: rgb(0 255 0 / 0.2);
 35 | 			top: env(safe-area-inset-top, 0);
 36 | 			right: env(safe-area-inset-right, 0);
 37 | 			bottom: env(safe-area-inset-bottom, 0);
 38 | 			left: env(safe-area-inset-left, 0);
 39 | 		}
 40 | 
 41 | 		#fixer0 {
 42 | 			position: fixed;
 43 | 			pointer-events: none;
 44 | 			background-color: rgb(0 0 255 / 0.2);
 45 | 			inset: 0;
 46 | 		}
 47 | 
 48 | 		#bottom, #top {
 49 | 			position: fixed;
 50 | 			height: 5px;
 51 | 			pointer-events: none;
 52 | 			background: lime;
 53 | 			z-index: 1;
 54 | 			width: 75vw;
 55 | 			left: 12.5vw;
 56 | 		}
 57 | 		#bottom {
 58 | 			bottom: 0;
 59 | 		}
 60 | 		#top {
 61 | 			top: 0
 62 | 		}
 63 | 
 64 | 		#left, #right {
 65 | 			position: fixed;
 66 | 			width: 5px;
 67 | 			pointer-events: none;
 68 | 			background: hotpink;
 69 | 			z-index: 1;
 70 | 			height: 75vh;
 71 | 			top: 12.5vh;
 72 | 		}
 73 | 		#left {
 74 | 			left: 0;
 75 | 		}
 76 | 		#right {
 77 | 			right: 0
 78 | 		}
 79 | 	</style>
 80 | </head>
 81 | 
 82 | <body translate="no">
 83 | 	<div id="inputwrapper"><input type="text" /></div>
 84 | 
 85 | 	<div id="debug">
 86 | 		<h1>No <code>viewport-fit</code></h1>
 87 | 		<div id="icb-values"></div>
 88 | 		<div id="window-values"></div>
 89 | 	</div>
 90 | 
 91 | 	<div class="heightdebugger"></div>
 92 | 
 93 |     <div id="fixer"></div>
 94 | 	<div id="fixer0"></div>
 95 | 
 96 | 	<div id="top"></div>
 97 | 	<div id="bottom"></div>
 98 | 	<div id="left"></div>
 99 | 	<div id="right"></div>
100 | 
101 | 	<button id="btnOptions">options</button>
102 | 	<dialog id="options">
103 | 		<header>
104 | 			<button id="btnOptionsClose">close</button>
105 | 			<h1>Options</h1>
106 | 		</header>
107 | 		<section>
108 | 			<h3>Virtual Keyboard</h3>
109 | 			<div class="option"><input type="checkbox" id="optVirtualKeyboardOverlaysContent" name="optVirtualKeyboardOverlaysContent" /><label for="optVirtualKeyboardOverlaysContent">Virtual Keyboard Overlays Content</label></div>
110 | 		</section>
111 | 		<section>
112 | 			<h3>Fullscreen</h3>
113 | 			<div class="option"><input type="checkbox" id="optGoFullScreen" name="optGoFullScreen" /><label for="optGoFullScreen">Fullscreen</label></div>
114 | 		</section>
115 | 	</dialog>
116 | </body>
117 | 
118 | </html>


--------------------------------------------------------------------------------
/demos/src/individual/safe-inset-areas/viewport-fit-auto.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 | 	<meta charset="UTF-8" />
  6 | 	<title>Safe Inset Areas (viewport-fit=auto) – Interop 2022 Viewport Investigation Effort Demo Pages</title>
  7 | 	<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=auto" />
  8 | 	<link rel="stylesheet" href="../../base.css" />
  9 | 
 10 | 	<script type="module">
 11 | 		import * as core from '../../core.js';
 12 | 
 13 | 		const update = () => {
 14 | 			document.body.setAttribute('data-vv-positioning', document.querySelector('[name="vvPosition"]:checked')?.value ?? 'absolute');
 15 | 
 16 | 			const vvv = core.getVisualViewPortValues({
 17 | 				clampOffsets: true,
 18 | 			});
 19 | 			core.syncVisualViewportValuesToCustomProperties(vvv);
 20 | 
 21 | 			const icbv = core.getICBValues();
 22 | 			core.write(icbv, document.querySelector("#icb-values"), 'icb (document.documentElement)');
 23 | 
 24 | 			const wv = core.getWindowValues();
 25 | 			core.write(wv, document.querySelector("#window-values"), 'window');
 26 | 		};
 27 | 
 28 | 		core.init(update);
 29 | 	</script>
 30 | 	<style>
 31 | 		#fixer {
 32 | 			position: fixed;
 33 | 			pointer-events: none;
 34 | 			background-color: rgb(0 255 0 / 0.2);
 35 | 			top: env(safe-area-inset-top, 0);
 36 | 			right: env(safe-area-inset-right, 0);
 37 | 			bottom: env(safe-area-inset-bottom, 0);
 38 | 			left: env(safe-area-inset-left, 0);
 39 | 		}
 40 | 
 41 | 		#fixer0 {
 42 | 			position: fixed;
 43 | 			pointer-events: none;
 44 | 			background-color: rgb(0 0 255 / 0.2);
 45 | 			inset: 0;
 46 | 		}
 47 | 
 48 | 		#bottom, #top {
 49 | 			position: fixed;
 50 | 			height: 5px;
 51 | 			pointer-events: none;
 52 | 			background: lime;
 53 | 			z-index: 1;
 54 | 			width: 75vw;
 55 | 			left: 12.5vw;
 56 | 		}
 57 | 		#bottom {
 58 | 			bottom: 0;
 59 | 		}
 60 | 		#top {
 61 | 			top: 0
 62 | 		}
 63 | 
 64 | 	#left, #right {
 65 | 		position: fixed;
 66 | 		width: 5px;
 67 | 		pointer-events: none;
 68 | 		background: hotpink;
 69 | 		z-index: 1;
 70 | 		height: 75vh;
 71 | 		top: 12.5vh;
 72 | 	}
 73 | 	#left {
 74 | 		left: 0;
 75 | 	}
 76 | 	#right {
 77 | 		right: 0
 78 | 	}
 79 | 	</style>
 80 | </head>
 81 | 
 82 | <body translate="no">
 83 | 	<div id="inputwrapper"><input type="text" /></div>
 84 | 
 85 | 	<div id="debug">
 86 | 		<h1><code>viewport-fit=auto</code></h1>
 87 | 		<div id="icb-values"></div>
 88 | 		<div id="window-values"></div>
 89 | 	</div>
 90 | 
 91 | 	<div class="heightdebugger"></div>
 92 | 
 93 | 	<div id="fixer"></div>
 94 | 	<div id="fixer0"></div>
 95 | 
 96 | 	<div id="top"></div>
 97 | 	<div id="bottom"></div>
 98 | 	<div id="left"></div>
 99 | 	<div id="right"></div>
100 | 
101 | 	<button id="btnOptions">options</button>
102 | 	<dialog id="options">
103 | 		<header>
104 | 			<button id="btnOptionsClose">close</button>
105 | 			<h1>Options</h1>
106 | 		</header>
107 | 		<section>
108 | 			<h3>Virtual Keyboard</h3>
109 | 			<div class="option"><input type="checkbox" id="optVirtualKeyboardOverlaysContent" name="optVirtualKeyboardOverlaysContent" /><label for="optVirtualKeyboardOverlaysContent">Virtual Keyboard Overlays Content</label></div>
110 | 		</section>
111 | 		<section>
112 | 			<h3>Fullscreen</h3>
113 | 			<div class="option"><input type="checkbox" id="optGoFullScreen" name="optGoFullScreen" /><label for="optGoFullScreen">Fullscreen</label></div>
114 | 		</section>
115 | 	</dialog>
116 | </body>
117 | 
118 | </html>


--------------------------------------------------------------------------------
/demos/src/individual/safe-inset-areas/viewport-fit-contain.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 | 	<meta charset="UTF-8" />
  6 | 	<title>Safe Inset Areas (viewport-fit=contain) – Interop 2022 Viewport Investigation Effort Demo Pages</title>
  7 | 	<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=contain" />
  8 | 	<link rel="stylesheet" href="../../base.css" />
  9 | 
 10 | 	<script type="module">
 11 | 		import * as core from '../../core.js';
 12 | 
 13 | 		const update = () => {
 14 | 			document.body.setAttribute('data-vv-positioning', document.querySelector('[name="vvPosition"]:checked')?.value ?? 'absolute');
 15 | 
 16 | 			const vvv = core.getVisualViewPortValues({
 17 | 				clampOffsets: true,
 18 | 			});
 19 | 			core.syncVisualViewportValuesToCustomProperties(vvv);
 20 | 
 21 | 			const icbv = core.getICBValues();
 22 | 			core.write(icbv, document.querySelector("#icb-values"), 'icb (document.documentElement)');
 23 | 
 24 | 			const wv = core.getWindowValues();
 25 | 			core.write(wv, document.querySelector("#window-values"), 'window');
 26 | 		};
 27 | 
 28 | 		core.init(update);
 29 | 	</script>
 30 | 	<style>
 31 | 		#fixer {
 32 | 			position: fixed;
 33 | 			pointer-events: none;
 34 | 			background-color: rgb(0 255 0 / 0.2);
 35 | 			top: env(safe-area-inset-top, 0);
 36 | 			right: env(safe-area-inset-right, 0);
 37 | 			bottom: env(safe-area-inset-bottom, 0);
 38 | 			left: env(safe-area-inset-left, 0);
 39 | 		}
 40 | 
 41 | 		#fixer0 {
 42 | 			position: fixed;
 43 | 			pointer-events: none;
 44 | 			background-color: rgb(0 0 255 / 0.2);
 45 | 			inset: 0;
 46 | 		}
 47 | 
 48 | 		#bottom, #top {
 49 | 			position: fixed;
 50 | 			height: 5px;
 51 | 			pointer-events: none;
 52 | 			background: lime;
 53 | 			z-index: 1;
 54 | 			width: 75vw;
 55 | 			left: 12.5vw;
 56 | 		}
 57 | 		#bottom {
 58 | 			bottom: 0;
 59 | 		}
 60 | 		#top {
 61 | 			top: 0
 62 | 		}
 63 | 
 64 | 	#left, #right {
 65 | 		position: fixed;
 66 | 		width: 5px;
 67 | 		pointer-events: none;
 68 | 		background: hotpink;
 69 | 		z-index: 1;
 70 | 		height: 75vh;
 71 | 		top: 12.5vh;
 72 | 	}
 73 | 	#left {
 74 | 		left: 0;
 75 | 	}
 76 | 	#right {
 77 | 		right: 0
 78 | 	}
 79 | 	</style>
 80 | </head>
 81 | 
 82 | <body translate="no">
 83 | 	<div id="inputwrapper"><input type="text" /></div>
 84 | 
 85 | 	<div id="debug">
 86 | 		<h1><code>viewport-fit=contain</code></h1>
 87 | 		<div id="icb-values"></div>
 88 | 		<div id="window-values"></div>
 89 | 	</div>
 90 | 
 91 | 	<div class="heightdebugger"></div>
 92 | 
 93 | 	<div id="fixer"></div>
 94 | 	<div id="fixer0"></div>
 95 | 
 96 | 	<div id="top"></div>
 97 | 	<div id="bottom"></div>
 98 | 	<div id="left"></div>
 99 | 	<div id="right"></div>
100 | 
101 | 	<button id="btnOptions">options</button>
102 | 	<dialog id="options">
103 | 		<header>
104 | 			<button id="btnOptionsClose">close</button>
105 | 			<h1>Options</h1>
106 | 		</header>
107 | 		<section>
108 | 			<h3>Virtual Keyboard</h3>
109 | 			<div class="option"><input type="checkbox" id="optVirtualKeyboardOverlaysContent" name="optVirtualKeyboardOverlaysContent" /><label for="optVirtualKeyboardOverlaysContent">Virtual Keyboard Overlays Content</label></div>
110 | 		</section>
111 | 		<section>
112 | 			<h3>Fullscreen</h3>
113 | 			<div class="option"><input type="checkbox" id="optGoFullScreen" name="optGoFullScreen" /><label for="optGoFullScreen">Fullscreen</label></div>
114 | 		</section>
115 | 	</dialog>
116 | </body>
117 | 
118 | </html>


--------------------------------------------------------------------------------
/demos/src/individual/safe-inset-areas/viewport-fit-cover.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 | 	<meta charset="UTF-8" />
  6 | 	<title>Safe Inset Areas (viewport-fit=cover) – Interop 2022 Viewport Investigation Effort Demo Pages</title>
  7 | 	<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
  8 | 	<link rel="stylesheet" href="../../base.css" />
  9 | 
 10 | 	<script type="module">
 11 | 		import * as core from '../../core.js';
 12 | 
 13 | 		const update = () => {
 14 | 			document.body.setAttribute('data-vv-positioning', document.querySelector('[name="vvPosition"]:checked')?.value ?? 'absolute');
 15 | 
 16 | 			const vvv = core.getVisualViewPortValues({
 17 | 				clampOffsets: true,
 18 | 			});
 19 | 			core.syncVisualViewportValuesToCustomProperties(vvv);
 20 | 
 21 | 			const icbv = core.getICBValues();
 22 | 			core.write(icbv, document.querySelector("#icb-values"), 'icb (document.documentElement)');
 23 | 
 24 | 			const wv = core.getWindowValues();
 25 | 			core.write(wv, document.querySelector("#window-values"), 'window');
 26 | 		};
 27 | 
 28 | 		core.init(update);
 29 | 	</script>
 30 | 	<style>
 31 | 		#fixer {
 32 | 			position: fixed;
 33 | 			pointer-events: none;
 34 | 			background-color: rgb(0 255 0 / 0.2);
 35 | 			top: env(safe-area-inset-top, 0);
 36 | 			right: env(safe-area-inset-right, 0);
 37 | 			bottom: env(safe-area-inset-bottom, 0);
 38 | 			left: env(safe-area-inset-left, 0);
 39 | 		}
 40 | 
 41 | 		#fixer0 {
 42 | 			position: fixed;
 43 | 			pointer-events: none;
 44 | 			background-color: rgb(0 0 255 / 0.2);
 45 | 			inset: 0;
 46 | 		}
 47 | 
 48 | 		#bottom, #top {
 49 | 			position: fixed;
 50 | 			height: 5px;
 51 | 			pointer-events: none;
 52 | 			background: lime;
 53 | 			z-index: 1;
 54 | 			width: 75vw;
 55 | 			left: 12.5vw;
 56 | 		}
 57 | 		#bottom {
 58 | 			bottom: 0;
 59 | 		}
 60 | 		#top {
 61 | 			top: 0
 62 | 		}
 63 | 
 64 | 	#left, #right {
 65 | 		position: fixed;
 66 | 		width: 5px;
 67 | 		pointer-events: none;
 68 | 		background: hotpink;
 69 | 		z-index: 1;
 70 | 		height: 75vh;
 71 | 		top: 12.5vh;
 72 | 	}
 73 | 	#left {
 74 | 		left: 0;
 75 | 	}
 76 | 	#right {
 77 | 		right: 0
 78 | 	}
 79 | 	</style>
 80 | </head>
 81 | 
 82 | <body translate="no">
 83 | 	<div id="inputwrapper"><input type="text" /></div>
 84 | 
 85 | 	<div id="debug">
 86 | 		<h1><code>viewport-fit=cover</code></h1>
 87 | 		<div id="icb-values"></div>
 88 | 		<div id="window-values"></div>
 89 | 	</div>
 90 | 
 91 | 	<div class="heightdebugger"></div>
 92 | 
 93 | 	<div id="fixer"></div>
 94 | 	<div id="fixer0"></div>
 95 | 
 96 | 	<div id="top"></div>
 97 | 	<div id="bottom"></div>
 98 | 	<div id="left"></div>
 99 | 	<div id="right"></div>
100 | 
101 | 	<button id="btnOptions">options</button>
102 | 	<dialog id="options">
103 | 		<header>
104 | 			<button id="btnOptionsClose">close</button>
105 | 			<h1>Options</h1>
106 | 		</header>
107 | 		<section>
108 | 			<h3>Virtual Keyboard</h3>
109 | 			<div class="option"><input type="checkbox" id="optVirtualKeyboardOverlaysContent" name="optVirtualKeyboardOverlaysContent" /><label for="optVirtualKeyboardOverlaysContent">Virtual Keyboard Overlays Content</label></div>
110 | 		</section>
111 | 		<section>
112 | 			<h3>Fullscreen</h3>
113 | 			<div class="option"><input type="checkbox" id="optGoFullScreen" name="optGoFullScreen" /><label for="optGoFullScreen">Fullscreen</label></div>
114 | 		</section>
115 | 	</dialog>
116 | </body>
117 | 
118 | </html>


--------------------------------------------------------------------------------
/demos/src/individual/virtual-keyboard/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 | 	<meta charset="UTF-8" />
 6 | 	<title>Virtual Keyboard Debugger – Interop 2022 Viewport Investigation Effort Demo Pages</title>
 7 | 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 8 | 	<link rel="stylesheet" href="../../base.css" />
 9 | 
10 | 	<style>
11 | 		#vkdebugger,
12 | 		#vkdebugger::before {
13 | 			box-sizing: content-box;
14 | 			position: fixed;
15 | 			bottom: 0;
16 | 			left: 0;
17 | 			right: 0;
18 | 			height: env(keyboard-inset-height, 0px);
19 | 			background: grey;
20 | 			opacity: 0.8;
21 | 		}
22 | 
23 | 		#vkdebugger::before {
24 | 			content: '';
25 | 			border-top: 1em dotted #666;
26 | 		}
27 | 	</style>
28 | 
29 | 	<script type="module">
30 | 		import * as core from '../../core.js';
31 | 
32 | 		const update = () => {
33 | 			document.body.setAttribute('data-vv-positioning', document.querySelector('[name="vvPosition"]:checked')?.value ?? 'absolute');
34 | 
35 | 			const vvv = core.getVisualViewPortValues({
36 | 				clampOffsets: document.querySelectorAll('#vvAdjustValuesByClamping:checked').length > 0,
37 | 				resizeDimensions: document.querySelectorAll('#vvAdjustValuesByResizing:checked').length > 0,
38 | 			});
39 | 			core.syncVisualViewportValuesToCustomProperties(vvv);
40 | 			core.write(vvv, document.querySelector("#vv-values"), 'Visual Viewport');
41 | 
42 | 			// @note Virtual Keyboard Code Hooks and Values via core.init
43 | 		};
44 | 
45 | 		core.init(update);
46 | 	</script>
47 | </head>
48 | 
49 | <body translate="no">
50 | 	<div id="inputwrapper"><input type="text" /></div>
51 | 
52 | 	<div id="debug">
53 | 		<h1>Virtual Keyboard API Debugger</h1>
54 | 		<div id="vk-values"></div>
55 | 		<div id="vkdebugger-values"></div>
56 | 		<div id="lv-values"></div>
57 | 		<div id="icb-values"></div>
58 | 		<div id="vv-values"></div>
59 | 		<div id="window-values"></div>
60 | 	</div>
61 | 
62 | 	<div id="vkdebugger">
63 | 		<!-- This element is sized wrt to the keyboard-inset-height. Its dimensions are measured and output as the “Spacetaker” values -->
64 | 	</div>
65 | 	<div class="heightdebugger"></div>
66 | 	<div id="visualviewport"></div>
67 | 
68 | 	<button id="btnOptions">options</button>
69 | 	<dialog id="options">
70 | 		<header>
71 | 			<button id="btnOptionsClose">close</button>
72 | 			<h1>Options</h1>
73 | 		</header>
74 | 		<section>
75 | 			<h3>Visual Viewport</h3>
76 | 			<p>Some browsers allow negative <code>scrollX</code>/<code>scrollY</code>, and allow the same for the Visual Viewport’s <code>pageTop</code>/<code>pageLeft</code>. This may conflict with positioning the Visual Viewport box, so there’s a few fixes one can apply</p>
77 | 			<div class="option"><input type="radio" id="vvAdjustValuesNo" name="vvAdjustValues" /><label for="vvAdjustValuesNo">Do not adjust values when overscrolling</label></div>
78 | 			<div class="option"><input type="radio" id="vvAdjustValuesByClamping" name="vvAdjustValues" checked /><label for="vvAdjustValuesByClamping">Clamp values between 0 and max scroll when overscrolling</label></div>
79 | 			<div class="option"><input type="radio" id="vvAdjustValuesByResizing" name="vvAdjustValues" /><label for="vvAdjustValuesByResizing">Shrink height/width when overscrolling</label></div>
80 | 			<p>Positioning method to use</p>
81 | 			<div class="option"><input type="radio" id="vvPositionAbsolute" name="vvPosition" value="absolute" checked /><label for="vvPositionAbsolute"><code>position: absolute;</code></label></div>
82 | 			<div class="option"><input type="radio" id="vvPositionFixed" name="vvPosition" value="fixed" /><label for="vvPositionFixed"><code>position: fixed;</code></label></div>
83 | 		</section>
84 | 		<section>
85 | 			<h3>Virtual Keyboard</h3>
86 | 			<div class="option"><input type="checkbox" id="optVirtualKeyboardOverlaysContent" name="optVirtualKeyboardOverlaysContent" /><label for="optVirtualKeyboardOverlaysContent">Virtual Keyboard Overlays Content</label></div>
87 | 		</section>
88 | 		<section>
89 | 			<h3>Fullscreen</h3>
90 | 			<div class="option"><input type="checkbox" id="optGoFullScreen" name="optGoFullScreen" /><label for="optGoFullScreen">Fullscreen</label></div>
91 | 		</section>
92 | 	</dialog>
93 | </body>
94 | 
95 | </html>


--------------------------------------------------------------------------------
/demos/src/individual/visual-viewport/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 | 	<meta charset="UTF-8" />
 6 | 	<title>Visual Viewport Debugger – Interop 2022 Viewport Investigation Effort Demo Pages</title>
 7 | 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 8 | 	<link rel="stylesheet" href="../../base.css" />
 9 | 
10 | 	<script type="module">
11 | 		import * as core from '../../core.js';
12 | 
13 | 		const update = () => {
14 | 			document.body.setAttribute('data-vv-positioning', document.querySelector('[name="vvPosition"]:checked').value);
15 | 
16 | 			const vvv = core.getVisualViewPortValues({
17 | 				clampOffsets: document.querySelectorAll('#vvAdjustValuesByClamping:checked').length > 0,
18 | 				resizeDimensions: document.querySelectorAll('#vvAdjustValuesByResizing:checked').length > 0,
19 | 			});
20 | 			core.syncVisualViewportValuesToCustomProperties(vvv);
21 | 			core.write(vvv, document.querySelector("#vv-values"), 'Visual Viewport');
22 | 
23 | 			const sv = core.getScrollValues();
24 | 			core.write(sv, document.querySelector("#s-values"), 'Scroll');
25 | 
26 | 			const wv = core.getWindowValues();
27 | 			core.write(wv, document.querySelector("#window-values"), 'window');
28 | 		};
29 | 
30 | 		core.init(update);
31 | 	</script>
32 | </head>
33 | 
34 | <body translate="no" data-vv-positioning="absolute">
35 | 	<div id="inputwrapper"><input type="text" /></div>
36 | 
37 | 	<div id="debug">
38 | 		<h1>Visual Viewport Debugger</h1>
39 | 		<div id="lv-values"></div>
40 | 		<div id="vv-values"></div>
41 | 		<div id="s-values"></div>
42 | 		<div id="b-values"></div>
43 | 		<div id="window-values"></div>
44 | 		<div id="eventlog"></div>
45 | 	</div>
46 | 
47 | 	<div id="layoutviewport"></div>
48 | 	<div id="visualviewport"></div>
49 | 	<div class="heightdebugger"></div>
50 | 
51 | 	<button id="btnOptions">options</button>
52 | 	<dialog id="options">
53 | 		<header>
54 | 			<button id="btnOptionsClose">close</button>
55 | 			<h1>Options</h1>
56 | 		</header>
57 | 		<section>
58 | 			<h3>Visual Viewport</h3>
59 | 			<p>Some browsers allow negative <code>scrollX</code>/<code>scrollY</code>, and allow the same for the Visual Viewport’s <code>pageTop</code>/<code>pageLeft</code>. This may conflict with positioning the Visual Viewport box, so there’s a few fixes one can apply</p>
60 | 			<div class="option"><input type="radio" id="vvAdjustValuesNo" name="vvAdjustValues" checked /><label for="vvAdjustValuesNo">Do not adjust values when overscrolling</label></div>
61 | 			<div class="option"><input type="radio" id="vvAdjustValuesByClamping" name="vvAdjustValues" /><label for="vvAdjustValuesByClamping">Clamp values between 0 and max scroll when overscrolling</label></div>
62 | 			<div class="option"><input type="radio" id="vvAdjustValuesByResizing" name="vvAdjustValues" /><label for="vvAdjustValuesByResizing">Shrink height/width when overscrolling</label></div>
63 | 			<p>Positioning method to use</p>
64 | 			<div class="option"><input type="radio" id="vvPositionAbsolute" name="vvPosition" value="absolute" checked /><label for="vvPositionAbsolute"><code>position: absolute;</code></label></div>
65 | 			<div class="option"><input type="radio" id="vvPositionFixed" name="vvPosition" value="fixed" /><label for="vvPositionFixed"><code>position: fixed;</code></label></div>
66 | 		</section>
67 | 		<section>
68 | 			<h3>Virtual Keyboard</h3>
69 | 			<div class="option"><input type="checkbox" id="optVirtualKeyboardOverlaysContent" name="optVirtualKeyboardOverlaysContent" /><label for="optVirtualKeyboardOverlaysContent">Virtual Keyboard Overlays Content</label></div>
70 | 		</section>
71 | 		<section>
72 | 			<h3>Fullscreen</h3>
73 | 			<div class="option"><input type="checkbox" id="optGoFullScreen" name="optGoFullScreen" /><label for="optGoFullScreen">Fullscreen</label></div>
74 | 		</section>
75 | 	</dialog>
76 | </body>
77 | 
78 | </html>


--------------------------------------------------------------------------------
/demos/src/scrollbar-gutter/long-both-edges/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 | 	<meta charset="UTF-8" />
 6 | 	<title>scrollbar-gutter: stable both-edges (long content) – Interop 2022 Viewport Investigation Effort Demo Pages</title>
 7 | 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 8 | 	<link rel="stylesheet" href="../../base.css" />
 9 | 	<link rel="stylesheet" href="../scrollbar-gutter-bars.css" />
10 | 
11 | 	<style>
12 | 		html {
13 | 			scrollbar-gutter: stable both-edges;
14 | 		}
15 | 	</style>
16 | 
17 | 	<script type="module">
18 | 		import * as core from '../../core.js';
19 | 		import * as bars from '../scrollbar-gutter-bars.js';
20 | 
21 | 		const update = () => {
22 | 
23 | 			const icbv = core.getICBValues();
24 | 			core.write(icbv, document.querySelector("#icb-values"), 'icb (document.documentElement)');
25 | 
26 | 			const icbv2 = core.getICBValuesByMeasuringTheRootElement();
27 | 			core.write(icbv2, document.querySelector("#icb2-values"), 'icb (getBoundingClientRect)');
28 | 
29 | 			const lv = core.getLayoutViewportValues();
30 | 			core.write(lv, document.querySelector("#lv-values"), 'layout viewport');
31 | 
32 | 			const wv = core.getWindowValues();
33 | 			core.write(wv, document.querySelector("#window-values"), 'window');
34 | 		};
35 | 
36 | 		core.init(update);
37 | 		bars.init(250);
38 | 	</script>
39 | </head>
40 | 
41 | <body translate="no" data-vv-positioning="absolute">
42 | 	<input type="checkbox" id="optBarsHideBars" name="optBarsHideBars" />
43 | 	<div id="inputwrapper"><input type="text" /></div>
44 | 
45 | 	<div id="debug">
46 | 		<h1><code>scrollbar-gutter: stable both-edges;</code> Debugger</h1>
47 | 		<div class="warning">
48 | 			<p>Warning: Your browser does not support <code>scrollbar-gutter</code> so this demo won’t work.</p>
49 | 		</div>
50 | 		<div id="icb-values"></div>
51 | 		<div id="icb2-values"></div>
52 | 		<div id="lv-values"></div>
53 | 		<div id="s-values"></div>
54 | 		<div id="b-values"></div>
55 | 		<div id="window-values"></div>
56 | 		<div id="eventlog"></div>
57 | 	</div>
58 | 
59 | 	<div id="layoutviewport"></div>
60 | 	<div class="heightdebugger"></div>
61 | 
62 | 	<div id="bars-absolute">
63 | 		<div class="bar" data-unit="vw" data-position="absolute" style="background-color: rgb(244, 180, 123);"><span class="text">100vw position: absolute (<span class="size">???</span>px)</span></div>
64 | 		<div class="bar" data-unit="lvw" data-position="absolute" style="background-color: rgb(227, 159, 99);"><span class="text">100lvw position: absolute (<span class="size">???</span>px)</span></div>
65 | 		<div class="bar" data-unit="svw" data-position="absolute" style="background-color: rgb(205, 139, 81);"><span class="text">100svw position: absolute (<span class="size">???</span>px)</span></div>
66 | 		<div class="bar" data-unit="dvw" data-position="absolute" style="background-color: rgb(171, 119, 73);"><span class="text">100dvw position: absolute (<span class="size">???</span>px)</span></div>
67 | 		<div class="bar" data-unit="%" data-position="absolute" style="background-color: rgb(128, 100, 77);"><span class="text">100% position: absolute (<span class="size">???</span>px)</span></div>
68 | 	</div>
69 | 
70 | 	<div id="bars-fixed">
71 | 		<div class="bar" data-unit="vw" data-position="fixed" style="background-color: rgb(123, 194, 244);"><span class="text">100vw position: fixed (<span class="size">???</span>px)</span></div>
72 | 		<div class="bar" data-unit="lvw" data-position="fixed" style="background-color: rgb(99, 174, 227);"><span class="text">100lvw position: fixed (<span class="size">???</span>px)</span></div>
73 | 		<div class="bar" data-unit="svw" data-position="fixed" style="background-color: rgb(81, 153, 205);"><span class="text">100svw position: fixed (<span class="size">???</span>px)</span></div>
74 | 		<div class="bar" data-unit="dvw" data-position="fixed" style="background-color: rgb(73, 131, 171);"><span class="text">100dvw position: fixed (<span class="size">???</span>px)</span></div>
75 | 		<div class="bar" data-unit="%" data-position="fixed" style="background-color: rgb(77, 106, 128);"><span class="text">100% position: fixed (<span class="size">???</span>px)</span></div>
76 | 	</div>
77 | 
78 | 	<button id="btnOptions">options</button>
79 | 	<dialog id="options">
80 | 		<header>
81 | 			<button id="btnOptionsClose">close</button>
82 | 			<h1>Options</h1>
83 | 		</header>
84 | 		<section>
85 | 			<h3>Bars</h3>
86 | 			<div class="option"><label for="optBarsHideBars"> Hide Bars</label></div>
87 | 		</section>
88 | 		<section>
89 | 			<h3>Virtual Keyboard</h3>
90 | 			<div class="option"><input type="checkbox" id="optVirtualKeyboardOverlaysContent" name="optVirtualKeyboardOverlaysContent" /><label for="optVirtualKeyboardOverlaysContent">Virtual Keyboard Overlays Content</label></div>
91 | 		</section>
92 | 		<section>
93 | 			<h3>Fullscreen</h3>
94 | 			<div class="option"><input type="checkbox" id="optGoFullScreen" name="optGoFullScreen" /><label for="optGoFullScreen">Fullscreen</label></div>
95 | 		</section>
96 | 	</dialog>
97 | </body>
98 | 
99 | </html>


--------------------------------------------------------------------------------
/demos/src/scrollbar-gutter/long-stable/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 | 	<meta charset="UTF-8" />
 6 | 	<title>scrollbar-gutter: stable (long content) – Interop 2022 Viewport Investigation Effort Demo Pages</title>
 7 | 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 8 | 	<link rel="stylesheet" href="../../base.css" />
 9 | 	<link rel="stylesheet" href="../scrollbar-gutter-bars.css" />
10 | 
11 | 	<style>
12 | 		html {
13 | 			scrollbar-gutter: stable;
14 | 		}
15 | 	</style>
16 | 
17 | 	<script type="module">
18 | 		import * as core from '../../core.js';
19 | 		import * as bars from '../scrollbar-gutter-bars.js';
20 | 
21 | 		const update = () => {
22 | 
23 | 			const icbv = core.getICBValues();
24 | 			core.write(icbv, document.querySelector("#icb-values"), 'icb (document.documentElement)');
25 | 
26 | 			const icbv2 = core.getICBValuesByMeasuringTheRootElement();
27 | 			core.write(icbv2, document.querySelector("#icb2-values"), 'icb (getBoundingClientRect)');
28 | 
29 | 			const lv = core.getLayoutViewportValues();
30 | 			core.write(lv, document.querySelector("#lv-values"), 'layout viewport');
31 | 
32 | 			const wv = core.getWindowValues();
33 | 			core.write(wv, document.querySelector("#window-values"), 'window');
34 | 		};
35 | 
36 | 		core.init(update);
37 | 		bars.init(250);
38 | 	</script>
39 | </head>
40 | 
41 | <body translate="no" data-vv-positioning="absolute">
42 | 	<input type="checkbox" id="optBarsHideBars" name="optBarsHideBars" />
43 | 	<div id="inputwrapper"><input type="text" /></div>
44 | 
45 | 	<div id="debug">
46 | 		<h1><code>scrollbar-gutter: stable;</code> Debugger</h1>
47 | 		<div class="warning">
48 | 			<p>Warning: Your browser does not support <code>scrollbar-gutter</code> so this demo won’t work.</p>
49 | 		</div>
50 | 		<div id="icb-values"></div>
51 | 		<div id="icb2-values"></div>
52 | 		<div id="lv-values"></div>
53 | 		<div id="s-values"></div>
54 | 		<div id="b-values"></div>
55 | 		<div id="window-values"></div>
56 | 		<div id="eventlog"></div>
57 | 	</div>
58 | 
59 | 	<div id="layoutviewport"></div>
60 | 	<div class="heightdebugger"></div>
61 | 
62 | 	<div id="bars-absolute">
63 | 		<div class="bar" data-unit="vw" data-position="absolute" style="background-color: rgb(244, 180, 123);"><span class="text">100vw position: absolute (<span class="size">???</span>px)</span></div>
64 | 		<div class="bar" data-unit="lvw" data-position="absolute" style="background-color: rgb(227, 159, 99);"><span class="text">100lvw position: absolute (<span class="size">???</span>px)</span></div>
65 | 		<div class="bar" data-unit="svw" data-position="absolute" style="background-color: rgb(205, 139, 81);"><span class="text">100svw position: absolute (<span class="size">???</span>px)</span></div>
66 | 		<div class="bar" data-unit="dvw" data-position="absolute" style="background-color: rgb(171, 119, 73);"><span class="text">100dvw position: absolute (<span class="size">???</span>px)</span></div>
67 | 		<div class="bar" data-unit="%" data-position="absolute" style="background-color: rgb(128, 100, 77);"><span class="text">100% position: absolute (<span class="size">???</span>px)</span></div>
68 | 	</div>
69 | 
70 | 	<div id="bars-fixed">
71 | 		<div class="bar" data-unit="vw" data-position="fixed" style="background-color: rgb(123, 194, 244);"><span class="text">100vw position: fixed (<span class="size">???</span>px)</span></div>
72 | 		<div class="bar" data-unit="lvw" data-position="fixed" style="background-color: rgb(99, 174, 227);"><span class="text">100lvw position: fixed (<span class="size">???</span>px)</span></div>
73 | 		<div class="bar" data-unit="svw" data-position="fixed" style="background-color: rgb(81, 153, 205);"><span class="text">100svw position: fixed (<span class="size">???</span>px)</span></div>
74 | 		<div class="bar" data-unit="dvw" data-position="fixed" style="background-color: rgb(73, 131, 171);"><span class="text">100dvw position: fixed (<span class="size">???</span>px)</span></div>
75 | 		<div class="bar" data-unit="%" data-position="fixed" style="background-color: rgb(77, 106, 128);"><span class="text">100% position: fixed (<span class="size">???</span>px)</span></div>
76 | 	</div>
77 | 
78 | 	<button id="btnOptions">options</button>
79 | 	<dialog id="options">
80 | 		<header>
81 | 			<button id="btnOptionsClose">close</button>
82 | 			<h1>Options</h1>
83 | 		</header>
84 | 		<section>
85 | 			<h3>Bars</h3>
86 | 			<div class="option"><label for="optBarsHideBars"> Hide Bars</label></div>
87 | 		</section>
88 | 		<section>
89 | 			<h3>Virtual Keyboard</h3>
90 | 			<div class="option"><input type="checkbox" id="optVirtualKeyboardOverlaysContent" name="optVirtualKeyboardOverlaysContent" /><label for="optVirtualKeyboardOverlaysContent">Virtual Keyboard Overlays Content</label></div>
91 | 		</section>
92 | 		<section>
93 | 			<h3>Fullscreen</h3>
94 | 			<div class="option"><input type="checkbox" id="optGoFullScreen" name="optGoFullScreen" /><label for="optGoFullScreen">Fullscreen</label></div>
95 | 		</section>
96 | 	</dialog>
97 | </body>
98 | 
99 | </html>


--------------------------------------------------------------------------------
/demos/src/scrollbar-gutter/scrollbar-gutter-bars.css:
--------------------------------------------------------------------------------
  1 | body {
  2 | 	--bar-gap: 0.2em;
  3 | 	--bar-height: 1.6em;
  4 | 	--bar-extra-offset: 0px;
  5 | }
  6 | 
  7 | /* We’ve got 10 bars at the top. Shift these elements down */
  8 | #debug,
  9 | #inputwrapper {
 10 | 	padding-top: calc((var(--bar-gap) + var(--bar-height)) * 10);
 11 | }
 12 | 
 13 | /* We really need sibling-count() and sibling-index(), don’t we? */
 14 | .bar:nth-child(1) {
 15 | 	--i: 1;
 16 | }
 17 | .bar:nth-child(2) {
 18 | 	--i: 2;
 19 | }
 20 | .bar:nth-child(3) {
 21 | 	--i: 3;
 22 | }
 23 | .bar:nth-child(4) {
 24 | 	--i: 4;
 25 | }
 26 | .bar:nth-child(5) {
 27 | 	--i: 5;
 28 | }
 29 | 
 30 | /* Styling of a bar. Each bar gets shifted down a little more, based on its index*/
 31 | .bar {
 32 | 	box-sizing: border-box;
 33 | 	top: calc(((var(--bar-gap) + var(--bar-height)) * (var(--i) - 1)) + var(--bar-gap) + var(--bar-extra-offset));
 34 | 	height: var(--bar-height);
 35 | 	padding: var(--bar-gap);
 36 | 	line-height: calc(var(--bar-height) - var(--bar-gap) - var(--bar-gap));
 37 | 	background: rgb(0 0 0 / 0.2);
 38 | }
 39 | .bar[data-position="absolute"] {
 40 | 	position: absolute;
 41 | }
 42 | .bar[data-position="fixed"] {
 43 | 	position: fixed;
 44 | }
 45 | .bar[data-unit="vw"] {
 46 | 	width: 100vw;
 47 | }
 48 | .bar[data-unit="lvw"] {
 49 | 	width: 100lvw;
 50 | }
 51 | .bar[data-unit="svw"] {
 52 | 	width: 100svw;
 53 | }
 54 | .bar[data-unit="dvw"] {
 55 | 	width: 100dvw;
 56 | }
 57 | .bar[data-unit="%"] {
 58 | 	width: 100%;
 59 | }
 60 | 
 61 | /* Push the fixedpos bars below the 5 abspos ones */
 62 | #bars-fixed .bar {
 63 | 	--bar-extra-offset: calc((var(--bar-gap) + var(--bar-height)) * 5);
 64 | }
 65 | 
 66 | /* Bar Options. O yeah, we need :has() but firefox don’t play nice yet */
 67 | #optBarsHideBars {
 68 | 	display: none;
 69 | }
 70 | #optBarsHideBars:checked ~ #bars-fixed,
 71 | #optBarsHideBars:checked ~ #bars-absolute {
 72 | 	display: none;
 73 | }
 74 | #optBarsHideBars:checked ~ #debug,
 75 | #optBarsHideBars:checked ~ #inputwrapper {
 76 | 	padding-top: 0;
 77 | }
 78 | [for="optBarsHideBars"] {
 79 | 	display: flex;
 80 | 	flex-direction: row;
 81 | 	align-items: center;
 82 | }
 83 | [for="optBarsHideBars"]::before {
 84 | 	font-size: 3rem;
 85 | }
 86 | #optBarsHideBars ~ #options [for="optBarsHideBars"]::before {
 87 | 	content: "☐";
 88 | }
 89 | #optBarsHideBars:checked ~ #options [for="optBarsHideBars"]::before {
 90 | 	content: "☑";
 91 | }
 92 | 
 93 | /* Show warning in browsers with no support */
 94 | .warning {
 95 | 	position: fixed;
 96 | 	bottom: 1rem;
 97 | 	left: 1rem;
 98 | 	right: 1rem;
 99 | 	padding: 1rem;
100 | 	background-color: yellow;
101 | 	border: 1px solid #333;
102 | 	margin: 0.2rem 0;
103 | }
104 | .warning :first-child {
105 | 	margin-top: 0;
106 | }
107 | .warning :last-child {
108 | 	margin-bottom: 0;
109 | }
110 | @supports (scrollbar-gutter: stable) {
111 | 	.warning {
112 | 		display: none;
113 | 	}
114 | }
115 | 


--------------------------------------------------------------------------------
/demos/src/scrollbar-gutter/scrollbar-gutter-bars.js:
--------------------------------------------------------------------------------
 1 | const updateUI = () => {
 2 | 	const $bars = document.querySelectorAll('.bar');
 3 | 	$bars.forEach(($bar) => {
 4 | 		const width = Math.round($bar.clientWidth);
 5 | 		$bar.querySelector('.size').innerText = width;
 6 | 	});
 7 | };
 8 | 
 9 | const init = (autoTick = 0) => {
10 | 	updateUI();
11 | 	window.addEventListener('resize', (e) => {
12 | 		updateUI();
13 | 	});
14 | 
15 | 	if (autoTick) {
16 | 		setInterval(updateUI, autoTick);
17 | 	}
18 | };
19 | export { init };
20 | 


--------------------------------------------------------------------------------
/demos/src/scrollbar-gutter/short-both-edges/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 | 	<meta charset="UTF-8" />
  6 | 	<title>scrollbar-gutter: stable both-edges (short content) – Interop 2022 Viewport Investigation Effort Demo Pages</title>
  7 | 	<meta name="viewport" content="width=device-width, initial-scale=1" />
  8 | 	<link rel="stylesheet" href="../../base.css" />
  9 | 	<link rel="stylesheet" href="../scrollbar-gutter-bars.css" />
 10 | 
 11 | 	<style>
 12 | 		html {
 13 | 			scrollbar-gutter: stable both-edges;
 14 | 		}
 15 | 
 16 | 		body {
 17 | 			height: 100%;
 18 | 		}
 19 | 
 20 | 		.heightdebugger {
 21 | 			background-size: 100% 100%;
 22 | 		}
 23 | 	</style>
 24 | 
 25 | 	<script type="module">
 26 | 		import * as core from '../../core.js';
 27 | 		import * as bars from '../scrollbar-gutter-bars.js';
 28 | 
 29 | 		const update = () => {
 30 | 
 31 | 			const icbv = core.getICBValues();
 32 | 			core.write(icbv, document.querySelector("#icb-values"), 'icb (document.documentElement)');
 33 | 
 34 | 			const icbv2 = core.getICBValuesByMeasuringTheRootElement();
 35 | 			core.write(icbv2, document.querySelector("#icb2-values"), 'icb (getBoundingClientRect)');
 36 | 
 37 | 			const lv = core.getLayoutViewportValues();
 38 | 			core.write(lv, document.querySelector("#lv-values"), 'layout viewport');
 39 | 
 40 | 			const wv = core.getWindowValues();
 41 | 			core.write(wv, document.querySelector("#window-values"), 'window');
 42 | 		};
 43 | 
 44 | 		core.init(update);
 45 | 		bars.init(250);
 46 | 	</script>
 47 | </head>
 48 | 
 49 | <body translate="no" data-vv-positioning="absolute">
 50 | 	<input type="checkbox" id="optBarsHideBars" name="optBarsHideBars" />
 51 | 	<div id="inputwrapper"><input type="text" /></div>
 52 | 
 53 | 	<div id="debug">
 54 | 		<h1><code>scrollbar-gutter: stable both-edges;</code> Debugger</h1>
 55 | 		<div class="warning">
 56 | 			<p>Warning: Your browser does not support <code>scrollbar-gutter</code> so this demo won’t work.</p>
 57 | 		</div>
 58 | 		<div id="icb-values"></div>
 59 | 		<div id="icb2-values"></div>
 60 | 		<div id="lv-values"></div>
 61 | 		<div id="s-values"></div>
 62 | 		<div id="b-values"></div>
 63 | 		<div id="window-values"></div>
 64 | 		<div id="eventlog"></div>
 65 | 	</div>
 66 | 
 67 | 	<div id="layoutviewport"></div>
 68 | 	<div class="heightdebugger"></div>
 69 | 
 70 | 	<div id="bars-absolute">
 71 | 		<div class="bar" data-unit="vw" data-position="absolute" style="background-color: rgb(244, 180, 123);"><span class="text">100vw position: absolute (<span class="size">???</span>px)</span></div>
 72 | 		<div class="bar" data-unit="lvw" data-position="absolute" style="background-color: rgb(227, 159, 99);"><span class="text">100lvw position: absolute (<span class="size">???</span>px)</span></div>
 73 | 		<div class="bar" data-unit="svw" data-position="absolute" style="background-color: rgb(205, 139, 81);"><span class="text">100svw position: absolute (<span class="size">???</span>px)</span></div>
 74 | 		<div class="bar" data-unit="dvw" data-position="absolute" style="background-color: rgb(171, 119, 73);"><span class="text">100dvw position: absolute (<span class="size">???</span>px)</span></div>
 75 | 		<div class="bar" data-unit="%" data-position="absolute" style="background-color: rgb(128, 100, 77);"><span class="text">100% position: absolute (<span class="size">???</span>px)</span></div>
 76 | 	</div>
 77 | 
 78 | 	<div id="bars-fixed">
 79 | 		<div class="bar" data-unit="vw" data-position="fixed" style="background-color: rgb(123, 194, 244);"><span class="text">100vw position: fixed (<span class="size">???</span>px)</span></div>
 80 | 		<div class="bar" data-unit="lvw" data-position="fixed" style="background-color: rgb(99, 174, 227);"><span class="text">100lvw position: fixed (<span class="size">???</span>px)</span></div>
 81 | 		<div class="bar" data-unit="svw" data-position="fixed" style="background-color: rgb(81, 153, 205);"><span class="text">100svw position: fixed (<span class="size">???</span>px)</span></div>
 82 | 		<div class="bar" data-unit="dvw" data-position="fixed" style="background-color: rgb(73, 131, 171);"><span class="text">100dvw position: fixed (<span class="size">???</span>px)</span></div>
 83 | 		<div class="bar" data-unit="%" data-position="fixed" style="background-color: rgb(77, 106, 128);"><span class="text">100% position: fixed (<span class="size">???</span>px)</span></div>
 84 | 	</div>
 85 | 
 86 | 	<button id="btnOptions">options</button>
 87 | 	<dialog id="options">
 88 | 		<header>
 89 | 			<button id="btnOptionsClose">close</button>
 90 | 			<h1>Options</h1>
 91 | 		</header>
 92 | 		<section>
 93 | 			<h3>Bars</h3>
 94 | 			<div class="option"><label for="optBarsHideBars"> Hide Bars</label></div>
 95 | 		</section>
 96 | 		<section>
 97 | 			<h3>Virtual Keyboard</h3>
 98 | 			<div class="option"><input type="checkbox" id="optVirtualKeyboardOverlaysContent" name="optVirtualKeyboardOverlaysContent" /><label for="optVirtualKeyboardOverlaysContent">Virtual Keyboard Overlays Content</label></div>
 99 | 		</section>
100 | 		<section>
101 | 			<h3>Fullscreen</h3>
102 | 			<div class="option"><input type="checkbox" id="optGoFullScreen" name="optGoFullScreen" /><label for="optGoFullScreen">Fullscreen</label></div>
103 | 		</section>
104 | 	</dialog>
105 | </body>
106 | 
107 | </html>


--------------------------------------------------------------------------------
/demos/src/scrollbar-gutter/short-stable/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 | 	<meta charset="UTF-8" />
  6 | 	<title>scrollbar-gutter: stable (short content) – Interop 2022 Viewport Investigation Effort Demo Pages</title>
  7 | 	<meta name="viewport" content="width=device-width, initial-scale=1" />
  8 | 	<link rel="stylesheet" href="../../base.css" />
  9 | 	<link rel="stylesheet" href="../scrollbar-gutter-bars.css" />
 10 | 
 11 | 	<style>
 12 | 		html {
 13 | 			scrollbar-gutter: stable;
 14 | 		}
 15 | 
 16 | 		body {
 17 | 			height: 100%;
 18 | 		}
 19 | 
 20 | 		.heightdebugger {
 21 | 			background-size: 100% 100%;
 22 | 		}
 23 | 	</style>
 24 | 
 25 | 	<script type="module">
 26 | 		import * as core from '../../core.js';
 27 | 		import * as bars from '../scrollbar-gutter-bars.js';
 28 | 
 29 | 		const update = () => {
 30 | 
 31 | 			const icbv = core.getICBValues();
 32 | 			core.write(icbv, document.querySelector("#icb-values"), 'icb (document.documentElement)');
 33 | 
 34 | 			const icbv2 = core.getICBValuesByMeasuringTheRootElement();
 35 | 			core.write(icbv2, document.querySelector("#icb2-values"), 'icb (getBoundingClientRect)');
 36 | 
 37 | 			const lv = core.getLayoutViewportValues();
 38 | 			core.write(lv, document.querySelector("#lv-values"), 'layout viewport');
 39 | 
 40 | 			const wv = core.getWindowValues();
 41 | 			core.write(wv, document.querySelector("#window-values"), 'window');
 42 | 		};
 43 | 
 44 | 		core.init(update);
 45 | 		bars.init(250);
 46 | 	</script>
 47 | </head>
 48 | 
 49 | <body translate="no" data-vv-positioning="absolute">
 50 | 	<input type="checkbox" id="optBarsHideBars" name="optBarsHideBars" />
 51 | 	<div id="inputwrapper"><input type="text" /></div>
 52 | 
 53 | 	<div id="debug">
 54 | 		<h1><code>scrollbar-gutter: stable;</code> Debugger</h1>
 55 | 		<div class="warning">
 56 | 			<p>Warning: Your browser does not support <code>scrollbar-gutter</code> so this demo won’t work.</p>
 57 | 		</div>
 58 | 		<div id="icb-values"></div>
 59 | 		<div id="icb2-values"></div>
 60 | 		<div id="lv-values"></div>
 61 | 		<div id="s-values"></div>
 62 | 		<div id="b-values"></div>
 63 | 		<div id="window-values"></div>
 64 | 		<div id="eventlog"></div>
 65 | 	</div>
 66 | 
 67 | 	<div id="layoutviewport"></div>
 68 | 	<div class="heightdebugger"></div>
 69 | 
 70 | 	<div id="bars-absolute">
 71 | 		<div class="bar" data-unit="vw" data-position="absolute" style="background-color: rgb(244, 180, 123);"><span class="text">100vw position: absolute (<span class="size">???</span>px)</span></div>
 72 | 		<div class="bar" data-unit="lvw" data-position="absolute" style="background-color: rgb(227, 159, 99);"><span class="text">100lvw position: absolute (<span class="size">???</span>px)</span></div>
 73 | 		<div class="bar" data-unit="svw" data-position="absolute" style="background-color: rgb(205, 139, 81);"><span class="text">100svw position: absolute (<span class="size">???</span>px)</span></div>
 74 | 		<div class="bar" data-unit="dvw" data-position="absolute" style="background-color: rgb(171, 119, 73);"><span class="text">100dvw position: absolute (<span class="size">???</span>px)</span></div>
 75 | 		<div class="bar" data-unit="%" data-position="absolute" style="background-color: rgb(128, 100, 77);"><span class="text">100% position: absolute (<span class="size">???</span>px)</span></div>
 76 | 	</div>
 77 | 
 78 | 	<div id="bars-fixed">
 79 | 		<div class="bar" data-unit="vw" data-position="fixed" style="background-color: rgb(123, 194, 244);"><span class="text">100vw position: fixed (<span class="size">???</span>px)</span></div>
 80 | 		<div class="bar" data-unit="lvw" data-position="fixed" style="background-color: rgb(99, 174, 227);"><span class="text">100lvw position: fixed (<span class="size">???</span>px)</span></div>
 81 | 		<div class="bar" data-unit="svw" data-position="fixed" style="background-color: rgb(81, 153, 205);"><span class="text">100svw position: fixed (<span class="size">???</span>px)</span></div>
 82 | 		<div class="bar" data-unit="dvw" data-position="fixed" style="background-color: rgb(73, 131, 171);"><span class="text">100dvw position: fixed (<span class="size">???</span>px)</span></div>
 83 | 		<div class="bar" data-unit="%" data-position="fixed" style="background-color: rgb(77, 106, 128);"><span class="text">100% position: fixed (<span class="size">???</span>px)</span></div>
 84 | 	</div>
 85 | 
 86 | 	<button id="btnOptions">options</button>
 87 | 	<dialog id="options">
 88 | 		<header>
 89 | 			<button id="btnOptionsClose">close</button>
 90 | 			<h1>Options</h1>
 91 | 		</header>
 92 | 		<section>
 93 | 			<h3>Bars</h3>
 94 | 			<div class="option"><label for="optBarsHideBars"> Hide Bars</label></div>
 95 | 		</section>
 96 | 		<section>
 97 | 			<h3>Virtual Keyboard</h3>
 98 | 			<div class="option"><input type="checkbox" id="optVirtualKeyboardOverlaysContent" name="optVirtualKeyboardOverlaysContent" /><label for="optVirtualKeyboardOverlaysContent">Virtual Keyboard Overlays Content</label></div>
 99 | 		</section>
100 | 		<section>
101 | 			<h3>Fullscreen</h3>
102 | 			<div class="option"><input type="checkbox" id="optGoFullScreen" name="optGoFullScreen" /><label for="optGoFullScreen">Fullscreen</label></div>
103 | 		</section>
104 | 	</dialog>
105 | </body>
106 | 
107 | </html>


--------------------------------------------------------------------------------
/explainers/README.md:
--------------------------------------------------------------------------------
 1 | # Interop 2022: Viewport: Explainers
 2 | 
 3 | A collection of explainers covering the key concepts that relate to viewports
 4 | 
 5 | - [Layout Viewport](./layout-viewport.md)
 6 | - [Initial Containing Block (ICB)](./icb.md)
 7 | - [Visual Viewport](./visual-viewport.md)
 8 | - [Virtual Keyboard](./virtual-keyboard.md)
 9 | - [Virtual Keyboard API](./virtual-keyboard-api.md)
10 | - [Viewport Units](./viewport-units.md)
11 | - [Scrolling](./scrolling.md)
12 | - [Sizing](./sizing.md)
13 | 
14 | These concepts with their visualizations are also covered in [this episode of HTTP 203](https://www.youtube.com/watch?v=xl9R8aTOW_I) _(43:34)_


--------------------------------------------------------------------------------
/explainers/icb.md:
--------------------------------------------------------------------------------
  1 | # Initial Containing Block
  2 | 
  3 | ## Definition
  4 | 
  5 | The Initial Containing Block – or ICB for short – is [defined in the CSS2 spec](https://drafts.csswg.org/css2/#containing-block-details):
  6 | 
  7 | > The position and size of an element’s box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. The containing block in which the root element[^fn1] lives is a rectangle called the initial containing block. 
  8 | [^fn1]: Root Element = the `html` element – [DOM Living Standard: The `html` element](https://html.spec.whatwg.org/multipage/semantics.html#the-html-element)
  9 | 
 10 | It takes its size from [the Layout Viewport](./layout-viewport.md) _(for continuous media)_:
 11 | 
 12 | > For continuous media, it has the dimensions of the viewport[^fn2] and is anchored at the canvas origin
 13 | 
 14 | [^fn2]: Back when CSS2 was defined, it had no notion of different viewports. When specs talk about _“the Viewport”_, they mean [the Layout Viewport](./layout-viewport.md).
 15 | 
 16 | ## Visualization
 17 | 
 18 | To visualize it, authors can use this CSS snippet:
 19 | 
 20 | ```css
 21 | html {
 22 | 	width: 100%;
 23 | 	height: 100%;
 24 | 	outline: 10px dashed red;
 25 | 	outline-offset: -10px;
 26 | }
 27 | ```
 28 | 
 29 | 👉 Try it out: [Initial Containing Block (ICB)](https://interop-2022-viewport.netlify.app/individual/icb/)
 30 | 
 31 | ## Measuring the ICB
 32 | 
 33 | To get the actual size of the ICB, authors do not need to size the root element to be `100%` and measure it that way, but can use this JS snippet:
 34 | 
 35 | ```js
 36 | document.documentElement.clientWidth;
 37 | document.documentElement.clientHeight;
 38 | ```
 39 | 
 40 | This due to [an exception in the definition of `clientWidth`/`clientWidth`](https://www.w3.org/TR/cssom-view-1/#dom-element-clientwidth)
 41 | 
 42 | > If the element is the root element and the element’s node document is not in quirks mode […] return the viewport width/height excluding the size of a rendered scroll bar (if any).
 43 | 
 44 | 💡 You might think `window.innerWidth` and `window.innerHeight` might also get you these values, but that’s not the case. Some browsers resize those values as you pinch-zoom in. The values for the `document.documentElement.clientWidth`/`.clientHeight` properties remain stable and are not affected by pinch-zooming.
 45 | 
 46 | ## Findings
 47 | 
 48 | 💡 These findings are a textual representation of the [test results table](https://goo.gle/interop-2022-viewport-testresults).
 49 | 
 50 | ### Size
 51 | 
 52 | In desktop browsers, the ICB – as specced – follows the size of the [Layout Viewport](./layout-viewport.md).
 53 | 
 54 | ![Illustration](./illustrations/icb-desktop-content-short.png)
 55 | 
 56 | In mobile browsers the ICB has the same size as the [Layout Viewport](./layout-viewport.md) after initial load which has expanded dynamic UA UI Elements. This is also known as the [Small Viewport](./viewport-units.md).
 57 | 
 58 | ![Illustration](./illustrations/icb-mobile--uaui-expanded.png)
 59 | 
 60 | There, the pixel width of the ICB is determined by the `viewport` meta tag:
 61 | 
 62 | - `<meta name="viewport" content="width=device-width">` sizes the width of the ICB in relation to the device’s width
 63 | - `<meta name="viewport" content="width=value">` sizes the width of the ICB to the given value, e.g. `2000px`
 64 | - Lack of a `<meta name="viewport">` tag makes user agents fall back to a default ICB width of `980px`.
 65 | 
 66 | ### Effect of scrolling
 67 | 
 68 | As specced, the ICB is anchored to the canvas origin on which the document is painted. As a result, the ICB slides out of view as you scroll down a page. 
 69 | 
 70 | ![Illustration](./illustrations/icb-desktop-content-long.png)
 71 | ![Illustration](./illustrations/visual-viewport-desktop.png)
 72 | 
 73 | On Mobile, the ICB remains the same size in most browsers, except for a few outliers: they resize the ICB as the UA UI gets hidden. Note that in that case, these browsers do not resize the ICB to match the size of the [Layout Viewport](./layout-viewport.md) but use an in-between value.
 74 | 
 75 | ![Illustration](./illustrations/icb-mobile--uaui-retracted.png)
 76 | 
 77 | ### Effect of scrollbars
 78 | 
 79 | When operating systems use [Classic Scrollbars](./scrolling.md#classic-scrollbars), the ICB shrinks. This is because those browsers resize the [Layout Viewport](./layout-viewport.md), upon which the ICB size is based. [Overlay Scrollbars](./scrolling.md#overlay-scrollbars) have no effect on the size of the ICB.
 80 | 
 81 | ![Illustration](./illustrations/icb-desktop-content-long--classic-scrollbar.png)
 82 | 
 83 | ### Effect of pinch-zoom
 84 | 
 85 | When pinch-zooming in the ICB does not get resized because the [Layout Viewport](./layout-viewport.md) – upon which the ICB size is based – does not resize either.
 86 | 
 87 | ![Illustration](./illustrations/visual-viewport-desktop--pinch-zoomed-in-1.png)
 88 | 
 89 | ### Effect of the Virtual Keyboard
 90 | 
 91 | See [Virtual Keyboard: Findings](./virtual-keyboard.md#findings).
 92 | 
 93 | ### Effect of Overscrolling / Bouncy Scroll
 94 | 
 95 | When [overscrolling](./scrolling.md#overscrolling-and-rubber-banding) – on platforms that support it - the ICB retains its size and bounces along with the rubber banding as it happens.
 96 | 
 97 | ### Relation to Viewport Units
 98 | 
 99 | Their name might not indicate it, but the [Viewport Units](./viewport-units.md) are sized in relation to [the ICB](./icb.md). See [Viewport Units](./viewport-units.md) for details.
100 | 
101 | ## Issues
102 | 
103 | We are tracking issues using [the label `ICB`](https://github.com/web-platform-tests/interop-2022-viewport/issues?q=is%3Aissue+label%3AICB)


--------------------------------------------------------------------------------
/explainers/illustrations/icb+layout-viewport.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/icb+layout-viewport.png


--------------------------------------------------------------------------------
/explainers/illustrations/icb-desktop-content-long--classic-scrollbar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/icb-desktop-content-long--classic-scrollbar.png


--------------------------------------------------------------------------------
/explainers/illustrations/icb-desktop-content-long.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/icb-desktop-content-long.png


--------------------------------------------------------------------------------
/explainers/illustrations/icb-desktop-content-short.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/icb-desktop-content-short.png


--------------------------------------------------------------------------------
/explainers/illustrations/icb-mobile--uaui-expanded.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/icb-mobile--uaui-expanded.png


--------------------------------------------------------------------------------
/explainers/illustrations/icb-mobile--uaui-retracted.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/icb-mobile--uaui-retracted.png


--------------------------------------------------------------------------------
/explainers/illustrations/layout-viewport-desktop-content-long--classic-scrollbar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/layout-viewport-desktop-content-long--classic-scrollbar.png


--------------------------------------------------------------------------------
/explainers/illustrations/layout-viewport-desktop-content-long--scrolled.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/layout-viewport-desktop-content-long--scrolled.png


--------------------------------------------------------------------------------
/explainers/illustrations/layout-viewport-desktop-content-long.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/layout-viewport-desktop-content-long.png


--------------------------------------------------------------------------------
/explainers/illustrations/layout-viewport-desktop-content-short.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/layout-viewport-desktop-content-short.png


--------------------------------------------------------------------------------
/explainers/illustrations/layout-viewport-desktop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/layout-viewport-desktop.png


--------------------------------------------------------------------------------
/explainers/illustrations/layout-viewport-mobile--uaui-expanded.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/layout-viewport-mobile--uaui-expanded.png


--------------------------------------------------------------------------------
/explainers/illustrations/layout-viewport-mobile--uaui-retracted.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/layout-viewport-mobile--uaui-retracted.png


--------------------------------------------------------------------------------
/explainers/illustrations/uaui-expanded.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/uaui-expanded.png


--------------------------------------------------------------------------------
/explainers/illustrations/uaui-retracted.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/uaui-retracted.png


--------------------------------------------------------------------------------
/explainers/illustrations/viewport-units-desktop-long-content--classic-scrollbar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/viewport-units-desktop-long-content--classic-scrollbar.png


--------------------------------------------------------------------------------
/explainers/illustrations/viewport-units-desktop-long-content.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/viewport-units-desktop-long-content.png


--------------------------------------------------------------------------------
/explainers/illustrations/viewport-units-desktop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/viewport-units-desktop.png


--------------------------------------------------------------------------------
/explainers/illustrations/viewport-units-mobile-dvh--mobilesafari.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/viewport-units-mobile-dvh--mobilesafari.png


--------------------------------------------------------------------------------
/explainers/illustrations/viewport-units-mobile-naming-things.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/viewport-units-mobile-naming-things.png


--------------------------------------------------------------------------------
/explainers/illustrations/viewport-units-mobile-svh+lvh--with-icb--mobilesafari.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/viewport-units-mobile-svh+lvh--with-icb--mobilesafari.png


--------------------------------------------------------------------------------
/explainers/illustrations/viewport-units-mobile-svh+lvh--with-icb--uaui-expanded.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/viewport-units-mobile-svh+lvh--with-icb--uaui-expanded.png


--------------------------------------------------------------------------------
/explainers/illustrations/viewport-units-mobile-svh+lvh--with-icb--uaui-retracted.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/viewport-units-mobile-svh+lvh--with-icb--uaui-retracted.png


--------------------------------------------------------------------------------
/explainers/illustrations/viewport-units-mobile-vh--uaui-expanded.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/viewport-units-mobile-vh--uaui-expanded.png


--------------------------------------------------------------------------------
/explainers/illustrations/viewport-units-mobile-vh--uaui-retracted.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/viewport-units-mobile-vh--uaui-retracted.png


--------------------------------------------------------------------------------
/explainers/illustrations/virtual-keyboard-api-overlayscontent.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/virtual-keyboard-api-overlayscontent.png


--------------------------------------------------------------------------------
/explainers/illustrations/virtual-keyboard-api-three-behaviors.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/virtual-keyboard-api-three-behaviors.png


--------------------------------------------------------------------------------
/explainers/illustrations/virtual-keyboard-input-focus--with-everything---offset-layout-viewport.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/virtual-keyboard-input-focus--with-everything---offset-layout-viewport.png


--------------------------------------------------------------------------------
/explainers/illustrations/virtual-keyboard-input-focus--with-everything.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/virtual-keyboard-input-focus--with-everything.png


--------------------------------------------------------------------------------
/explainers/illustrations/virtual-keyboard-input-focus--with-icb--with-viewport-units.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/virtual-keyboard-input-focus--with-icb--with-viewport-units.png


--------------------------------------------------------------------------------
/explainers/illustrations/virtual-keyboard-input-focus--with-icb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/virtual-keyboard-input-focus--with-icb.png


--------------------------------------------------------------------------------
/explainers/illustrations/virtual-keyboard-input-focus--with-layout-viewport-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/virtual-keyboard-input-focus--with-layout-viewport-1.png


--------------------------------------------------------------------------------
/explainers/illustrations/virtual-keyboard-input-focus--with-layout-viewport-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/virtual-keyboard-input-focus--with-layout-viewport-2.png


--------------------------------------------------------------------------------
/explainers/illustrations/virtual-keyboard-input-focus.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/virtual-keyboard-input-focus.png


--------------------------------------------------------------------------------
/explainers/illustrations/virtual-keyboard-input-nofocus--with-icb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/virtual-keyboard-input-nofocus--with-icb.png


--------------------------------------------------------------------------------
/explainers/illustrations/virtual-keyboard-input-nofocus--with-layout-viewport.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/virtual-keyboard-input-nofocus--with-layout-viewport.png


--------------------------------------------------------------------------------
/explainers/illustrations/virtual-keyboard-input-nofocus.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/virtual-keyboard-input-nofocus.png


--------------------------------------------------------------------------------
/explainers/illustrations/visual-viewport-desktop--pinch-zoomed-in-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/visual-viewport-desktop--pinch-zoomed-in-1.png


--------------------------------------------------------------------------------
/explainers/illustrations/visual-viewport-desktop--pinch-zoomed-in-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/visual-viewport-desktop--pinch-zoomed-in-2.png


--------------------------------------------------------------------------------
/explainers/illustrations/visual-viewport-desktop--pinch-zoomed-in-alt-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/visual-viewport-desktop--pinch-zoomed-in-alt-1.png


--------------------------------------------------------------------------------
/explainers/illustrations/visual-viewport-desktop--pinch-zoomed-in-alt-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/visual-viewport-desktop--pinch-zoomed-in-alt-2.png


--------------------------------------------------------------------------------
/explainers/illustrations/visual-viewport-desktop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/visual-viewport-desktop.png


--------------------------------------------------------------------------------
/explainers/illustrations/visual-viewport-mobile--pinch-zoomed-in.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/visual-viewport-mobile--pinch-zoomed-in.png


--------------------------------------------------------------------------------
/explainers/illustrations/visual-viewport-mobile--uaui-expanded.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/visual-viewport-mobile--uaui-expanded.png


--------------------------------------------------------------------------------
/explainers/illustrations/visual-viewport-mobile--uaui-retracted.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/illustrations/visual-viewport-mobile--uaui-retracted.png


--------------------------------------------------------------------------------
/explainers/layout-viewport.md:
--------------------------------------------------------------------------------
  1 | # The Layout Viewport
  2 | 
  3 | ## Definition
  4 | 
  5 | The Layout Viewport is [defined in the CSS2 spec](https://drafts.csswg.org/css2/#viewport):
  6 | 
  7 | > User agents for continuous media generally offer users a viewport _(a window or other viewing area on the screen)_ through which users consult a document. User agents may change the document’s layout when the viewport is resized _(see the [initial containing block](./icb.md))_.
  8 | > 
  9 | > When the viewport is smaller than the area of the canvas on which the document is rendered, the user agent should offer a scrolling mechanism.
 10 | > 
 11 | > There is at most one viewport per canvas, but user agents may render to more than one canvas (i.e., provide different views of the same document)."
 12 | 
 13 | The [definition on MDN](https://developer.mozilla.org/en-US/docs/Glossary/Layout_viewport) reads:
 14 | 
 15 | > The layout viewport is the viewport into which the browser draws a web page. Essentially, it represents what is available to be seen, while the visual viewport represents what is currently visible on the user's display device.
 16 | > 
 17 | > This becomes important, for example, on mobile devices, where a pinching gesture can usually be used to zoom in and out on a site's contents. The rendered document doesn't change in any way, so the layout viewport remains the same as the user adjusts the zoom level. Instead, the [visual viewport](./visual-viewport.md) is updated to indicate the area of the page that they can see.
 18 | 
 19 | ## Visualization
 20 | 
 21 | To visualize it, authors can inject an empty HTML element and have it positioned against the edges using `position: fixed`:
 22 | 
 23 | ```css
 24 | #layoutviewport {
 25 | 	position: fixed;
 26 | 	inset: 0;
 27 | 	outline: 5px dashed var(--blue);
 28 | 	outline-offset: -5px;
 29 | }
 30 | ```
 31 | 
 32 | 👉 Try it out: [Layout Viewport](https://interop-2022-viewport.netlify.app/individual/layout-viewport/)
 33 | 
 34 | ## Measuring the Layout Viewport
 35 | 
 36 | Using `.getBoundingClientRect()` on the injected `#layoutviewport` element, its size in pixels can be determined:
 37 | 
 38 | ```js
 39 | const {
 40 | 	width,
 41 | 	height,
 42 | } = document.querySelector("#layoutviewport").getBoundingClientRect();
 43 | ```
 44 | 
 45 | 💡 You might think [`window.innerWidth` and `window.innerHeight`](./sizing.md#windowinnerwidth-and-windowinnerheight) might also get you these values, but that’s not the case: Some browsers resize those values as you pinch-zoom in.
 46 | 
 47 | ## Relation to `position: fixed`
 48 | 
 49 | Elements that use `position: fixed`, are layed out against the Layout Viewport, as specified in the [CSS Positioned Layout Module](https://drafts.csswg.org/css-position/#valdef-position-fixed)
 50 | 
 51 | > Same as `absolute`, except the box is positioned and sized relative to a fixed positioning containing block (usually the viewport in continuous media […])
 52 | > The box’s position is fixed with respect to this reference rectangle: when attached to the viewport it does not move when the document is scrolled […].
 53 | 
 54 | ## Findings
 55 | 
 56 | 💡 These findings are a textual representation of the [test results table](https://goo.gle/interop-2022-viewport-testresults).
 57 | 
 58 | ### Size
 59 | 
 60 | The Layout Viewport is sized to area through which a user views the document. As you resize the browser, the viewport size is also affected.
 61 | 
 62 | ![Illustration](./illustrations/layout-viewport-desktop.png)
 63 | 
 64 | This is also the case on mobile where the browser can expand/contract dynamic UA UI Elements such as address bars and toolbars.
 65 | 
 66 | ![Illustration](./illustrations/layout-viewport-mobile--uaui-expanded.png)
 67 | 
 68 | ![Illustration](./illustrations/layout-viewport-mobile--uaui-retracted.png)
 69 | 
 70 | ### Effect of scrolling
 71 | 
 72 | The Layout Viewport spans the entire viewport and remains in place as you scroll down a page.
 73 | 
 74 | ![Illustration](./illustrations/layout-viewport-desktop-content-long--scrolled.png)
 75 | 
 76 | On mobile, browsers contract dynamic UA UI elements as you scroll down a page. These elements can be expanded again as you scroll up. The Layout Viewport follows the size. See visualizations above.
 77 | 
 78 | ### Effect of scrollbars
 79 | 
 80 | When operating systems use [Classic Scrollbars](./scrolling.md#classic-scrollbars), the Layout Viewport shrinks. [Overlay Scrollbars](./scrolling.md#overlay-scrollbars) have no effect on the size of the Layout Viewport.
 81 | 
 82 | ![Illustration](./illustrations/layout-viewport-desktop-content-long--classic-scrollbar.png)
 83 | 
 84 | ### Effect of pinch-zoom
 85 | 
 86 | When pinch-zooming in the Layout Viewport does not get resized. This is both the case on Desktop and on Mobile.
 87 | 
 88 | ![Illustration](./illustrations/visual-viewport-desktop--pinch-zoomed-in-1.png)
 89 | 
 90 | ### Effect of the Virtual Keyboard
 91 | 
 92 | See [Virtual Keyboard: Findings](./virtual-keyboard.md#findings).
 93 | 
 94 | ### Effect of Overscrolling / Bouncy Scroll
 95 | 
 96 | When [overscrolling](./scrolling.md#overscrolling-and-rubber-banding), some browsers move the Visual Viewport as it bounces while others do not. A [recent CSSWG Resolution](https://github.com/w3c/csswg-drafts/issues/6299#ref-commit-617c50c) explicitly disallows this behavior:
 97 | 
 98 | > If an element uses [fixed positioning](#relation-to-position-fixed) and is positioned relative to the [initial containing block](./icb.md), or is a sticky positioned element which is currently stuck to the viewport, then when the root scroller experiences "overscroll", that element must not overscroll with the rest of the document’s content; it must instead remain positioned as if the scroller was at its minimum/maximum scroll position, whichever it will return to when the overscroll is finished.
 99 | 
100 | This behavior newly specced behavior is supported by all WebKit-based browsers on iOS (Safari + Chrome + Edge + Firefox), Firefox on macOS, Chrome on macOS _(with a feature flag)_.
101 | 
102 | 👀 See [Recording of Chrome on Desktop](./videos/visual-viewport-desktop-overscroll--chrome.mp4) vs [Recording of Chrome with flag on Desktop](./videos/visual-viewport-desktop-overscroll--chrome-with-flag.mp4)
103 | 
104 | This behavior is not supported by Safari on macOS. Android devices do not support overscrolling, so this updated behavior does not affect them.
105 | ### Relation to Viewport Units
106 | 
107 | Unlike its name suggest, the [Viewport Units](./viewport-units.md) are not sized in relation to the Layout Viewport. Instead, they are sized in relation to [the ICB](./icb.md). See [Viewport Units](./viewport-units.md) for details.
108 | 
109 | ## Issues
110 | 
111 | We are tracking issues using [the label `Layout Viewport`](https://github.com/web-platform-tests/interop-2022-viewport/issues?q=is%3Aissue+label%3A%22Layout+Viewport%22)


--------------------------------------------------------------------------------
/explainers/screenshots/visual-viewport-mobile-safari-over-pinch-zoom-out-1.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/screenshots/visual-viewport-mobile-safari-over-pinch-zoom-out-1.jpeg


--------------------------------------------------------------------------------
/explainers/screenshots/visual-viewport-mobile-safari-over-pinch-zoom-out-2.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/screenshots/visual-viewport-mobile-safari-over-pinch-zoom-out-2.jpeg


--------------------------------------------------------------------------------
/explainers/scrolling.md:
--------------------------------------------------------------------------------
 1 | # Scrolling
 2 | 
 3 | ## Scrollbars
 4 | 
 5 | As [per CSS2 spec](https://drafts.csswg.org/css2/#viewport):
 6 | 
 7 | > When [the viewport](./layout-viewport.md) is smaller than the area of the canvas on which the document is rendered, the user agent should offer a scrolling mechanism.
 8 | 
 9 | This scrolling mechanism – most of the time – also comes with scrollbars. There are two types of scrollbars we can distinguish:
10 | 
11 | 1. Overlay Scrollbars
12 | 2. Classic Scrollbars
13 | 
14 | Controlling the visual styling of these scrollbars is defined in the [CSS Scrollbars Styling Module Level 1](https://w3c.github.io/csswg-drafts/css-scrollbars-1/) spec.
15 | ### Overlay Scrollbars
16 | 
17 | Overlay Scrollbars are those iOS/macOS-style scrollbars which are placed over the content. They are not shown by default, but only while the user is scrolling. To keep the content underneath visible they are semi-transparent, but that’s totally up to the user-agent (browser) to determine. While interacting with them, their size may also vary.
18 | 
19 | ![Illustration](./illustrations/icb-desktop-content-long.png)
20 | 
21 | ### Classic Scrollbars
22 | 
23 | Classic Scrollbars are scrollbars that are placed in a dedicated Scrollbar Gutter. The Scrollbar Gutter is the space between the inner Border Edge and the outer Padding Edge. These scrollbars are usually opaque (not transparent) and take away some space from the adjacent content.
24 | 
25 | ![Illustration](./illustrations/icb-desktop-content-long--classic-scrollbar.png)
26 | 
27 | ## Getting the Scroll Position
28 | 
29 | - @TODO: `window.scrollX` / `window.scrollY`
30 | - @TODO: `document.scrollLeft` / `document.scrollTop`
31 | 
32 | ## Findings
33 | 
34 | 💡 These findings are a textual representation of the [test results table](https://goo.gle/interop-2022-viewport-testresults).
35 | 
36 | ### Dynamic User-Agent UI Elements
37 | 
38 | @TODO:
39 | ### Overscrolling and Bounce Scroll
40 | 
41 | Some browsers support overscrolling the scrollport. When doing this with a swipe gestured, they might bounce back. This behavior is available on macOS, iOS _(and maybe Windows, but that is currently untested)_. Android does not support this.
42 | 
43 | Note: When overscrolling slowly at the top edge in Mobile Browsers you might trigger a pull-to-refresh. In this part we are focussing on overscrolling while not triggering pull-to-refresh.
44 | 
45 | Overscrolling is [covered in the “CSS Overscroll Behavior Module Level 1” spec](https://drafts.csswg.org/css-overscroll-1/).


--------------------------------------------------------------------------------
/explainers/sizing.md:
--------------------------------------------------------------------------------
 1 | # Sizing
 2 | 
 3 | There are various ways to try and read the size of the viewport/window.
 4 | 
 5 | ## `window.innerWidth` and `window.innerHeight`
 6 | 
 7 | ### Definition
 8 | 
 9 | `window.innerWidth` and `window.innerHeight` are defined in the [CSSOM View Module](https://drafts.csswg.org/cssom-view/#dom-window-innerwidth):
10 | 
11 | > The `innerWidth` attribute must return the viewport[^fn1] width including the size of a rendered scroll bar (if any), or zero if there is no viewport.
12 | > 
13 | > The following snippet shows how to obtain the width of the viewport:
14 | > 
15 | > ```js
16 | > var viewportWidth = innerWidth
17 | > ```
18 | > 
19 | > The `innerHeight` attribute must return the viewport[^fn1] height including the size of a rendered scroll bar (if any), or zero if there is no viewport.
20 | 
21 | [^fn1]: When specs talk about _“the Viewport”_, they mean [the Layout Viewport](./layout-viewport.md).
22 | 
23 | ### Findings
24 | 
25 | 💡 These findings are a textual representation of the [test results table](https://goo.gle/interop-2022-viewport-testresults).
26 | 
27 | In all browsers the `innerHeight` and `innerWidth` behave as defined/expected.
28 | 
29 | When pinch-zooming in, WebKit adjusts these values as you pich-zoom in on the page, taking over the `width`/`height` of the [Visual Viewport](./visual-viewport.md)
30 | 
31 | ## `window.outerWidth` and `window.outerHeight`
32 | 
33 | ### Definition
34 | 
35 | `window.outerWidth` and `window.outerHeight` are defined in the [CSSOM View Module](https://drafts.csswg.org/cssom-view/#dom-window-outerwidth):
36 | 
37 | > The `outerWidth` attribute must return the width of the client window. If there is no client window this attribute must return zero.
38 | > 
39 | > The `outerHeight` attribute must return the height of the client window. If there is no client window this attribute must return zero.
40 | 
41 | ### Findings
42 | 
43 | 💡 These findings are a textual representation of the [test results table](https://goo.gle/interop-2022-viewport-testresults).
44 | 
45 | On Desktop all is pretty straigthforward and the `outerHeight` equals the [`innerHeight`](#windowinnerwidth-and-windowinnerheight) + the size of the browser’s top and bottom bars.
46 | 
47 | On Mobile it’s a different story:
48 | 
49 | - Only Safari on iOS and Chrome on iOS see the `outerHeight` as the _(unzoomed [^fn1])_ `innerHeight` + size of the browser’s chrome. Essentially this equals the screen’s `height` here, as apps run fullscreen on such devices.
50 | - Most other mobile browsers use the values from `innerHeight` as the value for its `outerHeight`. When the UA UI Toolbars retract, both sizes get adjusted. This seems wrong.
51 | - Firefox on Android does something special where the `outerHeight` is a value somewhere in between the [Small Viewport](./viewport-units.md#the-small-viewport) _(`innerHeight` when UA UI is expanded)_ and [Large Viewport](./viewport-units.md#the-large-viewport) _(`innerHeight` when UA UI is retracted)_.
52 | 
53 | [^fn1]: “unzoomed” because `innerHeight` resizes in these browsers. See the section covering [`innerHeight`](#windowinnerwidth-and-windowinnerheight)
54 | 
55 | ## `document.documentElement.clientWidth` and `document.documentElement.clientHeight`
56 | 
57 | `document.documentElement.clientWidth` and `document.documentElement.clientHeight` can be used to measure the [ICB](./icb.md). This due to [an exception in the definition of `clientWidth`/`clientWidth`](https://www.w3.org/TR/cssom-view-1/#dom-element-clientwidth):
58 | 
59 | > If the element is the root element and the element’s node document is not in quirks mode […] return the viewport width/height excluding the size of a rendered scroll bar (if any).
60 | 
61 | ## `Element.getBoundingClientRect()`
62 | 
63 | If no other way of getting the dimensions of an element is available, [`Element.getBoundingClientRect()`](https://drafts.csswg.org/cssom-view/#dom-element-getboundingclientrect) can be used.
64 | 
65 | > The `getBoundingClientRect()` method, when invoked on an element element, must return the result of getting the bounding box for element.
66 | 
67 | Beware that calling this, causes layout _(citation needed)_


--------------------------------------------------------------------------------
/explainers/videos/visual-viewport-desktop-overscroll--chrome-with-flag.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/videos/visual-viewport-desktop-overscroll--chrome-with-flag.mp4


--------------------------------------------------------------------------------
/explainers/videos/visual-viewport-desktop-overscroll--chrome.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/videos/visual-viewport-desktop-overscroll--chrome.mp4


--------------------------------------------------------------------------------
/explainers/videos/visual-viewport-desktop-overscroll--firefox.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/videos/visual-viewport-desktop-overscroll--firefox.mp4


--------------------------------------------------------------------------------
/explainers/videos/visual-viewport-desktop-overscroll--safari--different-behaviors.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/videos/visual-viewport-desktop-overscroll--safari--different-behaviors.mp4


--------------------------------------------------------------------------------
/explainers/videos/visual-viewport-desktop-overscroll--safari.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/videos/visual-viewport-desktop-overscroll--safari.mp4


--------------------------------------------------------------------------------
/explainers/videos/visual-viewport-mobile-over-pinch-zoom-out--safari--different-behaviors.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/videos/visual-viewport-mobile-over-pinch-zoom-out--safari--different-behaviors.mp4


--------------------------------------------------------------------------------
/explainers/videos/visual-viewport-mobile-over-pinch-zoom-out--safari.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/videos/visual-viewport-mobile-over-pinch-zoom-out--safari.mp4


--------------------------------------------------------------------------------
/explainers/videos/visual-viewport-mobile-overscroll--safari--different-behaviors.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/videos/visual-viewport-mobile-overscroll--safari--different-behaviors.mp4


--------------------------------------------------------------------------------
/explainers/videos/visual-viewport-mobile-overscroll--safari.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/web-platform-tests/interop-2022-viewport/268dbc7a8e6995f5b78bc0e5fbfbf58539449c14/explainers/videos/visual-viewport-mobile-overscroll--safari.mp4


--------------------------------------------------------------------------------
/explainers/viewport-units.md:
--------------------------------------------------------------------------------
  1 | # Viewport-percentage Lengths _(aka “Viewport-relative Units”)_
  2 | 
  3 | ## Definition
  4 | 
  5 | Unlike their name suggest, Viewport Units are **not** based on the size of [the Viewport](./layout-viewport.md) but are based on the size of the [ICB](./icb.md). As per [CSS Values and Units Module Level 4 specification](https://drafts.csswg.org/css-values-4/#viewport-relative-lengths):
  6 | 
  7 | > The viewport-percentage lengths are relative to the size of the initial containing block
  8 | 
  9 | But since [the ICB takes its size from the Layout Viewport](./icb.md#definition) _(for continuous media)_, there is a connection to the Layout Viewport:
 10 | 
 11 | Layout Viewport → Initial Containing Block → Viewport-percentage lengths
 12 | 
 13 | Generally speaking, a Viewport-percentage Length is Equal to 1% of the targeted axis. Its actual pixel value change as the ICB size changes
 14 | 
 15 | > When the height or width of the initial containing block is changed, they are scaled accordingly.
 16 | 
 17 | Taking [the UA-Default Viewport](#ua-default-viewport) as an example, its linked units are:
 18 | 
 19 | - `vw` = 1% of the width of the viewport size
 20 | - `vh` = 1% of the height of the viewport size
 21 | - `vi` = 1% of the size of the viewport’s inline axis
 22 | - `vb` = 1% of the size of the viewport’s block axis
 23 | - `vmin` = the smaller of `vw` or `vh`
 24 | - `vmax` = the larger of `vw` or `vh`
 25 | 
 26 | ## Visualization
 27 | 
 28 | To visualize the viewport units, we can set an element’s width/height to those units
 29 | 
 30 | ```css
 31 | #el {
 32 |     position: absolute;
 33 |     top: 0;
 34 |     left: 0;
 35 |     width: 100vw;
 36 |     height: 100vh;
 37 | 
 38 |     background: var(--lightblue);
 39 | }
 40 | ```
 41 | 
 42 | On desktop _(with no scrollbars present)_, it looks like this:
 43 | 
 44 | ![Illustration](./illustrations/viewport-units-desktop.png)
 45 | 
 46 | On mobile, it looks like this:
 47 | 
 48 | ![Illustration](./illustrations/viewport-units-mobile-vh--uaui-expanded.png)
 49 | 
 50 | To authors this seems weird, but [its behavior is explained below](#size-of-the-ua-default-viewport-on-mobile).
 51 | 
 52 | ## Types of Viewport-percentage Lengths
 53 | 
 54 | Since [the Layout Viewport can change size](./layout-viewport.md#size) as UA UI elements contract or expand, there are different types specific Layout Viewport Sizes that [can be defined](https://drafts.csswg.org/css-values-4/#viewport-relative-lengths).
 55 | 
 56 | ![Illustration](./illustrations/viewport-units-mobile-naming-things.png)
 57 | 
 58 | Each type of specific Layout Viewport has Viewport-percentage Lengths assigned with it.
 59 | ### The Large Viewport
 60 | 
 61 | The Large Viewport is the viewport sized assuming any UA UI Elements that are dynamically expanded and retracted to be *retracted*. It has the `l`-prefix, so its linked units are `lvh` / `lvw` / `lvb` / `lvi` / `lvmin` / `lvmax`.
 62 | 
 63 | > The large viewport-percentage units (`lv*`) are defined with respect to the large viewport size: the viewport sized assuming any UA interfaces that are dynamically expanded and retracted to be retracted. This allows authors to size content such that it is guaranteed to fill the viewport, noting that such content might be hidden behind such interfaces when they are expanded.
 64 | > 
 65 | > The sizes of the large viewport-percentage units are fixed (and therefore stable) unless the viewport itself is resized.
 66 | 
 67 | ![Illustration](./illustrations/viewport-units-mobile-svh%2Blvh--with-icb--mobilesafari.png)
 68 | 
 69 | ### The Small Viewport
 70 | 
 71 | The Small Viewport is the viewport sized assuming any UA UI Elements that are dynamically expanded and retracted to be *expanded*. It has the `s`-prefix, so its linked units are `svh` / `svw` / `svb` / `svi` / `svmin` / `svmax`.
 72 | 
 73 | > The small viewport-percentage units (`sv*`) are defined with respect to the small viewport size: the viewport sized assuming any UA interfaces that are dynamically expanded and retracted to be expanded. This allows authors to size content such that it can fit within the viewport even when such interfaces are present, noting that such content might not fill the viewport when such interfaces are retracted.
 74 | > 
 75 | > The sizes of the small viewport-percentage units are fixed (and therefore stable) unless the viewport itself is resized.
 76 | 
 77 | ![Illustration](./illustrations/viewport-units-mobile-svh%2Blvh--with-icb--mobilesafari.png)
 78 | 
 79 | ### The Dynamic Viewport
 80 | 
 81 | The Dynamic Viewport is the viewport sized with dynamic consideration of any UA UI Elements. It will automatically adjust itself in response to UA interface elements being shown or not. It has the `d`-prefix.
 82 | 
 83 | > The dynamic viewport-percentage units (`dv*`) are defined with respect to the dynamic viewport size: the viewport sized with dynamic consideration of any UA interfaces that are dynamically expanded and retracted. This allows authors to size content such that it can exactly fit within the viewport whether or not such interfaces are present.
 84 | > 
 85 | > The sizes of the dynamic viewport-percentage units are not stable even while the viewport itself is unchanged. Using these units can cause content to resize e.g. while the user scrolls the page. Depending on usage, this can be disturbing to the user and/or costly in terms of performance.
 86 | > 
 87 | > The UA is not required to animate the dynamic viewport-percentage units while expanding and retracting any relevant interfaces, and may instead calculate the units as if the relevant interface was fully expanded or retracted during the UI animation. (It is recommended that UAs assume the fully-retracted size for this duration.)
 88 | 
 89 | ![Illustration](./illustrations/viewport-units-mobile-dvh--mobilesafari.png)
 90 | 
 91 | ### UA-default Viewport
 92 | 
 93 | The UA-default Viewport, which for any given document should be equivalent to the large viewport size, small viewport size, or some intermediary size. It has no prefix, so its linked units are `vh` / `vw` / `vb` / `vi` / `vmin` / `vmax`.
 94 | 
 95 | > The UA-default viewport-percentage units (`v*`) are defined with respect to a UA-defined UA-default viewport size, which for any given document should be equivalent to the large viewport size, small viewport size, or some intermediary size.
 96 | 
 97 | ## Findings
 98 | 
 99 | 💡 These findings are a textual representation of the [test results table](https://goo.gle/interop-2022-viewport-testresults).
100 | 
101 | ### Effect of scrollbars
102 | 
103 | The presence of does not influence the size of the Viewport Units. This per spec:
104 | 
105 | > In all cases, scrollbars are assumed not to exist
106 | 
107 | When using [Overlay Scrollbars](./scrolling.md#overlay-scrollbars) this is no issue
108 | 
109 | ![Illustration](./illustrations/viewport-units-desktop-long-content.png)
110 | 
111 | However, when using [Classic Scrollbars](./scrolling.md#classic-scrollbars) this becomes an important note to make, as `100vh` and `100vw` grow “too large”. As a result, the UA also needs to add a horizontal scrollbar.
112 | 
113 | ![Illustration](./illustrations/viewport-units-desktop-long-content--classic-scrollbar.png)
114 | 
115 | ### Size of non-UA-default Viewport on Desktop
116 | 
117 | As all desktop browsers currently do not have dynamic UA UI elements, they – when the units are supported – size the Small and Large Viewport to the size of the UA-default Viewport.
118 | 
119 | ### Size of the Small Viewport
120 | 
121 | For all mobile browsers, the Small Viewport size follows the size of the ICB.
122 | 
123 | ![Illustration](./illustrations/viewport-units-mobile-svh%2Blvh--with-icb--uaui-expanded.png)
124 | 
125 | ### Size of the Large Viewport
126 | 
127 | For all mobile browsers, the Large Viewport size follows the size of the ICB + size of the dynamic UA UI Elements that have retracted.
128 | 
129 | ![Illustration](./illustrations/viewport-units-mobile-svh%2Blvh--with-icb--uaui-retracted.png)
130 | 
131 | ### Size of the UA-default Viewport on Mobile
132 | 
133 | All mobile browsers seem to agree on sizing the UA-default Viewport to the Large Viewport. This explains that why, when giving an element a height of `100vh`, it gets partially obscured by the dynamic UA UI elements:
134 | 
135 | ![Illustration](./illustrations/viewport-units-mobile-vh--uaui-expanded.png)
136 | 
137 | ![Illustration](./illustrations/viewport-units-mobile-vh--uaui-retracted.png)
138 | 
139 | ### Size of the Dynamic Viewport
140 | 
141 | The size of the Dynamic Viewport adapts itself when the UA UI Elements change.
142 | 
143 | The value of the `dv*` units are not updated immediately:
144 | 
145 | - When slowly scrolling, some browsers only do this after scrolling for a certain distance, while others respond immediately. The value isn’t updated at 60fps, but is throttled, for performance reasons we can assume
146 | - When swiping over the screen and having the document scroll for a large distance, some browsers do not update the value for `dvh` until the scrolling has stopped
147 | 
148 | Some browsers allow the Dynamic Viewport grow larger than the Large Viewport. This is the case when users over pinch-zoom out in all browsers on iOS.
149 | 
150 | ### Effect of Overscrolling / Bouncy Scroll
151 | 
152 | These units follow the size of the [Layout Viewport](./layout-viewport.md). Since the Layout Viewport’s size is not affected by Overscrolling, these units aren’t either.
153 | 
154 | ## Issues
155 | 
156 | We are tracking issues using [the label `Viewport Units`](https://github.com/web-platform-tests/interop-2022-viewport/issues?q=is%3Aissue+label%3A%22Viewport+Units%22)


--------------------------------------------------------------------------------
/explainers/virtual-keyboard-api.md:
--------------------------------------------------------------------------------
 1 | # The Virtual Keyboard API
 2 | 
 3 | ## Definition
 4 | 
 5 | With the Virtual Keyboard API, authors can get information about the Virtual Keyboard. This is defined in [the Virtual Keyboard API Specification](https://www.w3.org/TR/virtual-keyboard/)
 6 | 
 7 | > The VirtualKeyboard API provides authors with greater control over the visibility of the Virtual Keyboard, and greater ability to adapt the layout of web pages when VK visibility changes
 8 | 
 9 | ## Using the API
10 | 
11 | Authors can listen for a `geometrychange` event to get the Virtual Keyboard size.
12 | 
13 | ```js
14 | if ("virtualKeyboard" in navigator) {
15 | 	navigator.virtualKeyboard.addEventListener('geometrychange', () => {
16 | 		console.log(vk.boundingRect);
17 | 	});
18 | }
19 | ```
20 | 
21 | Additionally they can also trigger it to show or hide.
22 | 
23 | ## Overlays Content Mode
24 | 
25 | Using the Virtual Keyboard API, authors can change the behavior of the Virtual Keyboard. The only option they have now, is to enable “Overlays Content” mode. This behavior needs to be enabled through JavaScript:
26 | 
27 | ```js
28 | if ("virtualKeyboard" in navigator) {
29 | 	navigator.virtualKeyboard.overlaysContent = true;
30 | }
31 | ```
32 | 
33 | Once enabled, this mode does not resize the [Layout Viewport](./layout-viewport.md), [ICB](./icb.md), nor [Visual Viewport](./visual-viewport.md) when the [Virtual Keyboard](./virtual-keyboard.md) is shown.
34 | 
35 | ![Illustration](./illustrations/virtual-keyboard-api-overlayscontent.png)
36 | 
37 | ## Browser Support
38 | 
39 | The Virtual Keyboard API is only implemented in Chromium-based browsers. Other browser vendors have been asked on their position towards this API:
40 | 
41 | - Firefox: [https://github.com/mozilla/standards-positions/issues/531](https://github.com/mozilla/standards-positions/issues/531)
42 | - WebKit: [https://github.com/WebKit/standards-positions/issues/16](https://github.com/WebKit/standards-positions/issues/16)


--------------------------------------------------------------------------------
/explainers/virtual-keyboard.md:
--------------------------------------------------------------------------------
 1 | # Virtual Keyboard
 2 | 
 3 | ## Definition
 4 | 
 5 | Devices with a touchscreen mostly offer a On-Screen Keyboard also known as the Virtual Keyboard.
 6 | 
 7 | ![Illustration](./illustrations/virtual-keyboard-input-nofocus.png)
 8 | 
 9 | ![Illustration](./illustrations/virtual-keyboard-input-focus.png)
10 | 
11 | [The Virtual Keyboard API Specification](https://www.w3.org/TR/virtual-keyboard/) has a section how the Virtual Keyboard affects a browser
12 | 
13 | > The Virtual Keyboard (VK) is the on-screen keyboard used for input in scenarios where a hardware keyboard may not be available.
14 | > 
15 | > User agents respond to the presence of the VK, without any exposure of this information to web developers in the following way: 
16 | >
17 | > 1. Repositioning the user agent above the VK
18 | > 2. Reducing the size of the [layout viewport](./layout-viewport.md) so the VK doesn't occlude it[^fn1]
19 | > 3. Reducing the size of the [visual viewport](./visual-viewport.md) and padding the layout viewport to ensure it can be shifted above the VK[^fn2]
20 | 
21 | [^fn1]: This is the current behavior of Chrome on Android
22 | [^fn2]: This is the current behavior of Safari on iOS
23 | 
24 | 💡 The [Virtual Keyboard API](./virtual-keyboard-api.md) adds a fourth option to this list of behaviors.
25 | 
26 | ## Findings
27 | 
28 | 💡 These findings are a textual representation of the [test results table](https://goo.gle/interop-2022-viewport-testresults).
29 | 
30 | ### Effect on the Layout Viewport
31 | 
32 | The effect of the [Virtual Keyboard](./virtual-keyboard.md) on the [Layout Viewport](./layout-viewport.md) is currently not interoperable, as _some_ browsers resize the Layout Viewport when the Virtual Keyboard gets shown, while others do not resize it.
33 | 
34 | ![Illustration](./illustrations/virtual-keyboard-input-focus--with-layout-viewport-1.png)
35 | 
36 | Because [`position: fixed` elements are laid out against the Layout Viewport](./layout-viewport.md#relation-to-position-fixed), that might mean that some of those elements get obscured by the keyboard
37 | 
38 | ![Illustration](./illustrations/virtual-keyboard-input-focus--with-layout-viewport-2.png)
39 | 
40 | This latter behavior might be troublesome if authors want to keep an element positioned against the bottom edge, above the Virtual Keyboard when present.
41 | 
42 | 💡 The [Virtual Keyboard API](./virtual-keyboard-api.md) has an option to opt-out of resizing the Layout Viewport in case the Virtual Keyboard is present.
43 | ### Effect on the ICB
44 | 
45 | Because the ICB is based on the size of the [Layout Viewport](./layout-viewport.md), browsers that resize the Layout Viewport also resize the ICB.
46 | 
47 | ![Illustration](./illustrations/virtual-keyboard-input-focus--with-icb.png)
48 | 
49 | This difference in resize-behavior has an effect on [Viewport Units](./viewport-units.md)
50 | 
51 | ![Illustration](./illustrations/virtual-keyboard-input-focus--with-icb--with-viewport-units.png)
52 | 
53 | ### Effect on the Visual Viewport
54 | 
55 | The Visual Viewport resizes the the Virtual Keyboard gets shown. This is consistent across Mobile Browsers.
56 | 
57 | ![Illustration](./illustrations/virtual-keyboard-input-focus--with-everything.png)
58 | 
59 | ### Auto-scrolling input elements into view
60 | 
61 | When an element that might get obscured by the Virtual Keyboard gains focus, some browsers auto-offset the [Layout Viewport](./layout-viewport.md) so that the input remains in view.
62 | 
63 | ![Illustration](./illustrations/virtual-keyboard-input-focus--with-everything---offset-layout-viewport.png)
64 | 
65 | ## Issues
66 | 
67 | We are tracking issues using [the label `Virtual Keyboard`](https://github.com/web-platform-tests/interop-2022-viewport/issues?q=is%3Aissue+label%3A%22Virtual+Keyboard%22)


--------------------------------------------------------------------------------
/explainers/visual-viewport.md:
--------------------------------------------------------------------------------
  1 | # The Visual Viewport
  2 | 
  3 | ## Definition
  4 | 
  5 | From [the CSSOM Specification](https://drafts.csswg.org/cssom-view/#visual-viewport)
  6 | 
  7 | > The visual viewport is a kind of viewport whose scrolling area is another viewport, called the layout viewport.
  8 | > 
  9 | > In addition to scrolling, the visual viewport may also apply a scale transform to its layout viewport. This transform is applied to the canvas of the layout viewport and does not affect its internal coordinate space.
 10 | 
 11 | From [MDN](https://developer.mozilla.org/en-US/docs/Glossary/Visual_Viewport):
 12 | 
 13 | > The portion of the viewport that is currently visible is called the visual viewport
 14 | >
 15 | > The Visual Viewport can be smaller than the layout viewport, such as when the user has pinched-zoomed
 16 | 
 17 | ## Visualization
 18 | 
 19 | To visualize it, authors can get sizing and positioning info of the Visual Viewport through the [Visual Viewport API](https://drafts.csswg.org/cssom-view/#the-visualviewport-interface)
 20 | 
 21 | ```js
 22 | let {
 23 |     width,
 24 |     height,
 25 |     scale,
 26 |     offsetTop,
 27 |     offsetLeft,
 28 |     pageLeft,
 29 |     pageTop,
 30 | } = window.visualViewport;
 31 | ```
 32 | 
 33 | These values are:
 34 | 
 35 | - `width` / `height` = Width and Height of the Visual Viewport
 36 | - `offsetTop` / `offsetLeft` = Distance from edges of the Visual Viewport to edges of the [Layout Viewport](./layout-viewport.md)
 37 | - `pageTop` / `pageLeft` = Distance from edges of the Visual Viewport to edges of the [ICB](./icb.md)
 38 | - `scale` = The scale factor _(default: `1`)_
 39 | 
 40 | Using a tab more JS, these values can be synced to Custom Properties which you can use to position an element that outlines this Visual Viewport
 41 | 
 42 | ```js
 43 | document.documentElement.style.setProperty('--vvw', `${vvv.width}px`);
 44 | document.documentElement.style.setProperty('--vvh', `${vvv.height}px`);
 45 | document.documentElement.style.setProperty('--vvpt', `${vvv.pageTop}px`);
 46 | document.documentElement.style.setProperty('--vvpl', `${vvv.pageLeft}px`);
 47 | document.documentElement.style.setProperty('--vvot', `${vvv.offsetTop}px`);
 48 | document.documentElement.style.setProperty('--vvol', `${vvv.offsetLeft}px`);
 49 | document.documentElement.style.setProperty('--vvz', vvv.scale);
 50 | ```
 51 | 
 52 | Depending on wether you are using `position: absolute` or `position: fixed`, you need to use these values differently:
 53 | 
 54 | ```css
 55 | #visualviewport {
 56 |     box-sizing: border-box;
 57 | 	border: 8px solid;
 58 | 	border-image: repeating-linear-gradient(45deg, orange, orange 10px, transparent 10px, transparent 20px) 10;
 59 | }
 60 | 
 61 | #visualviewport {
 62 | 	position: absolute;
 63 | 	top: var(--vvpt, 0px);
 64 | 	left: var(--vvpl, 0px);
 65 | 	width: var(--vvw, 100%);
 66 | 	height: var(--vvh, 100vh);
 67 | }
 68 | ```
 69 | 
 70 | ```css
 71 | #visualviewport {
 72 |     box-sizing: border-box;
 73 | 	border: 8px solid;
 74 | 	border-image: repeating-linear-gradient(45deg, orange, orange 10px, transparent 10px, transparent 20px) 10;
 75 | }
 76 | 
 77 | #visualviewport {
 78 | 	position: fixed;
 79 | 	top: var(--vvot, 0px);
 80 | 	left: var(--vvol, 0px);
 81 | 	width: var(--vvw, 100%);
 82 | 	height: var(--vvh, 100vh);
 83 | 	right: var(--vvol, 0px) + var(--vvw, 0px);
 84 | 	bottom: var(--vvol, 0px) + var(--vvh, 0px);
 85 | }
 86 | ```
 87 | 
 88 | 👉 Try it out: [Visual Viewport](https://interop-2022-viewport.netlify.app/individual/visual-viewport/)
 89 | 
 90 | ## Findings
 91 | 
 92 | 💡 These findings are a textual representation of the [test results table](https://goo.gle/interop-2022-viewport-testresults).
 93 | 
 94 | ## Size
 95 | 
 96 | As mentioned above, the Visual Viewport API can be used for this. Note that the size of Visual Viewport will be equal to or less than the [Layout Viewport](./layout-viewport.md)
 97 | 
 98 | ![Illustration](./illustrations/visual-viewport-desktop.png)
 99 | ![Illustration](./illustrations/visual-viewport-mobile--uaui-expanded.png)
100 | ![Illustration](./illustrations/visual-viewport-mobile--uaui-retracted.png)
101 | 
102 | ### Effect of scrolling
103 | 
104 | The Visual Viewport updates nicely as you scroll and shifts down with the scroll position.
105 | 
106 | ![Illustration](./illustrations/visual-viewport-desktop.png)
107 | 
108 | When UA UI Elements expand/contract is also updates accordingly, except in Edge on Android where there’s a few pixels missing. This bug is corrected as soon as you stop the gesture _(i.e. lift up your finger)_, then the correct values are flushed.
109 | 
110 | ![Illustration](./illustrations/visual-viewport-mobile--uaui-expanded.png)
111 | ![Illustration](./illustrations/visual-viewport-mobile--uaui-retracted.png)
112 | 
113 | ### Effect of scrollbars
114 | 
115 | The presence of [Classic Scrollbars](./scrolling.md#classic-scrollbars) take away space from the Visual Viewport
116 | 
117 | ### Effect of pinch-zoom
118 | 
119 | The Visual Viewport updates nicely as you pinch zoom
120 | 
121 | ![Illustration](./illustrations/visual-viewport-desktop--pinch-zoomed-in-2.png)
122 | 
123 | In Safari on Desktop the values do not update immediately as you pinch-zoom, but are only updated when the gesture is finished  _(i.e. lifting up your fingers)_.
124 | 
125 | When you over pinch-zooming out in browsers that allow this _(i.e. all based on WebKit)_ something funky happens with the position and dimensions of the Visual Viewport:
126 | 
127 | - Its position gets anchored to `0,0` of the canvas. This origin moves between the top-left edge of the [Large and Small Viewport](./viewport-units.md#the-large-viewport) as you move around.
128 | - The `width`/`height` is measured from that `0,0` origin _(which can move)_ to the right/bottom edge of the [Layout Viewport](./layout-viewport.md)
129 | 
130 | 👀 See [Screenshot 1 of Safari on iOS](./screenshots/visual-viewport-mobile-safari-over-pinch-zoom-out-1.jpeg) and [Screenshot 2 of Safari on iOS](./screenshots/visual-viewport-mobile-safari-over-pinch-zoom-out-2.jpeg)
131 | 
132 | 👀 See [Recording of Safari on iOS](./videos/visual-viewport-mobile-over-pinch-zoom-out--safari.mp4)
133 | 
134 | ### Effect of the Virtual Keyboard
135 | 
136 | See [Virtual Keyboard: Findings](./virtual-keyboard.md#findings).
137 | 
138 | ### Effect of Overscrolling / Bouncy Scroll
139 | 
140 | When [overscrolling](./scrolling.md#overscrolling-and-rubber-banding), WebKit allows negative values for `window.scrollX` and `window.scrollY`. This is the only engine to expose this. While doing so, the values for the Visual Viewport’s `pageTop` and `pageLeft` also become negative, while its `height` and `width` remain the same size. Because of this, the visualization of the Visual Viewport can get clipped by the [ICB](./icb.md) which [does bounce with the rubber banding effect](./icb.md#effect-of-overscrolling--bouncy-scroll)
141 | 
142 | 👀 See [Recording of Safari on Desktop](./videos/visual-viewport-desktop-overscroll--safari.mp4) and [Recording of Safari on iOS](./videos/visual-viewport-mobile-overscroll--safari.mp4)
143 | 
144 | Other engines that do not allow negative values for `window.scrollX` and `window.scrollY` as it has a rubber banding effect going on – i.e. Chrome on macOS and Firefox on macOS – follow the same behavior as the [ICB](./icb.md): the bounce with the effect. The values for the `height` and `width` remain the same as it rubber bands.
145 | 
146 | 👀 See [Recording of Firefox on Desktop](./videos/visual-viewport-desktop-overscroll--firefox.mp4) and [Recording of Chrome on Desktop](./videos/visual-viewport-desktop-overscroll--chrome.mp4)
147 | 
148 | In engines that keep the [Layout Viewport](./layout-viewport.md) in place as the browser rubber bands the values for `offsetTop` and `offsetLeft` remain `0`.
149 | 
150 | 👀 See [Recording of Firefox on Desktop](./videos/visual-viewport-desktop-overscroll--firefox.mp4) and [Recording of Chrome with flag on Desktop](./videos/visual-viewport-desktop-overscroll--chrome-with-flag.mp4)
151 | 
152 | ## Issues
153 | 
154 | We are tracking issues using [the label `Visual Viewport`](https://github.com/web-platform-tests/interop-2022-viewport/issues?q=is%3Aissue+label%3A%22Visual+Viewport%22)


--------------------------------------------------------------------------------