Move Viewport example

Signed-off-by: Shubham Gupta <shubham.gupta@chromium.org>

Author: shubhamg13

css-viewport-1/Overview.bs

@@ -130,6 +130,74 @@ larger than the [=initial viewport=] or the zoom factor
 causes only parts of the [=layout viewport=] to be visible,
 the UA should offer a scrolling or panning mechanism.
 
+The <a>visual viewport</a>'s <a>scrolling area</a> is another <a>viewport</a>,
+the <a>layout viewport</a>.
+
+<style>
+	@keyframes lvmove {
+		0%, 10%, 20% { transform: translate(0, 100px); }
+		30%, 50%, 70% { transform: translate(0, 150px); }
+		80%,100% { transform: translate(0, 100px); }
+	}
+	@keyframes vvmove {
+		0%, 10% { transform: translate(70px, 150px); }
+		30%, 50% { transform: translate(70px, 250px); }
+		80%, 90% { transform: translate(70px, 100px); }
+		100% { transform: translate(70px, 150px); }
+	}
+	#lv {
+		transform: translate(0, 100px);
+		animation: lvmove linear 3s infinite;
+	}
+	#vv {
+		transform: translate(20px, 150px);
+		animation: vvmove linear 3s infinite;
+	}
+	.paused #lv {
+		animation-play-state: paused;
+	}
+	.paused #vv {
+		animation-play-state: paused;
+	}
+</style>
+<div class="example paused" id="example-vvanimation">
+	<p>
+		This animation shows an example of a zoomed in visual viewport being "panned" around (for
+		example, by a user performing a touch drag). The page is scaled so that the layout viewport
+		is larger than the visual viewport.
+	</p>
+	<p>
+		A scroll delta is applied to the visual viewport first. When the visual viewport is at its
+		extent, scroll delta will be applied to the layout viewport. This behavior is implemented by
+		the [=viewport/perform a scroll=] steps.
+	</p>
+	<svg width="300" height="400">
+		<rect width="100%" height="100%" fill="white" stroke="grey" stroke-width="3"/>
+		<text x="10" y="30" font-family="Sans" font-size="25" fill="grey">
+		Document
+	</text>
+	<g id="lv">
+		<rect y="2" x="2" width="296" height="200" stroke="blue" fill="none" stroke-width="4"/>
+		<text x="10" y="20" font-family="Sans" font-size="15" fill="blue">
+		Layout Viewport
+		</text>
+	</g>
+	<g id="vv">
+		<rect y="2" x="2" width="148" height="100" stroke="red" fill="none" stroke-width="4"/>
+		<text x="10" y="60" font-family="Sans" font-size="15" fill="red">
+		Visual Viewport
+		</text>
+	</g>
+	</svg>
+	<br>
+	<button id="vvanimationBtn">Toggle Animation</button>
+	<script>
+		document.getElementById('vvanimationBtn').onclick = () => {
+		document.getElementById('example-vvanimation').classList.toggle('paused');
+	};
+	</script>
+</div>
+
 It is recommended that initially the upper-left corners of the
 [=layout viewport=] and the window or viewing area are aligned if the
 base direction of the document is ltr. Similarly, that the upper-right
@@ -311,8 +379,6 @@ 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 export><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

cssom-view-1/Overview.bs

@@ -130,7 +130,7 @@ A <dfn export>scrolling box</dfn> of a <a>viewport</a> or element has two <dfn>o
 Note that the initial scroll position might not be aligned with the [=scrolling area origin=]
 depending on the [=content-distribution properties=], see [[css-align-3#overflow-scroll-position]].
 
-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
+The term <dfn export>scrolling area</dfn> refers to a box of a <a>viewport</a> or an element that has the following edges, depending on the
 <a>viewport’s</a> or element's <a>scrolling box’s</a> <a>overflow directions</a>.
 
 <table class="complex data">
@@ -293,74 +293,6 @@ The <dfn>ending edges</dfn> of a particular set of edges of a box or element are
  <dd>The top and right edges.
 </dl>
 
-The <a>visual viewport</a>'s <a>scrolling area</a> is another <a>viewport</a>,
-the <a>layout viewport</a>.
-
-<style>
-      @keyframes lvmove {
-        0%, 10%, 20% { transform: translate(0, 100px); }
-        30%, 50%, 70% { transform: translate(0, 150px); }
-        80%,100% { transform: translate(0, 100px); }
-      }
-      @keyframes vvmove {
-        0%, 10% { transform: translate(70px, 150px); }
-        30%, 50% { transform: translate(70px, 250px); }
-        80%, 90% { transform: translate(70px, 100px); }
-        100% { transform: translate(70px, 150px); }
-      }
-      #lv {
-        transform: translate(0, 100px);
-        animation: lvmove linear 3s infinite;
-      }
-      #vv {
-        transform: translate(20px, 150px);
-        animation: vvmove linear 3s infinite;
-      }
-      .paused #lv {
-        animation-play-state: paused;
-      }
-      .paused #vv {
-        animation-play-state: paused;
-      }
-</style>
-<div class="example paused" id="example-vvanimation">
-  <p>
-    This animation shows an example of a zoomed in visual viewport being "panned" around (for
-    example, by a user performing a touch drag). The page is scaled so that the layout viewport
-    is larger than the visual viewport.
-  </p>
-  <p>
-    A scroll delta is applied to the visual viewport first. When the visual viewport is at its
-    extent, scroll delta will be applied to the layout viewport. This behavior is implemented by
-    the [=viewport/perform a scroll=] steps.
-  </p>
-  <svg width="300" height="400">
-    <rect width="100%" height="100%" fill="white" stroke="grey" stroke-width="3"/>
-    <text x="10" y="30" font-family="Sans" font-size="25" fill="grey">
-      Document
-    </text>
-    <g id="lv">
-      <rect y="2" x="2" width="296" height="200" stroke="blue" fill="none" stroke-width="4"/>
-      <text x="10" y="20" font-family="Sans" font-size="15" fill="blue">
-        Layout Viewport
-      </text>
-    </g>
-    <g id="vv">
-      <rect y="2" x="2" width="148" height="100" stroke="red" fill="none" stroke-width="4"/>
-      <text x="10" y="60" font-family="Sans" font-size="15" fill="red">
-        Visual Viewport
-      </text>
-    </g>
-  </svg>
-  <br>
-  <button id="vvanimationBtn">Toggle Animation</button>
-  <script>
-    document.getElementById('vvanimationBtn').onclick = () => {
-      document.getElementById('example-vvanimation').classList.toggle('paused');
-    };
-  </script>
-</div>
-
 The {{VisualViewport}} object has an <dfn for=visualviewport>associated document</dfn>, which is a {{Document}} object.
 It is the <a for="/">associated document</a> of the owner {{Window}} of {{VisualViewport}}. The <a>layout viewport</a>
 is the owner {{Window}}'s <a>viewport</a>.
@@ -498,8 +430,8 @@ Note: Conceptually, the visual viewport is scrolled until it "bumps up" against
 edge and then "pushes" the layout viewport by applying the scroll delta to the layout viewport.
 However, the scrolls in the steps above are computed ahead of time and applied in the opposite order
 so that the layout viewport is scrolled before the visual viewport. This is done for historical
-reasons to ensure consistent scroll event ordering. See the <a href="#example-vvanimation">example
-above</a> for a visual depiction.
+reasons to ensure consistent scroll event ordering. See the <a href="https://drafts.csswg.org/css-viewport/#example-vvanimation">example 
+</a> for a visual depiction.
 
 </div>