Bug 1642364 - Add a temporary solution for modal dialog centered alignment r=emilio
☠☠ backed out by f912d56347da ☠ ☠
authorsefeng <sefeng@mozilla.com>
Tue, 02 Jun 2020 04:14:04 +0000
changeset 597602 c3799309b95c400ddfdb1f24f630d4c5dcba6fc6
parent 597601 f965f78cedf7567b0dabff11c6edbf0fd485b3b0
child 597603 c6362d5d6dcb832d43adcfcc5566ec0d3c664e6d
push id13310
push userffxbld-merge
push dateMon, 29 Jun 2020 14:50:06 +0000
treeherdermozilla-beta@15a59a0afa5c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersemilio
bugs1642364
milestone79.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1642364 - Add a temporary solution for modal dialog centered alignment r=emilio Spec: https://html.spec.whatwg.org/multipage/#centered-alignment The spec is opaque about the centered alignment mode and we couldn't come up a satisfied solution by using the current version of the spec. There will be discussion in CSSWG to talk about better solutions. In the meantime, we are adding this patch as a temporary solution with basic centered alignment support to allow us enabling the feature in Nightly for more testing. Differential Revision: https://phabricator.services.mozilla.com/D77678
layout/style/res/html.css
testing/web-platform/meta/html/semantics/interactive-elements/the-dialog-element/abspos-dialog-layout.html.ini
--- a/layout/style/res/html.css
+++ b/layout/style/res/html.css
@@ -823,24 +823,32 @@ dialog {
   margin: auto;
   border-width: initial;
   border-style: solid;
   border-color: initial;
   border-image: initial;
   padding: 1em;
   background: white;
   width: -moz-fit-content;
+  height: -moz-fit-content;
 }
 
 dialog:not([open]) {
   display: none;
 }
 
 dialog:-moz-modal-dialog {
   -moz-top-layer: top !important;
+  /* This is a temporary solution until the relevant CSSWG issues are resolved */
+  position: fixed;
+  max-height: 100vh;
+  max-width: 100vw;
+  top: 50%;
+  transform: translateY(-50%);
+  overflow: auto;
 }
 
 /* https://html.spec.whatwg.org/#flow-content-3 */
 dialog::backdrop {
   background: rgba(0, 0, 0, 0.1);
 }
 
 marquee {
--- a/testing/web-platform/meta/html/semantics/interactive-elements/the-dialog-element/abspos-dialog-layout.html.ini
+++ b/testing/web-platform/meta/html/semantics/interactive-elements/the-dialog-element/abspos-dialog-layout.html.ini
@@ -1,39 +1,16 @@
 [abspos-dialog-layout.html]
-  [showModal() should center in the viewport]
-    expected: FAIL
-
-  [The dialog is a positioned element, so the top and bottom should not have style auto.]
-    expected: FAIL
-
-  [Dialog should be recentered if showModal() is called after close()]
-    expected: FAIL
-
-  [Dialog should not recenter on relayout.]
-    expected: FAIL
-
-  [A tall dialog should be positioned at the top of the viewport.]
-    expected: FAIL
-
+  prefs:[dom.dialog_element.enabled:true]
   [The dialog should be centered regardless of the presence of a horizontal scrollbar.]
     expected: FAIL
 
   [Centering should work when dialog is inside positioned containers.]
     expected: FAIL
 
-  [A centered dialog's position should survive becoming display:none temporarily.]
-    expected: FAIL
-
-  [Dialog should lose centering when removed from the document.]
-    expected: FAIL
-
-  [Dialog's specified position should survive after close() and showModal().]
-    expected: FAIL
-
   [Dialog should be recentered if showModal() is called after removing 'open'.]
     expected: FAIL
 
   [Dialog should not be centered if showModal() was called when an ancestor had display 'none'.]
     expected: FAIL
 
   [A dialog with specified 'top' should be positioned as usual]
     expected: FAIL