1410692 - Incorrect rendering of SPAN containing TEXTAREA

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Michael Hohner]

Attachment: Example

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:56.0) Gecko/20100101 Firefox/56.0
Build ID: 20170926190823

Steps to reproduce:

Example shows SPAN not fully enclosing contained TEXTAREA.


Actual results:

SPAN is not wide enough to surround contained TEXTAREA. When resizing the TEXTAREA (which sets height and width explicitly), the containing SPAN snaps to the correct size.


Expected results:

SPAN should be formatted with the correct size without resizing the TEXTAREA.

Comment 1

[Tooru Fujisawa [:arai]]

same behavior on chrome and safari.

Comment 2

[Oriol Brufau [:Oriol]]

The behavior is expected.

1. The span has a shrink-to-fit width
2. The textarea has width:100%
3. This is a circular definition, which is broken as follows (https://drafts.csswg.org/css-sizing-3/#percentage-sizing)
   1. The textarea is temporarily sized width width:auto (i.e. its intrinsic width)
   2. Once the contribution of the textarea is known, the span can be sized
   3. The textarea is sized again, now with width:100%
4. Since you also have some text, the textarea does not fit in the available space of that line
5. Usually, it would be moved to the following line, but you use white-space:nowrap
6. Therefore, the textarea overflows the span.

When you resize the textarea, the browser styles it with a definite width measured in pixels. This is not a percentage, so there is no circular dependency, so the span can be sized taking the contribution of the textarea into account.