From ab983f09e6da4e06e7c07fe8ae7368c3ca5d67a2 Mon Sep 17 00:00:00 2001 From: Ian Kilpatrick Date: Tue, 22 Sep 2020 13:51:05 -0700 Subject: [PATCH 1/7] Change dialog to position:fixed, and remove dialog alignment modes. --- source | 57 ++++++--------------------------------------------------- 1 file changed, 6 insertions(+), 51 deletions(-) diff --git a/source b/source index 67122cfd544..5f4d0174f89 100644 --- a/source +++ b/source @@ -57233,8 +57233,6 @@ interface HTMLDialogElement : HTMLElement {

  • Add an open attribute to the dialog element, whose value is the empty string.

    • -

  • Set the dialog to the normal alignment mode.

    • -

  • Run the dialog focusing steps for the dialog element.

    • @@ -57253,8 +57251,6 @@ interface HTMLDialogElement : HTMLElement {

  • Add an open attribute to subject, whose value is the empty string.

    • -

  • Set the dialog to the centered alignment mode.

    • -

  • Let subject's node document be blocked by the modal dialog subject.

    @@ -57371,51 +57367,6 @@ interface HTMLDialogElement : HTMLElement {
    -

    A dialog element is in one of two modes: normal alignment or - centered alignment. When a dialog element is created, it must be placed in - the normal alignment mode. In this mode, normal CSS requirements apply to the - element. The centered alignment mode is only used for dialog elements - that are in the top layer.

    - -

    When an element subject is placed in centered alignment mode, and when - it is in that mode and has new rendering boxes created, the user agent must set up the element - such that its static position of the edge that corresponds to subject's parent's - block-start edge, for the purposes of calculating the used value of the - appropriate box offset property ('top', 'right', 'bottom', - or 'left'), is the value that would place the element's margin edge on - the side that corresponds to subject's parent's block-start side as far - from the same-side edge of the viewport as the element's opposing side margin - edge from that same-side edge of the viewport, if the element's dimension - ('width' or 'height') in subject's parent's block flow - direction is less than the same-axis dimension of the viewport, and otherwise - is the value that would place the element's margin edge on the side that corresponds - to subject's parent's block-start side at the same-side edge of the - viewport.

    - -

    If there is a dialog element with centered alignment and that is - being rendered when its browsing context changes viewport - dimensions (as measured in CSS pixels), or when this - dialog element's parent changes block flow direction, then the user - agent must recreate the element's boxes, recalculating its edge that corresponds to this - dialog element's parent's block-start edge as in the previous - paragraph.

    - -

    This static position of a dialog element's edge with centered - alignment must remain the element's static position of that edge until its boxes are - recreated. (The element's static position is only used in calculating the used value - of the appropriate box offset property ('top', 'right', - 'bottom', or 'left') in certain situations; it's not used, for instance, - to position the element if its 'position' property is set to - 'static'.)

    - -

    User agents in visual interactive media should allow the user to pan the viewport - to access all parts of a dialog element's border box, even if the - element is larger than the viewport and the viewport would otherwise not - have a scroll mechanism (e.g. because the viewport's 'overflow' property - is set to 'hidden').

    - -
    -

    The open IDL attribute must reflect the open content attribute.

    @@ -113090,10 +113041,14 @@ listing, plaintext, pre, xmp { dialog:not([open]) { display: none; } dialog { - position: absolute; - inset-inline-start: 0; inset-inline-end: 0; + position: fixed; + overflow: auto; + top: 0; right: 0; bottom: 0; left: 0; width: fit-content; height: fit-content; + /* 6px + 2em = border + padding */ + max-width: calc(100% - 6px - 2em); + max-height: calc(100% - 6px - 2em); margin: auto; border: solid; padding: 1em; From 15bf0abc29fd5c79cab33b037a717aa44206666e Mon Sep 17 00:00:00 2001 From: Ian Kilpatrick Date: Fri, 2 Oct 2020 12:03:43 -0700 Subject: [PATCH 2/7] Add :modal pseudo-class --- source | 35 ++++++++++++++++++++++++++++------- 1 file changed, 28 insertions(+), 7 deletions(-) diff --git a/source b/source index 5f4d0174f89..412dde3f20a 100644 --- a/source +++ b/source @@ -57249,7 +57249,10 @@ interface HTMLDialogElement : HTMLElement {

  • If subject is not connected, then throw an "InvalidStateError" DOMException.

    • -

  • Add an open attribute to subject, whose value is the empty string.

    • +

  • Add an open attribute to subject, whose + value is the empty string.

    • + +

  • Set the is modal flag of subject to true.

  • Let subject's node document be open attribute.

    • +

  • Set the is modal flag of subject to false.

    • +

  • If the argument result was provided, then set the returnValue attribute to the value of result.

    • @@ -57367,6 +57372,12 @@ interface HTMLDialogElement : HTMLElement {
    +

    Each dialog element has an is modal flag. When a dialog + element is created, this flag must be set to false. This flag is used to control when the + :modal pseudo-class applies.

    + +
    +

    The open IDL attribute must reflect the open content attribute.

    @@ -68447,6 +68458,12 @@ Demos: elements whose directionality is 'rtl'.

    + +
    :modal
    +
    +

    The :modal pseudo-class must match + any dialog element that has its is modal flag set to true.

    +

    This specification does not define when an element matches the Date: Wed, 28 Oct 2020 10:41:57 -0700 Subject: [PATCH 3/7] CSSWG resolution making :modal an internal pseudo-class. --- source | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/source b/source index 412dde3f20a..d2b09547360 100644 --- a/source +++ b/source @@ -57374,7 +57374,7 @@ interface HTMLDialogElement : HTMLElement {

    Each dialog element has an is modal flag. When a dialog element is created, this flag must be set to false. This flag is used to control when the - :modal pseudo-class applies.

    + :-internal-modal pseudo-class applies.

    @@ -68459,10 +68459,13 @@ Demos: data-x="concept-rtl">rtl'.

    -
    :modal
    +
    :-internal-modal
    -

    The :modal pseudo-class must match - any dialog element that has its is modal flag set to true.

    +

    The :-internal-modal pseudo-class must + match any dialog element that has its is modal flag set to true.

    + +

    The :-internal-modal pseudo-class must + not be exposed outside the user agent style sheet.

    @@ -113068,13 +113071,12 @@ dialog { background: white; color: black; } -dialog:modal { +dialog:-internal-modal { position: fixed; overflow: auto; inset-block-start: 0; inset-block-end: 0; - /* 6px + 2em = border + padding */ - max-width: calc(100% - 6px - 2em); - max-height: calc(100% - 6px - 2em); + max-width: stretch; + max-height: stretch; } dialog::backdrop { background: rgba(0,0,0,0.1); From 01389151c2a705ca4b58ab55690d596a76598afe Mon Sep 17 00:00:00 2001 From: Ian Kilpatrick Date: Wed, 28 Oct 2020 12:21:07 -0700 Subject: [PATCH 4/7] Now in prose. --- source | 35 +++++++++++++++++------------------ 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/source b/source index d2b09547360..0ed5d3933df 100644 --- a/source +++ b/source @@ -3306,6 +3306,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
  • The 'clear' property
  • The 'width' property
  • The 'height' property
    • +
  • The 'max-width' property
    • +
  • The 'max-height' property
  • The 'line-height' property
  • The 'vertical-align' property
  • The 'content' property
    • @@ -3364,6 +3366,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
  • The 'border-block-start-width' property
  • The 'block-size' property
  • The 'inline-size' property
    • +
  • The 'inset-block-start' property
    • +
  • The 'inset-block-end' property

    • The following terms and features are defined in CSS Color: HTMLDialogElement : HTMLElement {

    Each dialog element has an is modal flag. When a dialog - element is created, this flag must be set to false. This flag is used to control when the - :-internal-modal pseudo-class applies.

    + element is created, this flag must be set to false.

    + +

    When this flag is true the user agent is expected to act as if it had a user-agent-level style + sheet rule setting the following properties:

    + +
      +
    • 'position' property to 'fixed'
      • +
    • 'overflow' property to 'auto'
      • +
    • 'inset-block-start' property to '0'
      • +
    • 'inset-block-end' property to '0'
      • +
    • 'max-width' property to 'stretch'
      • +
    • 'max-height' property to 'stretch'
      • +
    @@ -68458,15 +68473,6 @@ Demos: elements whose directionality is 'rtl'.

    - -
    :-internal-modal
    -
    -

    The :-internal-modal pseudo-class must - match any dialog element that has its is modal flag set to true.

    - -

    The :-internal-modal pseudo-class must - not be exposed outside the user agent style sheet. -

    This specification does not define when an element matches the Date: Wed, 28 Oct 2020 12:30:49 -0700 Subject: [PATCH 5/7] move to rendering section. --- source | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/source b/source index 0ed5d3933df..1f3a71cdbbf 100644 --- a/source +++ b/source @@ -57379,18 +57379,6 @@ interface HTMLDialogElement : HTMLElement {

    Each dialog element has an is modal flag. When a dialog element is created, this flag must be set to false.

    -

    When this flag is true the user agent is expected to act as if it had a user-agent-level style - sheet rule setting the following properties:

    - -
      -
    • 'position' property to 'fixed'
      • -
    • 'overflow' property to 'auto'
      • -
    • 'inset-block-start' property to '0'
      • -
    • 'inset-block-end' property to '0'
      • -
    • 'max-width' property to 'stretch'
      • -
    • 'max-height' property to 'stretch'
      • -
    -

    The open IDL @@ -113124,7 +113112,17 @@ form { margin-block-end: 1em; } 'text-align' property set to 'justify' in a presentational hint, and to align descendants to the left.

    +

    The dialog element, when its is modal flag is true, is expected to + act as if it had a user-agent-level style sheet rule setting the following properties:

    +
      +
    • 'position' property to 'fixed'
      • +
    • 'overflow' property to 'auto'
      • +
    • 'inset-block-start' property to '0'
      • +
    • 'inset-block-end' property to '0'
      • +
    • 'max-width' property to 'stretch'
      • +
    • 'max-height' property to 'stretch'
      • +

    Phrasing content

    From f0231fa5d00b72c154d82a0b3d3c8422f3740ed1 Mon Sep 17 00:00:00 2001 From: Anne van Kesteren Date: Thu, 29 Oct 2020 10:42:51 +0100 Subject: [PATCH 6/7] indentation nit (also seems wrong for xref CSS but that's prolly best fixed separately) --- source | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/source b/source index 1f3a71cdbbf..901d8f319c4 100644 --- a/source +++ b/source @@ -113116,12 +113116,12 @@ form { margin-block-end: 1em; }     act as if it had a user-agent-level style sheet rule setting the following properties:

    Phrasing content

    From d2039fb91f5a994690dd15d7516ae2f7f7074bc2 Mon Sep 17 00:00:00 2001 From: Ian Kilpatrick Date: Thu, 29 Oct 2020 15:02:37 -0700 Subject: [PATCH 7/7] back to calc() version. --- source | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/source b/source index 1f3a71cdbbf..fae6b14891a 100644 --- a/source +++ b/source @@ -113120,8 +113120,8 @@ form { margin-block-end: 1em; }
  • 'overflow' property to 'auto'
  • 'inset-block-start' property to '0'
  • 'inset-block-end' property to '0'
    • -
  • 'max-width' property to 'stretch'
    • -
  • 'max-height' property to 'stretch'
    • +
  • 'max-width' property to 'calc(100% - 6px - 2em)'
    • +
  • 'max-height' property to 'calc(100% - 6px - 2em)'

    • Phrasing content