<!DOCTYPE html>
<html>
<head>
<style>
    .fixed {
        position: fixed;
        background-color: silver;
    }
    
    .sideways {
        top: 0;
        right: 100%;
        width: 200px;
        height: 50px;
        -webkit-transform-origin: top right;
        -webkit-transform: rotate(-90deg);
    }
    
    .angled {
        top: 210px;
        left: -250px;
        width: 200px;
        height: 200px;
        -webkit-transform-origin: top right;
        -webkit-transform: rotate(-45deg);
    }
</style>
<script>
if (window.testRunner) {
    testRunner.dumpAsText();
}
if (window.internals) {
    window.internals.settings.setAcceleratedCompositingForFixedPositionEnabled(true);

    window.addEventListener("load", function() {
        document.getElementById("layerTree").innerText = internals.layerTreeAsText(document);
    }, false);
}
</script>
</head>
<body>
    <div class="fixed sideways">This should be visible</div>
    <div class="fixed angled">This should be visible</div>

<div style="height: 1000px">
  <pre id="layerTree"></pre>
</div>
</body>
</html>