<!DOCTYPE html>
<style>
#container > div {
    font-size:1px;
}
img {
    width:100px;
    height:20px;
    margin-left:100px;
}
iframe {
    display:block;
    height:20px;
}
</style>
<div id="container">
    <p>This tests <a href="http://www.w3.org/TR/css3-background/#background-positioning-area">background positioning area</a> in vertical-rl.</p>
    <p>Test passes if single green rectangle below.</p>
    <div><img src="../../images/resources/green-10.png"></div>
</div>
<template data-width="200px">
<style>
html {
    background-image:url(../../images/resources/green-10.png);
    background-repeat:no-repeat;
    background-size:100% 100%;
    -webkit-writing-mode:vertical-rl;
    width:100px;
}
</style>
</template>
<template data-width="200px">
<style>
html {
    background-image:url(../../images/resources/green-10.png);
    background-repeat:no-repeat;
    background-size:100% 100%;
    -webkit-writing-mode:vertical-rl;
    width:80px;
    border-right:rgb(0,255,0) 20px solid;
}
</style>
</template>
<template data-width="250px">
<style>
html {
    background-image:url(../../images/resources/green-10.png);
    background-repeat:no-repeat;
    background-size:100% 100%;
    -webkit-writing-mode:vertical-rl;
    width:50px;
    margin-right:50px;
    padding-right:50px;
}
</style>
</template>
<template data-width="250px">
<style>
html {
    background-image:url(../../images/resources/green-10.png);
    background-repeat:no-repeat;
    background-size:100% 100%;
    -webkit-writing-mode:vertical-rl;
    width:50px;
    margin-right:50px;
    padding-right:50px;
    border-left:20px white solid;
}
</style>
</template>
<script>
var templates = document.getElementsByTagName("template");
for (var i = 0; i < templates.length; i++) {
    var template = templates[i];
    var iframe = document.createElement("iframe");
    iframe.srcdoc = template.innerHTML;
    iframe.frameBorder = 0;
    iframe.width = template.dataset.width;
    container.appendChild(iframe);
}
</script>