DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Add feature to use percentage as value unit #258

Closed
woehrl01 wants to merge 43 commits from percentage-feature into master
pull from: percentage-feature
merge into: DaddyFrosty:master
Conversation 118 Commits 43 Files Changed 41 +4337 -2375
54 changed files with 4337 additions and 2375 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 9cce30c91f - Show all commits

72
gentest/fixtures/YGPercentageTest.html
View File

@@ -1,86 +1,82 @@
<div id="percentage_width_height" experiments="Rounding" style="width: 200px; height: 200px; flex-direction: row;">
emilsjolander commented 2016-12-16 02:10:56 -08:00 (Migrated from github.com)
Review
Copy Link

Indentation here seems a bit off. Could you please update your tests to look more like the others?


<div id="percentage_padding_should_calculate_based_only_on_width" experiments="Rounding" style="width: 200px; height: 100px;">
    <div style="flex-grow: 1; padding: 10%;">
        <div style="width: 10px; height: 10px;"></div>
    </div>
</div>
Indentation here seems a bit off. Could you please update your tests to look more like the others? ```html <div id="percentage_padding_should_calculate_based_only_on_width" experiments="Rounding" style="width: 200px; height: 100px;"> <div style="flex-grow: 1; padding: 10%;"> <div style="width: 10px; height: 10px;"></div> </div> </div> ```
emilsjolander commented 2016-12-16 02:11:44 -08:00 (Migrated from github.com)
Review
Copy Link

Still missing tests for % border values

Still missing tests for % border values
woehrl01 commented 2016-12-16 02:16:13 -08:00 (Migrated from github.com)
Review
Copy Link

there is no need to write tests for border, as border can't have percentage in css.

there is no need to write tests for border, as border can't have percentage in css.
<div style="width: 30%; height: 30%;"></div>
<div style="width: 30%; height: 30%;"></div>
</div>
<div id="percentage_position_left_top" experiments="Rounding" style="width: 400px; height: 400px; flex-direction: row;">
<div style="width: 45%; height: 55%; left: 10%; top: 20%"></div>
<div style="width: 45%; height: 55%; left: 10%; top: 20%"></div>
</div>
<div id="percentage_position_bottom_right" experiments="Rounding" style="width: 500px; height: 500px; flex-direction: row;">
<div style="width: 55%; height: 15%; bottom: 10%; right: 20%"></div>
<div style="width: 55%; height: 15%; bottom: 10%; right: 20%"></div>
</div>
<div id="percentage_flex_basis" experiments="Rounding" style="width: 200px; height: 200px; flex-direction: row;">
<div style="flex-grow: 1; flex-basis: 50%;"></div>
<div style="flex-grow: 1; flex-basis: 25%;"></div>
<div style="flex-grow: 1; flex-basis: 50%;"></div>
<div style="flex-grow: 1; flex-basis: 25%;"></div>
</div>
<div id="percentage_flex_basis_cross" experiments="Rounding" style="width: 200px; height: 200px; flex-direction: column;">
<div style="flex-grow: 1; flex-basis: 50%;"></div>
<div style="flex-grow: 1; flex-basis: 25%;"></div>
<div style="flex-grow: 1; flex-basis: 50%;"></div>
<div style="flex-grow: 1; flex-basis: 25%;"></div>
</div>
<div id="percentage_flex_basis_cross_min_height" experiments="Rounding" style="width: 200px; height: 200px; flex-direction: column;">
<div style="flex-grow: 1; min-height: 60%;"></div>
<div style="flex-grow: 2; min-height: 10%;"></div>
<div style="flex-grow: 1; min-height: 60%;"></div>
<div style="flex-grow: 2; min-height: 10%;"></div>
</div>
<div id="percentage_flex_basis_main_max_height" experiments="Rounding" style="width: 200px; height: 200px; flex-direction: row;">
<div style="flex-grow: 1; flex-basis: 10%; max-height: 60%;"></div>
<div style="flex-grow: 4; flex-basis: 10%; max-height: 20%;"></div>
<div style="flex-grow: 1; flex-basis: 10%; max-height: 60%;"></div>
<div style="flex-grow: 4; flex-basis: 10%; max-height: 20%;"></div>
</div>
<div id="percentage_flex_basis_cross_max_height" experiments="Rounding" style="width: 200px; height: 200px; flex-direction: column;">
<div style="flex-grow: 1; flex-basis: 10%; max-height: 60%;"></div>
<div style="flex-grow: 4; flex-basis: 10%; max-height: 20%;"></div>
<div style="flex-grow: 1; flex-basis: 10%; max-height: 60%;"></div>
<div style="flex-grow: 4; flex-basis: 10%; max-height: 20%;"></div>
</div>
<div id="percentage_flex_basis_main_max_width" experiments="Rounding" style="width: 200px; height: 200px; flex-direction: row;">
<div style="flex-grow: 1; flex-basis: 15%; max-width: 60%;"></div>
<div style="flex-grow: 4; flex-basis: 10%; max-width: 20%;"></div>
<div style="flex-grow: 1; flex-basis: 15%; max-width: 60%;"></div>
<div style="flex-grow: 4; flex-basis: 10%; max-width: 20%;"></div>
</div>
<div id="percentage_flex_basis_cross_max_width" experiments="Rounding" style="width: 200px; height: 200px; flex-direction: column;">
<div style="flex-grow: 1; flex-basis: 10%; max-width: 60%;"></div>
<div style="flex-grow: 4; flex-basis: 15%; max-width: 20%;"></div>
<div style="flex-grow: 1; flex-basis: 10%; max-width: 60%;"></div>
<div style="flex-grow: 4; flex-basis: 15%; max-width: 20%;"></div>
</div>
<div id="percentage_flex_basis_main_min_width" experiments="Rounding" style="width: 200px; height: 200px; flex-direction: row;">
<div style="flex-grow: 1; flex-basis: 15%; min-width: 60%;"></div>
<div style="flex-grow: 4; flex-basis: 10%; min-width: 20%;"></div>
<div style="flex-grow: 1; flex-basis: 15%; min-width: 60%;"></div>
<div style="flex-grow: 4; flex-basis: 10%; min-width: 20%;"></div>
</div>
<div id="percentage_flex_basis_cross_min_width" experiments="Rounding" style="width: 200px; height: 200px; flex-direction: column;">
<div style="flex-grow: 1; flex-basis: 10%; min-width: 60%;"></div>
<div style="flex-grow: 4; flex-basis: 15%; min-width: 20%;"></div>
<div style="flex-grow: 1; flex-basis: 10%; min-width: 60%;"></div>
<div style="flex-grow: 4; flex-basis: 15%; min-width: 20%;"></div>
</div>
<div id="percentage_multiple_nested_with_padding_margin_and_percentage_values" experiments="Rounding" style="width: 200px; height: 200px; flex-direction: column;">
<div style="flex-grow: 1; flex-basis: 10%; min-width: 60%; margin: 5px; padding: 3px;">
<div style="width: 50%; margin: 5px; padding: 3%;">
<div style="width: 45%; margin: 5%; padding: 3px;">
</div>
</div>
</div>
<div style="flex-grow: 4; flex-basis: 15%; min-width: 20%;"></div>
<div style="flex-grow: 1; flex-basis: 10%; min-width: 60%; margin: 5px; padding: 3px;">
<div style="width: 50%; margin: 5px; padding: 3%;">
<div style="width: 45%; margin: 5%; padding: 3px;"></div>
</div>
</div>
<div style="flex-grow: 4; flex-basis: 15%; min-width: 20%;"></div>
</div>
<div id="percentage_margin_should_calculate_based_only_on_width" experiments="Rounding" style="width: 200px; height: 100px;">
<div style="flex-grow: 1; margin: 10%;">
<div style="width: 10px; height: 10px;">
</div>
</div>
<div style="flex-grow: 1; margin: 10%;">
<div style="width: 10px; height: 10px;"></div>
</div>
</div>
<div id="percentage_padding_should_calculate_based_only_on_width" experiments="Rounding" style="width: 200px; height: 100px;">
<div style="flex-grow: 1; padding: 10%;">
<div style="width: 10px; height: 10px;">
</div>
</div>
<div style="flex-grow: 1; padding: 10%;">
<div style="width: 10px; height: 10px;"></div>
</div>
</div>
<div id="percentage_absolute_position" experiments="Rounding" style="width: 200px; height: 100px;">
<div style="position: absolute; top: 10%; left: 30%; width: 10px; height: 10px;">
</div>
<div style="position: absolute; top: 10%; left: 30%; width: 10px; height: 10px;"></div>
</div>