From 9e0421c76e82132537c90e7da6e04885689c79de Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Wed, 31 Aug 2022 17:42:30 -0700
Subject: [PATCH] add animated popup example

---
 source | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/source b/source
index 1cf8c5d1f58..a773e0ba0fe 100644
--- a/source
+++ b/source
@@ -81197,6 +81197,25 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
    display:none and other display values is not possible.</p>
   </div>
 
+  <div class="example">
+   <p>The following is an example of an animated pop-up:</p>
+
+   <pre><code class="html">&lt;div popup="auto" id="foo">
+  A fancy pop-up with no Javascript
+&lt;/div>
+&lt;style>
+  [popup] {
+    opacity: 0;
+    transform: translate(-100px,100px);
+    transition: all 1.5s;
+  }
+  [popup]:open {
+    transform: translate(0,0);
+    opacity: 1;
+  }
+&lt;/style></code></pre>
+  </div>
+
   <p>Every element which is not in the <span data-x="attr-popup-none-state">no pop-up state</span>
   has the following members:</p>
   <ul>
@@ -81916,22 +81935,22 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
 
    <pre><code class="html">&lt;div popup=auto id="foo">
   This is a pop-up!
-&lt;div>
+&lt;/div>
 
 &lt;button popupshowtarget="foo">
   Show a pop-up
-&lt;button></code></pre>
+&lt;/button></code></pre>
 
    <p>The following shows how <code data-x="attr-popup-toggle-target">popuptoggletarget</code> can
    open and close a manual pop-up, which can't be closed with light dismiss:</p>
 
    <pre><code class="html">&lt;div popup=manual id="foo">
   This is a pop-up!
-&lt;div>
+&lt;/div>
 
 &lt;button popuptoggletarget="foo">
   Show or hide a pop-up
-&lt;button></code></pre>
+&lt;/button></code></pre>
   </div>
 
   <p>The <span>pop-up target attributes</span> allow certain types of buttons to show and hide