slint/tests/cases/layout/nested_boxes.slint

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0


RectRed := Rectangle {
    background: red;
    min_width: 200phx;
    horizontal-stretch: 0;
    HorizontalLayout {
        spacing: 10px;
        padding: 0phx;
        rect_green := Rectangle {
            background: green;
            max_width: 50phx;
            max_height: 50phx;
        }
        rect_pink := Rectangle {
            background: pink;
        }
    }

    out property <bool> rect_green_ok:
        rect_green.x == 0phx &&
        rect_green.y == 0phx &&
        rect_green.width == 50phx &&
        rect_green.height == 50phx;
    out property <bool> rect_pink_ok:
        rect_pink.x == 60phx &&
        rect_pink.y == 0phx &&
        rect_pink.width == 140phx &&
        rect_pink.height == 50phx;
}

RedBlue := HorizontalLayout {
    spacing: 0phx;
    padding: 0phx;

    rect_red := RectRed {}
    rect_blue := Rectangle {
        horizontal-stretch: 1;
        background: blue;
    }

    out property rect_green_ok <=> rect_red.rect_green_ok;
    out property rect_pink_ok <=> rect_red.rect_pink_ok;

    out property <bool> rect_blue_ok:
        rect_blue.x == 200phx &&
        rect_blue.y == 0phx &&
        rect_blue.width == 100phx &&
        rect_blue.height == 50phx;
    out property <bool> rect_red_ok:
        rect_red.x == 0phx &&
        rect_red.y == 0phx &&
        rect_red.width == 200phx &&
        rect_red.height == 50phx;
}

export component TestCase inherits Rectangle {
    width: 300phx;
    height: 300phx;

    VerticalLayout {
        spacing: 0phx;
        padding: 0phx;

        rect_orange := Rectangle {
            background: orange;
            max_height: 10phx;
        }
        hl_redblue := RedBlue {}
        rect_yellow := Rectangle {
            background: yellow;
            HorizontalLayout {
                padding-top: 2phx;
                padding-bottom: 4phx;
                spacing: 2phx;
                padding-left: 8phx;
                padding-right: 10phx;
                vl1 := VerticalLayout {
                    spacing: 5phx;
                    padding-top: 5phx;
                    padding-bottom: 0phx;
                    padding-left: 0phx;
                    padding-right: 0phx;
                    rect_black1 := Rectangle {
                        background: black;
                    }
                    rect_white1 := Rectangle {
                        background: white;
                    }
                }
                vl2 := VerticalLayout {
                    spacing: 5phx;
                    padding-bottom: 5phx;
                    padding-top: 0phx;
                    padding-left: 0phx;
                    padding-right: 0phx;
                    rect_black2 := Rectangle {
                        background: black;
                    }
                    rect_white2 := Rectangle {
                        background: white;
                    }
                }
            }
        }

        // This item should be empty
        VerticalLayout {
            if (false) : Rectangle { background: #858; }
        }
    }

    out property <bool> rect_orange_ok:
        rect_orange.x == 0phx &&
        rect_orange.y == 0phx &&
        rect_orange.width == 300phx &&
        rect_orange.height == 10phx;
    out property <bool> rect_blue_ok:
        hl_redblue.y == 10phx && hl-redblue.rect-blue-ok;
    out property <bool> rect_red_ok:
        hl_redblue.y == 10phx && hl-redblue.rect-red-ok;
    out property <bool> rect_yellow_ok:
        rect_yellow.x == 0phx &&
        rect_yellow.y == 60phx &&
        rect_yellow.width == 300phx &&
        rect_yellow.height == 240phx;
    out property <bool> rect_black1_ok:
        rect_black1.x + vl1.x == 8phx &&
        rect_black1.y + vl1.y == 1phx * (2 + 5) &&
        rect_black1.width == 1phx * (300 - 18 - 2)/2 &&
        rect_black1.height == 1phx * (240 - 6 - 10)/2 ;
    out property <bool> rect_black2_ok:
        rect_black2.x + vl2.x == 300phx - 1phx * (300 - 20) / 2 - 10phx &&
        rect_black2.y + vl2.y == 2phx &&
        rect_black2.width == 1phx * (300 - 18 - 2)/2 &&
        rect_black2.height == 1phx * (240 - 6 - 10)/2 ;

    out property rect_green_ok <=> hl_redblue.rect_green_ok;
    out property rect_pink_ok <=> hl_redblue.rect_pink_ok;

    out property <bool> test: rect_orange_ok && rect_blue_ok && rect_red_ok && rect_green_ok && rect_pink_ok && rect_yellow_ok && rect_black1_ok && rect_black2_ok;
}

/*

```cpp
auto handle = TestCase::create();
const TestCase &instance = *handle;
assert(instance.get_rect_blue_ok());
assert(instance.get_rect_orange_ok());
assert(instance.get_rect_red_ok());
assert(instance.get_rect_green_ok());
assert(instance.get_rect_yellow_ok());
assert(instance.get_rect_black1_ok());
assert(instance.get_rect_black2_ok());
```


```rust
let instance = TestCase::new().unwrap();
assert!(instance.get_rect_blue_ok());
assert!(instance.get_rect_orange_ok());
assert!(instance.get_rect_red_ok());
assert!(instance.get_rect_green_ok());
assert!(instance.get_rect_yellow_ok());
assert!(instance.get_rect_black1_ok());
assert!(instance.get_rect_black2_ok());
```

*/