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

Remove rounding from experimental features

Browse Source 
Summary: Rounding has been successfully adopted by multiple products and frameworks. Time to move it out of experimental mode. Rounding can still be turned of by setting the point scale factor to 0 on the config.

Reviewed By: gkassabli

Differential Revision: D4953838

fbshipit-source-id: 3ee5f27d92f95b3ed4a01c98bc35e9157f2e91c5
This commit is contained in:
Emil Sjolander
2017-04-27 07:09:24 -07:00
committed by Facebook Github Bot
parent f6b17183c5
commit 3db38f2a80
20 changed files with 48 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
gentest/fixtures/YGPercentageTest.html
View File

@@ -1,61 +1,61 @@
<div id="percentage_width_height" experiments="Rounding" style="width: 200px; height: 200px; flex-direction: row;">
<div id="percentage_width_height" style="width: 200px; height: 200px; flex-direction: row;">
<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 id="percentage_position_left_top" style="width: 400px; height: 400px; flex-direction: row;">
<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 id="percentage_position_bottom_right" style="width: 500px; height: 500px; flex-direction: row;">
<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 id="percentage_flex_basis" 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>
<div id="percentage_flex_basis_cross" experiments="Rounding" style="width: 200px; height: 200px; flex-direction: column;">
<div id="percentage_flex_basis_cross" 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>
<div id="percentage_flex_basis_cross_min_height" experiments="Rounding" style="width: 200px; height: 200px; flex-direction: column;">
<div id="percentage_flex_basis_cross_min_height" 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>
<div id="percentage_flex_basis_main_max_height" experiments="Rounding" style="width: 200px; height: 200px; flex-direction: row;">
<div id="percentage_flex_basis_main_max_height" 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>
<div id="percentage_flex_basis_cross_max_height" experiments="Rounding" style="width: 200px; height: 200px; flex-direction: column;">
<div id="percentage_flex_basis_cross_max_height" 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>
<div id="percentage_flex_basis_main_max_width" experiments="Rounding" style="width: 200px; height: 200px; flex-direction: row;">
<div id="percentage_flex_basis_main_max_width" 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>
<div id="percentage_flex_basis_cross_max_width" experiments="Rounding" style="width: 200px; height: 200px; flex-direction: column;">
<div id="percentage_flex_basis_cross_max_width" 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>
<div id="percentage_flex_basis_main_min_width" experiments="Rounding" style="width: 200px; height: 200px; flex-direction: row;">
<div id="percentage_flex_basis_main_min_width" 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>
<div id="percentage_flex_basis_cross_min_width" experiments="Rounding" style="width: 200px; height: 200px; flex-direction: column;">
<div id="percentage_flex_basis_cross_min_width" 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>
<div id="percentage_multiple_nested_with_padding_margin_and_percentage_values" experiments="Rounding" style="width: 200px; height: 200px; flex-direction: column;">
<div id="percentage_multiple_nested_with_padding_margin_and_percentage_values" 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>
@@ -64,19 +64,19 @@
<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 id="percentage_margin_should_calculate_based_only_on_width" style="width: 200px; height: 100px;">
<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 id="percentage_padding_should_calculate_based_only_on_width" style="width: 200px; height: 100px;">
<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 id="percentage_absolute_position" style="width: 200px; height: 100px;">
<div style="position: absolute; top: 10%; left: 30%; width: 10px; height: 10px;"></div>
</div>

26
gentest/fixtures/YGRoundingTest.html
View File

@@ -1,10 +1,10 @@
<div id="rounding_flex_basis_flex_grow_row_width_of_100" experiments="Rounding" style="width: 100px; height: 100px; flex-direction: row;">
<div id="rounding_flex_basis_flex_grow_row_width_of_100" style="width: 100px; height: 100px; flex-direction: row;">
<div style="flex-grow: 1;"></div>
<div style="flex-grow: 1;"></div>
<div style="flex-grow: 1;"></div>
</div>
<div id="rounding_flex_basis_flex_grow_row_prime_number_width" experiments="Rounding" style="width: 113px; height: 100px; flex-direction: row;">
<div id="rounding_flex_basis_flex_grow_row_prime_number_width" style="width: 113px; height: 100px; flex-direction: row;">
<div style="flex-grow: 1;"></div>
<div style="flex-grow: 1;"></div>
<div style="flex-grow: 1;"></div>
@@ -12,25 +12,25 @@
<div style="flex-grow: 1;"></div>
</div>
<div id="rounding_flex_basis_flex_shrink_row" experiments="Rounding" style="width: 101px; height: 100px; flex-direction: row;">
<div id="rounding_flex_basis_flex_shrink_row" style="width: 101px; height: 100px; flex-direction: row;">
<div style="flex-basis: 100px; flex-shrink: 1;"></div>
<div style="flex-basis: 25px;"></div>
<div style="flex-basis: 25px;"></div>
</div>
<div id="rounding_flex_basis_overrides_main_size" experiments="Rounding" style="height: 113px; width: 100px;">
<div id="rounding_flex_basis_overrides_main_size" style="height: 113px; width: 100px;">
<div style="height: 20px; flex-grow:1; flex-basis:50px;"></div>
<div style="height: 10px; flex-grow:1;"></div>
<div style="height: 10px; flex-grow:1;"></div>
</div>
<div id="rounding_total_fractial" experiments="Rounding" style="height: 113.4px; width: 87.4px;">
<div id="rounding_total_fractial" style="height: 113.4px; width: 87.4px;">
<div style="height: 20.3px; flex-grow:0.7; flex-basis:50.3px;"></div>
<div style="height: 10px; flex-grow:1.6;"></div>
<div style="height: 10.7px; flex-grow:1.1;"></div>
</div>
<div id="rounding_total_fractial_nested" experiments="Rounding" style="height: 113.4px; width: 87.4px;">
<div id="rounding_total_fractial_nested" style="height: 113.4px; width: 87.4px;">
<div style="height: 20.3px; flex-grow:0.7; flex-basis:50.3px;">
<div style="bottom: 13.3px; height: 9.9px; flex-grow:1; flex-basis:0.3px;"></div>
<div style="top: 13.3px; height: 1.1px; flex-grow:4; flex-basis:0.3px;"></div>
@@ -39,31 +39,31 @@
<div style="height: 10.7px; flex-grow:1.1;"></div>
</div>
<div id="rounding_fractial_input_1" experiments="Rounding" style="height: 113.4px; width: 100px;">
<div id="rounding_fractial_input_1" style="height: 113.4px; width: 100px;">
<div style="height: 20px; flex-grow:1; flex-basis:50px;"></div>
<div style="height: 10px; flex-grow:1;"></div>
<div style="height: 10px; flex-grow:1;"></div>
</div>
<div id="rounding_fractial_input_2" experiments="Rounding" style="height: 113.6px; width: 100px;">
<div id="rounding_fractial_input_2" style="height: 113.6px; width: 100px;">
<div style="height: 20px; flex-grow:1; flex-basis:50px;"></div>
<div style="height: 10px; flex-grow:1;"></div>
<div style="height: 10px; flex-grow:1;"></div>
</div>
<div id="rounding_fractial_input_3" experiments="Rounding" style="top: 0.3px; height: 113.4px; width: 100px;">
<div id="rounding_fractial_input_3" style="top: 0.3px; height: 113.4px; width: 100px;">
<div style="height: 20px; flex-grow:1; flex-basis:50px;"></div>
<div style="height: 10px; flex-grow:1;"></div>
<div style="height: 10px; flex-grow:1;"></div>
</div>
<div id="rounding_fractial_input_4" experiments="Rounding" style="top: 0.7px; height: 113.4px; width: 100px;">
<div id="rounding_fractial_input_4" style="top: 0.7px; height: 113.4px; width: 100px;">
<div style="height: 20px; flex-grow:1; flex-basis:50px;"></div>
<div style="height: 10px; flex-grow:1;"></div>
<div style="height: 10px; flex-grow:1;"></div>
</div>
<div id="rounding_inner_node_controversy_horizontal" experiments="Rounding" style="width: 320px; flex-direction: row;">
<div id="rounding_inner_node_controversy_horizontal" style="width: 320px; flex-direction: row;">
<div style="height: 10px; flex-grow:1;"></div>
<div style="height: 10px; flex-grow:1;">
<div style="height: 10px; flex-grow:1;">
@@ -72,7 +72,7 @@
<div style="height: 10px; flex-grow:1;"></div>
</div>
<div id="rounding_inner_node_controversy_vertical" experiments="Rounding" style="height: 320px;">
<div id="rounding_inner_node_controversy_vertical" style="height: 320px;">
<div style="width: 10px; flex-grow:1;"></div>
<div style="width: 10px; flex-grow:1;">
<div style="width: 10px; flex-grow:1;">
@@ -81,7 +81,7 @@
<div style="width: 10px; flex-grow:1;"></div>
</div>
<div id="rounding_inner_node_controversy_combined" experiments="Rounding" style="width: 640px; height: 320px; flex-direction: row;">
<div id="rounding_inner_node_controversy_combined" style="width: 640px; height: 320px; flex-direction: row;">
<div style="height: 100%; flex-grow:1;"></div>
<div style="height: 100%; flex-grow:1; flex-direction: column;">
<div style="width: 100%; flex-grow:1;"></div>

13
gentest/gentest.js
View File

@@ -431,11 +431,6 @@ function getRoundedSize(node) {
function calculateTree(root, roundToPixelGrid) {
var rootLayout = [];
// Any occurrence of "Rounding" mark during node tree traverse turns this feature on for whole subtree.
if ((root.getAttribute('experiments') || '').split(' ').indexOf('Rounding') != -1) {
roundToPixelGrid = true;
}
for (var i = 0; i < root.children.length; i++) {
var child = root.children[i];
var layout = {
@@ -453,11 +448,9 @@ function calculateTree(root, roundToPixelGrid) {
: [],
};
if (roundToPixelGrid) {
var size = getRoundedSize(child);
layout.width = size.width;
layout.height = size.height;
}
var size = getRoundedSize(child);
layout.width = size.width;
layout.height = size.height;
rootLayout.push(layout);
}