Changeset 209901 in webkit


Ignore:
Timestamp:
Dec 15, 2016 7:14:52 PM (7 years ago)
Author:
Chris Dumez
Message:

Make sure HTML validation bubble's state is updated after layout
​https://bugs.webkit.org/show_bug.cgi?id=165922
<rdar://problem/29694730>

Reviewed by Simon Fraser.

Source/WebCore:

Make sure HTML validation bubble's state is updated after layout.
In particular, if the validation bubble's associated element has
moved or is no longer visible, we now hide the bubble.

Tests: fast/forms/validation-bubble-disappears-when-input-detached.html

fast/forms/validation-bubble-disappears-when-input-moved.html
fast/forms/validation-bubble-disappears-when-input-no-longer-visible.html

  • page/FrameView.cpp:

(WebCore::FrameView::viewportContentsChanged):

  • page/Page.cpp:

(WebCore::Page::updateValidationBubbleStateIfNeeded):

  • page/Page.h:
  • page/ValidationMessageClient.h:

Source/WebKit/mac:

Make sure HTML validation bubble's state is updated after layout.
In particular, if the validation bubble's associated element has
moved or is no longer visible, we now hide the bubble.

  • WebCoreSupport/WebValidationMessageClient.h:
  • WebCoreSupport/WebValidationMessageClient.mm:

(WebValidationMessageClient::showValidationMessage):
(WebValidationMessageClient::hideValidationMessage):
(WebValidationMessageClient::updateValidationBubbleStateIfNeeded):

Source/WebKit2:

Make sure HTML validation bubble's state is updated after layout.
In particular, if the validation bubble's associated element has
moved or is no longer visible, we now hide the bubble.

  • WebProcess/WebCoreSupport/WebValidationMessageClient.cpp:

(WebKit::WebValidationMessageClient::showValidationMessage):
(WebKit::WebValidationMessageClient::hideValidationMessage):
(WebKit::WebValidationMessageClient::updateValidationBubbleStateIfNeeded):

  • WebProcess/WebCoreSupport/WebValidationMessageClient.h:

LayoutTests:

Add several layout tests to cover this.

  • fast/forms/validation-bubble-disappears-when-input-detached-expected.txt: Added.
  • fast/forms/validation-bubble-disappears-when-input-detached.html: Added.
  • fast/forms/validation-bubble-disappears-when-input-moved-expected.txt: Added.
  • fast/forms/validation-bubble-disappears-when-input-moved.html: Added.
  • fast/forms/validation-bubble-disappears-when-input-no-longer-visible-expected.txt: Added.
  • fast/forms/validation-bubble-disappears-when-input-no-longer-visible.html: Added.
Location:
trunk
Files:
17 edited
6 copied

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r209895 r209901  
     12016-12-15  Chris Dumez  <cdumez@apple.com>
     2
     3        Make sure HTML validation bubble's state is updated after layout
     4        https://bugs.webkit.org/show_bug.cgi?id=165922
     5        <rdar://problem/29694730>
     6
     7        Reviewed by Simon Fraser.
     8
     9        Add several layout tests to cover this.
     10
     11        * fast/forms/validation-bubble-disappears-when-input-detached-expected.txt: Added.
     12        * fast/forms/validation-bubble-disappears-when-input-detached.html: Added.
     13        * fast/forms/validation-bubble-disappears-when-input-moved-expected.txt: Added.
     14        * fast/forms/validation-bubble-disappears-when-input-moved.html: Added.
     15        * fast/forms/validation-bubble-disappears-when-input-no-longer-visible-expected.txt: Added.
     16        * fast/forms/validation-bubble-disappears-when-input-no-longer-visible.html: Added.
     17
    1182016-12-15  Chris Dumez  <cdumez@apple.com>
    219

  • trunk/LayoutTests/fast/forms/validation-bubble-disappears-when-input-detached-expected.txt

    r209900 r209901  
    1 Tests that the custom validation message set by JavaScript is displayed on UI side.
     1Required text input:
     2Tests that the HTML form validation bubble disappears when its associated element is detached.
    23
    34On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
    45
    5 
    6 PASS validationBubbleContents.message is "This is a custom validity message."
    76PASS validationBubbleContents.message is "Fill out this field"
     7PASS validationBubbleContents.message is ""
    88PASS successfullyParsed is true
    99
    1010TEST COMPLETE
    11 Required text input:
     11

  • trunk/LayoutTests/fast/forms/validation-bubble-disappears-when-input-detached.html

    r209900 r209901  
    66  Required text input: <input type="text" id="required_text_input" required><input id="required_text_input_submit" type="submit">
    77</form>
     8<div id="description"></div>
     9<div id="console"></div>
    810<script>
    9 description("Tests that the custom validation message set by JavaScript is displayed on UI side.");
     11description("Tests that the HTML form validation bubble disappears when its associated element is detached.");
    1012jsTestIsAsync = true;
    1113
    … …  
    2022onload = function() {
    2123    input = document.getElementById("required_text_input");
    22     input.setCustomValidity("This is a custom validity message.");
    2324    submit = document.getElementById("required_text_input_submit");
    2425    submit.click();
    … …  
    2627    testRunner.runUIScript(getValidationBubbleContents(), function(result) {
    2728        validationBubbleContents = JSON.parse(result).validationBubble;
    28         shouldBeEqualToString("validationBubbleContents.message", "This is a custom validity message.");
     29        shouldBeEqualToString("validationBubbleContents.message", "Fill out this field");
    2930
    30         // Reset the validity message to the default one.
    31         input.setCustomValidity("");
    32         submit.click();
     31        // Detach input element.
     32        input.remove();
     33        // Force layout.
     34        input.offsetTop;
    3335
    3436        testRunner.runUIScript(getValidationBubbleContents(), function(result) {
    3537            validationBubbleContents = JSON.parse(result).validationBubble;
    36             shouldBeEqualToString("validationBubbleContents.message", "Fill out this field");
     38            shouldBeEqualToString("validationBubbleContents.message", ""); // No longer visible.
    3739            finishJSTest();
    3840        });

  • trunk/LayoutTests/fast/forms/validation-bubble-disappears-when-input-moved-expected.txt

    r209900 r209901  
    1 Tests that the custom validation message set by JavaScript is displayed on UI side.
     1
     2Required text input:
     3Tests that the HTML form validation bubble disappears when its associated element is no longer visible.
    24
    35On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
    46
    5 
    6 PASS validationBubbleContents.message is "This is a custom validity message."
    77PASS validationBubbleContents.message is "Fill out this field"
     8PASS validationBubbleContents.message is ""
    89PASS successfullyParsed is true
    910
    1011TEST COMPLETE
    11 Required text input:
     12

  • trunk/LayoutTests/fast/forms/validation-bubble-disappears-when-input-moved.html

    r209900 r209901  
    66  Required text input: <input type="text" id="required_text_input" required><input id="required_text_input_submit" type="submit">
    77</form>
     8<div id="description"></div>
     9<div id="console"></div>
    810<script>
    9 description("Tests that the custom validation message set by JavaScript is displayed on UI side.");
     11description("Tests that the HTML form validation bubble disappears when its associated element is no longer visible.");
    1012jsTestIsAsync = true;
    1113
    … …  
    2022onload = function() {
    2123    input = document.getElementById("required_text_input");
    22     input.setCustomValidity("This is a custom validity message.");
    2324    submit = document.getElementById("required_text_input_submit");
    2425    submit.click();
    … …  
    2627    testRunner.runUIScript(getValidationBubbleContents(), function(result) {
    2728        validationBubbleContents = JSON.parse(result).validationBubble;
    28         shouldBeEqualToString("validationBubbleContents.message", "This is a custom validity message.");
     29        shouldBeEqualToString("validationBubbleContents.message", "Fill out this field");
    2930
    30         // Reset the validity message to the default one.
    31         input.setCustomValidity("");
    32         submit.click();
     31        // Move input element.
     32        document.body.prepend(document.createElement("br"));
     33        // Force layout.
     34        input.offsetTop;
    3335
    3436        testRunner.runUIScript(getValidationBubbleContents(), function(result) {
    3537            validationBubbleContents = JSON.parse(result).validationBubble;
    36             shouldBeEqualToString("validationBubbleContents.message", "Fill out this field");
     38            shouldBeEqualToString("validationBubbleContents.message", ""); // No longer visible.
    3739            finishJSTest();
    3840        });

  • trunk/LayoutTests/fast/forms/validation-bubble-disappears-when-input-no-longer-visible-expected.txt

    r209900 r209901  
    1 Tests that the custom validation message set by JavaScript is displayed on UI side.
     1Required text input:
     2Tests that the HTML form validation bubble disappears when its associated element is no longer visible.
    23
    34On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
    45
    5 
    6 PASS validationBubbleContents.message is "This is a custom validity message."
    76PASS validationBubbleContents.message is "Fill out this field"
     7PASS validationBubbleContents.message is ""
    88PASS successfullyParsed is true
    99
    1010TEST COMPLETE
    11 Required text input:
     11

  • trunk/LayoutTests/fast/forms/validation-bubble-disappears-when-input-no-longer-visible.html

    r209900 r209901  
    66  Required text input: <input type="text" id="required_text_input" required><input id="required_text_input_submit" type="submit">
    77</form>
     8<div id="description"></div>
     9<div id="console"></div>
    810<script>
    9 description("Tests that the custom validation message set by JavaScript is displayed on UI side.");
     11description("Tests that the HTML form validation bubble disappears when its associated element is no longer visible.");
    1012jsTestIsAsync = true;
    1113
    … …  
    2022onload = function() {
    2123    input = document.getElementById("required_text_input");
    22     input.setCustomValidity("This is a custom validity message.");
    2324    submit = document.getElementById("required_text_input_submit");
    2425    submit.click();
    … …  
    2627    testRunner.runUIScript(getValidationBubbleContents(), function(result) {
    2728        validationBubbleContents = JSON.parse(result).validationBubble;
    28         shouldBeEqualToString("validationBubbleContents.message", "This is a custom validity message.");
     29        shouldBeEqualToString("validationBubbleContents.message", "Fill out this field");
    2930
    30         // Reset the validity message to the default one.
    31         input.setCustomValidity("");
    32         submit.click();
     31        // Hide input element.
     32        input.setAttribute("style", "display: none");
     33        // Force layout.
     34        input.offsetTop;
    3335
    3436        testRunner.runUIScript(getValidationBubbleContents(), function(result) {
    3537            validationBubbleContents = JSON.parse(result).validationBubble;
    36             shouldBeEqualToString("validationBubbleContents.message", "Fill out this field");
     38            shouldBeEqualToString("validationBubbleContents.message", ""); // No longer visible.
    3739            finishJSTest();
    3840        });

  • trunk/LayoutTests/fast/forms/validation-custom-message-expected.txt

    r208930 r209901  
     1Required text input:
    12Tests that the custom validation message set by JavaScript is displayed on UI side.
    23
    34On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
    4 
    55
    66PASS validationBubbleContents.message is "This is a custom validity message."
    … …  
    99
    1010TEST COMPLETE
    11 Required text input:
     11

  • trunk/LayoutTests/fast/forms/validation-custom-message.html

    r208930 r209901  
    66  Required text input: <input type="text" id="required_text_input" required><input id="required_text_input_submit" type="submit">
    77</form>
     8<div id="description"></div>
     9<div id="console"></div>
    810<script>
    911description("Tests that the custom validation message set by JavaScript is displayed on UI side.");

  • trunk/LayoutTests/fast/forms/validation-messages-expected.txt

    r209620 r209901  
     1Required text input:
     2Required checkbox input:
     3Required radio input:
     4Required radio input:   
     5Required file input:
     6Required email input:
     7Required url input:
     8Required input with pattern:
     9Required input with minlength=100:
     10Required range with min=5:
     11Required range with max=5:
     12Required range with step=3 / min=0:
    113Tests the HTML form validation messages being shown on UI side.
    214
    315On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
    4 
    516
    617PASS validationBubbleContents.message is "Fill out this field"
    … …  
    1829
    1930TEST COMPLETE
    20 Required text input:
    21 Required checkbox input:
    22 Required radio input:
    23 Required radio input:   
    24 Required file input:
    25 Required email input:
    26 Required url input:
    27 Required input with pattern:
    28 Required input with minlength=100:
    29 Required range with min=5:
    30 Required range with max=5:
    31 Required range with step=3 / min=0:
     31

  • trunk/LayoutTests/fast/forms/validation-messages.html

    r209620 r209901  
    3838  Required range with step=3 / min=0: <input type="number" value="10" min=0 step=3 required><input id="range_with_step_submit" type="submit">
    3939</form>
     40<div id="description"></div>
     41<div id="console"></div>
    4042<script>
    4143description("Tests the HTML form validation messages being shown on UI side.");

  • trunk/LayoutTests/platform/ios-simulator-wk2/fast/forms/validation-messages-expected.txt

    r209620 r209901  
     1Required text input:
     2Required checkbox input:
     3Required radio input:
     4Required radio input:   
     5Required file input:
     6Required email input:
     7Required url input:
     8Required input with pattern:
     9Required input with minlength=100:
     10Required range with min=5:
     11Required range with max=5:
     12Required range with step=3 / min=0:
    113Tests the HTML form validation messages being shown on UI side.
    214
    315On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
    4 
    516
    617PASS validationBubbleContents.message is "Fill out this field"
    … …  
    1829
    1930TEST COMPLETE
    20 Required text input:
    21 Required checkbox input:
    22 Required radio input:
    23 Required radio input:   
    24 Required file input:
    25 Required email input:
    26 Required url input:
    27 Required input with pattern:
    28 Required input with minlength=100:
    29 Required range with min=5:
    30 Required range with max=5:
    31 Required range with step=3 / min=0:
     31

  • trunk/Source/WebCore/ChangeLog

    r209900 r209901  
     12016-12-15  Chris Dumez  <cdumez@apple.com>
     2
     3        Make sure HTML validation bubble's state is updated after layout
     4        https://bugs.webkit.org/show_bug.cgi?id=165922
     5        <rdar://problem/29694730>
     6
     7        Reviewed by Simon Fraser.
     8
     9        Make sure HTML validation bubble's state is updated after layout.
     10        In particular, if the validation bubble's associated element has
     11        moved or is no longer visible, we now hide the bubble.
     12
     13        Tests: fast/forms/validation-bubble-disappears-when-input-detached.html
     14               fast/forms/validation-bubble-disappears-when-input-moved.html
     15               fast/forms/validation-bubble-disappears-when-input-no-longer-visible.html
     16
     17        * page/FrameView.cpp:
     18        (WebCore::FrameView::viewportContentsChanged):
     19        * page/Page.cpp:
     20        (WebCore::Page::updateValidationBubbleStateIfNeeded):
     21        * page/Page.h:
     22        * page/ValidationMessageClient.h:
     23
    1242016-12-15  Sam Weinig  <sam@webkit.org>
    225

  • trunk/Source/WebCore/page/FrameView.cpp

    r209745 r209901  
    21282128    }
    21292129
     2130    if (auto* page = frame().page())
     2131        page->updateValidationBubbleStateIfNeeded();
     2132
    21302133    // When the viewport contents changes (scroll, resize, style recalc, layout, ...),
    21312134    // check if we should resume animated images or unthrottle DOM timers.

  • trunk/Source/WebCore/page/Page.cpp

    r209733 r209901  
    136136}
    137137
     138void Page::updateValidationBubbleStateIfNeeded()
     139{
     140    if (auto* client = validationMessageClient())
     141        client->updateValidationBubbleStateIfNeeded();
     142}
     143
    138144static void networkStateChanged(bool isOnLine)
    139145{

  • trunk/Source/WebCore/page/Page.h

    r209514 r209901  
    216216    PointerLockController& pointerLockController() const { return *m_pointerLockController; }
    217217#endif
     218
    218219    ValidationMessageClient* validationMessageClient() const { return m_validationMessageClient.get(); }
     220    void updateValidationBubbleStateIfNeeded();
    219221
    220222    WEBCORE_EXPORT ScrollingCoordinator* scrollingCoordinator();

  • trunk/Source/WebCore/page/ValidationMessageClient.h

    r208179 r209901  
    4848    // is visible.
    4949    virtual bool isValidationMessageVisible(const Element& anchor) = 0;
     50
     51    virtual void updateValidationBubbleStateIfNeeded() = 0;
    5052};
    5153

  • trunk/Source/WebKit/mac/ChangeLog

    r209895 r209901  
     12016-12-15  Chris Dumez  <cdumez@apple.com>
     2
     3        Make sure HTML validation bubble's state is updated after layout
     4        https://bugs.webkit.org/show_bug.cgi?id=165922
     5        <rdar://problem/29694730>
     6
     7        Reviewed by Simon Fraser.
     8
     9        Make sure HTML validation bubble's state is updated after layout.
     10        In particular, if the validation bubble's associated element has
     11        moved or is no longer visible, we now hide the bubble.
     12
     13        * WebCoreSupport/WebValidationMessageClient.h:
     14        * WebCoreSupport/WebValidationMessageClient.mm:
     15        (WebValidationMessageClient::showValidationMessage):
     16        (WebValidationMessageClient::hideValidationMessage):
     17        (WebValidationMessageClient::updateValidationBubbleStateIfNeeded):
     18
    1192016-12-15  Chris Dumez  <cdumez@apple.com>
    220

  • trunk/Source/WebKit/mac/WebCoreSupport/WebValidationMessageClient.h

    r209252 r209901  
    2626#pragma once
    2727
     28#import <WebCore/IntRect.h>
    2829#import <WebCore/ValidationMessageClient.h>
    2930
    … …  
    4344    void hideValidationMessage(const WebCore::Element& anchor) final;
    4445    bool isValidationMessageVisible(const WebCore::Element& anchor) final;
     46    void updateValidationBubbleStateIfNeeded() final;
    4547
    4648private:
    4749    WebView* m_view;
    4850    const WebCore::Element* m_currentAnchor { nullptr };
     51    WebCore::IntRect m_currentAnchorRect;
    4952};

  • trunk/Source/WebKit/mac/WebCoreSupport/WebValidationMessageClient.mm

    r209252 r209901  
    4949
    5050    m_currentAnchor = &anchor;
    51     [m_view showFormValidationMessage:message withAnchorRect:anchor.clientRect()];
     51    m_currentAnchorRect = anchor.clientRect();
     52    [m_view showFormValidationMessage:message withAnchorRect:m_currentAnchorRect];
    5253}
    5354
    … …  
    5859
    5960    m_currentAnchor = nullptr;
     61    m_currentAnchorRect = { };
    6062    [m_view hideFormValidationMessage];
    6163}
    … …  
    6567    return m_currentAnchor == &anchor;
    6668}
     69
     70void WebValidationMessageClient::updateValidationBubbleStateIfNeeded()
     71{
     72    if (!m_currentAnchor)
     73        return;
     74
     75    // We currently hide the validation bubble if its position is outdated instead of trying
     76    // to update its position.
     77    if (m_currentAnchorRect != m_currentAnchor->clientRect())
     78        hideValidationMessage(*m_currentAnchor);
     79}

  • trunk/Source/WebKit2/ChangeLog

    r209898 r209901  
     12016-12-15  Chris Dumez  <cdumez@apple.com>
     2
     3        Make sure HTML validation bubble's state is updated after layout
     4        https://bugs.webkit.org/show_bug.cgi?id=165922
     5        <rdar://problem/29694730>
     6
     7        Reviewed by Simon Fraser.
     8
     9        Make sure HTML validation bubble's state is updated after layout.
     10        In particular, if the validation bubble's associated element has
     11        moved or is no longer visible, we now hide the bubble.
     12
     13        * WebProcess/WebCoreSupport/WebValidationMessageClient.cpp:
     14        (WebKit::WebValidationMessageClient::showValidationMessage):
     15        (WebKit::WebValidationMessageClient::hideValidationMessage):
     16        (WebKit::WebValidationMessageClient::updateValidationBubbleStateIfNeeded):
     17        * WebProcess/WebCoreSupport/WebValidationMessageClient.h:
     18
    1192016-12-15  Alex Christensen  <achristensen@webkit.org>
    220

  • trunk/Source/WebKit2/WebProcess/WebCoreSupport/WebValidationMessageClient.cpp

    r208361 r209901  
    5353
    5454    m_currentAnchor = &anchor;
    55     m_page.send(Messages::WebPageProxy::ShowValidationMessage(anchor.clientRect(), message));
     55    m_currentAnchorRect = anchor.clientRect();
     56    m_page.send(Messages::WebPageProxy::ShowValidationMessage(m_currentAnchorRect, message));
    5657}
    5758
    … …  
    6263
    6364    m_currentAnchor = nullptr;
     65    m_currentAnchorRect = { };
    6466    m_page.send(Messages::WebPageProxy::HideValidationMessage());
    6567}
    … …  
    7072}
    7173
     74void WebValidationMessageClient::updateValidationBubbleStateIfNeeded()
     75{
     76    if (!m_currentAnchor)
     77        return;
     78
     79    // We currently hide the validation bubble if its position is outdated instead of trying
     80    // to update its position.
     81    if (m_currentAnchorRect != m_currentAnchor->clientRect())
     82        hideValidationMessage(*m_currentAnchor);
     83}
     84
    7285} // namespace WebKit

  • trunk/Source/WebKit2/WebProcess/WebCoreSupport/WebValidationMessageClient.h

    r208361 r209901  
    4242    void hideValidationMessage(const WebCore::Element& anchor) final;
    4343    bool isValidationMessageVisible(const WebCore::Element& anchor) final;
     44    void updateValidationBubbleStateIfNeeded() final;
    4445
    4546private:
    4647    WebPage& m_page;
    4748    const WebCore::Element* m_currentAnchor { nullptr };
     49    WebCore::IntRect m_currentAnchorRect;
    4850};
    4951
Note: See TracChangeset for help on using the changeset viewer.