<!--
    Describe this component...
-->
<template>
    <div>
        <px-tester>
            <px-test name="Aspect" testId="pxcontain-aspect" :size="{ h: 600 }">
                <px-contain aspect="16:9" :px="true">
                    <template #default="{ top, left, width, height }">
                        <div
                            :style="{
                                position: 'absolute',
                                left,
                                top,
                                width,
                                height,
                                background: 'red',
                            }"
                        />
                    </template>
                </px-contain>
            </px-test>

            <px-test name="Width / Height" testId="pxcontain-wh" :size="{ h: 600 }">
                <px-contain :naturalWidth="1600" :naturalHeight="900">
                    <template #default="{ top, left, width, height }">
                        <div
                            :style="{
                                position: 'absolute',
                                left,
                                top,
                                width,
                                height,
                                background: 'gold',
                            }"
                        />
                    </template>
                </px-contain>
            </px-test>

            <px-test name="Scale" testId="pxcontain-scale" :size="{ h: 600 }">
                <px-contain :naturalWidth="1600" :naturalHeight="900">
                    <template #default="{ top, left, scale }">
                        <div
                            :style="{
                                position: 'absolute',
                                width: '1600px',
                                height: '900px',
                                top,
                                left,
                                transformOrigin: '0 0',
                                transform: `scale(${scale})`,
                                background: 'gold',
                            }"
                        />
                    </template>
                </px-contain>
            </px-test>
            <px-test name="Basic with Padding" testId="pxcontain-pad" :size="{ h: 600 }">
                <div
                    :style="{
                        width: '100%',
                        height: '100%',
                        padding: '49px',
                        border: '1px solid red',
                        boxSizing: 'border-box',
                    }"
                >
                    <px-contain :aspect="4 / 3">
                        <template #default="{ top, left, width, height }">
                            <div
                                :style="{
                                    position: 'absolute',
                                    left,
                                    top,
                                    width,
                                    height,
                                    background: 'lightblue',
                                }"
                            >
                                {{ width }} x {{ height }}
                            </div>
                        </template>
                    </px-contain>
                </div>
            </px-test>
        </px-tester>
    </div>
</template>

<script>
import { PxTester, PxTest } from '@thinkpixellab-public/px-vue-tester';
import PxContain from '../../components/PxContain.vue';

export default {
    name: 'demo-px-contain',
    components: { PxTester, PxTest, PxContain },
    // mixins: [ Mixin ],
    // props: { a: { type: Boolean, default: false } },
    // data() { return { b: 0 }; },
    // computed: {},
    // watch: {},
    // mounted() {},
    // methods: {},
};
</script>
