You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the border-box and border-top-right-radius value under sideways-lr writing-mode.">
<style>
.container {
writing-mode: sideways-lr;
inline-size: 200px;
line-height: 0;
}
.shape {
float: left;
shape-outside: border-box;
border-top-right-radius: 60px 40px;
box-sizing: content-box;
block-size: 40px;
inline-size: 40px;
padding: 20px;
border: 20px solid lightgreen;
margin: 20px;
background-color: orange;
}
.box {
display: inline-block;
inline-size: 60px;
background-color: blue;
}
.longbox {
display: inline-block;
inline-size: 200px;
block-size: 20px;
background-color: blue;
}
</style>
<main class="container">
<div class="shape"></div>
<div class="longbox"></div> <!-- Saturate the margin space -->
<div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
<div class="box" style="block-size: 36px;"></div>
<div class="box" style="block-size: 36px;"></div>
<div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
<div class="longbox"></div> <!-- Saturate the margin space -->