Skip to content

Commit 2f73df3

Browse files
shubhamg13emilio
shubhamg13
authored and
emilio
committed
Move Viewport example
Signed-off-by: Shubham Gupta <shubham.gupta@chromium.org>
1 parent fdc2288 commit 2f73df3

2 files changed

Lines changed: 97 additions & 94 deletions

File tree

‎css-viewport-1/Overview.bs‎

Lines changed: 85 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,11 @@ spec: fenced-frames; urlPrefix: https://wicg.github.io/fenced-frame/
3232
</pre>
3333

3434
<pre class=link-defaults>
35+
spec:cssom-view; type:dfn;
36+
text:scrolling area
37+
spec:css2; type:dfn;
38+
text:canvas
39+
text:viewport
3540
spec:webdriver2; type:dfn;
3641
text:error
3742
text:remote end steps
@@ -81,47 +86,45 @@ Issue: Various issues about this specification and related specifications
8186
are listed in <a href="https://www.w3.org/Graphics/SVG/WG/wiki/Proposals/Investigation_of_APIs_for_Level_of_detail#The_issues_on_existing_APIs">this report</a>.
8287
</div>
8388

84-
<h2 id="the-viewport">
85-
The viewport</h2>
89+
<h2 id="terminology">Terminology</h2>
8690

87-
In CSS 2.1 a <a href="https://www.w3.org/TR/CSS21/visuren.html#viewport">viewport</a>
88-
is a feature of a user agent for [=continuous media=] and used to
91+
In CSS 2.1 a [=viewport=] is a feature of a user agent for [=continuous media=] and used to
8992
establish the initial containing block for [=continuous media=].
9093
For [=paged media=], the initial containing block is based on the page area.
9194
The page area can be set through ''@page'' rules.
9295

93-
This specification introduces a way of overriding the size of the viewport
96+
This specification introduces a way of overriding the size of the [=viewport=]
9497
provided by the user agent (UA). Because of this, we need to define
9598
[=initial viewport=], [=layout viewport=] and [=visual viewport=].
9699

97100
<dl>
98-
<dt><dfn>initial viewport</dfn></dt>
101+
<dt><dfn export>initial viewport</dfn></dt>
99102
<dd>
100103
This refers to the viewport before any UA or author styles have
101-
overridden the viewport given by the window or viewing area of the UA.
104+
overridden the [=viewport=] given by the window or viewing area of the UA.
102105

103106
Note: The [=initial viewport=] size will change with the size of the
104107
window or viewing area.</dd>
105-
<dt><dfn>layout viewport</dfn></dt>
108+
<dt><dfn export>layout viewport</dfn></dt>
106109
<dd>
107110
This is the viewport you get after processing the viewport
108111
<code>&lt;meta&gt;</code> tag.
109112
</dd>
110-
<dt><dfn>visual viewport</dfn></dt>
113+
<dt><dfn export>visual viewport</dfn></dt>
111114
<dd>
112-
This is the portion of the layout viewport that is currently visible,
113-
obtained by result of applying scale transform to its layout viewport.
114-
This transform is applied to the <a>canvas</a> of the <a>layout viewport</a>
115-
and does not affect its internal coordinate space. The magnitude of the
116-
scale transform is known as the <a>visual viewport</a>'s <dfn export>scale factor</dfn>.
115+
This is the portion of the [=layout viewport=] that is currently visible,
116+
obtained by result of applying scale transform to it. This transform is
117+
applied to the [=canvas=] of the [=layout viewport=] and does not affect
118+
its internal coordinate space. The magnitude of the scale transform is
119+
known as the [=visual viewport=]'s <dfn export>scale factor</dfn>.
117120

118121
Note: The [=visual viewport=] can be smaller than the [=layout viewport=].
119122
</dd>
120123
</dl>
121124

122125
Note: The scale transform of the [=visual viewport=] is often referred to as
123126
"pinch-zoom". Conceptually, this transform changes the size of the CSS
124-
<a>reference pixel</a> and changes the size of the layout viewport (inversally)
127+
[=reference pixel=] and changes the size of the [=layout viewport=] (inversally)
125128
proportionally so that it does not cause reflow of the page's contents.
126129

127130
When the [=layout viewport=] cannot fit inside the window or
@@ -130,6 +133,73 @@ larger than the [=initial viewport=] or the zoom factor
130133
causes only parts of the [=layout viewport=] to be visible,
131134
the UA should offer a scrolling or panning mechanism.
132135

136+
Note: The [=visual viewport=]'s [=scrolling area=] is the [=layout viewport=].
137+
138+
<style>
139+
@keyframes lvmove {
140+
0%, 10%, 20% { transform: translate(0, 100px); }
141+
30%, 50%, 70% { transform: translate(0, 150px); }
142+
80%,100% { transform: translate(0, 100px); }
143+
}
144+
@keyframes vvmove {
145+
0%, 10% { transform: translate(70px, 150px); }
146+
30%, 50% { transform: translate(70px, 250px); }
147+
80%, 90% { transform: translate(70px, 100px); }
148+
100% { transform: translate(70px, 150px); }
149+
}
150+
#lv {
151+
transform: translate(0, 100px);
152+
animation: lvmove linear 3s infinite;
153+
}
154+
#vv {
155+
transform: translate(20px, 150px);
156+
animation: vvmove linear 3s infinite;
157+
}
158+
.paused #lv {
159+
animation-play-state: paused;
160+
}
161+
.paused #vv {
162+
animation-play-state: paused;
163+
}
164+
</style>
165+
<div class="example paused" id="example-vvanimation">
166+
<p>
167+
This animation shows an example of a zoomed in visual viewport being "panned" around (for
168+
example, by a user performing a touch drag). The page is scaled so that the layout viewport
169+
is larger than the visual viewport.
170+
</p>
171+
<p>
172+
A scroll delta is applied to the visual viewport first. When the visual viewport is at its
173+
extent, scroll delta will be applied to the layout viewport. This behavior is implemented by
174+
the [=viewport/perform a scroll=] steps.
175+
</p>
176+
<svg width="300" height="400">
177+
<rect width="100%" height="100%" fill="white" stroke="grey" stroke-width="3"/>
178+
<text x="10" y="30" font-family="Sans" font-size="25" fill="grey">
179+
Document
180+
</text>
181+
<g id="lv">
182+
<rect y="2" x="2" width="296" height="200" stroke="blue" fill="none" stroke-width="4"/>
183+
<text x="10" y="20" font-family="Sans" font-size="15" fill="blue">
184+
Layout Viewport
185+
</text>
186+
</g>
187+
<g id="vv">
188+
<rect y="2" x="2" width="148" height="100" stroke="red" fill="none" stroke-width="4"/>
189+
<text x="10" y="60" font-family="Sans" font-size="15" fill="red">
190+
Visual Viewport
191+
</text>
192+
</g>
193+
</svg>
194+
<br>
195+
<button id="vvanimationBtn">Toggle Animation</button>
196+
<script>
197+
document.getElementById('vvanimationBtn').onclick = () => {
198+
document.getElementById('example-vvanimation').classList.toggle('paused');
199+
};
200+
</script>
201+
</div>
202+
133203
It is recommended that initially the upper-left corners of the
134204
[=layout viewport=] and the window or viewing area are aligned if the
135205
base direction of the document is ltr. Similarly, that the upper-right
@@ -311,8 +381,6 @@ Issue: Specify extend-to-zoom behavior by the viewport meta tag
311381

312382
<h3 id="interactive-widget-section">''interactive-widget''</h3>
313383

314-
Issue: Move the definition of ''visual viewport'' from CSSOM-View to this spec.
315-
316384
The <dfn export><code>interactive-widget</code></dfn> property specifies the effect that interactive UI
317385
widgets have on the page's viewports. It defines whether widgets overlay a given viewport or whether
318386
the viewport is shrunken so that it remains fully visible while the widget is showing. Interactive

‎cssom-view-1/Overview.bs‎

Lines changed: 12 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,12 @@ Ignore Can I Use URL Failure: https://drafts.csswg.org/cssom-view-1/
3232

3333
<pre class='link-defaults'>
3434
spec:css-ui-4; type:property; text:pointer-events
35-
spec:css-viewport; type:dfn; text:effective zoom
35+
spec:css-viewport; type:dfn;
36+
text:effective zoom
37+
text:layout viewport
38+
text:scale factor
39+
text:visual viewport
3640
spec:css2; type:dfn;
37-
text: canvas
3841
text: viewport
3942
spec:dom; type:dfn; text:parent element
4043
spec:html; type:dfn;
@@ -133,8 +136,8 @@ A <dfn export>scrolling box</dfn> of a <a>viewport</a> or element has two <dfn>o
133136
Note that the initial scroll position might not be aligned with the [=scrolling area origin=]
134137
depending on the [=content-distribution properties=], see [[css-align-3#overflow-scroll-position]].
135138

136-
The term <dfn>scrolling area</dfn> refers to a box of a <a>viewport</a> or an element that has the following edges, depending on the
137-
<a>viewport’s</a> or element's <a>scrolling box’s</a> <a>overflow directions</a>.
139+
The term <dfn export>scrolling area</dfn> refers to a box of a [=viewport=] or an element that has
140+
the following edges, depending on the [=viewport=]’s or element's [=scrolling box=]’s [=overflow directions=].
138141

139142
<table class="complex data">
140143
<thead>
@@ -296,77 +299,9 @@ The <dfn>ending edges</dfn> of a particular set of edges of a box or element are
296299
<dd>The top and right edges.
297300
</dl>
298301

299-
The <a>visual viewport</a>'s <a>scrolling area</a> is another <a>viewport</a>,
300-
the <a>layout viewport</a>.
301-
302-
<style>
303-
@keyframes lvmove {
304-
0%, 10%, 20% { transform: translate(0, 100px); }
305-
30%, 50%, 70% { transform: translate(0, 150px); }
306-
80%,100% { transform: translate(0, 100px); }
307-
}
308-
@keyframes vvmove {
309-
0%, 10% { transform: translate(70px, 150px); }
310-
30%, 50% { transform: translate(70px, 250px); }
311-
80%, 90% { transform: translate(70px, 100px); }
312-
100% { transform: translate(70px, 150px); }
313-
}
314-
#lv {
315-
transform: translate(0, 100px);
316-
animation: lvmove linear 3s infinite;
317-
}
318-
#vv {
319-
transform: translate(20px, 150px);
320-
animation: vvmove linear 3s infinite;
321-
}
322-
.paused #lv {
323-
animation-play-state: paused;
324-
}
325-
.paused #vv {
326-
animation-play-state: paused;
327-
}
328-
</style>
329-
<div class="example paused" id="example-vvanimation">
330-
<p>
331-
This animation shows an example of a zoomed in visual viewport being "panned" around (for
332-
example, by a user performing a touch drag). The page is scaled so that the layout viewport
333-
is larger than the visual viewport.
334-
</p>
335-
<p>
336-
A scroll delta is applied to the visual viewport first. When the visual viewport is at its
337-
extent, scroll delta will be applied to the layout viewport. This behavior is implemented by
338-
the [=viewport/perform a scroll=] steps.
339-
</p>
340-
<svg width="300" height="400">
341-
<rect width="100%" height="100%" fill="white" stroke="grey" stroke-width="3"/>
342-
<text x="10" y="30" font-family="Sans" font-size="25" fill="grey">
343-
Document
344-
</text>
345-
<g id="lv">
346-
<rect y="2" x="2" width="296" height="200" stroke="blue" fill="none" stroke-width="4"/>
347-
<text x="10" y="20" font-family="Sans" font-size="15" fill="blue">
348-
Layout Viewport
349-
</text>
350-
</g>
351-
<g id="vv">
352-
<rect y="2" x="2" width="148" height="100" stroke="red" fill="none" stroke-width="4"/>
353-
<text x="10" y="60" font-family="Sans" font-size="15" fill="red">
354-
Visual Viewport
355-
</text>
356-
</g>
357-
</svg>
358-
<br>
359-
<button id="vvanimationBtn">Toggle Animation</button>
360-
<script>
361-
document.getElementById('vvanimationBtn').onclick = () => {
362-
document.getElementById('example-vvanimation').classList.toggle('paused');
363-
};
364-
</script>
365-
</div>
366-
367-
The {{VisualViewport}} object has an <dfn for=visualviewport>associated document</dfn>, which is a {{Document}} object.
368-
It is the <a for="/">associated document</a> of the owner {{Window}} of {{VisualViewport}}. The <a>layout viewport</a>
369-
is the owner {{Window}}'s <a>viewport</a>.
302+
The {{VisualViewport}} object has an <dfn>associated document</dfn>, which is a {{Document}} object.
303+
It is the [=associated document=] of the owner {{Window}} of {{VisualViewport}}. The [=layout viewport=]
304+
is the owner {{Window}}'s [=viewport=].
370305

371306
For the purpose of the requirements in this specification,
372307
elements that have a computed value of the 'display' property
@@ -501,8 +436,8 @@ Note: Conceptually, the visual viewport is scrolled until it "bumps up" against
501436
edge and then "pushes" the layout viewport by applying the scroll delta to the layout viewport.
502437
However, the scrolls in the steps above are computed ahead of time and applied in the opposite order
503438
so that the layout viewport is scrolled before the visual viewport. This is done for historical
504-
reasons to ensure consistent scroll event ordering. See the <a href="#example-vvanimation">example
505-
above</a> for a visual depiction.
439+
reasons to ensure consistent scroll event ordering. See the
440+
<a href="https://drafts.csswg.org/css-viewport/#example-vvanimation">example</a> for a visual depiction.
506441

507442
</div>
508443

0 commit comments

Comments
 (0)