taffy icon indicating copy to clipboard operation
taffy copied to clipboard

Absolute Insets should be resolved against the container size minus border

Open julia-script opened this issue 8 months ago • 3 comments

Objective

Currently, absolute insets seem to be resolved incorrectly

Context

Right now both relative and absolute insets are resolved against the container size. The common (and probably specified) behavior is to resolve them against container_size - border , and in taffy's case, I'd assume container_size - border - scrollbar_width when applicable

Note: Parent's padding does not seem to affect insets

Here's a codepen example

https://codepen.io/juliascript/pen/abrJvZa

Here's how yoga behaves

https://www.yogalayout.dev/playground?code=DwGQhgng9grgLgAgMZQHYDMCWBzAvAb3xgGcBTAdVICMARU9MGAGzmIC4E4AnGUgXz4A+AFAIEwAHJQAJqQTE4EJqQL4A7pmlwAFhwCMABgMAaBNtI5tcfUdMAHMNOmZU2G6apQusruU079AFYEARExMUkZOQUlFUJRcLE7KGJMOEw0DgByMCpiKCZ4UizjBMS4KDtswIMAUhKy8OV0awQswzqGxLENLV0EAGYTRrFzS1ah0sSBBAB6MPFZqVkRYFnwaHhBIA

Here's the same layout from the Yoga example computed with taffy BEFORE the fix

TREE
└──  FLEX ROW [x: 0    y: 0    w: 100  h: 100  content_w: 145  content_h: 95   border: l:15 r:15 t:15 b:15, padding: l:10 r:10 t:10 b:10] (NodeId(4294967298))
    └──  LEAF [x: 115  y: 65   w: 30   h: 30   content_w: 0    content_h: 0    border: l:0 r:0 t:0 b:0, padding: l:0 r:0 t:0 b:0] (NodeId(4294967297))

(x and y ignores parent's border)

Here's the result AFTER the fix

TREE
└──  FLEX ROW [x: 0    y: 0    w: 100  h: 100  content_w: 115  content_h: 80   border: l:15 r:15 t:15 b:15, padding: l:10 r:10 t:10 b:10] (NodeId(4294967298))
    └──  LEAF [x: 85   y: 50   w: 30   h: 30   content_w: 0    content_h: 0    border: l:0 r:0 t:0 b:0, padding: l:0 r:0 t:0 b:0] (NodeId(4294967297))

Feedback

Looking at the code, it seems to me that the scrollbar is always assumed to be on the right or bottom, is this assumption correct?

julia-script avatar May 31 '24 17:05 julia-script