Bug 1771337 [wpt PR 34217] - Convert popup=popup to popup=auto or…

… just `popup`, a=testonly

Automatic update from web-platform-tests
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] openui/open-ui#491 (comment)
[2] openui/open-ui#533 (comment)

Bug: 1307772
Change-Id: I6037c5322f7408ebd2c91690f89ecbc513c66bdb
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3668816
Auto-Submit: Mason Freed <[email protected]>
Commit-Queue: Mason Freed <[email protected]>
Reviewed-by: Joey Arhar <[email protected]>
Reviewed-by: Aaron Leventhal <[email protected]>
Reviewed-by: Yuki Shiino <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1009383}

--

wpt-commits: 71cf6a42d3335c0c55cfe5b18c3b250c21a0ffbc
wpt-pr: 34217

testing/web-platform/tests/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>

testing/web-platform/tests/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>

testing/web-platform/tests/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">

testing/web-platform/tests/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">

testing/web-platform/tests/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";

testing/web-platform/tests/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>

testing/web-platform/tests/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,23 +44,23 @@
 <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>
   </div>
 </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>
   </div>
 </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>

testing/web-platform/tests/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>

testing/web-platform/tests/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>

testing/web-platform/tests/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>

testing/web-platform/tests/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>

testing/web-platform/tests/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>