Bug 106603 – Setting a width on a table element overrides intrinsic min-width/max-width values

• Status: NEW
• Component: Layout and Rendering

[Ojan Vafai]

Setting a width on a block overrides intrinsic min-width/max-width values

(In reply to comment #0)
> Setting a width on a block overrides intrinsic min-width/max-width values

Hi Ojan

I am trying to understand the bug and for that I have attached a test case for DIV and TABLE along with WIDTH and MAX-WIDTH.
Once you run the test case you will see that the alert will show the width of div and table.

So for div width is set to 500px and max-width to 200 px and it takes 200px and so max-width doesn't override width.

But for table width is 500px and max-width is 200px but still it takes 500px and hence max-width is overridden.

Is this the bug? If not then please attach test case explaining your issue.

Created attachment 210351 [details]
To check if max-width overrides width

[Ahmad Saleem]

I am able to reproduce this bug in Safari 16.3 and WebKit ToT and it shows 204 and 500 while all other browsers (Chrome Canary 112 and Firefox Nightly 111) show '204' and '200'.

[Karl Dubost]

In the test case:

The first div and the table have for style

div, table {
    width: 500px;
    max-width: 200px;
}

Results:

For Safari:
- div:
  max-width wins.
- table:
  width winds.


For Chrome and Firefox:
max-width always wins.

[Ahmad Saleem]

It might be somewhere here:

https://searchfox.org/wubkat/source/Source/WebCore/rendering/RenderTable.cpp#290

First - we do this "Ensure we aren't bigger than our available width."

and then "// Ensure we aren't bigger than our max-width style."

and then "// Ensure we aren't smaller than our min-width style."

I think first thing, we should move 'min-width' before 'max-width'.

Also need to look into more about 'width' here.

[Radar WebKit Bug Importer]

<rdar://problem/122587460>