Add block-start/end and overflow properties to popup

These were missing - see [1]. Without at least the block start and end positions, pop-ups could easily be shown off screen below the viewport. [1] openui/open-ui#561 (comment) Bug: 1307772 Change-Id: I006c664f89e8996d75c74130e4510967acfd486b Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3803128 Auto-Submit: Mason Freed <[email protected]> Commit-Queue: Joey Arhar <[email protected]> Reviewed-by: Joey Arhar <[email protected]> Cr-Commit-Position: refs/heads/main@{#1030616} NOKEYCHECK=True GitOrigin-RevId: bb5ff0d7122f94d110fa1010dab3a4394e9b7cda
mjfroman · Aug 2, 2022 · 70512cf · 70512cf
1 parent 6c1ca21
commit 70512cf
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/blink/renderer/core/css/popup.css b/blink/renderer/core/css/popup.css
@@ -20,24 +20,27 @@
   position: fixed;
   inset-inline-start: 0;
   inset-inline-end: 0;
+  inset-block-start: 0;
+  inset-block-end: 0;
   width: fit-content;
   height: fit-content;
   margin: auto;
   border: solid;
+  overflow: auto;
   padding: 1em;
-  background-color: Canvas;
   color: CanvasText;
+  background-color: Canvas;
 }
 
 [popup="" i]::backdrop,
 [popup=auto i]::backdrop,
 [popup=hint i]::backdrop,
 [popup=manual i]::backdrop {
     position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    inset-block-start: 0;
+    inset-block-end: 0;
     background: transparent;
     pointer-events: none !important;
 }
diff --git a/blink/web_tests/external/wpt/html/semantics/popups/resources/popup-styles.css b/blink/web_tests/external/wpt/html/semantics/popups/resources/popup-styles.css
@@ -2,20 +2,23 @@
   position: fixed;
   inset-inline-start: 0;
   inset-inline-end: 0;
+  inset-block-start: 0;
+  inset-block-end: 0;
   width: fit-content;
   height: fit-content;
   margin: auto;
   border: solid;
+  overflow: auto;
   padding: 1em;
-  background-color: Canvas;
   color: CanvasText;
+  background-color: Canvas;
 }
 .fake-pop-up-backdrop {
   position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  inset-block-start: 0;
+  inset-block-end: 0;
   background: transparent;
   pointer-events: none !important;
 }