Bug 17801 – rtl/ltr causes different alignment in nested tables.

• Status: NEW
• Component: Tables

[jasneet]

I Steps:
http://celebs.walla.co.il/?w=/3603/1204141

II Issue:
Notice the overlapping of images onto right nav bar.

III Conclusion:
Issue is caused due to table width property set to zero: <table width="0">;  removing this property aligns bigger image and smaller images in the center column.

Note: IE and FF treat <td align="center"> differently and therefore there is a difference seen in alignment of images in center column. Safari behave similar to FF.

IV Other browsers:
IE7: ok
FF2: ok
Opera: partially ok

V Nightly tested: 30236

[jasneet]

Created attachment 19705 [details]
screenshot

[jasneet]

Created attachment 19706 [details]
reduction

Firefox and safari/chrome behaviour is different. 
As mentioned in the content table width is zero which mozilla doesnot apply. When we see the layout of table it shows 408*608 and for other table its 416*88.

Spec says 
"With this (fast) algorithm, the horizontal layout of the table does not depend on the contents of the cells; it only depends on the table's width, the width of the columns, and borders or cell spacing."

Also http://www.w3schools.com/cssref/tryit.asp?filename=trycss_table_table-layout when we change the width of 2nd table from 100% to 0px mozilla takes the width of content i.e td rather than 0px.

So seems safari/chrome is correct.

[Ahmad Saleem]

Summary of results based on reduction:

*** Safari 15.6 on macOS 12.5.1 ***

Pushes bottom green boxes next to "maroon" bar

*** Safari Technology Preview 151 ***

Green boxes just below the blue box edge from left side with space after both of boxes

*** Chrome Canary 106 ***

Green boxes just below the blue box edge from left side with space after both of boxes


*** Firefox Nightly 106 ***

Totally different with "Blue" box being pushed to left side and aligning "green" boxes as well and does not have border colours for a big and two small rectangles.

_______

Due to size of output, I am not able to share screenshot of rendering but just wanted to share updated results. Thanks!

[Radar WebKit Bug Importer]

<rdar://problem/99364585>

[Ahmad Saleem]

(In reply to Ahmad Saleem from comment #4)
> Summary of results based on reduction:
> 
> *** Safari 15.6 on macOS 12.5.1 ***
> 
> Pushes bottom green boxes next to "maroon" bar
> 
> *** Safari Technology Preview 151 ***
> 
> Green boxes just below the blue box edge from left side with space after
> both of boxes
> 
> *** Chrome Canary 106 ***
> 
> Green boxes just below the blue box edge from left side with space after
> both of boxes
> 
> 
> *** Firefox Nightly 106 ***
> 
> Totally different with "Blue" box being pushed to left side and aligning
> "green" boxes as well and does not have border colours for a big and two
> small rectangles.
> 
> _______
> 
> Due to size of output, I am not able to share screenshot of rendering but
> just wanted to share updated results. Thanks!

Just to update WebKit ToT (260503@main) now matches “Chrome Canary 112” but still differ from Firefox Nightly 112.

[Karl Dubost]

Created attachment 478810 [details]
testcase

This is not related to width="0"
This is related to direction: ltr and rtl.

A simpler reduced test case.

    <style>
      table {direction: ltr; 
                 border: 2px solid black;}
      td {direction: rtl;}
    </style>

      <table style="background-color: gold;" width="200px;">
        <tr>
          <td>
            <table style="background-color: yellowgreen">
              <tr><td><div style="width:50px;height:50px"></td></tr>
            </table>
          </td>
        </tr>
      </table>

Safari/Chrome green square on the right
Firefox green square on the left.

[Karl Dubost]

Created attachment 478811 [details]
rendering in safari, firefox, chrome