Changeset 279414 in webkit


Ignore:
Timestamp:
Jun 30, 2021, 9:31:57 AM (4 years ago)
Author:
ntim@apple.com
Message:

Add modal dialog UA styles
​https://bugs.webkit.org/show_bug.cgi?id=226175

Reviewed by Antti Koivisto.

This adds an :-internal-modal-dialog pseudo class and a test to make sure it does not leak.

This improves WPT results a lot and expectations have been updated. Some tests start failing,
but those are mainly top-layer related (which isn't implemented yet).

LayoutTests/imported/w3c:

  • web-platform-tests/html/rendering/non-replaced-elements/flow-content-0/dialog-expected.txt:
  • web-platform-tests/html/semantics/interactive-elements/the-dialog-element/abspos-dialog-layout-expected.txt:
  • web-platform-tests/html/semantics/interactive-elements/the-dialog-element/centering-expected.txt:

Source/WebCore:

  • css/CSSSelector.cpp:

(WebCore::CSSSelector::selectorText const):

  • css/CSSSelector.h:
  • css/SelectorChecker.cpp:

(WebCore::SelectorChecker::checkOne const):

  • css/SelectorCheckerTestFunctions.h:

(WebCore::matchesModalDialogPseudoClass):

  • css/SelectorPseudoClassAndCompatibilityElementMap.in:
  • css/dialog.css:

(dialog:-internal-modal-dialog):

  • css/parser/CSSSelectorParser.cpp:

(WebCore::CSSSelectorParser::consumePseudo):

  • cssjit/SelectorCompiler.cpp:

(WebCore::SelectorCompiler::JSC_DEFINE_JIT_OPERATION):
(WebCore::SelectorCompiler::addPseudoClassType):

  • html/HTMLDialogElement.cpp:

(WebCore::HTMLDialogElement::showModal):
(WebCore::HTMLDialogElement::parseAttribute):
(WebCore::HTMLDialogElement::isModal const):

  • html/HTMLDialogElement.h:

LayoutTests:

  • TestExpectations:
  • fast/css/pseudo-class-internal-expected.txt: Added.
  • fast/css/pseudo-class-internal.html: Added.
  • platform/ios-wk2/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/abspos-dialog-layout-expected.txt:
  • platform/ios-wk2/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/centering-expected.txt: Removed.
Location:
trunk
Files:
2 added
1 deleted
18 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r279409 r279414  
     12021-06-30  Tim Nguyen  <ntim@apple.com>
     2
     3        Add modal dialog UA styles
     4        https://bugs.webkit.org/show_bug.cgi?id=226175
     5
     6        Reviewed by Antti Koivisto.
     7
     8        This adds an :-internal-modal-dialog pseudo class and a test to make sure it does not leak.
     9
     10        This improves WPT results a lot and expectations have been updated. Some tests start failing,
     11        but those are mainly top-layer related (which isn't implemented yet).
     12
     13        * TestExpectations:
     14        * fast/css/pseudo-class-internal-expected.txt: Added.
     15        * fast/css/pseudo-class-internal.html: Added.
     16        * platform/ios-wk2/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/abspos-dialog-layout-expected.txt:
     17        * platform/ios-wk2/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/centering-expected.txt: Removed.
     18
    1192021-06-30  Tim Nguyen  <ntim@apple.com>
    220

  • trunk/LayoutTests/TestExpectations

    r279401 r279414  
    22282228fast/multicol/multicol-with-child-renderLayer-for-input.html [ ImageOnlyFailure ]
    22292229
    2230 # Modal <dialog> support
    2231 webkit.org/b/226175 imported/blink/dialog/modal-dialog-in-replaced-renderer.html [ ImageOnlyFailure ]
    2232 webkit.org/b/226175 imported/blink/dialog/modal-dialog-in-table-column.html [ ImageOnlyFailure ]
    2233 webkit.org/b/226175 imported/blink/dialog/modal-dialog-sibling.html [ ImageOnlyFailure ]
     2230# Modal <dialog> in top layer
     2231webkit.org/b/84796 imported/blink/dialog/modal-dialog-in-replaced-renderer.html [ ImageOnlyFailure ]
     2232webkit.org/b/84796 imported/blink/dialog/modal-dialog-in-table-column.html [ ImageOnlyFailure ]
     2233webkit.org/b/84796 imported/blink/fast/dom/HTMLDialogElement/dont-share-style-to-top-layer.html [ ImageOnlyFailure ]
    22342234
    22352235# Assertion failure in MessagePort::contextDestroyed, usually attributed to later tests

  • trunk/LayoutTests/imported/w3c/ChangeLog

    r279409 r279414  
     12021-06-30  Tim Nguyen  <ntim@apple.com>
     2
     3        Add modal dialog UA styles
     4        https://bugs.webkit.org/show_bug.cgi?id=226175
     5
     6        Reviewed by Antti Koivisto.
     7
     8        This adds an :-internal-modal-dialog pseudo class and a test to make sure it does not leak.
     9
     10        This improves WPT results a lot and expectations have been updated. Some tests start failing,
     11        but those are mainly top-layer related (which isn't implemented yet).
     12
     13        * web-platform-tests/html/rendering/non-replaced-elements/flow-content-0/dialog-expected.txt:
     14        * web-platform-tests/html/semantics/interactive-elements/the-dialog-element/abspos-dialog-layout-expected.txt:
     15        * web-platform-tests/html/semantics/interactive-elements/the-dialog-element/centering-expected.txt:
     16
    1172021-06-30  Tim Nguyen  <ntim@apple.com>
    218

  • trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/non-replaced-elements/flow-content-0/dialog-expected.txt

    r278003 r279414  
    44PASS Closed dialog in width: 540px iframe
    55PASS Open dialog in width: 540px iframe
    6 FAIL Modal dialog in width: 540px iframe assert_equals: top expected "56px" but got "8px"
     6FAIL Modal dialog in width: 540px iframe assert_equals: top expected "56px" but got "0px"
    77PASS Closed dialog in width: 538px iframe
    88PASS Open dialog in width: 538px iframe
    9 FAIL Modal dialog in width: 538px iframe assert_equals: top expected "56px" but got "8px"
     9FAIL Modal dialog in width: 538px iframe assert_equals: top expected "56px" but got "0px"
    1010

  • trunk/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/abspos-dialog-layout-expected.txt

    r279409 r279414  
    11
    2 FAIL showModal() should center in the viewport assert_approx_equals: expected 291 +/- 1 but got -500
    3 FAIL Dialog should be recentered if showModal() is called after close() assert_approx_equals: expected 291 +/- 1 but got -1000
     2PASS showModal() should center in the viewport
     3PASS Dialog should be recentered if showModal() is called after close()
    44PASS Dialog should not recenter on relayout.
    5 FAIL A tall dialog should be positioned at the top of the viewport. assert_equals: expected 0 but got -500
    6 FAIL The dialog should be centered regardless of the presence of a horizontal scrollbar. assert_approx_equals: expected 0 +/- 1 but got -500
    7 FAIL Centering should work when dialog is inside positioned containers. assert_approx_equals: expected 275 +/- 1 but got 330
     5PASS A tall dialog should be positioned at the top of the viewport.
     6PASS The dialog should be centered regardless of the presence of a horizontal scrollbar.
     7PASS Centering should work when dialog is inside positioned containers.
    88PASS A centered dialog's position should survive becoming display:none temporarily.
    9 FAIL Dialog should not still be centered when removed, and re-added to the document. assert_approx_equals: expected 285 +/- 1 but got 320
     9FAIL Dialog should not still be centered when removed, and re-added to the document. assert_equals: expected 291 but got 320
    1010PASS Dialog's specified position should survive after close() and showModal().
    11 FAIL Dialog should be recentered if showModal() is called after removing 'open'. assert_approx_equals: expected 0 +/- 1 but got -500
     11PASS Dialog should be recentered if showModal() is called after removing 'open'.
    1212

  • trunk/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/centering-expected.txt

    r279409 r279414  
    11
    2 FAIL horizontal-tb: tall viewport, default-sizes: true assert_approx_equals: expected 41 +/- 0.016666666666666666 but got 8
    3 FAIL horizontal-tb: tall viewport, default-sizes: false assert_equals: expected 45 but got 8
    4 FAIL horizontal-tb: wide viewport, default-sizes: true assert_approx_equals: expected 11 +/- 0.016666666666666666 but got 8
    5 FAIL horizontal-tb: wide viewport, default-sizes: false assert_equals: expected 15 but got 8
    6 FAIL horizontal-tb: square viewport, default-sizes: true assert_approx_equals: expected 41 +/- 0.016666666666666666 but got 8
    7 FAIL horizontal-tb: square viewport, default-sizes: false assert_equals: expected 45 but got 8
    8 FAIL horizontal-tb: dialog and viewport match, default-sizes: false assert_equals: expected 0 but got 8
    9 FAIL vertical-rl: tall viewport, default-sizes: true assert_approx_equals: expected 11 +/- 0.016666666666666666 but got 14
    10 FAIL vertical-rl: tall viewport, default-sizes: false assert_equals: expected 10 but got 12
    11 FAIL vertical-lr: tall viewport, default-sizes: true assert_approx_equals: expected 11 +/- 0.016666666666666666 but got 8
    12 FAIL vertical-lr: tall viewport, default-sizes: false assert_equals: expected 10 but got 8
    13 FAIL vertical-rl (dialog horizontal-tb): tall viewport, default-sizes: true assert_approx_equals: expected 41 +/- 0.016666666666666666 but got 8
    14 FAIL vertical-rl (dialog horizontal-tb): tall viewport, default-sizes: false assert_equals: expected 45 but got 8
    15 FAIL vertical-lr (dialog horizontal-tb): tall viewport, default-sizes: true assert_approx_equals: expected 41 +/- 0.016666666666666666 but got 8
    16 FAIL vertical-lr (dialog horizontal-tb): tall viewport, default-sizes: false assert_equals: expected 45 but got 8
    17 FAIL horizontal-tb (container vertical-rl): tall viewport, default-sizes: true assert_approx_equals: expected 11 +/- 0.016666666666666666 but got 14
    18 FAIL horizontal-tb (container vertical-rl): tall viewport, default-sizes: false assert_equals: expected 10 but got 12
    19 FAIL vertical-rl (container horizontal-tb): tall viewport, default-sizes: true assert_approx_equals: expected 41 +/- 0.016666666666666666 but got 8
    20 FAIL vertical-rl (container horizontal-tb): tall viewport, default-sizes: false assert_equals: expected 45 but got 8
    21 FAIL horizontal-tb (container vertical-rl) (dialog horizontal-tb): tall viewport, default-sizes: true assert_approx_equals: expected 41 +/- 0.016666666666666666 but got 8
    22 FAIL horizontal-tb (container vertical-rl) (dialog horizontal-tb): tall viewport, default-sizes: false assert_equals: expected 45 but got 8
    23 FAIL vertical-rl (container horizontal-tb) (dialog vertical-rl): tall viewport, default-sizes: true assert_approx_equals: expected 11 +/- 0.016666666666666666 but got 14
    24 FAIL vertical-rl (container horizontal-tb) (dialog vertical-rl): tall viewport, default-sizes: false assert_equals: expected 10 but got 12
     2PASS horizontal-tb: tall viewport, default-sizes: true
     3PASS horizontal-tb: tall viewport, default-sizes: false
     4PASS horizontal-tb: wide viewport, default-sizes: true
     5PASS horizontal-tb: wide viewport, default-sizes: false
     6PASS horizontal-tb: square viewport, default-sizes: true
     7PASS horizontal-tb: square viewport, default-sizes: false
     8PASS horizontal-tb: dialog and viewport match, default-sizes: false
     9PASS vertical-rl: tall viewport, default-sizes: true
     10PASS vertical-rl: tall viewport, default-sizes: false
     11PASS vertical-lr: tall viewport, default-sizes: true
     12PASS vertical-lr: tall viewport, default-sizes: false
     13PASS vertical-rl (dialog horizontal-tb): tall viewport, default-sizes: true
     14PASS vertical-rl (dialog horizontal-tb): tall viewport, default-sizes: false
     15PASS vertical-lr (dialog horizontal-tb): tall viewport, default-sizes: true
     16PASS vertical-lr (dialog horizontal-tb): tall viewport, default-sizes: false
     17PASS horizontal-tb (container vertical-rl): tall viewport, default-sizes: true
     18PASS horizontal-tb (container vertical-rl): tall viewport, default-sizes: false
     19PASS vertical-rl (container horizontal-tb): tall viewport, default-sizes: true
     20PASS vertical-rl (container horizontal-tb): tall viewport, default-sizes: false
     21PASS horizontal-tb (container vertical-rl) (dialog horizontal-tb): tall viewport, default-sizes: true
     22PASS horizontal-tb (container vertical-rl) (dialog horizontal-tb): tall viewport, default-sizes: false
     23PASS vertical-rl (container horizontal-tb) (dialog vertical-rl): tall viewport, default-sizes: true
     24PASS vertical-rl (container horizontal-tb) (dialog vertical-rl): tall viewport, default-sizes: false
    2525

  • trunk/LayoutTests/platform/ios-wk2/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/abspos-dialog-layout-expected.txt

    r279409 r279414  
    11
    2 FAIL showModal() should center in the viewport assert_approx_equals: expected 290 +/- 1 but got -500
    3 FAIL Dialog should be recentered if showModal() is called after close() assert_approx_equals: expected 290 +/- 1 but got -1000
     2PASS showModal() should center in the viewport
     3PASS Dialog should be recentered if showModal() is called after close()
    44PASS Dialog should not recenter on relayout.
    5 FAIL A tall dialog should be positioned at the top of the viewport. assert_equals: expected 0 but got -500
    6 FAIL The dialog should be centered regardless of the presence of a horizontal scrollbar. assert_approx_equals: expected 0 +/- 1 but got -500
    7 FAIL Centering should work when dialog is inside positioned containers. assert_approx_equals: expected 275 +/- 1 but got 330
     5PASS A tall dialog should be positioned at the top of the viewport.
     6PASS The dialog should be centered regardless of the presence of a horizontal scrollbar.
     7PASS Centering should work when dialog is inside positioned containers.
    88PASS A centered dialog's position should survive becoming display:none temporarily.
    9 FAIL Dialog should not still be centered when removed, and re-added to the document. assert_approx_equals: expected 285 +/- 1 but got 320
     9FAIL Dialog should not still be centered when removed, and re-added to the document. assert_equals: expected 290 but got 320
    1010PASS Dialog's specified position should survive after close() and showModal().
    11 FAIL Dialog should be recentered if showModal() is called after removing 'open'. assert_approx_equals: expected 0 +/- 1 but got -500
     11PASS Dialog should be recentered if showModal() is called after removing 'open'.
    1212

  • trunk/Source/WebCore/ChangeLog

    r279413 r279414  
     12021-06-30  Tim Nguyen  <ntim@apple.com>
     2
     3        Add modal dialog UA styles
     4        https://bugs.webkit.org/show_bug.cgi?id=226175
     5
     6        Reviewed by Antti Koivisto.
     7
     8        This adds an :-internal-modal-dialog pseudo class and a test to make sure it does not leak.
     9
     10        This improves WPT results a lot and expectations have been updated. Some tests start failing,
     11        but those are mainly top-layer related (which isn't implemented yet).
     12
     13        * css/CSSSelector.cpp:
     14        (WebCore::CSSSelector::selectorText const):
     15        * css/CSSSelector.h:
     16        * css/SelectorChecker.cpp:
     17        (WebCore::SelectorChecker::checkOne const):
     18        * css/SelectorCheckerTestFunctions.h:
     19        (WebCore::matchesModalDialogPseudoClass):
     20        * css/SelectorPseudoClassAndCompatibilityElementMap.in:
     21        * css/dialog.css:
     22        (dialog:-internal-modal-dialog):
     23        * css/parser/CSSSelectorParser.cpp:
     24        (WebCore::CSSSelectorParser::consumePseudo):
     25        * cssjit/SelectorCompiler.cpp:
     26        (WebCore::SelectorCompiler::JSC_DEFINE_JIT_OPERATION):
     27        (WebCore::SelectorCompiler::addPseudoClassType):
     28        * html/HTMLDialogElement.cpp:
     29        (WebCore::HTMLDialogElement::showModal):
     30        (WebCore::HTMLDialogElement::parseAttribute):
     31        (WebCore::HTMLDialogElement::isModal const):
     32        * html/HTMLDialogElement.h:
     33
    1342021-06-30  Carlos Garcia Campos  <cgarcia@igalia.com>
    235

  • trunk/Source/WebCore/css/CSSSelector.cpp

    r279408 r279414  
    545545                builder.append(":link");
    546546                break;
     547            case CSSSelector::PseudoClassModalDialog:
     548                builder.append(":-internal-modal-dialog");
     549                break;
    547550            case CSSSelector::PseudoClassNoButton:
    548551                builder.append(":no-button");

  • trunk/Source/WebCore/css/CSSSelector.h

    r272983 r279414  
    175175            PseudoClassHasAttachment,
    176176#endif
     177            PseudoClassModalDialog,
    177178        };
    178179

  • trunk/Source/WebCore/css/SelectorChecker.cpp

    r272983 r279414  
    10811081            return hasAttachment(element);
    10821082#endif
     1083
     1084        case CSSSelector::PseudoClassModalDialog:
     1085            return matchesModalDialogPseudoClass(element);
    10831086
    10841087        case CSSSelector::PseudoClassUnknown:

  • trunk/Source/WebCore/css/SelectorCheckerTestFunctions.h

    r274173 r279414  
    3131#include "FrameSelection.h"
    3232#include "FullscreenManager.h"
     33#include "HTMLDialogElement.h"
    3334#include "HTMLFrameElement.h"
    3435#include "HTMLIFrameElement.h"
    … …  
    489490}
    490491
     492ALWAYS_INLINE bool matchesModalDialogPseudoClass(const Element& element)
     493{
     494    if (is<HTMLDialogElement>(element))
     495        return downcast<HTMLDialogElement>(element).isModal();
     496    return false;
     497}
     498
    491499} // namespace WebCore

  • trunk/Source/WebCore/css/SelectorPseudoClassAndCompatibilityElementMap.in

    r279408 r279414  
    11-internal-direct-focus
     2-internal-modal-dialog
    23-khtml-drag
    34-webkit-any

  • trunk/Source/WebCore/css/dialog.css

    r278003 r279414  
    1616    display: block;
    1717}
     18
     19dialog:-internal-modal-dialog {
     20    position: fixed;
     21    overflow: auto;
     22    inset-block-start: 0;
     23    inset-block-end: 0;
     24    max-width: calc(100% - 6px - 2em);
     25    max-height: calc(100% - 6px - 2em);
     26}

  • trunk/Source/WebCore/css/parser/CSSSelectorParser.cpp

    r278253 r279414  
    584584            if (m_context.mode != UASheetMode && selector->pseudoClassType() == CSSSelector::PseudoClassDirectFocus)
    585585                return nullptr;
     586            if (m_context.mode != UASheetMode && selector->pseudoClassType() == CSSSelector::PseudoClassModalDialog)
     587                return nullptr;
    586588            if (!m_context.focusVisibleEnabled && selector->pseudoClassType() == CSSSelector::PseudoClassFocusVisible)
    587589                return nullptr;

  • trunk/Source/WebCore/cssjit/SelectorCompiler.cpp

    r278253 r279414  
    116116static JSC_DECLARE_JIT_OPERATION_WITHOUT_WTF_INTERNAL(operationHasAttachment, bool, (const Element&));
    117117#endif
     118static JSC_DECLARE_JIT_OPERATION_WITHOUT_WTF_INTERNAL(operationMatchesModalDialogPseudoClass, bool, (const Element&));
    118119
    119120static JSC_DECLARE_JIT_OPERATION_WITHOUT_WTF_INTERNAL(operationAttributeValueBeginsWithCaseSensitive, bool, (const Attribute* attribute, AtomStringImpl* expectedString));
    … …  
    753754{
    754755    return matchesLangPseudoClass(element, argumentList);
     756}
     757
     758JSC_DEFINE_JIT_OPERATION(operationMatchesModalDialogPseudoClass, bool, (const Element& element))
     759{
     760    return matchesModalDialogPseudoClass(element);
    755761}
    756762
    … …  
    870876#endif
    871877
     878    case CSSSelector::PseudoClassModalDialog:
     879        fragment.unoptimizedPseudoClasses.append(JSC::FunctionPtr<JSC::OperationPtrTag>(operationMatchesModalDialogPseudoClass));
     880        return FunctionType::SimpleSelectorChecker;
     881
    872882    // These pseudo-classes only have meaning with scrollbars.
    873883    case CSSSelector::PseudoClassHorizontal:

  • trunk/Source/WebCore/html/HTMLDialogElement.cpp

    r279406 r279414  
    8989
    9090    setOpen(true);
     91    m_isModal = true;
     92
    9193    return { };
    9294}
    … …  
    116118        // Emit close event
    117119        if (oldValue != m_isOpen && !m_isOpen) {
     120            m_isModal = false;
    118121            dialogCloseEventSender().cancelEvent(*this);
    119122            dialogCloseEventSender().dispatchEventSoon(*this);
    … …  
    130133}
    131134
     135bool HTMLDialogElement::isModal() const
     136{
     137    return m_isModal;
    132138}
     139
     140}

  • trunk/Source/WebCore/html/HTMLDialogElement.h

    r279406 r279414  
    5050    void dispatchPendingEvent(DialogEventSender*);
    5151
     52    bool isModal() const;
     53
    5254private:
    5355    HTMLDialogElement(const QualifiedName&, Document&);
    … …  
    5860
    5961    String m_returnValue;
     62    bool m_isModal { false };
    6063    bool m_isOpen { false };
    6164};
Note: See TracChangeset for help on using the changeset viewer.