Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 5 commits into from
Oct 11, 2022
Merged

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

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1704113
[css-viewport] Add viewport meta 'interactive-widgets'
bokand Oct 4, 2022
a938038
Apply suggestions from chrishtr review
bokand Oct 6, 2022
1ded60c
Rename resize-layout to resizes-document
bokand Oct 7, 2022
69d97bf
Fix virtual-keyboard linking
bokand Oct 7, 2022
70626a6
'resizes-document' -> 'resizes-content'
bokand Oct 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 84 additions & 0 deletions css-viewport/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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": {
Expand Down