Bug 195125 - [iOS] Caret x-position in empty text area does not match text field
Summary: [iOS] Caret x-position in empty text area does not match text field
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: WebKit Local Build
Hardware: iPhone / iPad iOS 12
: P2 Normal
Assignee: Daniel Bates
URL:
Keywords: InRadar, PlatformOnly
Depends on:
Blocks:
 
Reported: 2019-02-27 15:24 PST by Daniel Bates
Modified: 2019-03-05 21:51 PST (History)
8 users (show)

See Also:


Attachments
Work-in-progress (7.28 KB, patch)
2019-02-27 15:26 PST, Daniel Bates
no flags Details | Formatted Diff | Diff
Patch and layout test (256.83 KB, patch)
2019-03-01 11:30 PST, Daniel Bates
no flags Details | Formatted Diff | Diff
Archive of layout-test-results from ews126 for ios-simulator-wk2 (3.47 MB, application/zip)
2019-03-01 13:37 PST, EWS Watchlist
no flags Details
Patch and layout tests (256.57 KB, patch)
2019-03-01 13:53 PST, Daniel Bates
no flags Details | Formatted Diff | Diff
To land (256.37 KB, patch)
2019-03-04 13:03 PST, Daniel Bates
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Daniel Bates 2019-02-27 15:24:40 PST
The x-position of the caret in an empty text field does not match the x-position of the caret in a text field. You can see this for yourself by visiting <data:text/html,<input placeholder="text"><textarea placeholder="text"></textarea>>.
Comment 1 Daniel Bates 2019-02-27 15:24:48 PST
<rdar://problem/47161070>
Comment 2 Daniel Bates 2019-02-27 15:26:13 PST
Created attachment 363140 [details]
Work-in-progress
Comment 3 Daniel Bates 2019-03-01 11:30:02 PST
Created attachment 363348 [details]
Patch and layout test
Comment 4 EWS Watchlist 2019-03-01 13:37:30 PST Comment hidden (obsolete)
Comment 5 EWS Watchlist 2019-03-01 13:37:31 PST Comment hidden (obsolete)
Comment 6 Daniel Bates 2019-03-01 13:53:28 PST
Created attachment 363370 [details]
Patch and layout tests
Comment 7 Darin Adler 2019-03-03 00:05:53 PST
Comment on attachment 363370 [details]
Patch and layout tests

View in context: https://bugs.webkit.org/attachment.cgi?id=363370&action=review

> Source/WebCore/css/html.css:400
> +    padding: 0.2em 0.5em 0.3em 0.5em; /* Keep padding-left, padding-right in sync with textarea selector (below). */

Should say "keep the values the same", not "keep them in sync" since "in sync" sounds like something more sophisticated that could mean something different. Also, this comment, like all comments, ought to say *why*, not just leave instructions for future programmers to follow without rationale. Still want to keep the comment wording short, if possible.

> Source/WebCore/css/html.css:681
> +    /* Keep padding-left, padding-right sync with input selector (above). */

Would be best if the comment format was identical to above. The other one is at the end of a line but this is between lines. Also, this says "keep sync" rather than "keep in sync", but should be reworded anyway.

But also, the thing above isn’t the input selector. On the iOS Family platform, which is the only platform this code is active on, the above selector is a selector that matches *many* things, including textarea, just like this one. So it’s a misnomer to call the thing about the "input selector". And that observation points to a way to avoid this problem. Instead of "padding: 2x", which I suppose is what we want for other platforms, on the iOS Family platforms maybe we should instead just do "padding-top: 2px; padding-bottom: 2px", then we will inherit the padding values from the earlier rule and won’t need padding-left/padding-right values nor a comment telling us to keep things "in sync". Still might need a comment explaining why we carefully avoid setting padding-left and padding-right.
Comment 8 Daniel Bates 2019-03-04 12:00:19 PST
(In reply to Darin Adler from comment #7)
> Comment on attachment 363370 [details]
> Patch and layout tests
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=363370&action=review
> 
> > Source/WebCore/css/html.css:400
> > +    padding: 0.2em 0.5em 0.3em 0.5em; /* Keep padding-left, padding-right in sync with textarea selector (below). */
> 
> Should say "keep the values the same", not "keep them in sync" since "in
> sync" sounds like something more sophisticated that could mean something
> different. Also, this comment, like all comments, ought to say *why*, not
> just leave instructions for future programmers to follow without rationale.
> Still want to keep the comment wording short, if possible.
> 
> > Source/WebCore/css/html.css:681
> > +    /* Keep padding-left, padding-right sync with input selector (above). */
> 
> Would be best if the comment format was identical to above. The other one is
> at the end of a line but this is between lines. Also, this says "keep sync"
> rather than "keep in sync", but should be reworded anyway.
> 

Will fix comment wording.

> But also, the thing above isn’t the input selector. On the iOS Family
> platform, which is the only platform this code is active on, the above
> selector is a selector that matches *many* things, including textarea, just
> like this one. So it’s a misnomer to call the thing about the "input
> selector". And that observation points to a way to avoid this problem.
> Instead of "padding: 2x", which I suppose is what we want for other
> platforms, on the iOS Family platforms maybe we should instead just do
> "padding-top: 2px; padding-bottom: 2px", then we will inherit the padding
> values from the earlier rule and won’t need padding-left/padding-right
> values nor a comment telling us to keep things "in sync". Still might need a
> comment explaining why we carefully avoid setting padding-left and
> padding-right.

Yeah, that's a better idea. Will do that.
Comment 9 Daniel Bates 2019-03-04 13:02:20 PST
Comment on attachment 363370 [details]
Patch and layout tests

View in context: https://bugs.webkit.org/attachment.cgi?id=363370&action=review

>>> Source/WebCore/css/html.css:400
>>> +    padding: 0.2em 0.5em 0.3em 0.5em; /* Keep padding-left, padding-right in sync with textarea selector (below). */
>> 
>> Should say "keep the values the same", not "keep them in sync" since "in sync" sounds like something more sophisticated that could mean something different. Also, this comment, like all comments, ought to say *why*, not just leave instructions for future programmers to follow without rationale. Still want to keep the comment wording short, if possible.
> 
> Will fix comment wording.

Removed this comment entirely. Instead added the following comment below:

/* On iOS we want to inherit the left and right padding for consistency with
other form controls (e.g. <input type="text">). We want to use override the
top and bottom padding to ensure we have a symmetric look for text areas. */
Comment 10 Daniel Bates 2019-03-04 13:03:04 PST
Created attachment 363544 [details]
To land
Comment 11 Daniel Bates 2019-03-04 13:07:23 PST
Comment on attachment 363544 [details]
To land

Clearing flags on attachment: 363544

Committed r242379: <https://trac.webkit.org/changeset/242379>
Comment 12 Daniel Bates 2019-03-04 13:07:24 PST
All reviewed patches have been landed.  Closing bug.
Comment 13 Darin Adler 2019-03-04 13:23:51 PST
(In reply to Daniel Bates from comment #9)
> /* On iOS we want to inherit the left and right padding for consistency with
> other form controls (e.g. <input type="text">). We want to use override the
> top and bottom padding to ensure we have a symmetric look for text areas. */

The phrase "use override" might need to be revised; doesn't seem quite right.
Comment 14 Daniel Bates 2019-03-04 13:55:23 PST
(In reply to Darin Adler from comment #13)
> (In reply to Daniel Bates from comment #9)
> > /* On iOS we want to inherit the left and right padding for consistency with
> > other form controls (e.g. <input type="text">). We want to use override the
> > top and bottom padding to ensure we have a symmetric look for text areas. */
> 
> The phrase "use override" might need to be revised; doesn't seem quite right.

Yikes! Changing "use override" to "override"
Comment 15 Daniel Bates 2019-03-04 13:58:52 PST
(In reply to Daniel Bates from comment #14)
> (In reply to Darin Adler from comment #13)
> > (In reply to Daniel Bates from comment #9)
> > > /* On iOS we want to inherit the left and right padding for consistency with
> > > other form controls (e.g. <input type="text">). We want to use override the
> > > top and bottom padding to ensure we have a symmetric look for text areas. */
> > 
> > The phrase "use override" might need to be revised; doesn't seem quite right.
> 
> Yikes! Changing "use override" to "override"

Fixed in <https://trac.webkit.org/r242389>.
Comment 16 Truitt Savell 2019-03-05 13:36:40 PST
It appears that the changes in https://trac.webkit.org/changeset/242379/webkit

caused an API failure on iOS:
Failed

    TestWebKitAPI.DragAndDropTests.ContentEditableToTextarea
        2019-03-04 15:04:34.682 TestWebKitAPI[44455:23074074] Expected selection rects: (
            "NSRect: {{6, 203}, {990, 232}}"
        ) but observed: (
            "NSRect: {{101, 203}, {990, 232}}"
        )
        
        /Volumes/Data/slave/ios-simulator-12-release/build/Tools/TestWebKitAPI/Tests/ios/DragAndDropTestsIOS.mm:137
        Value of: [expected isEqualToArray:observed]
          Actual: false
        Expected: true

Build:
https://build.webkit.org/builders/Apple%20iOS%2012%20Simulator%20Release%20WK2%20%28Tests%29/builds/2957

reproduced this locally and found 242379 causes the failure while 242378 does not.
Comment 17 Daniel Bates 2019-03-05 17:37:49 PST
(In reply to Truitt Savell from comment #16)
> It appears that the changes in
> https://trac.webkit.org/changeset/242379/webkit
> 
> caused an API failure on iOS:
> Failed
> 
>     TestWebKitAPI.DragAndDropTests.ContentEditableToTextarea
>         2019-03-04 15:04:34.682 TestWebKitAPI[44455:23074074] Expected
> selection rects: (
>             "NSRect: {{6, 203}, {990, 232}}"
>         ) but observed: (
>             "NSRect: {{101, 203}, {990, 232}}"
>         )
>         
>        
> /Volumes/Data/slave/ios-simulator-12-release/build/Tools/TestWebKitAPI/Tests/
> ios/DragAndDropTestsIOS.mm:137
>         Value of: [expected isEqualToArray:observed]
>           Actual: false
>         Expected: true
> 
> Build:
> https://build.webkit.org/builders/
> Apple%20iOS%2012%20Simulator%20Release%20WK2%20%28Tests%29/builds/2957
> 
> reproduced this locally and found 242379 causes the failure while 242378
> does not.

Will look.
Comment 18 Daniel Bates 2019-03-05 21:49:40 PST
(In reply to Daniel Bates from comment #17)
> (In reply to Truitt Savell from comment #16)
> > It appears that the changes in
> > https://trac.webkit.org/changeset/242379/webkit
> > 
> > caused an API failure on iOS:
> > Failed
> > 
> >     TestWebKitAPI.DragAndDropTests.ContentEditableToTextarea
> >         2019-03-04 15:04:34.682 TestWebKitAPI[44455:23074074] Expected
> > selection rects: (
> >             "NSRect: {{6, 203}, {990, 232}}"
> >         ) but observed: (
> >             "NSRect: {{101, 203}, {990, 232}}"
> >         )
> >         
> >        
> > /Volumes/Data/slave/ios-simulator-12-release/build/Tools/TestWebKitAPI/Tests/
> > ios/DragAndDropTestsIOS.mm:137
> >         Value of: [expected isEqualToArray:observed]
> >           Actual: false
> >         Expected: true
> > 
> > Build:
> > https://build.webkit.org/builders/
> > Apple%20iOS%2012%20Simulator%20Release%20WK2%20%28Tests%29/builds/2957
> > 
> > reproduced this locally and found 242379 causes the failure while 242378
> > does not.
> 
> Will look.

This result is expected now that the left padding of a textarea is specified in ems (so, dependent on the font size). Committed updated test expectations in <https://trac.webkit.org/changeset/242530>.
Comment 19 Daniel Bates 2019-03-05 21:51:20 PST
(In reply to Truitt Savell from comment #16)
> It appears that the changes in
> https://trac.webkit.org/changeset/242379/webkit
> 
> caused an API failure on iOS:
> Failed
> 
>     TestWebKitAPI.DragAndDropTests.ContentEditableToTextarea
>         2019-03-04 15:04:34.682 TestWebKitAPI[44455:23074074] Expected
> selection rects: (
>             "NSRect: {{6, 203}, {990, 232}}"
>         ) but observed: (
>             "NSRect: {{101, 203}, {990, 232}}"
>         )
>         
>        
> /Volumes/Data/slave/ios-simulator-12-release/build/Tools/TestWebKitAPI/Tests/
> ios/DragAndDropTestsIOS.mm:137
>         Value of: [expected isEqualToArray:observed]
>           Actual: false
>         Expected: true
> 
> Build:
> https://build.webkit.org/builders/
> Apple%20iOS%2012%20Simulator%20Release%20WK2%20%28Tests%29/builds/2957
> 
> reproduced this locally and found 242379 causes the failure while 242378
> does not.

By the way, I assumed you made typos and meant r242389 and r242388.