david-boydell/inside-test-page

## inside-test-page
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>cypress-layout-inspector Test Application</title>
        <style>
            *,
            *::before,
            *::after {
                box-sizing: border-box;
            }

            .container .outside {
                color: red;
                border: 1px solid red;
            }

            .container .inside {
                color: blue;
                border: 1px solid blue;
            }

            .absolute > * {
                position: absolute;
            }

            .absolute {
                position: relative;
                height: 220px;
            }

            .block {
                width: 100px;
                height: 100px;
            }

            .outside {
                width: 100px;
                height: 100px;
            }

            .inside {
                width: 50px;
                height: 50px;
            }


            .block-1 {
                top: 0;
                left: 0;
            }
            .block-2 {
                top: 25px;
                left: 25px;
            }


        </style>
    </head>
    <body>
        <pre>inside-2 is inside inside2</pre>
        <div class="absolute container">
            <div class="outside block-1">inside-1</div>
            <div class="inside block-2">inside-2</div>
        </div>

    </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>cypress-layout-inspector Test Application</title>
	<style>
	*,
	*::before,
	*::after {
	box-sizing: border-box;
	}

	.container .outside {
	color: red;
	border: 1px solid red;
	}

	.container .inside {
	color: blue;
	border: 1px solid blue;
	}

	.absolute > * {
	position: absolute;
	}

	.absolute {
	position: relative;
	height: 220px;
	}

	.block {
	width: 100px;
	height: 100px;
	}

	.outside {
	width: 100px;
	height: 100px;
	}

	.inside {
	width: 50px;
	height: 50px;
	}


	.block-1 {
	top: 0;
	left: 0;
	}
	.block-2 {
	top: 25px;
	left: 25px;
	}


	</style>
	</head>
	<body>
	<pre>inside-2 is inside inside2</pre>
	<div class="absolute container">
	<div class="outside block-1">inside-1</div>
	<div class="inside block-2">inside-2</div>
	</div>

	</body>
	</html>