add test to model viewer

immersive-web · Dec 9, 2019 · d2335d8 · d2335d8
1 parent 8e83f59
commit d2335d8
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 2 deletions.
diff --git a/_includes/compat-table.html b/_includes/compat-table.html
@@ -1,4 +1,4 @@
-<p>Note: this table is out of date.</p>
+<p>Note: this table is incomplete.</p>
 <table>
     <thead>
         <tr>

diff --git a/getting-started/modelviewer.md b/getting-started/modelviewer.md
@@ -1,3 +1,15 @@
 ---
 title: model-viewer
----
+---
+[Model viewer](https://modelviewer.dev/) is a custom HTML element for displaying 3D models and vieweing them in AR
+
+# AR
+
+```html
+<!-- Import the component -->
+<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>
+<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
+
+<!-- Use it like any other HTML element -->
+<model-viewer src="examples/assets/Astronaut.glb" alt="A 3D model of an astronaut" auto-rotate camera-controls background-color="#455A64"></model-viewer>
+```
diff --git a/highlight.css b/highlight.css
@@ -0,0 +1,67 @@
+.highlight        {
+    color: white;
+    background-color: #49483e;
+    padding: 0.5em;
+    word-break: break-word;
+    white-space: break-spaces;
+}
+.c      { color: #75715e }      /* Comment          */
+.err    { color: #960050; background-color: #1e0010 } /* Error */
+.k      { color: #66d9ef }      /* Keyword          */
+.l      { color: #ae81ff }      /* Literal          */
+.n      { color: #f8f8f2 }      /* Name  */
+.o      { color: #f92672 }      /* Operator         */
+.p      { color: #f8f8f2 }      /* Punctuation      */
+.cm     { color: #75715e }      /* Comment.Multiline*/
+.cp     { color: #75715e }      /* Comment.Preproc  */
+.c1     { color: #75715e }      /* Comment.Single   */
+.cs     { color: #75715e }      /* Comment.Special  */
+.ge     { font-style: italic }  /* Generic.Emph     */
+.gs     { font-weight: bold }   /* Generic.Strong   */
+.kc     { color: #66d9ef }      /* Keyword.Constant */
+.kd     { color: #66d9ef }      /* Keyword.Declaration         */
+.kn     { color: #f92672 }      /* Keyword.Namespace*/
+.kp     { color: #66d9ef }      /* Keyword.Pseudo   */
+.kr     { color: #66d9ef }      /* Keyword.Reserved */
+.kt     { color: #66d9ef }      /* Keyword.Type     */
+.ld     { color: #e6db74 }      /* Literal.Date     */
+.m      { color: #ae81ff }      /* Literal.Number   */
+.s      { color: #e6db74 }      /* Literal.String   */
+.na     { color: #a6e22e }      /* Name.Attribute   */
+.nb     { color: #f8f8f2 }      /* Name.Builtin     */
+.nc     { color: #a6e22e }      /* Name.Class       */
+.no     { color: #66d9ef }      /* Name.Constant    */
+.nd     { color: #a6e22e }      /* Name.Decorator   */
+.ni     { color: #f8f8f2 }      /* Name.Entity      */
+.ne     { color: #a6e22e }      /* Name.Exception   */
+.nf     { color: #a6e22e }      /* Name.Function    */
+.nl     { color: #f8f8f2 }      /* Name.Label       */
+.nn     { color: #f8f8f2 }      /* Name.Namespace   */
+.nx     { color: #a6e22e }      /* Name.Other       */
+.py     { color: #f8f8f2 }      /* Name.Property    */
+.nt     { color: #f92672 }      /* Name.Tag         */
+.nv     { color: #f8f8f2 }      /* Name.Variable    */
+.ow     { color: #f92672 }      /* Operator.Word    */
+.w      { color: #f8f8f2 }      /* Text.Whitespace  */
+.mf     { color: #ae81ff }      /* Literal.Number.Float        */
+.mh     { color: #ae81ff }      /* Literal.Number.Hex          */
+.mi     { color: #ae81ff }      /* Literal.Number.Integer      */
+.mo     { color: #ae81ff }      /* Literal.Number.Oct          */
+.sb     { color: #e6db74 }      /* Literal.String.Backtick     */
+.sc     { color: #e6db74 }      /* Literal.String.Char         */
+.sd     { color: #e6db74 }      /* Literal.String.Doc          */
+.s2     { color: #e6db74 }      /* Literal.String.Double       */
+.se     { color: #ae81ff }      /* Literal.String.Escape       */
+.sh     { color: #e6db74 }      /* Literal.String.Heredoc      */
+.si     { color: #e6db74 }      /* Literal.String.Interpol     */
+.sx     { color: #e6db74 }      /* Literal.String.Other        */
+.sr     { color: #e6db74 }      /* Literal.String.Regex        */
+.s1     { color: #e6db74 }      /* Literal.String.Single       */
+.ss     { color: #e6db74 }      /* Literal.String.Symbol       */
+.bp     { color: #f8f8f2 }      /* Name.Builtin.Pseudo         */
+.vc     { color: #f8f8f2 }      /* Name.Variable.Class         */
+.vg     { color: #f8f8f2 }      /* Name.Variable.Global        */
+.vi     { color: #f8f8f2 }      /* Name.Variable.Instance      */
+.il     { color: #ae81ff }      /* Literal.Number.Integer.Long */
+.gd     { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+.gd .x  { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
diff --git a/index.html b/index.html
@@ -7,6 +7,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
 	<link rel="stylesheet" href="/main.css">
+	<link rel="stylesheet" href="/highlight.css">
 	<title>Immersive Web</title>
 </head>
 <body>

diff --git a/main.css b/main.css
@@ -85,6 +85,7 @@ footer {
 
 nav[role="tablist"], .tabs {
     grid-column: 1/-1;
+    max-width: 100%;
 }