[css-viewport-1] Add 'interactive-widgets' to viewport meta (w3c#7826)

This describes the `interactive-widgets` property of the viewport meta tag for describing the expected behavior when a virtual-keyboard-like widget is shown.

Author: bokand

css-viewport/Overview.bs

@@ -19,6 +19,12 @@ Issue Tracking: CSSWG GitHub https://github.com/w3c/csswg-drafts/labels/css-view
 Ignored Vars: <viewport-length>
 </pre>
 
+<pre class="anchors">
+spec: virtual-keyboard; urlPrefix: https://w3c.github.io/virtual-keyboard
+	type: interface; text: VirtualKeyboard; url: dom-virtualkeyboard
+	type: attribute; text: overlaysContent; for: VirtualKeyboard; url: dom-virtualkeyboard-overlayscontent
+</pre>
+
 
 <h2 id="intro">
 Introduction</h2>
@@ -125,6 +131,7 @@ The recognized properties in the viewport
 	<li><code class="index">minimum-scale</code></li>
 	<li><code class="index">maximum-scale</code></li>
 	<li><code class="index">user-scalable</code></li>
+	<li><code class="index">interactive-widget</code></li>
 </ul>
 
 <h3 id="parsing-algorithm">
@@ -260,6 +267,83 @@ as follows:
 
 Issue: Specify extend-to-zoom behavior by the viewport meta tag
 
+<h3 id="interactive-widget-section">''interactive-widget''</h3>
+
+Issue: Move the definition of ''visual viewport'' from CSSOM-View to this spec.
+
+The <dfn><code>interactive-widget</code></dfn> property specifies the effect that interactive UI
+widgets have on the page's viewports. It defines whether widgets overlay a given viewport or whether
+the viewport is shrunken so that it remains fully visible while the widget is showing. Interactive
+UI widgets are transient user agent or operating system UI through which a user can provide input.
+
+<div class="note">The most common such UI widget is a virtual keyboard.</div>
+
+The following is a list of valid values for [=interactive-widget=] and the associated
+viewport-resizing behavior:
+
+<dl>
+	<dt><dfn><code>overlays-content</code></dfn></dt>
+	<dd>
+		Interactive UI widgets MUST NOT [=resize=] the [=initial viewport=] nor
+		the <a spec="CSSOM-VIEW">visual viewport</a>. The user agent must perform the same steps
+		as when {{VirtualKeyboard/overlaysContent|VirtualKeyboard.overlaysContent}} is set to
+		<code>true</code>.
+	</dd>
+	<dt><dfn><code>resizes-content</code></dfn></dt>
+	<dd>
+		Interactive UI widgets MUST [=resize=] the [=initial viewport=] by the interactive widget.
+	</dd>
+	<div class="note">
+		Since the <a spec="CSSOM-VIEW">visual viewport</a>'s size is derived from the
+		[=initial viewport=], [=resizes-content=] will cause a resize of both the initial and visual
+		viewports.
+	</div>
+	<dt><dfn><code>resizes-visual</code></dfn></dt>
+	<dd>
+		Interactive UI widgets MUST [=resize=] the <a spec="CSSOM-VIEW">visual viewport</a> but MUST
+		NOT [=resize=] the <a spec="CSS-VIEWPORT">initial viewport</a>.
+	</dd>
+</dl>
+
+If no value, or an invalid value, is set for [=interactive-widget=], the behavior implied by
+[=resizes-visual=] is used as the default.
+
+To <dfn lt="resize">resize a viewport by an interactive widget</dfn>, subtract from it the
+intersection of the viewport rect with the widget's OS reported bounding rect. In cases where this
+would result in a non-rectangular viewport, the behavior is user agent defined.
+
+<div class="note">
+	Some examples where the result would non rectangular: a
+	<a href="https://support.apple.com/en-ca/HT207521">floating or split keyboard</a>, or a keyboard that
+	<a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/VirtualKeyboardAPI/explainer.md#motivation">
+	occupies only part</a> of the viewport.
+</div>
+
+<h4 id="interaction-with-virtualkeyboard-overlayscontent">
+	Interaction with virtualKeyboard.overlaysContent
+</h4>
+
+[[!VIRTUAL-KEYBOARD]] provides an imperitive API to apply the [=overlays-content=] behavior via
+the {{VirtualKeyboard/overlaysContent|VirtualKeyboard.overlaysContent}} attribute. This attribute
+shadows the value set to [=interactive-widget=], namely:
+
+When {{VirtualKeyboard/overlaysContent|VirtualKeyboard.overlaysContent}} is set to
+<code>true</code>, the UA MUST ignore any value set to [=interactive-widget=] when determining the
+resizing behavior of interactive widgets.
+
+When {{VirtualKeyboard/overlaysContent|VirtualKeyboard.overlaysContent}} is set to
+<code>false</code>, the UA MUST use the value set to [=interactive-widget=], or the default behavior
+if a value is not set, when determining the resizing behavior of interactive widgets.
+
+Getting the value of {{VirtualKeyboard/overlaysContent|VirtualKeyboard.overlaysContent}} MUST return
+only the value previously set to it.
+
+<div class="note">
+	That is, unless previously set, <code>VirtualKeyboard.overlaysContent</code> returns false
+	even if <code>interactive-widget=overlays-content</code> is set via the <code>&ltmeta&gt</code>
+	tag.
+</div>
+
 <pre class=biblio>
 {
 	"Algorithms": {