Description
Report
- I have searched existing issues and this is not a duplicate
Issues and Steps to Reproduce
I found in yoga when absolute child element has percent length, it calculate base on parent‘s contentEdge but not padding Edge（which should be， https://www.w3.org/TR/CSS2/box.html#padding-edge
https://www.w3.org/TR/CSS2/visuren.html#propdef-left）。
As CSS defines：
Left，Like 'top', but specifies how far a box's left margin edge is offset to the right of the left edge of the box's “containing block”. For relatively positioned boxes, the offset is with respect to the left edge of the box itself.
10.1 Definition of "containing block"
The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows:
1、The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin; it is the page area for paged media. The 'direction' property of the initial containing block is the same as for the root element.
2、For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest block container ancestor box.
3、If the element has 'position: fixed', the containing block is established by the viewport in the case of continuous media or the page area in the case of paged media.
4、**If the element has 'position: absolute'**, the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way:
a、In the case that the ancestor is an inline element, the containing block is the bounding box
around the padding boxes of the first and the last inline boxes generated for that element. In
CSS 2.1, if the inline element is split across multiple lines, the containing block is undefined.
b、Otherwise, the containing block is formed by the **padding edge of the ancestor**.
If there is no such ancestor, the containing block is the initial containing block.
Expected Behavior
height of child is expected to be 1000px * 50% = 500px; and in web it is 500px
Actual Behavior
but in yoga it's value is (1000px - 200px -200px) * 50% = 300px
Link to Code
First Demo, if child is absolute , it is wrong
<html>
<body>
<div class="heightWidthPaddingVertical" style="position: relative; box-sizing:border-box; flex-direction:column; align-items:center; justify-content:center; width:750px; height:1000px; padding-top:200px;
padding-bottom:200px; background-color:green;">
<div class="heightWithPercent" style="position:absolute; box-sizing:border-box; width:750px; height:50%; background-color:red;"></div>
</div>
</body>
</html>Second Demo, if child is relative, it is right as web
<html>
<body>
<div class="heightWidthPaddingVertical" style="position: relative; box-sizing:border-box; flex-direction:column; align-items:center; justify-content:center; width:750px; height:1000px; padding-top:200px;
padding-bottom:200px; background-color:green;">
<div class="heightWithPercent" style="position:relative; box-sizing:border-box; width:750px; height:50%; background-color:red;"></div>
</div>
</body>
</html>When applicable, use this fiddle to post a web repro.
@emilsjolander @woehrl01 @davidaurelio