kylefang/sass-layout
1
0
Fork 0
mirror of https://github.com/zhigang1992/sass-layout.git synced 2026-01-12 22:41:28 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
master
sass-layout/test.scss
Kyle Fang f89bd41146 Rename sass_layout to sass-layout
2015-02-04 01:18:39 +08:00

553 lines
20 KiB
SCSS
Raw Permalink Blame History

@import "true";
@import "sass-layout";
@include test-module('Layout') {
@include test('should layout a single node with width and height') {
$global-frame-map: () !global;
.root { @include layout((width: 100, height: 100)); }
@include render-layout;
@include assert-equal(render-node(".root"), (100, 100, 0, 0));
}
@include test('should layout node with children') {
$global-frame-map: () !global;
.root {
@include layout(( width: 1000, height: 1000 ));
.child_a { @include layout(( width: 500, height: 500 )); }
.child_b { @include layout(( width: 250, height: 250 )); }
.child_c { @include layout(( width: 125, height: 125 )); }
}
@include render-layout;
@include assert-equal(render-node(".root"), (1000, 1000, 0, 0));
@include assert-equal(render-node(".root .child_a"), (500, 500, 0, 0));
@include assert-equal(render-node(".root .child_b"), (250, 250, 500, 0));
@include assert-equal(render-node(".root .child_c"), (125, 125, 750, 0));
}
@include test('should layout node with nested children') {
$global-frame-map: () !global;
.r {
@include layout(( width: 1000, height: 1000));
.c_a { @include layout(( width: 500, height: 500 )); }
.c_b {
@include layout(( width: 500, height: 500 ));
.cc_a { @include layout((width: 250, height: 250)) }
.cc_b { @include layout((width: 250, height: 250)) }
}
}
@include render-layout;
@include assert-equal(render-node(".r .c_b"), (500, 500, 500, 0));
@include assert-equal(render-node(".r .c_b .cc_a"), (250, 250, 0, 0));
@include assert-equal(render-node(".r .c_b .cc_b"), (250, 250, 250, 0));
}
@include test('should layout node with margin') {
$global-frame-map: () !global;
.r { @include layout(( width:100, height: 200, margin: 10)) }
@include render-layout;
@include assert-equal(render-node('.r'), (100, 200, 10, 10))
}
@include test('should layout node with several children') {
$global-frame-map: () !global;
.r {
@include layout(( width: 1000, height: 1000, margin: 10 ));
.c_a { @include layout(( width: 100, height: 100, margin: 50 )) }
.c_b { @include layout(( width: 100, height: 100, margin: 25 )) }
.c_c { @include layout(( width: 100, height: 100, margin: 10 )) }
}
@include render-layout;
@include assert-equal(render-node('.r'), (1000, 1000, 10, 10));
@include assert-equal(render-node('.r .c_a'), (100, 100, 50, 50));
@include assert-equal(render-node('.r .c_b'), (100, 100, 225, 25));
@include assert-equal(render-node('.r .c_c'), (100, 100, 360, 10));
}
@include test('should layout node with row flex direction') {
$global-frame-map: () !global;
.r {
@include layout(( width: 1000, height: 1000, flex-direction: 'row' ));
.c_a { @include layout(( width: 100, height: 200 )) }
.c_b { @include layout(( width: 300, height: 150 )) }
}
@include render-layout;
@include assert-equal(render-node('.r .c_b'), (300, 150, 0, 100));
}
@include test('should layout node based on children main dimensions') {
$global-frame-map: () !global;
.r {
@include layout(( width: 300 ));
.c_a { @include layout(( width: 300, height: 200 )) }
.c_b { @include layout(( width: 300, height: 150 )) }
}
@include render-layout;
@include assert-equal(render-node('.r'), (300, 350, 0, 0));
}
@include test('should layout node with just flex') {
$global-frame-map: () !global;
.r {
@include layout(( width: 1000, height: 1000 ));
.c_a { @include layout(( width: 100, height: 200 )) }
.c_b { @include layout(( width: 100, flex: 1 )) }
}
@include render-layout;
@include assert-equal(render-node('.r .c_b'), (100, 800, 200, 0));
}
@include test('should layout node with flex recursively') {
$global-frame-map: () !global;
.r {
@include layout(( width: 1000, height: 1000 ));
.c_a {
@include layout(( width: 1000, flex: 1 ));
.cc_a {
@include layout(( width: 1000, flex: 1 ));
.ccc_a { @include layout(( width: 1000, flex: 1 )); }
}
}
}
@include render-layout;
@include assert-equal(render-node('.r .c_a'), (1000, 1000, 0, 0));
@include assert-equal(render-node('.r .c_a .cc_a'), (1000, 1000, 0, 0));
@include assert-equal(render-node('.r .c_a .cc_a .ccc_a'), (1000, 1000, 0, 0));
}
@include test('should layout node with targeted margin') {
$global-frame-map: () !global;
.r {
@include layout(( width: 1000, height: 1000, margin-top: 10, margin-left: 5 ));
.c_a { @include layout(( width: 100, height: 100, margin-top: 50, margin-left: 15, margin-bottom: 20 )) }
.c_b { @include layout(( width: 100, height: 100, margin-left: 30 )) }
}
@include render-layout;
@include assert-equal(render-node('.r'), (1000, 1000, 10, 5));
@include assert-equal(render-node('.r .c_a'), (100, 100, 50, 15));
@include assert-equal(render-node('.r .c_b'), (100, 100, 170, 30));
}
@include test('should layout node with justifyContent: flex-end') {
$global-frame-map: () !global;
.r {
@include layout(( width: 1000, height: 1000, justify-content: flex-end ));
.c_a { @include layout(( width: 100, height: 100 )) }
.c_b { @include layout(( width: 100, height: 100 )) }
}
@include render-layout;
@include assert-equal(render-node('.r .c_a'), (100, 100, 800, 0));
@include assert-equal(render-node('.r .c_b'), (100, 100, 900, 0));
}
@include test('should layout node with justifyContent: space-between') {
$global-frame-map: () !global;
.r {
@include layout(( width: 1000, height: 1000, justify-content: space-between ));
.c_a { @include layout(( width: 100, height: 100 )) }
.c_b { @include layout(( width: 100, height: 100 )) }
}
@include render-layout;
@include assert-equal(render-node('.r .c_a'), (100, 100, 0, 0));
@include assert-equal(render-node('.r .c_b'), (100, 100, 900, 0));
}
@include test('should layout node with justifyContent: space-around') {
$global-frame-map: () !global;
.r {
@include layout(( width: 1000, height: 1000, justify-content: space-around ));
.c_a { @include layout(( width: 100, height: 100 )) }
.c_b { @include layout(( width: 100, height: 100 )) }
}
@include render-layout;
@include assert-equal(render-node('.r .c_a'), (100, 100, 200, 0));
@include assert-equal(render-node('.r .c_b'), (100, 100, 700, 0));
}
@include test('should layout node with justifyContent: center') {
$global-frame-map: () !global;
.r {
@include layout(( width: 1000, height: 1000, justify-content: center ));
.c_a { @include layout(( width: 100, height: 100 )) }
.c_b { @include layout(( width: 100, height: 100 )) }
}
@include render-layout;
@include assert-equal(render-node('.r .c_a'), (100, 100, 400, 0));
@include assert-equal(render-node('.r .c_b'), (100, 100, 500, 0));
}
@include test('should layout node with flex override height') {
$global-frame-map: () !global;
.r {
@include layout(( width: 1000, height: 1000 ));
.c_a { @include layout(( width: 100, height: 100, flex: 1 )) }
}
@include render-layout;
@include assert-equal(render-node('.r .c_a'), (100, 1000, 0, 0));
}
@include test('should layout node with alignItems: flex-start') {
$global-frame-map: () !global;
.r {
@include layout(( width: 1000, height: 1000, align-items: flex-start ));
.c_a { @include layout(( width: 200, height: 100 )) }
.c_b { @include layout(( width: 100, height: 100 )) }
}
@include render-layout;
@include assert-equal(render-node('.r .c_a'), (200, 100, 0, 0));
@include assert-equal(render-node('.r .c_b'), (100, 100, 100, 0));
}
@include test('should layout node with alignItems: center') {
$global-frame-map: () !global;
.r {
@include layout(( width: 1000, height: 1000, align-items: center ));
.c_a { @include layout(( width: 200, height: 100 )) }
.c_b { @include layout(( width: 100, height: 100 )) }
}
@include render-layout;
@include assert-equal(render-node('.r .c_a'), (200, 100, 0, 400));
@include assert-equal(render-node('.r .c_b'), (100, 100, 100, 450));
}
@include test('should layout node with alignItems: flex-end') {
$global-frame-map: () !global;
.r {
@include layout(( width: 1000, height: 1000, align-items: flex-end ));
.c_a { @include layout(( width: 200, height: 100 )) }
.c_b { @include layout(( width: 100, height: 100 )) }
}
@include render-layout;
@include assert-equal(render-node('.r .c_a'), (200, 100, 0, 800));
@include assert-equal(render-node('.r .c_b'), (100, 100, 100, 900));
}
@include test('should layout node with alignSelf overrides alignItems') {
$global-frame-map: () !global;
.r {
@include layout(( width: 1000, height: 1000, align-items: flex-end ));
.c_a { @include layout(( width: 200, height: 100 )) }
.c_b { @include layout(( width: 100, height: 100, align-self: center )) }
}
@include render-layout;
@include assert-equal(render-node('.r .c_a'), (200, 100, 0, 800));
@include assert-equal(render-node('.r .c_b'), (100, 100, 100, 450));
}
@include test('should layout node with alignItem: stretch') {
$global-frame-map: () !global;
.r {
@include layout(( width: 1000, height: 1000, align-items: 'stretch' ));
.c_a { @include layout(( height: 100 )) }
}
@include render-layout;
@include assert-equal(render-node('.r .c_a'), (1000, 100, 0, 0));
}
@include test('should layout empty node') {
$global-frame-map: () !global;
.r {
@include layout(());
.c_a { @include layout(()) }
}
@include render-layout;
@include assert-equal(render-node('.r'), (0,0,0,0));
@include assert-equal(render-node('.r .c_a'), (0,0,0,0));
}
@include test('should layout child with margin') {
$global-frame-map: () !global;
.r {
@include layout(());
.c_a { @include layout(( margin: 5 )) }
}
@include render-layout;
@include assert-equal(render-node('.r'), (10, 10, 0, 0));
}
@include test('should not shrink children if not enough space') {
$global-frame-map: () !global;
.r {
@include layout(( height: 100 ));
.c_a { @include layout(( height: 100 )) }
.c_b { @include layout(( height: 200 )) }
}
@include render-layout;
@include assert-equal(render-node('.r'), (0, 100, 0, 0));
}
@include test('should layout for center') {
$global-frame-map: () !global;
.r {
@include layout(( justify-content: center ))
}
@include render-layout;
@include assert-equal(render-node('.r'), (0,0,0,0));
}
@include test('should layout flex-end taking into account margin') {
$global-frame-map: () !global;
.r {
@include layout(( height: 100, justify-content: flex-end ));
.c_a { @include layout(( margin-top: 10 )) }
}
@include render-layout;
@include assert-equal(render-node('.r .c_a'), (0, 0, 100, 0));
}
@include test('should layout alignItems with margin') {
$global-frame-map: () !global;
.r {
@include layout(());
.c_a {
@include layout(( align-items: flex-end ));
.cc_a { @include layout(( margin: 10 )) }
.cc_b { @include layout(( height: 100 )) }
}
}
@include render-layout;
@include assert-equal(render-node('.r'), (20, 120, 0, 0));
@include assert-equal(render-node('.r .c_a'), (20, 120, 0, 0));
@include assert-equal(render-node('.r .c_a .cc_a'), (0, 0, 10, 10));
@include assert-equal(render-node('.r .c_a .cc_b'), (0, 100, 20, 20));
}
@include test('should layout flex inside of an empty element') {
$global-frame-map: () !global;
.r {
@include layout(());
.c_a { @include layout((flex: 1)) }
}
@include render-layout;
@include assert-equal(render-node('.r'), (0,0,0,0));
@include assert-equal(render-node('.r .c_a'), (0,0,0,0));
}
@include test('should layout alignItems stretch and margin') {
$global-frame-map: () !global;
.r {
@include layout(( align-items: stretch ));
.c_a { @include layout(( margin-left: 10 )) }
}
@include render-layout;
@include assert-equal(render-node('.r'), (10, 0, 0, 0));
@include assert-equal(render-node('.r .c_a'), (0, 0, 0, 10));
}
@include test('should layout node with padding') {
$global-frame-map: () !global;
.r { @include layout(( padding: 5 )); }
@include render-layout;
@include assert-equal(render-node('.r'), (10, 10, 0, 0));
}
@include test('should layout node with padding and a child') {
$global-frame-map: () !global;
.r {
@include layout(( padding: 5 ));
.c_a { @include layout(()) }
}
@include render-layout;
@include assert-equal(render-node('.r'), (10, 10, 0, 0));
@include assert-equal(render-node('.r .c_a'), (0, 0, 5, 5));
}
@include test('should layout node with padding and a child with margin') {
$global-frame-map: () !global;
.r {
@include layout(( padding: 5 ));
.c_a { @include layout(( margin: 5 )) }
}
@include render-layout;
@include assert-equal(render-node('.r'), (20, 20, 0, 0));
@include assert-equal(render-node('.r .c_a'), (0, 0, 10, 10));
}
@include test('should layout node with padding and stretch') {
$global-frame-map: () !global;
.r {
@include layout(( ));
.c_a { @include layout(( padding: 10 )) }
}
@include render-layout;
@include assert-equal(render-node('.r'), (20, 20, 0, 0));
@include assert-equal(render-node('.r .c_a'), (20, 20, 0, 0));
}
@include test('should layout node with inner & outer padding and stretch') {
$global-frame-map: () !global;
.r {
@include layout(( padding: 50 ));
.c_a { @include layout(( padding: 10, align-self: stretch )) }
}
@include render-layout;
@include assert-equal(render-node('.r'), (120, 120, 0, 0));
@include assert-equal(render-node('.r .c_a'), (20, 20, 50, 50));
}
@include test('should layout node with stretch and child with margin') {
$global-frame-map: () !global;
.r {
@include layout(( ));
.c_a {
@include layout(( align-self: stretch ));
.cc_a { @include layout(( margin: 16 )) }
}
}
@include render-layout;
@include assert-equal(render-node('.r'), (32, 32, 0, 0));
@include assert-equal(render-node('.r .c_a'), (32, 32, 0, 0));
@include assert-equal(render-node('.r .c_a .cc_a'), (0, 0, 16, 16));
}
@include test('should layout node with stretch and child with margin') {
$global-frame-map: () !global;
.r { @include layout(( top: 5, left: 5)); }
@include render-layout;
@include assert-equal(render-node('.r'), (0, 0, 5, 5));
}
@include test('should layout node with stretch and child with margin') {
$global-frame-map: () !global;
.r {
@include layout(( height: 10, padding-top: 5, justify-content: space-around));
.c_a { @include layout(()) }
}
@include render-layout;
@include assert-equal(render-node('.r'), (0, 10, 0, 0));
@include assert-equal(render-node('.r .c_a'), (0, 0, 7.5, 0));
}
@include test('should layout node with bottom') {
$global-frame-map: () !global;
.r { @include layout(( bottom: 5)); }
@include render-layout;
@include assert-equal(render-node('.r'), (0, 0, -5, 0));
}
@include test('should layout node with both top and bottom') {
$global-frame-map: () !global;
.r { @include layout(( top: 10, bottom: 5)); }
@include render-layout;
@include assert-equal(render-node('.r'), (0, 0, 10, 0));
}
@include test('should layout node with position: absolute') {
$global-frame-map: () !global;
.r {
@include layout(( width: 500, flex-direction: row));
.c_a { @include layout(( flex: 1 )) }
.c_b { @include layout(( position: absolute, width: 50 )) }
.c_c { @include layout(( flex: 1 )) }
}
@include render-layout;
@include assert-equal(render-node('.r'), (500, 0, 0, 0));
@include assert-equal(render-node('.r .c_a'), (250, 0, 0, 0));
@include assert-equal(render-node('.r .c_b'), (50, 0, 0, 250));
@include assert-equal(render-node('.r .c_c'), (250, 0, 0, 250));
}
@include test('should layout node with child with position: absolute and margin') {
$global-frame-map: () !global;
.r {
@include layout(( ));
.c_a { @include layout(( margin-right: 15, position: absolute )) }
}
@include render-layout;
@include assert-equal(render-node('.r'), (0, 0, 0, 0));
@include assert-equal(render-node('.r .c_a'), (0, 0, 0, 0));
}
@include test('should layout node with position: absolute, padding and alignSelf: center') {
$global-frame-map: () !global;
.r {
@include layout(( ));
.c_a { @include layout(( padding-right: 12, align-self: center, position: absolute )) }
}
@include render-layout;
@include assert-equal(render-node('.r'), (0, 0, 0, 0));
@include assert-equal(render-node('.r .c_a'), (12, 0, 0, 0));
}
@include test('should work with height smaller than paddingBottom') {
$global-frame-map: () !global;
.r {@include layout(( height: 5, padding-bottom: 20))}
@include render-layout;
@include assert-equal(render-node('.r'), (0, 20, 0, 0));
}
@include test('should work with width smaller than paddingLeft') {
$global-frame-map: () !global;
.r {@include layout(( width: 5, padding-left: 20))}
@include render-layout;
@include assert-equal(render-node('.r'), (20, 0, 0, 0));
}
@include test('should layout node with specified width and stretch') {
$global-frame-map: () !global;
.r {
@include layout(());
.c_a {
@include layout(());
.cc_a { @include layout(( width: 400 )) }
}
.c_b { @include layout(( width: 200, align-self: stretch )) }
}
@include render-layout;
@include assert-equal(render-node('.r'), (400, 0, 0, 0));
@include assert-equal(render-node('.r .c_a'), (400, 0, 0, 0));
@include assert-equal(render-node('.r .c_a .cc_a'), (400, 0, 0, 0));
@include assert-equal(render-node('.r .c_b'), (200, 0, 0, 0));
}
@include test('should layout node with padding and child with position absolute') {
$global-frame-map: () !global;
.r {
@include layout(( padding: 5 ));
.c_a { @include layout(( position: absolute )) }
}
@include render-layout;
@include assert-equal(render-node('.r'), (10, 10, 0, 0));
@include assert-equal(render-node('.r .c_a'), (0, 0, 5, 5))
}
@include test('should layout node with position absolute, top and left') {
$global-frame-map: () !global;
.r {
@include layout(( ));
.c_a { @include layout(( height: 100 )) }
.c_b { @include layout(( position: absolute, top: 10, left: 10)) }
}
@include render-layout;
@include assert-equal(render-node('.r'), (0, 100, 0, 0));
@include assert-equal(render-node('.r .c_a'), (0, 100, 0, 0));
@include assert-equal(render-node('.r .c_b'), (0, 0, 10, 10));
}
@include test('should layout node with padding and child position absolute, left') {
$global-frame-map: () !global;
.r {
@include layout(( padding: 20 ));
.c_a { @include layout(( left: 5, position: absolute )) }
}
@include render-layout;
@include assert-equal(render-node('.r'), (40, 40, 0, 0));
@include assert-equal(render-node('.r .c_a'), (0, 0, 20, 5));
}
@include test('should layout node with padding and child position absolute, left') {
$global-frame-map: () !global;
.r {
@include layout(( ));
.c_a { @include layout(( top: 5, margin-top: 5, position: absolute )) }
}
@include render-layout;
@include assert-equal(render-node('.r'), (0, 0, 0, 0));
@include assert-equal(render-node('.r .c_a'), (0, 0, 10, 0));
}
}
@include report;
Reference in New Issue View Git Blame Copy Permalink