80002 - [CSS] "width:<percentage>" is calculated as percentage of window width

Status: VERIFIED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[Koike Kazuhiko]

"width:<percentage>" is calculated as percentage of window width.

<div style="border-width: 5pt;border-style: solid; border-color: red;">
  <div style="border: 10pt solid yellow; width:100%"></div>
</div>

This should be displayed as yellow square in red square.
But now yellow square is wider than red square.

Comment 1

[Koike Kazuhiko]

Attachment: Testcase

Comment 2

[Daniel Glazman (:glazou) (not active in Mozilla any more)]

Attachment: Just adding a clearer test case

Comment 3

[Daniel Glazman (:glazou) (not active in Mozilla any more)]

I think this bug is INVALID : let's work on reporter's test case :

  <div style="border-width: 5pt;border-style: solid; border-color: red;">
  <div style="border: 10pt solid yellow; width:100%"></div>
  </div>

all the values of margins (initial value 0), borders, paddings (initial value 0)
and width of innermost are different from 'auto'. So according to CSS 2 spec
section 10.3.3,

    the values are said to be "over-constrained" and one of the computed
    values will have to be different from its specified value. If the
    ?direction? property has the value ?ltr?, the specified value of
    ?margin-right? is ignored and the value is computed so as to make the
    equality true.

So the value of 'margin-right' becomes negative to allow the overflow defined
by 'width : 100%'.

Requesting Marc, David or Ian's opinion before marking this. This part of the
spec is almost cryptic and errors can be easily done ; a second opinion is
always better.

Comment 4

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

Yep.  Invalid.  The real problem is that you really mean 'width: auto' rather
than 'width: 100%'.  'width: 100%' combined with a nonzero border makes the
border-box wider than 100% since the width property describes the content width.

Comment 5

[Hixie (not reading bugmail)]

VERIFIED