From 0e023a0322f5a07f8a9a10e80c5babb59a811f23 Mon Sep 17 00:00:00 2001
From: Mason Freed <masonf@chromium.org>
Date: Thu, 26 May 2022 14:53:02 -0700
Subject: [PATCH] Convert `popup=popup` to `popup=auto` or just `popup`

Per the [1] resolution, `popup=popup` has been renamed to `popup=auto`.
Additionally, per the [2] resolution, "boolean-like" behavior is also
supported, such that `<div popup>` means the same thing as `<div popup=auto>`. This CL implements both of these changes.

Note that this CL has one case that still needs to be fixed:
  <div id=foo popup=invalid>
  <script>
    foo.popup === null; // false, should be true
  </script>

To fix the above, I need to figure out how to specify the ReflectMissing
and ReflectInvalid values so that they mean "null".

[1] https://github.com/openui/open-ui/issues/491#issuecomment-1132165724
[2] https://github.com/openui/open-ui/issues/533#issuecomment-1138874090

Bug: 1307772
Change-Id: I6037c5322f7408ebd2c91690f89ecbc513c66bdb
---
 .../selectmenu-many-options.tentative.html    |  2 +-
 .../selectmenu-nested.tentative.html          |  4 +-
 ...trary-content-displayed-ref.tentative.html |  2 +-
 ...arbitrary-content-displayed.tentative.html |  2 +-
 .../selectmenu-parts-structure.tentative.html | 24 +++----
 ...nu-popup-position-with-zoom.tentative.html |  8 +--
 .../selectmenu-popup-position.tentative.html  |  8 +--
 .../selectmenu-popup.tentative.html           |  4 +-
 ...enu-shadow-root-replacement.tentative.html |  4 +-
 ...ctmenu-value-selectedOption.tentative.html |  2 +-
 .../popup-anchor-idl-property.tentative.html  |  2 +-
 .../popup-anchor-nesting.tentative.html       |  4 +-
 .../popup-attribute-basic.tentative.html      | 71 +++++++++++--------
 ...pup-backdrop-appearance-ref.tentative.html |  2 +-
 .../popup-backdrop-appearance.tentative.html  |  2 +-
 .../popups/popup-defaultopen-2.tentative.html |  4 +-
 .../popup-defaultopen-display.tentative.html  |  4 +-
 .../popups/popup-defaultopen.tentative.html   |  6 +-
 .../popups/popup-events.tentative.html        |  2 +-
 .../popups/popup-focus.tentative.html         | 36 +++++-----
 .../popup-hidden-display.tentative.html       |  2 +-
 .../popup-inside-display-none.tentative.html  |  2 +-
 .../popup-invoking-attribute.tentative.html   |  5 +-
 ...pup-light-dismiss-on-scroll.tentative.html |  4 +-
 .../popups/popup-light-dismiss.tentative.html | 28 ++++----
 ...opup-not-keyboard-focusable.tentative.html |  2 +-
 .../popups/popup-open-display.tentative.html  |  2 +-
 ...p-open-overflow-display-ref.tentative.html |  6 +-
 ...popup-open-overflow-display.tentative.html |  6 +-
 .../popups/popup-removal-2.tentative.html     |  2 +-
 .../popups/popup-removal.tentative.html       |  2 +-
 .../popups/popup-shadow-dom.tentative.html    | 14 ++--
 .../popup-stacking-context.tentative.html     |  2 +-
 .../popups/popup-stacking.tentative.html      | 32 ++++-----
 ...opup-top-layer-interactions.tentative.html |  2 +-
 .../popups/popup-types.tentative.html         |  8 +--
 36 files changed, 161 insertions(+), 151 deletions(-)

diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-many-options.tentative.html b/html/semantics/forms/the-selectmenu-element/selectmenu-many-options.tentative.html
index 2abb9d07e6863b..765845f0cb4df2 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-many-options.tentative.html
+++ b/html/semantics/forms/the-selectmenu-element/selectmenu-many-options.tentative.html
@@ -26,7 +26,7 @@
 </style>
 
 <selectmenu id="selectMenu0">
-  <div popup=popup slot="listbox" behavior="listbox" id="selectMenu0-popup">
+  <div popup slot="listbox" behavior="listbox" id="selectMenu0-popup">
     <option>bottom left</option>
     <option>two</option>
     <option>three</option>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-nested.tentative.html b/html/semantics/forms/the-selectmenu-element/selectmenu-nested.tentative.html
index fdbf50b93902db..bb80b706d054d3 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-nested.tentative.html
+++ b/html/semantics/forms/the-selectmenu-element/selectmenu-nested.tentative.html
@@ -8,7 +8,7 @@
 <script src="/resources/testdriver-vendor.js"></script>
 
 <selectmenu id="selectMenu0">
-  <div popup=popup slot="listbox" behavior="listbox">
+  <div popup slot="listbox" behavior="listbox">
     <selectmenu id="nested0">
       <option id="child1">one</option>
       <option id="child2">two</option>
@@ -18,7 +18,7 @@
 </selectmenu>
 
 <selectmenu id="selectMenu1">
-  <div popup=popup slot="listbox" behavior="listbox">
+  <div popup slot="listbox" behavior="listbox">
     <select>
       <option>one</option>
       <option>two</option>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-option-arbitrary-content-displayed-ref.tentative.html b/html/semantics/forms/the-selectmenu-element/selectmenu-option-arbitrary-content-displayed-ref.tentative.html
index f92786a82122ac..918ce36d2b53b3 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-option-arbitrary-content-displayed-ref.tentative.html
+++ b/html/semantics/forms/the-selectmenu-element/selectmenu-option-arbitrary-content-displayed-ref.tentative.html
@@ -4,7 +4,7 @@
 <link rel="stylesheet" href="/fonts/ahem.css">
 
 <selectmenu id="selectMenu0">
-  <div popup=popup slot="listbox" behavior="listbox">
+  <div popup slot="listbox" behavior="listbox">
     <option>
       option with image displayed
       <img src="/images/green-256x256.png">
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-option-arbitrary-content-displayed.tentative.html b/html/semantics/forms/the-selectmenu-element/selectmenu-option-arbitrary-content-displayed.tentative.html
index 047236bde27a4c..d32ea7c6d3606d 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-option-arbitrary-content-displayed.tentative.html
+++ b/html/semantics/forms/the-selectmenu-element/selectmenu-option-arbitrary-content-displayed.tentative.html
@@ -39,7 +39,7 @@
 </style>
 
 <selectmenu id="selectMenu0">
-  <div popup=popup slot="listbox" behavior="listbox">
+  <div popup slot="listbox" behavior="listbox">
     <option>
       option with image displayed
       <img src="/images/green-256x256.png">
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-parts-structure.tentative.html b/html/semantics/forms/the-selectmenu-element/selectmenu-parts-structure.tentative.html
index 927b45cdc15b35..b01c619a022c2a 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-parts-structure.tentative.html
+++ b/html/semantics/forms/the-selectmenu-element/selectmenu-parts-structure.tentative.html
@@ -9,7 +9,7 @@
 <script src="/resources/testdriver-vendor.js"></script>
 
 <selectmenu id="selectMenu0">
-  <div popup=popup slot="listbox" behavior="listbox">
+  <div popup slot="listbox" behavior="listbox">
     <option id="selectMenu0-child1">one</option>
     <option id="selectMenu0-child2">two</option>
     <div behavior="option" id="selectMenu0-child3">three</div>
@@ -18,7 +18,7 @@
 </selectmenu>
 
 <selectmenu id="selectMenu1">
-  <div popup=popup slot="listbox" behavior="listbox" id="selectMenu1-popup">
+  <div popup slot="listbox" behavior="listbox" id="selectMenu1-popup">
     <div behavior="button" id="selectMenu1-button">
       Custom button
     </div>
@@ -30,7 +30,7 @@
 <selectmenu id="selectMenu2">
   <div slot="button" behavior="button" id="selectMenu2-button">
     Custom button
-    <div popup=popup behavior="listbox" id="selectMenu2-popup">
+    <div popup behavior="listbox" id="selectMenu2-popup">
       <option>one</option>
       <option id="selectMenu2-child2">two</option>
     </div>
@@ -53,7 +53,7 @@
 <selectmenu id="selectMenu4">
   <div slot="button" behavior="button" id="selectMenu4-button0">button0</div>
   <div slot="listbox" id="selectMenu4-listbox-slot">
-    <div popup=popup behavior="listbox" id="selectMenu4-listbox0">
+    <div popup behavior="listbox" id="selectMenu4-listbox0">
       <option>one</option>
       <option id="selectMenu4-option2">two</option>
     </div>
@@ -72,7 +72,7 @@
 <!-- No associated JS test -- just don't crash when parsing! -->
 <selectmenu id="selectMenu6">
   <div slot="button"></div>
-  <div popup=popup slot="listbox" behavior="listbox"></div>
+  <div popup slot="listbox" behavior="listbox"></div>
 </selectmenu>
 
 <!-- No associated JS test -- just don't crash when parsing! -->
@@ -89,7 +89,7 @@
 
 <selectmenu id="selectMenu9">
   <div slot="listbox" id="selectMenu9-listbox-slot">
-    <div popup=popup behavior="listbox" id="selectMenu9-originalListbox">
+    <div popup behavior="listbox" id="selectMenu9-originalListbox">
       <option>one</option>
       <option id="selectMenu9-option2">two</option>
     </div>
@@ -103,7 +103,7 @@
 </selectmenu>
 
 <selectmenu id="selectMenu11">
-  <div popup=popup slot="listbox" behavior="listbox">
+  <div popup slot="listbox" behavior="listbox">
     <option>one</option>
   </div>
   <div slot="button" behavior="listbox" id="selectMenu11-button">Test</div>
@@ -114,7 +114,7 @@
     <div behavior="button" id="selectMenu12-button0">button0</div>
   </div>
   <div slot="listbox" id="selectMenu12-listbox-slot">
-    <div popup=popup behavior="listbox" id="selectMenu12-originalListbox">
+    <div popup behavior="listbox" id="selectMenu12-originalListbox">
       <option id="selectMenu12-option1">one</option>
       <option>two</option>
     </div>
@@ -131,12 +131,12 @@
   </div>
   <div slot="listbox" id="selectMenu13-listbox-slot">
     <div id="selectMenu13-removeContent-listbox">
-      <div popup=popup behavior="listbox" id="selectMenu13-originalListbox">
+      <div popup behavior="listbox" id="selectMenu13-originalListbox">
         <option id="selectMenu13-option1">one</option>
         <option id="selectMenu13-option2">two</option>
       </div>
     </div>
-    <div popup=popup behavior="listbox" id="selectMenu13-newListbox">
+    <div popup behavior="listbox" id="selectMenu13-newListbox">
       <option>three</option>
       <option id="selectMenu13-option4">four</option>
     </div>
@@ -313,7 +313,7 @@
     assert_equals(selectMenu.value, "one", "Initial value should be the first option");
 
     let newListbox = document.createElement("div");
-    newListbox.setAttribute("popup", "popup");
+    newListbox.setAttribute("popup", "auto");
     newListbox.setAttribute("behavior", "listbox");
     let newOption = document.createElement("option");
     newOption.innerText = "three";
@@ -402,7 +402,7 @@
     assert_false(selectMenu.open);
 
     let newListbox = document.createElement("div");
-    newListbox.setAttribute("popup", "popup");
+    newListbox.setAttribute("popup", "auto");
     newListbox.setAttribute("behavior", "listbox");
     let newOption = document.createElement("option");
     newOption.innerText = "three";
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-popup-position-with-zoom.tentative.html b/html/semantics/forms/the-selectmenu-element/selectmenu-popup-position-with-zoom.tentative.html
index 740be4bc76fbd8..faebbf571cdc85 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-popup-position-with-zoom.tentative.html
+++ b/html/semantics/forms/the-selectmenu-element/selectmenu-popup-position-with-zoom.tentative.html
@@ -48,7 +48,7 @@
 
 <selectmenu id="selectMenu0">
   <div slot="button" behavior="button" id="selectMenu0-button">Custom bottom left</div>
-  <div popup=popup slot="listbox" behavior="listbox" id="selectMenu0-popup">
+  <div popup slot="listbox" behavior="listbox" id="selectMenu0-popup">
     <option>bottom left</option>
     <option>two</option>
     <option>three</option>
@@ -58,7 +58,7 @@
 
 <selectmenu id="selectMenu1">
   <div slot="button" behavior="button" id="selectMenu1-button">Custom top left</div>
-  <div popup=popup slot="listbox" behavior="listbox" id="selectMenu1-popup">
+  <div popup slot="listbox" behavior="listbox" id="selectMenu1-popup">
     <option>top left</option>
     <option>two</option>
     <option>three</option>
@@ -67,7 +67,7 @@
 
 <selectmenu id="selectMenu2">
   <div slot="button" behavior="button" id="selectMenu2-button">Custom bottom right</div>
-  <div popup=popup slot="listbox" behavior="listbox" id="selectMenu2-popup">
+  <div popup slot="listbox" behavior="listbox" id="selectMenu2-popup">
     <option>bottom right</option>
     <option>two</option>
     <option>three</option>
@@ -76,7 +76,7 @@
 
 <selectmenu id="selectMenu3">
   <div slot="button" behavior="button" id="selectMenu3-button">Custom top right</div>
-  <div popup=popup slot="listbox" behavior="listbox" id="selectMenu3-popup">
+  <div popup slot="listbox" behavior="listbox" id="selectMenu3-popup">
     <option>top right</option>
     <option>two</option>
     <option>three</option>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-popup-position.tentative.html b/html/semantics/forms/the-selectmenu-element/selectmenu-popup-position.tentative.html
index 6ad7833046274a..acb661f9eb631d 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-popup-position.tentative.html
+++ b/html/semantics/forms/the-selectmenu-element/selectmenu-popup-position.tentative.html
@@ -35,7 +35,7 @@
 </style>
 
 <selectmenu id="selectMenu0">
-  <div popup=popup slot="listbox" behavior="listbox" id="selectMenu0-popup">
+  <div popup slot="listbox" behavior="listbox" id="selectMenu0-popup">
     <option>bottom left</option>
     <option>two</option>
     <option>three</option>
@@ -44,7 +44,7 @@
 <br>
 
 <selectmenu id="selectMenu1">
-  <div popup=popup slot="listbox" behavior="listbox" id="selectMenu1-popup">
+  <div popup slot="listbox" behavior="listbox" id="selectMenu1-popup">
     <option>top left</option>
     <option>two</option>
     <option>three</option>
@@ -52,7 +52,7 @@
 </selectmenu>
 
 <selectmenu id="selectMenu2">
-  <div popup=popup slot="listbox" behavior="listbox" id="selectMenu2-popup">
+  <div popup slot="listbox" behavior="listbox" id="selectMenu2-popup">
     <option>bottom right</option>
     <option>two</option>
     <option>three</option>
@@ -60,7 +60,7 @@
 </selectmenu>
 
 <selectmenu id="selectMenu3">
-  <div popup=popup slot="listbox" behavior="listbox" id="selectMenu3-popup">
+  <div popup slot="listbox" behavior="listbox" id="selectMenu3-popup">
     <option>top right</option>
     <option>two</option>
     <option>three</option>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-popup.tentative.html b/html/semantics/forms/the-selectmenu-element/selectmenu-popup.tentative.html
index d8abcb72d5a629..96288838c78968 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-popup.tentative.html
+++ b/html/semantics/forms/the-selectmenu-element/selectmenu-popup.tentative.html
@@ -18,7 +18,7 @@
   <div slot="button" behavior="button" class="button">
     Custom button
   </div>
-  <div popup=popup slot="listbox" behavior="listbox">
+  <div popup slot="listbox" behavior="listbox">
     <option>one</option>
     <option class="child2">two</option>
     <option class="child3">three</option>
@@ -32,7 +32,7 @@
 
 <selectmenu id="selectMenu3">
   <div slot="listbox">
-    <div popup=popup behavior="listbox" id="selectMenu3-listbox">
+    <div popup behavior="listbox" id="selectMenu3-listbox">
       <option>one</option>
     </div>
   </div>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-shadow-root-replacement.tentative.html b/html/semantics/forms/the-selectmenu-element/selectmenu-shadow-root-replacement.tentative.html
index cad488fb41e584..b505e58ee2837b 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-shadow-root-replacement.tentative.html
+++ b/html/semantics/forms/the-selectmenu-element/selectmenu-shadow-root-replacement.tentative.html
@@ -12,7 +12,7 @@
 <selectmenu id="selectmenu1">
   <template shadowroot=open>
     <button behavior="button">Custom button</button>
-    <div popup=popup behavior="listbox">
+    <div popup behavior="listbox">
       <slot></slot>
     </div>
   </template>
@@ -58,7 +58,7 @@
       </style>
       <button behavior="button">Open select!</button>
       <div id="value" behavior="selected-value"></div>
-      <div popup=popup behavior="listbox">
+      <div popup behavior="listbox">
         <input type="text" placeholder="Filter options">
         <option>Thing 1</option>
         <option>Thing 2</option>
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-value-selectedOption.tentative.html b/html/semantics/forms/the-selectmenu-element/selectmenu-value-selectedOption.tentative.html
index f477ddb90dda9a..b131559d032beb 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-value-selectedOption.tentative.html
+++ b/html/semantics/forms/the-selectmenu-element/selectmenu-value-selectedOption.tentative.html
@@ -40,7 +40,7 @@
   <div slot="button" behavior="button">
     <div behavior="selected-value" id="selectMenu5-custom-selected-value">Default custom selected-value text</div>
   </div>
-  <div popup=popup slot="listbox" behavior="listbox">
+  <div popup slot="listbox" behavior="listbox">
     <option id="selectMenu5-option1">one</option>
     <option id="selectMenu5-option2">two</option>
   </div>
diff --git a/html/semantics/popups/popup-anchor-idl-property.tentative.html b/html/semantics/popups/popup-anchor-idl-property.tentative.html
index e5d9ca8c486e7b..fa4441d8bcdf1b 100644
--- a/html/semantics/popups/popup-anchor-idl-property.tentative.html
+++ b/html/semantics/popups/popup-anchor-idl-property.tentative.html
@@ -6,7 +6,7 @@
 <script src="/resources/testharnessreport.js"></script>
 
 <button id=b1>This is an anchor button</button>
-<div popup=popup id=p1 anchor=b1>This is a popup</div>
+<div popup id=p1 anchor=b1>This is a popup</div>
 <button id=b2 popup=p1>This button invokes the popup but isn't an anchor</button>
 
 <script>
diff --git a/html/semantics/popups/popup-anchor-nesting.tentative.html b/html/semantics/popups/popup-anchor-nesting.tentative.html
index d7e5784ba4d6ae..b4d101a52d8b06 100644
--- a/html/semantics/popups/popup-anchor-nesting.tentative.html
+++ b/html/semantics/popups/popup-anchor-nesting.tentative.html
@@ -15,11 +15,11 @@
      which contains a separate popup (p2) which is anchored
      by a separate anchor (b2). -->
 <button id=b1 onclick='p1.showPopup()'>Popup 1
-  <div popup=popup id=p2 anchor=b2>
+  <div popup id=p2 anchor=b2>
     <span id=inside2>Inside popup 2</span>
   </div>
 </button>
-<div popup=popup id=p1 anchor=b1>This is popup 1</div>
+<div popup id=p1 anchor=b1>This is popup 1</div>
 <button id=b2 onclick='p2.showPopup()'>Popup 2</button>
 
 <style>
diff --git a/html/semantics/popups/popup-attribute-basic.tentative.html b/html/semantics/popups/popup-attribute-basic.tentative.html
index 9d74476d4e1b88..ba4e1a83f215b9 100644
--- a/html/semantics/popups/popup-attribute-basic.tentative.html
+++ b/html/semantics/popups/popup-attribute-basic.tentative.html
@@ -6,15 +6,17 @@
 <script src="/resources/testharnessreport.js"></script>
 
 <div id=popups>
-  <div popup=popup>Popup</div>
+  <div popup id=boolean>Popup</div>
+  <div popup="">Popup</div>
+  <div popup=auto>Popup</div>
   <div popup=hint>Popup</div>
   <div popup=async>Popup</div>
 </div>
 
 <div id=nonpopups>
   <div>Non-popup</div>
+  <div popup=popup>Non-popup</div>
   <div popup=invalid>Non-popup</div>
-  <div popup>Non-popup</div>
 </div>
 
 <script>
@@ -51,56 +53,65 @@
     assert_true(popupVisible(nonPopup, /*isPopup*/false));
   }
 
-  const popups = document.getElementById('popups').children;
-  for(let i=0;i<popups.length;++i) {
-    const popup = popups[i];
+  Array.from(document.getElementById('popups').children).forEach(popup => {
     test(() => {
       assertIsFunctionalPopup(popup);
-    }, `The .showPopup() and .hidePopup() work on a popup, case #${i}.`);
-  }
+    }, `The .showPopup() and .hidePopup() work on a popup, for ${popup.outerHTML}.`);
+  });
 
-  const nonPopups = document.getElementById('nonpopups').children;
-  for(let i=0;i<nonPopups.length;++i) {
-    const nonPopup = nonPopups[i];
+  Array.from(document.getElementById('nonpopups').children).forEach(nonPopup => {
     test(() => {
       assertNotAPopup(nonPopup);
-    }, `The .showPopup() and .hidePopup() do NOT work on elements without a 'popup' attribute, case #${i}.`);
-  }
+    }, `The .showPopup() and .hidePopup() do NOT work on elements without a 'popup' attribute, ${nonPopup.outerHTML}.`);
+  });
 
   function createPopup() {
     const popup = document.createElement('div');
     document.body.appendChild(popup);
-    popup.setAttribute('popup','popup');
+    popup.setAttribute('popup','auto');
     return popup;
   }
 
   test(() => {
+    // YOU CAN set the attribute to anything.
+    // Setting IDL to something sets the content attribute to exactly that, always.
+    // GETTING the IDL only gets valid values.
     const popup = createPopup();
-    assert_equals(popup.popup,'popup');
+    assert_equals(popup.popup,'auto');
     popup.setAttribute('popup','hint');
     assert_equals(popup.popup,'hint');
-    popup.setAttribute('popup','invalid');
-    assert_equals(popup.popup,'','Invalid values should reflect as empty string');
     popup.setAttribute('popup','HiNt');
-    assert_equals(popup.popup,'hint','Case is normalized');
+    assert_equals(popup.popup,'hint','Case is normalized in IDL');
+    assert_equals(popup.getAttribute('popup'),'HiNt','Case is *not* normalized/changed in the content attribute');
+    popup.popup='hInT';
+    assert_equals(popup.popup,'hint','Case is normalized in IDL');
+    assert_equals(popup.getAttribute('popup'),'hInT','Value set from IDL is propagated exactly to the content attribute');
+    popup.setAttribute('popup','invalid');
+    assert_equals(popup.popup,null,'Invalid values should reflect as null');
     popup.removeAttribute('popup');
-    assert_equals(popup.popup,'','No value should reflect as empty string');
+    assert_equals(popup.popup,null,'No value should reflect as null');
     popup.popup='hint';
     assert_equals(popup.getAttribute('popup'),'hint');
-    popup.popup='popup';
-    assert_equals(popup.getAttribute('popup'),'popup');
+    popup.popup='auto';
+    assert_equals(popup.getAttribute('popup'),'auto');
+    popup.popup='';
+    assert_equals(popup.getAttribute('popup'),'');
+    assert_equals(popup.popup,'auto');
+    popup.popup='AuTo';
+    assert_equals(popup.getAttribute('popup'),'AuTo');
+    assert_equals(popup.popup,'auto');
     popup.popup='invalid';
     assert_equals(popup.getAttribute('popup'),'invalid','IDL setter allows any value');
-    assert_equals(popup.popup,'','but IDL getter does not re-reflect invalid values');
+    assert_equals(popup.popup,null,'but IDL getter does not re-reflect invalid values');
     popup.popup='';
-    assert_equals(popup.getAttribute('popup'),'','Empty should map to empty');
-    assert_equals(popup.popup,'','Empty should map to empty in IDL');
+    assert_equals(popup.getAttribute('popup'),'','IDL setter propagates exactly');
+    assert_equals(popup.popup,'auto','Empty should map to auto in IDL');
     popup.popup=null;
     assert_equals(popup.getAttribute('popup'),'null','Attribute for "null" should still get set');
-    assert_equals(popup.popup,'','Null should map to empty in IDL');
+    assert_equals(popup.popup,null,'Invalid values should map to null in IDL');
     popup.popup=undefined;
     assert_equals(popup.getAttribute('popup'),'undefined','Attribute for "undefined" should still get set');
-    assert_equals(popup.popup,'','undefined should map to empty in IDL');
+    assert_equals(popup.popup,null,'undefined should map to null in IDL');
   },'IDL attribute reflection');
 
   test(() => {
@@ -108,15 +119,15 @@
     assertIsFunctionalPopup(popup);
     popup.removeAttribute('popup');
     assertNotAPopup(popup);
-    popup.setAttribute('popup','PoPuP');
+    popup.setAttribute('popup','AuTo');
     assertIsFunctionalPopup(popup);
     popup.removeAttribute('popup');
-    popup.setAttribute('PoPuP','PoPuP');
+    popup.setAttribute('PoPuP','AuTo');
     assertIsFunctionalPopup(popup);
     // Via IDL also
-    popup.popup = 'popup';
+    popup.popup = 'auto';
     assertIsFunctionalPopup(popup);
-    popup.popup = 'PoPuP';
+    popup.popup = 'aUtO';
     assertIsFunctionalPopup(popup);
     popup.popup = 'invalid';
     assertNotAPopup(popup);
@@ -152,7 +163,7 @@
   },'Changing attribute values should close open popups');
 
 
-  ["popup","hint","async"].forEach(type => {
+  ["auto","hint","async"].forEach(type => {
     test(() => {
       const popup = createPopup();
       popup.setAttribute('popup',type);
diff --git a/html/semantics/popups/popup-backdrop-appearance-ref.tentative.html b/html/semantics/popups/popup-backdrop-appearance-ref.tentative.html
index 9ae95c2f8ffd2d..0327f3886fbcee 100644
--- a/html/semantics/popups/popup-backdrop-appearance-ref.tentative.html
+++ b/html/semantics/popups/popup-backdrop-appearance-ref.tentative.html
@@ -38,7 +38,7 @@
 </style>
 <p>Test for [popup]::backdrop presence and stacking order. The test passes
   if there are 3 stacked boxes, with the brightest green on top.</p>
-<div popup=popup id=bottom>Bottom
+<div popup id=bottom>Bottom
   <div popup=hint id=middle>Middle
     <div popup=async id=top>Top</div>
   </div>
diff --git a/html/semantics/popups/popup-backdrop-appearance.tentative.html b/html/semantics/popups/popup-backdrop-appearance.tentative.html
index 7dcd401b4c9238..0b348f85d0103c 100644
--- a/html/semantics/popups/popup-backdrop-appearance.tentative.html
+++ b/html/semantics/popups/popup-backdrop-appearance.tentative.html
@@ -39,7 +39,7 @@
 </style>
 <p>Test for [popup]::backdrop presence and stacking order. The test passes
   if there are 3 stacked boxes, with the brightest green on top.</p>
-<div popup=popup id=bottom>Bottom
+<div popup id=bottom>Bottom
   <div popup=hint id=middle>Middle
     <div popup=async id=top>Top</div>
   </div>
diff --git a/html/semantics/popups/popup-defaultopen-2.tentative.html b/html/semantics/popups/popup-defaultopen-2.tentative.html
index 1e54e469ae8410..d0bdf4402f0ec3 100644
--- a/html/semantics/popups/popup-defaultopen-2.tentative.html
+++ b/html/semantics/popups/popup-defaultopen-2.tentative.html
@@ -5,9 +5,9 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 
-<div popup=popup id=p1 defaultopen>
+<div popup id=p1 defaultopen>
   Outer popup
-  <div popup=popup id=p2 defaultopen>
+  <div popup id=p2 defaultopen>
     Inner popup
   </div>
 </div>
diff --git a/html/semantics/popups/popup-defaultopen-display.tentative.html b/html/semantics/popups/popup-defaultopen-display.tentative.html
index 179e07189b31ec..562137ab56bd59 100644
--- a/html/semantics/popups/popup-defaultopen-display.tentative.html
+++ b/html/semantics/popups/popup-defaultopen-display.tentative.html
@@ -4,8 +4,8 @@
 <link rel=help href="https://open-ui.org/components/popup.research.explainer">
 <link rel=match href="popup-defaultopen-display-ref.tentative.html">
 
-<div popup=popup id=p1 defaultopen>This is a popup, which should be open upon load</div>
-<div popup=popup id=p2 defaultopen>This is a second popup with defaultopen, which should NOT be open upon load</div>
+<div popup id=p1 defaultopen>This is a popup, which should be open upon load</div>
+<div popup id=p2 defaultopen>This is a second popup with defaultopen, which should NOT be open upon load</div>
 
 <style>
   [popup] {
diff --git a/html/semantics/popups/popup-defaultopen.tentative.html b/html/semantics/popups/popup-defaultopen.tentative.html
index 50bf825d8f2672..5284ad56a5740a 100644
--- a/html/semantics/popups/popup-defaultopen.tentative.html
+++ b/html/semantics/popups/popup-defaultopen.tentative.html
@@ -5,11 +5,11 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 
-<div popup=popup id=p1 defaultopen>This is a popup, which should be open upon load</div>
+<div popup id=p1 defaultopen>This is a popup, which should be open upon load</div>
 <script></script> <!-- Possibly yield the parser, just to double-check -->
-<div popup=popup id=p2 defaultopen>This is a second popup with defaultopen, which should NOT be open upon load</div>
+<div popup id=p2 defaultopen>This is a second popup with defaultopen, which should NOT be open upon load</div>
 <div popup=hint id=p2b defaultopen>This is a hint popup with defaultopen, which should NOT be open upon load</div>
-<div popup=popup id=p3>Also not visible</div>
+<div popup id=p3>Also not visible</div>
 
 <div popup=async id=p4 defaultopen>This is an async popup with defaultopen, which should be open upon load</div>
 <div popup=async id=p5 defaultopen>This is an async popup with defaultopen, which should be open upon load</div>
diff --git a/html/semantics/popups/popup-events.tentative.html b/html/semantics/popups/popup-events.tentative.html
index 9390ea3c40b585..2d8498dff664fe 100644
--- a/html/semantics/popups/popup-events.tentative.html
+++ b/html/semantics/popups/popup-events.tentative.html
@@ -6,7 +6,7 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 
-<div popup=popup>Popup</div>
+<div popup>Popup</div>
 
 <script>
 function waitUntilChange(fn) {
diff --git a/html/semantics/popups/popup-focus.tentative.html b/html/semantics/popups/popup-focus.tentative.html
index 6fccb0f13bdb48..60e374a5786926 100644
--- a/html/semantics/popups/popup-focus.tentative.html
+++ b/html/semantics/popups/popup-focus.tentative.html
@@ -11,79 +11,79 @@
 <script src="/resources/testdriver-vendor.js"></script>
 <script src="resources/popup-utils.js"></script>
 
-<div popup=popup data-test='default behavior - popup is not focused' data-no-focus>
+<div popup data-test='default behavior - popup is not focused' data-no-focus>
   <p>This is a popup</p>
   <button>first button</button>
 </div>
 
-<div popup=popup data-test='autofocus popup' autofocus tabindex=-1 class=should-be-focused>
+<div popup data-test='autofocus popup' autofocus tabindex=-1 class=should-be-focused>
   <p>This is a popup</p>
 </div>
 
-<div popup=popup data-test='autofocus empty popup' autofocus tabindex=-1 class=should-be-focused></div>
+<div popup data-test='autofocus empty popup' autofocus tabindex=-1 class=should-be-focused></div>
 
-<div popup=popup data-test='autofocus popup with button' autofocus tabindex=-1 class=should-be-focused>
+<div popup data-test='autofocus popup with button' autofocus tabindex=-1 class=should-be-focused>
   <p>This is a popup</p>
   <button>button</button>
 </div>
 
-<div popup=popup data-test='autofocus child'>
+<div popup data-test='autofocus child'>
   <p>This is a popup</p>
   <button autofocus class=should-be-focused>autofocus button</button>
 </div>
 
-<div popup=popup data-test='autofocus on tabindex=0 element'>
+<div popup data-test='autofocus on tabindex=0 element'>
   <p autofocus tabindex=0 class=should-be-focused>This is a popup with autofocus on a tabindex=0 element</p>
   <button>button</button>
 </div>
 
-<div popup=popup data-test='autofocus multiple children'>
+<div popup data-test='autofocus multiple children'>
   <p>This is a popup</p>
   <button autofocus class=should-be-focused>autofocus button</button>
   <button autofocus>second autofocus button</button>
 </div>
 
-<div popup=popup autofocus tabindex=-1 data-test='autofocus popup and multiple autofocus children' class=should-be-focused>
+<div popup autofocus tabindex=-1 data-test='autofocus popup and multiple autofocus children' class=should-be-focused>
   <p>This is a popup</p>
   <button autofocus>autofocus button</button>
   <button autofocus>second autofocus button</button>
 </div>
 
-<div popup=popup delegatesfocus data-test='delegatesfocus popup'>
+<div popup delegatesfocus data-test='delegatesfocus popup'>
   <p>This is a popup</p>
   <button class=should-be-focused>first button should be focused</button>
   <button>second button</button>
 </div>
 
-<div popup=popup delegatesfocus data-test='delegatesfocus takes precedence over autofocus'>
+<div popup delegatesfocus data-test='delegatesfocus takes precedence over autofocus'>
   <p>This is a popup</p>
   <button class=should-be-focused>first button</button>
   <button autofocus>autofocus button should NOT be focused</button>
 </div>
 
-<div popup=popup delegatesfocus autofocus data-test='delegatesfocus takes precedence over autofocus 2'>
+<div popup delegatesfocus autofocus data-test='delegatesfocus takes precedence over autofocus 2'>
   <p>This is a popup</p>
   <button class=should-be-focused>first button</button>
   <button>autofocus button should NOT be focused</button>
 </div>
 
-<div popup=popup delegatesfocus data-test='delegatesfocus on empty popup has no effect' data-no-focus></div>
+<div popup delegatesfocus data-test='delegatesfocus on empty popup has no effect' data-no-focus></div>
 
-<div popup=popup data-test='delegatesfocus on child has no effect' data-no-focus>
+<div popup data-test='delegatesfocus on child has no effect' data-no-focus>
   <p>This is a popup</p>
   <button delegatesfocus>first button</button>
 </div>
 
-<div popup=popup delegatesfocus data-test='delegatesfocus skips contained popups'>
+<div popup delegatesfocus data-test='delegatesfocus skips contained popups'>
   <p>This is a popup</p>
-  <div popup=popup>
+  <div popup>
     <button>Contained popup button</button>
   </div>
   <button class=should-be-focused>first button</button>
   <button>autofocus button should NOT be focused</button>
 </div>
 
-<div popup=popup delegatesfocus data-test='delegatesfocus skips contained dialogs'>
+<div popup delegatesfocus data-test='delegatesfocus skips contained dialogs'>
   <p>This is a popup</p>
   <dialog>
     <button>Contained dialog button</button>
@@ -154,11 +154,11 @@
       priorFocus.focus();
       popup.showPopup();
       assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popup.showPopup()`);
-      assert_equals(popup.popup, 'popup', 'All popups in this test should start as popup=popup');
+      assert_equals(popup.popup, 'auto', 'All popups in this test should start as popup=auto');
       popup.popup = 'hint';
       assert_false(popup.matches(':popup-open'), 'Changing the popup type should hide the popup');
       assert_equals(document.activeElement, priorFocus, 'prior element should get focus when the type is changed');
-      popup.popup = 'popup';
+      popup.popup = 'auto';
 
       // Remove from the document:
       priorFocus.focus();
diff --git a/html/semantics/popups/popup-hidden-display.tentative.html b/html/semantics/popups/popup-hidden-display.tentative.html
index 6ca84dc106be7c..2bd2dc473894bd 100644
--- a/html/semantics/popups/popup-hidden-display.tentative.html
+++ b/html/semantics/popups/popup-hidden-display.tentative.html
@@ -4,7 +4,7 @@
 <link rel=help href="https://open-ui.org/components/popup.research.explainer">
 <link rel=match href="popup-hidden-display-ref.tentative.html">
 
-<div popup=popup>This content should be visible</div>
+<div popup>This content should be visible</div>
 
 <style>
   [popup] {
diff --git a/html/semantics/popups/popup-inside-display-none.tentative.html b/html/semantics/popups/popup-inside-display-none.tentative.html
index d72f0aa50a523a..fb480538a62075 100644
--- a/html/semantics/popups/popup-inside-display-none.tentative.html
+++ b/html/semantics/popups/popup-inside-display-none.tentative.html
@@ -7,7 +7,7 @@
 No popup should be displayed here.<p>
 
 <div style="display:none">
-    <div popup=popup>This content should be hidden</div>
+    <div popup>This content should be hidden</div>
 </div>
 
 <script>
diff --git a/html/semantics/popups/popup-invoking-attribute.tentative.html b/html/semantics/popups/popup-invoking-attribute.tentative.html
index 49056f8b77ff9c..0edafe7aa6ee09 100644
--- a/html/semantics/popups/popup-invoking-attribute.tentative.html
+++ b/html/semantics/popups/popup-invoking-attribute.tentative.html
@@ -11,7 +11,6 @@
 <script src="/resources/testdriver-vendor.js"></script>
 
 <body>
-<iframe name="target"></iframe>
 <script>
 const buttonLogic = (t,s,h) => {
   // This mimics the expected logic for button invokers:
@@ -108,7 +107,7 @@
     supported: false,
   },
 ];
-["popup","hint","async"].forEach(type => {
+["auto","hint","async"].forEach(type => {
   invokers.forEach(testcase => {
     let t_set = [1], s_set = [1], h_set = [1];
     if (testcase.supported) {
@@ -186,7 +185,7 @@
 
 
 <button togglepopup=p1>Toggle Popup 1</button>
-<div popup=popup id=p1 style="border: 5px solid red;top: 100px;left: 100px;">This is popup #1</div>
+<div popup id=p1 style="border: 5px solid red;top: 100px;left: 100px;">This is popup #1</div>
 
 <script>
 function clickOn(element) {
diff --git a/html/semantics/popups/popup-light-dismiss-on-scroll.tentative.html b/html/semantics/popups/popup-light-dismiss-on-scroll.tentative.html
index bafa50dae36330..a816c59cbc0f92 100644
--- a/html/semantics/popups/popup-light-dismiss-on-scroll.tentative.html
+++ b/html/semantics/popups/popup-light-dismiss-on-scroll.tentative.html
@@ -16,9 +16,9 @@
   quis. Tortor dignissim convallis aenean et. Eu mi bibendum neque egestas congue quisque
 </div>
 
-<div popup=popup id=popup1>
+<div popup id=popup1>
   This is popup 1
-  <div popup=popup id=popup2 anchor=anchor>
+  <div popup id=popup2 anchor=anchor>
     This is popup 2
   </div>
 </div>
diff --git a/html/semantics/popups/popup-light-dismiss.tentative.html b/html/semantics/popups/popup-light-dismiss.tentative.html
index e3c05fa530d3f6..47cea15c13f44c 100644
--- a/html/semantics/popups/popup-light-dismiss.tentative.html
+++ b/html/semantics/popups/popup-light-dismiss.tentative.html
@@ -14,12 +14,12 @@
 <button id=b1s showpopup='p1'>Popup 1</button>
 <button id=p1anchor>Popup1 anchor (no action)</button>
 <span id=outside>Outside all popups</span>
-<div popup=popup id=p1 anchor=p1anchor>
+<div popup id=p1 anchor=p1anchor>
   <span id=inside1>Inside popup 1</span>
   <button id=b2 togglepopup='p2'>Popup 2</button>
   <span id=inside1after>Inside popup 1 after button</span>
 </div>
-<div popup=popup id=p2 anchor=b2>
+<div popup id=p2 anchor=b2>
   <span id=inside2>Inside popup 2</span>
 </div>
 <button id=after_p1>Next control after popup1</button>
@@ -180,11 +180,11 @@
 </script>
 
 <button id=b3 togglepopup=p3>Popup 3 - button 3
-  <div popup=popup id=p4>Inside popup 4</div>
+  <div popup id=p4>Inside popup 4</div>
 </button>
-<div popup=popup id=p3>Inside popup 3</div>
+<div popup id=p3>Inside popup 3</div>
 <button id=b4 togglepopup=p3>Popup 3 - button 4
-  <div popup=popup id=p5>Inside popup 5</div>
+  <div popup id=p5>Inside popup 5</div>
 </button>
 <style>
   #p3 {top:100px;}
@@ -223,7 +223,7 @@
   },'An invoking element that was not used to invoke the popup can still be part of the ancestor chain');
 </script>
 
-<div popup=popup id=p6>Inside popup 6
+<div popup id=p6>Inside popup 6
   <div style="height:2000px;background:lightgreen"></div>
   Bottom of popup6
 </div>
@@ -252,7 +252,7 @@
 <my-element id="myElement">
   <template shadowroot="open">
     <button id=b7 onclick='showPopup7()'>Popup7</button>
-    <div popup=popup id=p7 anchor=b7 style="top: 100px;">
+    <div popup id=p7 anchor=b7 style="top: 100px;">
       <p>Popup content.</p>
       <input id="inside7" type="text" placeholder="some text">
     </div>
@@ -282,7 +282,7 @@
   },'Clicking outside a shadow DOM popup should close that popup');
 </script>
 
-<div popup=popup id=p8 anchor=p8anchor>
+<div popup id=p8 anchor=p8anchor>
   <button>Button</button>
   <span id=inside8after>Inside popup 8 after button</span>
 </div>
@@ -303,7 +303,7 @@
   },'Moving focus back to the anchor element should not dismiss the popup');
 </script>
 
-<div popup=popup id=p9>
+<div popup id=p9>
   <button>Button</button>
   <span id=inside9after>Inside popup 9 after button</span>
 </div>
@@ -339,16 +339,16 @@
 
 
 <!-- Convoluted ancestor relationship -->
-<div popup=popup id=convoluted_p1>Popup 1
+<div popup id=convoluted_p1>Popup 1
   <div id=convoluted_anchor>Anchor
     <button togglepopup=convoluted_p2>Open Popup 2</button>
-    <div popup=popup id=convoluted_p4><p>Popup 4</p></div>
+    <div popup id=convoluted_p4><p>Popup 4</p></div>
   </div>
 </div>
-<div popup=popup id=convoluted_p2>Popup 2
+<div popup id=convoluted_p2>Popup 2
   <button togglepopup=convoluted_p3>Open Popup 3</button>
 </div>
-<div popup=popup id=convoluted_p3 anchor=convoluted_anchor>Popup 3
+<div popup id=convoluted_p3 anchor=convoluted_anchor>Popup 3
   <button togglepopup=convoluted_p4>Open Popup 4</button>
 </div>
 <button onclick="convoluted_p1.showPopup()">Open convoluted popup</button>
@@ -414,7 +414,7 @@
 </script>
 
 
-<div popup=popup id=p10>Popup</div>
+<div popup id=p10>Popup</div>
 <div popup=hint id=p11>Hint</div>
 <div popup=async id=p12>Async</div>
 <style>
diff --git a/html/semantics/popups/popup-not-keyboard-focusable.tentative.html b/html/semantics/popups/popup-not-keyboard-focusable.tentative.html
index 39d98396c89409..035317e482606c 100644
--- a/html/semantics/popups/popup-not-keyboard-focusable.tentative.html
+++ b/html/semantics/popups/popup-not-keyboard-focusable.tentative.html
@@ -10,7 +10,7 @@
 <script src="/resources/testdriver-vendor.js"></script>
 
 <button id=firstfocus>Button 1</button>
-<div popup=popup>
+<div popup>
   <p>This is a popup without a focusable element</p>
 </div>
 <button id=secondfocus>Button 2</button>
diff --git a/html/semantics/popups/popup-open-display.tentative.html b/html/semantics/popups/popup-open-display.tentative.html
index c14997be4ffd97..674af1902d943d 100644
--- a/html/semantics/popups/popup-open-display.tentative.html
+++ b/html/semantics/popups/popup-open-display.tentative.html
@@ -4,7 +4,7 @@
 <link rel=help href="https://open-ui.org/components/popup.research.explainer">
 <link rel=match href="popup-open-display-ref.tentative.html">
 
-<div popup=popup>This is a popup</div>
+<div popup>This is a popup</div>
 <div class=topmost></div>
 
 <style>
diff --git a/html/semantics/popups/popup-open-overflow-display-ref.tentative.html b/html/semantics/popups/popup-open-overflow-display-ref.tentative.html
index bc52cf54555900..7a350ea281dc68 100644
--- a/html/semantics/popups/popup-open-overflow-display-ref.tentative.html
+++ b/html/semantics/popups/popup-open-overflow-display-ref.tentative.html
@@ -2,9 +2,9 @@
 <meta charset="utf-8">
 <link rel=author href="mailto:masonf@chromium.org">
 
-<div popup=popup id=p1>This is popup 1<div id=anchor2></div></div>
-<div popup=popup id=p2 anchor=anchor2>This is popup 2<div id=anchor3></div></div>
-<div popup=popup id=p3 anchor=anchor3>This is popup 3</div>
+<div popup id=p1>This is popup 1<div id=anchor2></div></div>
+<div popup id=p2 anchor=anchor2>This is popup 2<div id=anchor3></div></div>
+<div popup id=p3 anchor=anchor3>This is popup 3</div>
 
 <style>
   #p2 {
diff --git a/html/semantics/popups/popup-open-overflow-display.tentative.html b/html/semantics/popups/popup-open-overflow-display.tentative.html
index 5d4a13987e395b..32f42dfcea2f04 100644
--- a/html/semantics/popups/popup-open-overflow-display.tentative.html
+++ b/html/semantics/popups/popup-open-overflow-display.tentative.html
@@ -5,9 +5,9 @@
 <link rel=match href="popup-open-overflow-display-ref.tentative.html">
 
 <div id=container>
-  <div popup=popup id=p1>This is popup 1<div id=anchor2></div></div>
-  <div popup=popup id=p2 anchor=anchor2>This is popup 2<div id=anchor3></div></div>
-  <div popup=popup id=p3 anchor=anchor3>This is popup 3</div>
+  <div popup id=p1>This is popup 1<div id=anchor2></div></div>
+  <div popup id=p2 anchor=anchor2>This is popup 2<div id=anchor3></div></div>
+  <div popup id=p3 anchor=anchor3>This is popup 3</div>
 </div>
 
 <style>
diff --git a/html/semantics/popups/popup-removal-2.tentative.html b/html/semantics/popups/popup-removal-2.tentative.html
index 0204c3c913412d..94641aa9afa0ed 100644
--- a/html/semantics/popups/popup-removal-2.tentative.html
+++ b/html/semantics/popups/popup-removal-2.tentative.html
@@ -6,7 +6,7 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 
-<iframe id=frame1 srcdoc="<div popup=popup id=popup>Popup</div>"></iframe>
+<iframe id=frame1 srcdoc="<div popup id=popup>Popup</div>"></iframe>
 <iframe id=frame2></iframe>
 
 <script>
diff --git a/html/semantics/popups/popup-removal.tentative.html b/html/semantics/popups/popup-removal.tentative.html
index 02201dc2af8386..000cc7ffdd9b96 100644
--- a/html/semantics/popups/popup-removal.tentative.html
+++ b/html/semantics/popups/popup-removal.tentative.html
@@ -6,7 +6,7 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 
-<div popup=popup id=popup>Popup</div>
+<div popup id=popup>Popup</div>
 
 <script>
 promise_test(async t => {
diff --git a/html/semantics/popups/popup-shadow-dom.tentative.html b/html/semantics/popups/popup-shadow-dom.tentative.html
index 922bf1630f4a0c..b174484378992f 100644
--- a/html/semantics/popups/popup-shadow-dom.tentative.html
+++ b/html/semantics/popups/popup-shadow-dom.tentative.html
@@ -47,7 +47,7 @@
   <button onclick='showPopup("test1",0)'>Test1 Popup</button>
   <my-element>
     <template shadowroot=open>
-      <div popup=popup>
+      <div popup>
         <p>This should show, even though it is inside shadow DOM.</p>
       </div>
     </template>
@@ -66,13 +66,13 @@
 
 <div id=test2>
   <button id=t2b1 onclick='showPopup("test2",0)'>Test 2 Popup 1</button>
-  <div popup=popup anchor=t2b1 style="top: 400px;">
+  <div popup anchor=t2b1 style="top: 400px;">
     <p>Popup 1</p>
     <button id=t2b2 onclick='showPopup("test2",1)'>Test 2 Popup 2</button>
   </div>
   <my-element>
     <template shadowroot=open>
-      <div popup=popup anchor=t2b2 style="top: 400px;">
+      <div popup anchor=t2b2 style="top: 400px;">
         <p>Hiding this popup will hide *all* open popups,</p>
         <p>because t2b2 doesn't exist in this context.</p>
       </div>
@@ -99,14 +99,14 @@
   <my-element>
     <template shadowroot=open>
       <button id=t3b1 onclick='showPopup("test3",0)'>Test 3 Popup 1</button>
-      <div popup=popup anchor=t3b1>
+      <div popup anchor=t3b1>
         <p>This popup will stay open when popup2 shows.</p>
         <slot></slot>
       </div>
     </template>
     <button id=t3b2 onclick='showPopup("test3",1)'>Test 3 Popup 2</button>
   </my-element>
-  <div popup=popup anchor=t3b2>Popup 2</div>
+  <div popup anchor=t3b2>Popup 2</div>
 </div>
 
 <script>
@@ -131,12 +131,12 @@
 
 <div id=test4>
   <button id=t4b1 onclick='showPopup("test4",0)'>Test 4 Popup 1</button>
-  <div popup=popup anchor=t4b1>
+  <div popup anchor=t4b1>
     <p>This should not get hidden when popup2 opens.</p>
     <my-element>
       <template shadowroot=open>
         <button id=t4b2 onclick='showPopup("test4",1)'>Test 4 Popup 2</button>
-        <div popup=popup anchor=t4b2>
+        <div popup anchor=t4b2>
           <p>This should not hide popup1.</p>
         </div>
       </template>
diff --git a/html/semantics/popups/popup-stacking-context.tentative.html b/html/semantics/popups/popup-stacking-context.tentative.html
index b38cfe4dc4f35b..f3fd0bf2fa992c 100644
--- a/html/semantics/popups/popup-stacking-context.tentative.html
+++ b/html/semantics/popups/popup-stacking-context.tentative.html
@@ -4,7 +4,7 @@
 <link rel=help href="https://open-ui.org/components/popup.research.explainer">
 <link rel=match href="popup-stacking-context-ref.tentative.html">
 
-<div popup=popup>
+<div popup>
   Inside popup
   <div class=z style="z-index: 2; background:lightgreen">z-index 2
     <div class=z style="z-index: 3; background:lightblue; left: 20px;">z-index 3</div>
diff --git a/html/semantics/popups/popup-stacking.tentative.html b/html/semantics/popups/popup-stacking.tentative.html
index 160a4a573b7517..0e3e50e7eb68bd 100644
--- a/html/semantics/popups/popup-stacking.tentative.html
+++ b/html/semantics/popups/popup-stacking.tentative.html
@@ -9,17 +9,17 @@
 
 <div class="example">
   <p>Direct DOM children</p>
-  <div popup=popup class=ancestor><p>Ancestor popup</p>
-    <div popup=popup class=child><p>Child popup</p></div>
+  <div popup class=ancestor><p>Ancestor popup</p>
+    <div popup class=child><p>Child popup</p></div>
   </div>
 </div>
 
 <div class="example">
   <p>Grandchildren</p>
-  <div popup=popup class=ancestor><p>Ancestor popup</p>
+  <div popup class=ancestor><p>Ancestor popup</p>
     <div>
       <div>
-        <div popup=popup class=child><p>Child popup</p></div>
+        <div popup class=child><p>Child popup</p></div>
       </div>
     </div>
   </div>
@@ -27,33 +27,33 @@
 
 <div class="example">
   <p>togglepopup attribute relationship</p>
-  <div popup=popup class=ancestor><p>Ancestor popup</p>
+  <div popup class=ancestor><p>Ancestor popup</p>
     <button togglepopup=trigger1 class=clickme>Button</button>
   </div>
-  <div id=trigger1 popup=popup class=child><p>Child popup</p></div>
+  <div id=trigger1 popup class=child><p>Child popup</p></div>
 </div>
 
 <div class="example">
   <p>nested togglepopup attribute relationship</p>
-  <div popup=popup class=ancestor><p>Ancestor popup</p>
+  <div popup class=ancestor><p>Ancestor popup</p>
     <div>
       <div>
         <button togglepopup=trigger2 class=clickme>Button</button>
       </div>
     </div>
   </div>
-  <div id=trigger2 popup=popup class=child><p>Child popup</p></div>
+  <div id=trigger2 popup class=child><p>Child popup</p></div>
 </div>
 
 <div class="example">
   <p>anchor attribute relationship</p>
-  <div id=anchor1 popup=popup class=ancestor><p>Ancestor popup</p></div>
-  <div anchor=anchor1 popup=popup class=child><p>Child popup</p></div>
+  <div id=anchor1 popup class=ancestor><p>Ancestor popup</p></div>
+  <div anchor=anchor1 popup class=child><p>Child popup</p></div>
 </div>
 
 <div class="example">
   <p>indirect anchor attribute relationship</p>
-  <div popup=popup class=ancestor>
+  <div popup class=ancestor>
     <p>Ancestor popup</p>
     <div>
       <div>
@@ -61,20 +61,20 @@
       </div>
     </div>
   </div>
-  <div anchor=anchor2 popup=popup class=child><p>Child popup</p></div>
+  <div anchor=anchor2 popup class=child><p>Child popup</p></div>
 </div>
 
 <!-- Other examples -->
 
-<div popup=popup id=p1 anchor=b1><p>This is popup #1</p>
+<div popup id=p1 anchor=b1><p>This is popup #1</p>
   <button id=b2 onclick='p2.showPopup()'>Popup 2</button>
   <button id=b4 onclick='p4.showPopup()'>Popup 4</button>
 </div>
-<div popup=popup id=p2 anchor=b2><p>This is popup #2</p>
+<div popup id=p2 anchor=b2><p>This is popup #2</p>
   <button id=b3 onclick='p3.showPopup()'>Popup 3</button>
 </div>
-<div popup=popup id=p3 anchor=b3><p>This is popup #3</p></div>
-<div popup=popup id=p4 anchor=b4><p>This is popup #4</p></div>
+<div popup id=p3 anchor=b3><p>This is popup #3</p></div>
+<div popup id=p4 anchor=b4><p>This is popup #4</p></div>
 <button id=b1 onclick='p1.showPopup()'>Popup 1</button>
 
 <dialog id=d1>This is a dialog<button onclick='this.parentElement.close()'>Close</button></dialog>
diff --git a/html/semantics/popups/popup-top-layer-interactions.tentative.html b/html/semantics/popups/popup-top-layer-interactions.tentative.html
index 53ded3ed0eba3c..19fbdfffdcd082 100644
--- a/html/semantics/popups/popup-top-layer-interactions.tentative.html
+++ b/html/semantics/popups/popup-top-layer-interactions.tentative.html
@@ -19,7 +19,7 @@
   {
     type: types.popup,
     closes: [types.popup],
-    createElement: () => Object.assign(document.createElement('div'), {popup: 'popup'}),
+    createElement: () => Object.assign(document.createElement('div'), {popup: 'auto'}),
     trigger: function() {this.element.showPopup()},
     close: function() {this.element.hidePopup()},
     isTopLayer: function() {return this.element.matches(':popup-open')},
diff --git a/html/semantics/popups/popup-types.tentative.html b/html/semantics/popups/popup-types.tentative.html
index 74a1b916440d03..ceacaf39761a1b 100644
--- a/html/semantics/popups/popup-types.tentative.html
+++ b/html/semantics/popups/popup-types.tentative.html
@@ -5,7 +5,7 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 
-<div id=popup popup=popup>Popup</div>
+<div id=popup popup>Popup</div>
 <div id=hint popup=hint>Hint</div>
 <div id=async popup=async>Async</div>
 <div id=async2 popup=async>Async</div>
@@ -58,10 +58,10 @@
 },'popups close hints but not asyncs');
 </script>
 
-<div id=popup1 popup=popup>Popup 1
-  <div id=popup2 popup=popup>Popup 2
+<div id=popup1 popup>Popup 1
+  <div id=popup2 popup>Popup 2
     <p id=anchorid>Anchor</p>
-    <div id=popup3 popup=popup>Popup 3</div>
+    <div id=popup3 popup>Popup 3</div>
   </div>
 </div>
 <div id=hint2 popup=hint anchor=anchorid>Hint anchored to popup</div>