Fix async->manual rename in CSS, plus add more testing

When [1] landed, it forgot to change the default CSS for `async` to `manual`. Clearly that indicates a lack of appearance testing, so this CL adds a WPT for the appearance of pop-ups. I also opened this issue to discuss the standard styling: openui/open-ui#561 In the meantime, this CL also refactors all of the test-assumed default styles for [popup] into popup-styles.css, so that if we change these in the future it won't be so painful. This CL also had to add code to the <selectmenu> positioning algorithm to remove any margin. I think that's the right way to handle this, but that does mean developer `margin` settings on a slotted listbox won't have any effect. That seems right, but I don't know for sure. [1] https://chromium-review.googlesource.com/c/chromium/src/+/3722345 Bug: 1307772 Change-Id: I4ecf7bee947e90e2abdcedb47b3d38c958abb2f5 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3749343 Reviewed-by: Joey Arhar <[email protected]> Commit-Queue: Mason Freed <[email protected]> Cr-Commit-Position: refs/heads/main@{#1021422}
web-platform-tests · Jul 6, 2022 · fe9314d · fe9314d
1 parent d974506
commit fe9314d
Show file tree

Hide file tree

Showing 19 changed files with 112 additions and 154 deletions.
diff --git a/html/semantics/popups/popup-animated-display-ref.tentative.html b/html/semantics/popups/popup-animated-display-ref.tentative.html
@@ -1,23 +1,15 @@
 <!DOCTYPE html>
+<link rel="stylesheet" href="resources/popup-styles.css">
 
 <div class=topmost></div>
-<div class=fakepopup>This is a popup</div>
+<div class=fake-pop-up>This is a popup</div>
 
 
 <style>
-  .fakepopup {
-    /* Per spec: */
-    display: block;
-    position: fixed;
-    top: 0;
-    /* Per settings in test file: */
+  .fake-pop-up {
     width: 100px;
     height: 100px;
-    border: 1px solid;
-    padding: 1em;
     margin: 1em;
-    background: white;
-    color: black;
     /* The animated property */
     left: 100px;
   }

diff --git a/html/semantics/popups/popup-animated-hide-display.tentative.html b/html/semantics/popups/popup-animated-hide-display.tentative.html
@@ -12,11 +12,7 @@
   [popup] {
     width: 100px;
     height: 100px;
-    border: 1px solid;
-    padding: 1em;
     margin: 1em;
-    background: white;
-    color: black;
     left: 0;
     transition: left 20s steps(2, jump-end) -10s;
   }

diff --git a/html/semantics/popups/popup-animated-hide-finishes.tentative.html b/html/semantics/popups/popup-animated-hide-finishes.tentative.html
@@ -12,12 +12,8 @@
   [popup] {
     width: 100px;
     height: 100px;
-    border: 1px solid;
-    padding: 1em;
     margin: 1em;
-    background: white;
-    color: black;
-    left: 0px;
+    left: 0;
     /* Immediate transition: */
     transition: left 1s -1s;
   }

diff --git a/html/semantics/popups/popup-animated-show-display.tentative.html b/html/semantics/popups/popup-animated-show-display.tentative.html
@@ -12,11 +12,7 @@
   [popup] {
     width: 100px;
     height: 100px;
-    border: 1px solid;
-    padding: 1em;
     margin: 1em;
-    background: white;
-    color: black;
     left: 0;
     transition: left 20s steps(2, jump-end) -10s;
   }

diff --git a/html/semantics/popups/popup-appearance-ref.tentative.html b/html/semantics/popups/popup-appearance-ref.tentative.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>Popup element appearance</title>
+<link rel="stylesheet" href="resources/popup-styles.css">
+
+<style>
+.fake-pop-up {top: 100px;}
+#blank {left: -300px;}
+#auto {left: -100px;}
+#hint {left: 100px;}
+#manual {left: 300px;}
+</style>
+
+<p>There should be four pop-ups with similar appearance, and
+  the word Unknown with no special styling.</p>
+<div class="fake-pop-up" id=blank>Blank</div>
+<div class="fake-pop-up" id=auto>Auto</div>
+<div class="fake-pop-up" id=hint><span>Hint</span></div>
+<div class="fake-pop-up" id=manual>Manual</div>
+<div class="not-a-pop-up!" id=unknown>Unknown</div>
diff --git a/html/semantics/popups/popup-appearance.tentative.html b/html/semantics/popups/popup-appearance.tentative.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>Popup element appearance</title>
+<link rel="author" href="mailto:[email protected]">
+<link rel=help href="https://open-ui.org/components/popup.research.explainer">
+<link rel="match" href="popup-appearance-ref.tentative.html">
+
+<style>
+[popup] {top: 100px}
+[popup=""] {left: -300px}
+[popup=auto] {left: -100px; }
+[popup=hint] {left: 100px; }
+[popup=manual] {left: 300px; }
+</style>
+
+<p>There should be four pop-ups with similar appearance, and
+   the word Unknown with no special styling.</p>
+<div popup>Blank
+  <div popup=auto>Auto</div>
+</div>
+<div popup=hint>Hint</div>
+<div popup=manual>Manual</div>
+<!-- This ensures unsupported popup values don't receive styling -->
+<div popup=unknown>Unknown</div>
+<script>
+  document.querySelectorAll('[popup]').forEach(p => {
+    try {
+      p.showPopUp();
+    } catch {
+      // The unknown popup should throw an error on .showPopUp().
+    }
+  });
+</script>
diff --git a/html/semantics/popups/popup-backdrop-appearance-ref.tentative.html b/html/semantics/popups/popup-backdrop-appearance-ref.tentative.html
@@ -1,22 +1,13 @@
 <!DOCTYPE html>
 <meta charset="utf-8" />
 <title>Popup ::backdrop pseudo element appearance</title>
+<link rel="stylesheet" href="resources/popup-styles.css">
 
 <style>
 #bottom { top: 70px; left: 70px; }
 #middle { top: 120px; left: 120px; }
 #top { top: 170px; left: 170px; }
-.popup {
-  position: fixed;
-  width: fit-content;
-  height: fit-content;
-  color: black;
-  border: 0;
-  padding: 1em;
-  background: white;
-}
-.backdrop {
-  position: absolute;
+.fake-pop-up-backdrop {
   height: 200px;
   width: 200px;
 }
@@ -35,6 +26,9 @@
     left: 150px;
     background-color: rgb(0, 210, 0);
 }
+.fake-pop-up {
+  margin:0;
+}
 </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>
@@ -43,9 +37,9 @@
     <div popup=manual id=top>Top</div>
   </div>
 </div>
-<div id="bottom-backdrop" class="backdrop"></div>
-<div id="bottom" class="popup">Bottom</div>
-<div id="middle-backdrop" class="backdrop"></div>
-<div id="middle" class="popup">Middle</div>
-<div id="top-backdrop" class="backdrop"></div>
-<div id="top" class="popup">Top</div>
+<div id="bottom-backdrop" class="fake-pop-up-backdrop"></div>
+<div id="bottom" class="fake-pop-up">Bottom</div>
+<div id="middle-backdrop" class="fake-pop-up-backdrop"></div>
+<div id="middle" class="fake-pop-up">Middle</div>
+<div id="top-backdrop" class="fake-pop-up-backdrop"></div>
+<div id="top" class="fake-pop-up">Top</div>
diff --git a/html/semantics/popups/popup-backdrop-appearance.tentative.html b/html/semantics/popups/popup-backdrop-appearance.tentative.html
@@ -11,30 +11,25 @@
 #top { top: 170px; left: 170px; }
 ::backdrop { height: 200px; width: 200px; }
 #bottom::backdrop {
-    top: 50px;
-    left: 50px;
-    background-color: rgb(0, 50, 0);
-    z-index: 100;  /* z-index has no effect. */
+  top: 50px;
+  left: 50px;
+  background-color: rgb(0, 50, 0);
+  z-index: 100;  /* z-index has no effect. */
 }
 #middle::backdrop {
-    top: 100px;
-    left: 100px;
-    background-color: rgb(0, 130, 0);
-    z-index: -100;  /* z-index has no effect. */
+  top: 100px;
+  left: 100px;
+  background-color: rgb(0, 130, 0);
+  z-index: -100;  /* z-index has no effect. */
 }
 #top::backdrop {
-    top: 150px;
-    left: 150px;
-    background-color: rgb(0, 210, 0);
-    z-index: 0;  /* z-index has no effect. */
+  top: 150px;
+  left: 150px;
+  background-color: rgb(0, 210, 0);
+  z-index: 0;  /* z-index has no effect. */
 }
 [popup] {
-    width: fit-content;
-    height: fit-content;
-    color: black;
-    border: 0;
-    padding: 1em;
-    background: white;
+  margin:0;
 }
 </style>
 <p>Test for [popup]::backdrop presence and stacking order. The test passes

diff --git a/html/semantics/popups/popup-defaultopen-display-ref.tentative.html b/html/semantics/popups/popup-defaultopen-display-ref.tentative.html
@@ -1,22 +1,6 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <link rel=author href="mailto:[email protected]">
+<link rel="stylesheet" href="resources/popup-styles.css">
 
-<div>This is a popup, which should be open upon load</div>
-
-<style>
-  div {
-    /* Per spec: */
-    display: block;
-    position: fixed;
-    top: 0;
-    left: 0;
-    /* Per settings in test file: */
-    width: fit-content;
-    height: fit-content;
-    border: 1px solid;
-    padding: 1em;
-    background: -internal-light-dark(white, black);
-    color: -internal-light-dark(black, white);
-  }
-</style>
+<div class="fake-pop-up">This is a popup, which should be open upon load</div>
diff --git a/html/semantics/popups/popup-defaultopen-display.tentative.html b/html/semantics/popups/popup-defaultopen-display.tentative.html
@@ -8,17 +8,6 @@
 <div popup id=p2 defaultopen>This is a second popup with defaultopen, which should NOT be open upon load</div>
 
 <style>
-  [popup] {
-    width: fit-content;
-    height: fit-content;
-    border: 1px solid;
-    padding: 1em;
-    background: white;
-    color: black;
-  }
-  #p1 {
-    top:0;
-  }
   #p2 {
     top:100px;
   }

diff --git a/html/semantics/popups/popup-hidden-display-ref.tentative.html b/html/semantics/popups/popup-hidden-display-ref.tentative.html
@@ -1,19 +1,15 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <link rel=author href="mailto:[email protected]">
+<link rel="stylesheet" href="resources/popup-styles.css">
 
-<div>This content should be visible</div>
+<div class=fake-pop-up>This content should be visible</div>
 
 <style>
-  div {
-    position: fixed;
+  .fake-pop-up {
     top: 0;
     left: 0;
     width: 300px;
     height: 200px;
-    padding: 1em;
-    border: 1px solid;
-    background: white;
-    color: black;
   }
 </style>
diff --git a/html/semantics/popups/popup-hidden-display.tentative.html b/html/semantics/popups/popup-hidden-display.tentative.html
@@ -10,11 +10,7 @@
   [popup] {
     display: block; /* This should make the popup visible */
     top: 0;
-    left: 0;
     width: 300px;
     height: 200px;
-    border: 1px solid;
-    background: white;
-    color: black;
   }
 </style>
diff --git a/html/semantics/popups/popup-open-display-ref.tentative.html b/html/semantics/popups/popup-open-display-ref.tentative.html
@@ -1,26 +1,12 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <link rel=author href="mailto:[email protected]">
+<link rel="stylesheet" href="resources/popup-styles.css">
 
 <div class=topmost></div>
-<div class=fakepopup>This is a popup</div>
+<div class=fake-pop-up>This is a popup</div>
 
 <style>
-  .fakepopup {
-    /* Per spec: */
-    display: block;
-    position: fixed;
-    top: 0;
-    left: 0;
-    /* Per settings in test file: */
-    width: fit-content;
-    height: fit-content;
-    border: 1px solid;
-    padding: 1em;
-    margin: 1em;
-    background: white;
-    color: black;
-  }
   .topmost {
     position:fixed;
     top:0;

diff --git a/html/semantics/popups/popup-open-display.tentative.html b/html/semantics/popups/popup-open-display.tentative.html
@@ -8,15 +8,6 @@
 <div class=topmost></div>
 
 <style>
-  [popup] {
-    width: fit-content;
-    height: fit-content;
-    border: 1px solid;
-    padding: 1em;
-    margin: 1em;
-    background: white;
-    color: black;
-  }
   .topmost {
     position:fixed;
     z-index: 999999;

diff --git a/html/semantics/popups/popup-open-overflow-display-ref.tentative.html b/html/semantics/popups/popup-open-overflow-display-ref.tentative.html
@@ -13,14 +13,6 @@
   #p3 {
     top:200px;
   }
-  [popup] {
-    width: fit-content;
-    height: fit-content;
-    border: 1px solid;
-    padding: 1em;
-    background: white;
-    color: black;
-  }
 </style>
 
 <script>

diff --git a/html/semantics/popups/popup-open-overflow-display.tentative.html b/html/semantics/popups/popup-open-overflow-display.tentative.html
@@ -27,14 +27,6 @@
     position: relative;
     top:200px;
   }
-  [popup] {
-    width: fit-content;
-    height: fit-content;
-    border: 1px solid;
-    padding: 1em;
-    background: white;
-    color: black;
-  }
 </style>
 
 <script>

diff --git a/html/semantics/popups/popup-stacking-context-ref.tentative.html b/html/semantics/popups/popup-stacking-context-ref.tentative.html
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <link rel="author" href="mailto:[email protected]">
+<link rel="stylesheet" href="resources/popup-styles.css">
 
-<div id=popup>
+<div class="fake-pop-up">
   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>
@@ -13,19 +14,10 @@
 </div>
 
 <style>
-  #popup {
-    /* Per spec: */
-    display: block;
-    position: fixed;
-    top: 0;
-    left: 0;
-    /* Per settings in test file: */
+  .fake-pop-up {
     width: 200px;
     height: 230px;
     border: 1px solid red;
-    padding: 1em;
-    background: white;
-    color: black;
     top:50px;
     left:50px;
   }