<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="initial-scale=1.0">
    <style>
        .box {
            width: 100px;
            height: 100px;
            margin: 20px;
            border: 4px solid black;
            position: relative;
        }
        
        #target {
            margin-top: 200px;
            background-color: cyan;
        }

        .overflowing-transformed {
            position: absolute;
            top: 100px;
            left: 300px;
            width: 200px;
            height: 100px;
            border: 1px solid green;
            transform: rotate(30deg);
        }

        .container {
            position: absolute;
            top: 350px;
            height: 100px;
            border: 1px solid green;
        }

        .inner {
            position: relative;
            top: 20px;
            left: 200px;
            padding: 10px;
            background-color: orange;
        }
    </style>
    <script src="resources/touch-regions-helper.js"></script>
    <script>
        if (window.testRunner)
            testRunner.dumpAsText();

        window.addEventListener('load', dumpRegions, false);
    </script>
</head>
<body>

<div class="box" style="position: relative" ontouchstart="(void)0">
    touch start
    <div class="box" style="position: relative; left: 170px; top: 40px">positioned child</div>
</div>

<div style="height: 100px"></div>

<span id="target" ontouchstart="(void)0">inline with positioned and transformed children
    <div class="box">
        box
        <div class="overflowing-transformed">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
    </div>
here</span>

<!-- Handler on skipped containing block -->
<div class="container" ontouchstart="(void)0" style="top: 600px;">
    positioned block
    <div class="intermediate">
        in-flow block
        <div class="inner">
            positioned child
        </div>
    </div>
</div>

<div class="container" style="top: 800px;">
    positioned block
    <!-- Handler on skipped containing block -->
    <div class="intermediate" ontouchstart="(void)0">
        in-flow block
        <div class="inner">
            positioned child
        </div>
    </div>
</div>

</body>
</html>