gentest/fixtures/YGAlignContentTest.html (132 lines of code) (raw):

<div id="align_content_flex_start" style="width: 130px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: flex-start;"> <div style="width: 50px; height: 10px;"></div> <div style="width: 50px; height: 10px;"></div> <div style="width: 50px; height: 10px;"></div> <div style="width: 50px; height: 10px;"></div> <div style="width: 50px; height: 10px;"></div> </div> <div id="align_content_flex_start_without_height_on_children" style="width: 100px; height: 100px; flex-wrap: wrap; flex-direction: column; align-content: flex-start;"> <div style="width: 50px;"></div> <div style="width: 50px; height: 10px;"></div> <div style="width: 50px;"></div> <div style="width: 50px; height: 10px;"></div> <div style="width: 50px;"></div> </div> <div id="align_content_flex_start_with_flex" style="width: 100px; height: 120px; flex-wrap: wrap; flex-direction: column; align-content: flex-start;"> <div style="width: 50px; flex: 1; flex-shrink: 0;"></div> <div style="width: 50px; flex: 1; height: 10px; flex-shrink: 0;"></div> <div style="width: 50px;"></div> <div style="width: 50px; flex: 1;"></div> <div style="width: 50px;"></div> </div> <div id="align_content_flex_end" style="width: 100px; height: 100px; flex-wrap: wrap; flex-direction: column; align-content: flex-end;"> <div style="width: 50px; height: 10px;"></div> <div style="width: 50px; height: 10px;"></div> <div style="width: 50px; height: 10px;"></div> <div style="width: 50px; height: 10px;"></div> <div style="width: 50px; height: 10px;"></div> </div> <div id="align_content_stretch" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: column; align-content: stretch;"> <div style="width: 50px;"></div> <div style="width: 50px;"></div> <div style="width: 50px;"></div> <div style="width: 50px;"></div> <div style="width: 50px;"></div> </div> <div id="align_content_spacebetween" style="width: 130px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: space-between;"> <div style="width: 50px; height: 10px;"></div> <div style="width: 50px; height: 10px;"></div> <div style="width: 50px; height: 10px;"></div> <div style="width: 50px; height: 10px;"></div> <div style="width: 50px; height: 10px;"></div> </div> <div id="align_content_spacearound" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-around;"> <div style="width: 50px; height: 10px;"></div> <div style="width: 50px; height: 10px;"></div> <div style="width: 50px; height: 10px;"></div> <div style="width: 50px; height: 10px;"></div> <div style="width: 50px; height: 10px;"></div> </div> <div id="align_content_stretch_row" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;"> <div style="width: 50px;"></div> <div style="width: 50px;"></div> <div style="width: 50px;"></div> <div style="width: 50px;"></div> <div style="width: 50px;"></div> </div> <div id="align_content_stretch_row_with_children" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;"> <div style="width: 50px;"> <div style="flex: 1;"></div> </div> <div style="width: 50px;"></div> <div style="width: 50px;"></div> <div style="width: 50px;"></div> <div style="width: 50px;"></div> </div> <div id="align_content_stretch_row_with_flex" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;"> <div style="width: 50px;"></div> <div style="width: 50px; flex: 1;"></div> <div style="width: 50px;"></div> <div style="width: 50px; flex: 1;"></div> <div style="width: 50px;"></div> </div> <div id="align_content_stretch_row_with_flex_no_shrink" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;"> <div style="width: 50px;"></div> <div style="width: 50px; flex: 1;"></div> <div style="width: 50px;"></div> <div style="width: 50px; flex: 1; flex-shrink: 0;"></div> <div style="width: 50px;"></div> </div> <div id="align_content_stretch_row_with_margin" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;"> <div style="width: 50px;"></div> <div style="width: 50px; margin: 10px;"></div> <div style="width: 50px;"></div> <div style="width: 50px; margin: 10px;"></div> <div style="width: 50px;"></div> </div> <div id="align_content_stretch_row_with_padding" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;"> <div style="width: 50px;"></div> <div style="width: 50px; padding: 10px;"></div> <div style="width: 50px;"></div> <div style="width: 50px; padding: 10px;"></div> <div style="width: 50px;"></div> </div> <div id="align_content_stretch_row_with_single_row" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;"> <div style="width: 50px;"></div> <div style="width: 50px;"></div> </div> <div id="align_content_stretch_row_with_fixed_height" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;"> <div style="width: 50px;"></div> <div style="width: 50px; height: 60px;"></div> <div style="width: 50px;"></div> <div style="width: 50px;"></div> <div style="width: 50px;"></div> </div> <div id="align_content_stretch_row_with_max_height" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;"> <div style="width: 50px;"></div> <div style="width: 50px; max-height: 20px;"></div> <div style="width: 50px;"></div> <div style="width: 50px;"></div> <div style="width: 50px;"></div> </div> <div id="align_content_stretch_row_with_min_height" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;"> <div style="width: 50px;"></div> <div style="width: 50px; min-height: 80px;"></div> <div style="width: 50px;"></div> <div style="width: 50px;"></div> <div style="width: 50px;"></div> </div> <div id="align_content_stretch_column" style="width: 100px; height: 150px; flex-wrap: wrap; flex-direction: column; align-content: stretch;"> <div style="height: 50px;"> <div style="flex: 1;"></div> </div> <div style="height: 50px; flex: 1;"></div> <div style="height: 50px;"></div> <div style="height: 50px;"></div> <div style="height: 50px;"></div> </div> <div id="align_content_stretch_is_not_overriding_align_items" style="align-content:stretch;"> <div style="width:100px; height: 100px; align-items: center; flex-direction: row; align-content:stretch;"> <div style="height: 10px; width: 10px; align-content:stretch;"></div> </div> </div>