Incorrect layout for inline-block elements in RTL flows #6092

mbrubeck · 2015-05-16T17:09:32Z

In this test case, the div should appear at the top right of the page. In Servo it does not appear anywhere on-screen:

<html>
  <head>
    <style>
      body { direction: rtl; }
      div {
        display: inline-block;
        border: 1px solid red;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

This is probably caused by similar issues to #6006.

nhirata · 2016-02-17T02:26:39Z

Not sure if this deserves a separate bug or not, the date is incorrect as well (something from bug 459035; https://bugzilla.mozilla.org/show_bug.cgi?id=459035 )

Firefox doesn't get it right either, and we're not consistent:
I compared servo to firefox :

./mach run http://people.mozilla.org/~nhirata/html_tp/bug459035.html

mbrubeck · 2018-01-12T16:05:04Z

I don't know exactly where this is going wrong, but it's probably something like this: In various places we need to translate logical sizes or coordinates from a parent box's coordinate system to a child's coordinate system, or vice-versa. For example, if the parent is RTL but the child is LTR, then to determine the child's inline-start (left) position, we need to look at the parent's inline-end (left) padding.

Sometimes this means we change logic based on whether the parent and child writing modes have the same inline direction or opposite directions. Examples:

servo/components/layout/block.rs

Line 1396 in 50e4171

if kid_mode.is_bidi_ltr() == containing_block_mode.is_bidi_ltr() {

servo/components/layout/block.rs

Line 2477 in 50e4171

    
           let parent_has_same_direction = container_mode.is_bidi_ltr() == block_mode.is_bidi_ltr();

I believe my theory when I wrote the initial comment above was that we were looking at the wrong parent. In the test case, everything under body should inherit inherit direction: rtl, but the root html element still has the initial value direction: ltr. Maybe this code is incorrectly propagating the direction of the parent's parent, so that the fragments within the div end up looking at their grandparent's writing mode?

servo/components/layout/inline.rs

Line 1425 in 75f39b4

for kid in self.base.child_iter_mut() {

mbrubeck added I-wrong A-layout/inline C-assigned labels May 16, 2015

mbrubeck self-assigned this May 16, 2015

mbrubeck added C-has-manual-testcase and removed C-assigned labels Apr 22, 2016

Manishearth self-assigned this Jan 12, 2018

servo / servo

Incorrect layout for inline-block elements in RTL flows #6092

Incorrect layout for inline-block elements in RTL flows #6092

mbrubeck commented May 16, 2015

nhirata commented Feb 17, 2016

mbrubeck commented Jan 12, 2018 •

edited

servo / servo

Join GitHub today

Incorrect layout for inline-block elements in RTL flows #6092

Incorrect layout for inline-block elements in RTL flows #6092

Comments

mbrubeck commented May 16, 2015

nhirata commented Feb 17, 2016

mbrubeck commented Jan 12, 2018 • edited

mbrubeck commented Jan 12, 2018 •

edited