<!doctype html>
<html>
<head>
<style>
.root {
    background-color: lime;
    margin: 5px;
}
.testcase {
    height: 25px;
    width: 50px;
    background-color: red;
}
.left {
    margin-left: 200px;
}
.right {
    margin-left: calc(100% - 250px);
}
</style>
</head>
<body>
    <p>This test the style is not copied from the wrong source when the direction is defined.</p>
    <div class="root">
        <div class="left testcase"></div>
        <div>
            <div class="left testcase"></div>
        </div>
    </div>
    <div class="root">
        <div class="left testcase"></div>
        <div>
            <div class="left testcase"></div>
        </div>
    </div>
    <div class="root">
        <div class="right testcase"></div>
        <div>
            <div class="right testcase"></div>
        </div>
    </div>
</body>
</html>