Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-writing-modes/inline-box-orthogonal-child-with-margins.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com"/>
title="3.1 Block Flow Direction: the writing-mode property">
<link rel="match" href="inline-box-orthogonal-child-with-margins-ref.html">
<meta content="This test checks that the correct margins of orthogonal children are used to compute the container's shrink to fit size. The test PASS if both children are rendered inside the container's blue border." name="assert" />
<style>
.container {
border: 1px dashed blue;
height: 200px;
display: inline-block;
}
.container > div {
float: left;
width: 40px;
margin: 10px 20px 30px 40px;
border-width: 20px 30px 40px 50px;
padding: 30px 40px 50px 60px;
border-style: dotted;
}
.container > div:nth-child(1) { background: yellow; }
.container > div:nth-child(2) { background: purple; }
</style>
<div class="container">
<div></div>
<div style="writing-mode: vertical-lr;"></div>
</div>