Different behavior for flex child in css-layout implementation #100

New Issue

2015-08-06T12:12:59-07:00

darkforestzero commented

2015-08-06 12:12:59 -07:00

(Migrated from github.com)

The following html and css: http://jsfiddle.net/mme911he/2/ when implemented via css-layout (layout.h) result in the "broken" div's height being reduced to zero. In other words, we see a red box on the web and a purple box in our c code. The bug seem to occur when a flex child (broken) is inside a flex container and that container's sibling has a fixed size. If we set the min height, the same as fixedChild, for the broken div, in the c code, the output is identical to the web version.

Here's the corresponding c-code:

        css_node_t *topNode = new_test_css_node();
        setNodeDimensions(topNode, OSView::GetFullScreenResolution());
        topNode->style.flex_direction = CSS_FLEX_DIRECTION_COLUMN;       // defines main axis
        topNode->style.align_items = CSS_ALIGN_STRETCH;              // defines alignment along cross axis

            init_css_node_children(topNode, 1);
            css_node_t *rootNode = topNode->get_child(topNode->context, 0);
            rootNode->style.flex = 1.0f;
            rootNode->style.flex_direction = CSS_FLEX_DIRECTION_COLUMN;       // defines main axis
            init_css_node_children(rootNode, 1);

                css_node_t *row = rootNode->get_child(rootNode->context, 0);
                row->style.flex_direction = CSS_FLEX_DIRECTION_ROW;       // defines main axis
                init_css_node_children(row, 2);

                    css_node_t *flexChild = row->get_child(row->context, 0);
                    flexChild->style.flex = 1.0f;
                    init_css_node_children(flexChild, 1);

                        css_node_t *broken = flexChild->get_child(flexChild->context, 0);
                        broken->style.flex = 1.0f;

                    css_node_t *fixedChild = row->get_child(row->context, 1);
                    fixedChild->style.dimensions[CSS_WIDTH] = 50;
                    fixedChild->style.dimensions[CSS_HEIGHT] = 50;

Here's the output from print_css_node (notice the 0 height child):

{layout: {width: 640, height: 1136, top: 0, left: 0}, flexDirection: 'column', alignItems: 'stretch', flex: 0, width: 640, height: 1136, children: [
  {layout: {width: 640, height: 1136, top: 0, left: 0}, flexDirection: 'column', alignItems: 'stretch', flex: 1, children: [
    {layout: {width: 640, height: 50, top: 0, left: 0}, flexDirection: 'row', alignItems: 'stretch', flex: 0, children: [
      {layout: {width: 590, height: 50, top: 0, left: 0}, flexDirection: 'column', alignItems: 'stretch', flex: 1, children: [
        {layout: {width: 590, height: 0, top: 0, left: 0}, flexDirection: 'column', alignItems: 'stretch', flex: 1, },
      ]},
      {layout: {width: 50, height: 50, top: 0, left: 590}, flexDirection: 'column', alignItems: 'stretch', flex: 0, width: 50, height: 50, },
    ]},
  ]},
]},

The following html and css: http://jsfiddle.net/mme911he/2/ when implemented via css-layout (layout.h) result in the "broken" div's height being reduced to zero. In other words, we see a red box on the web and a purple box in our c code. The bug seem to occur when a flex child (broken) is inside a flex container and that container's sibling has a fixed size. If we set the min height, the same as fixedChild, for the broken div, in the c code, the output is identical to the web version. Here's the corresponding c-code: ``` c css_node_t *topNode = new_test_css_node(); setNodeDimensions(topNode, OSView::GetFullScreenResolution()); topNode->style.flex_direction = CSS_FLEX_DIRECTION_COLUMN; // defines main axis topNode->style.align_items = CSS_ALIGN_STRETCH; // defines alignment along cross axis init_css_node_children(topNode, 1); css_node_t *rootNode = topNode->get_child(topNode->context, 0); rootNode->style.flex = 1.0f; rootNode->style.flex_direction = CSS_FLEX_DIRECTION_COLUMN; // defines main axis init_css_node_children(rootNode, 1); css_node_t *row = rootNode->get_child(rootNode->context, 0); row->style.flex_direction = CSS_FLEX_DIRECTION_ROW; // defines main axis init_css_node_children(row, 2); css_node_t *flexChild = row->get_child(row->context, 0); flexChild->style.flex = 1.0f; init_css_node_children(flexChild, 1); css_node_t *broken = flexChild->get_child(flexChild->context, 0); broken->style.flex = 1.0f; css_node_t *fixedChild = row->get_child(row->context, 1); fixedChild->style.dimensions[CSS_WIDTH] = 50; fixedChild->style.dimensions[CSS_HEIGHT] = 50; ``` Here's the output from print_css_node (notice the 0 height child): ``` {layout: {width: 640, height: 1136, top: 0, left: 0}, flexDirection: 'column', alignItems: 'stretch', flex: 0, width: 640, height: 1136, children: [ {layout: {width: 640, height: 1136, top: 0, left: 0}, flexDirection: 'column', alignItems: 'stretch', flex: 1, children: [ {layout: {width: 640, height: 50, top: 0, left: 0}, flexDirection: 'row', alignItems: 'stretch', flex: 0, children: [ {layout: {width: 590, height: 50, top: 0, left: 0}, flexDirection: 'column', alignItems: 'stretch', flex: 1, children: [ {layout: {width: 590, height: 0, top: 0, left: 0}, flexDirection: 'column', alignItems: 'stretch', flex: 1, }, ]}, {layout: {width: 50, height: 50, top: 0, left: 590}, flexDirection: 'column', alignItems: 'stretch', flex: 0, width: 50, height: 50, }, ]}, ]}, ]}, ```

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#100