WICG · bicknellr · Dec 14, 2018 · Dec 19, 2018 · Dec 20, 2018 · Jan 3, 2019
diff --git a/demo/virtual-content/HTML_Standard.html b/demo/virtual-content/HTML_Standard.html
diff --git a/demo/virtual-content/random.html b/demo/virtual-content/random.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<template id="itemTemplate">
+  <div class="item">
+    <span class="index"></span><span class="text"></span>
+  </div>
+</template>
+<script type="module">
+import '../../src/virtual-content.js';
+
+const info = document.getElementById('info');
+
+function updateInfo() {
+  info.innerHTML = `
+    ${document.scrollingElement.scrollTop} / ${document.scrollingElement.scrollHeight}
+  `;
+}
+
+window.addEventListener('scroll', updateInfo);
+
+const itemTemplateElement =
+  document.getElementById('itemTemplate').content.querySelector('.item');
+function createItem(index) {
+  const item = itemTemplateElement.cloneNode(true);
+
+  Object.assign(item.style, {
+    marginTop: `${Math.ceil(16 * Math.random())}px`,
+    marginBottom: `${Math.ceil(16 * Math.random())}px`,
+  });
+
+  const indexSpan = item.querySelector('.index');
+  indexSpan.appendChild(new Text(index));
+
+  const textSpan = item.querySelector('.text');
+  let str = '';
+  const count = 100 + Math.floor(50 * Math.random());
+  for (let j = 0; j < count; j++) {
+    str += ' text';
+  }
+  textSpan.appendChild(new Text(str));
+
+  return item;
+}
+
+for (const element of document.querySelectorAll('[item-fill]')) {
+  const count = window.parseInt(element.getAttribute('item-fill'), 10);
+  for (let i = 0; i < count; i++) {
+    element.appendChild(createItem(i));
+  }
+}
+</script>
+<style>
+#vc0 {
+  background-color: #fdd;
+}
+#vc1 {
+  background-color: #dfd;
+}
+#vc2 {
+  background-color: #ddf;
+}
+#vc3 {
+  background-color: #fdf;
+}
+#vc4 {
+  background-color: #ffd;
+}
+#vc5 {
+  background-color: #dff;
+}
+
+.item {
+  font-size: 3em;
+  border: 8px solid black;
+  padding: 8px;
+}
+.item:nth-of-type(2n) {
+  border-style: dashed;
+}
+
+.item > .index {
+  color: #080;
+}
+
+.item > .text {
+  opacity: 0.25;
+}
+
+#info {
+  position: fixed;
+  top: 4px;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 2px solid red;
+  padding: 2px;
+  background-color: white;
+}
+</style>
+<virtual-content id="vc0" item-fill="20"><div style="overflow: auto; height: 400px;">
+  <virtual-content id="vc1" item-fill="20"><div style="overflow: auto; height: 200px;">
+    <virtual-content id="vc2" item-fill="20"></virtual-content>
+  </div></virtual-content>
+</div></virtual-content>
+<virtual-content id="vc3" item-fill="5"><virtual-content id="vc4" item-fill="5"><virtual-content id="vc5" item-fill="5"></virtual-content></virtual-content></virtual-content>
+
+<div id="info"></div>
diff --git a/demo/virtual-content/spec.css b/demo/virtual-content/spec.css
@@ -0,0 +1,79 @@
+.head .logo img { position: absolute; top: 1em; right: 1em; border: none; }
+
+.toc, .toc li { list-style: none; }
+
+pre > code.idl::before, pre.idl::before { content: 'IDL'; }
+pre > code.css::before, pre.highlight.lang-css::before { content: 'CSS'; }
+
+.note::before { content: 'Note'; }
+.warning::before { content: '\26A0 Warning!'; }
+.example::before { content: 'Example'; }
+dl.domintro::before { content: 'For web developers (non-normative)'; }
+
+/* Floating-but-collapsible annoying warning for snapshots */
+details.annoying-warning {
+  background-color: #920800;
+  background-image: linear-gradient(transparent 40%, rgba(255, 255, 255, 0.2));
+  border: solid rgba(0, 0, 0, 0.4);
+  border-radius: 3px;
+  border-width: 1px 1px 0 1px;
+  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
+  color: rgba(255, 255, 255, 0.95);
+  opacity: .95;
+  position: fixed;
+  left: 5%;
+  margin: 0 auto;
+  right: 5%;
+  z-index: 10;
+}
+
+details.annoying-warning[open] {
+  top: 10%;
+  top: calc(5vw + 5vh);
+  max-width: 1024px;
+  outline: solid 10000px rgba(255, 255, 255, 0.6);
+}
+
+details.annoying-warning:not([open]) {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-radius: 0;
+}
+
+details.annoying-warning > summary {
+  display: list-item; /* polyfill */
+  font-size: 0.875em;
+  font-weight: bold;
+  letter-spacing: 0.02em;
+  padding: 10px 5px;
+  text-align: center;
+  text-transform: uppercase;
+  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.85);
+  cursor: default;
+}
+
+details.annoying-warning > summary::after {
+  content: " Expand";
+  position: absolute;
+  top: 0;
+  right: 5px;
+  font-size: smaller;
+  font-weight: bold;
+}
+
+details.annoying-warning[open] > summary::after {
+  content: " Collapse";
+}
+
+details.annoying-warning p {
+  padding: 0 7.5% 1em;
+  line-height: 1.4;
+  margin: 0;
+  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.85);
+}
+
+details.annoying-warning a {
+  color: white;
+  text-decoration: underline;
+}