shape-outside-content-box-002.html (2141B)
1 <!DOCTYPE html> 2 <!-- Any copyright is dedicated to the Public Domain. 3 - http://creativecommons.org/publicdomain/zero/1.0/ --> 4 5 <html> 6 <title>CSS Shape Test: float right, content-box</title> 7 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 8 <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> 9 <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> 10 <link rel="match" href="reference/shape-outside-content-box-002-ref.html"> 11 <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the content-box value."> 12 <style> 13 .container { 14 direction: rtl; 15 width: 175px; 16 line-height: 0; 17 } 18 19 .shape { 20 float: right; 21 shape-outside: content-box; 22 box-sizing: content-box; 23 height: 25px; 24 width: 25px; 25 padding: 25px; 26 border: 25px solid lightgreen; 27 margin: 25px; 28 background-color: orange; 29 } 30 31 .box { 32 display: inline-block; 33 width: 50px; 34 height: 25px; 35 background-color: blue; 36 } 37 38 .longbox { 39 display: inline-block; 40 width: 175px; 41 height: 25px; 42 background-color: blue; 43 } 44 </style> 45 46 <main class="container"> 47 <div class="shape"></div> 48 <div class="shape"></div> 49 <div class="longbox"></div> <!-- Saturate the margin space --> 50 <div class="longbox"></div> <!-- Saturate the border space --> 51 <div class="longbox"></div> <!-- Saturate the padding space --> 52 <div class="box"></div> 53 <div class="longbox"></div> <!-- Saturate the padding space --> 54 <div class="longbox"></div> <!-- Saturate the border space --> 55 <div class="longbox"></div> <!-- Saturate the margin space --> 56 57 <div class="longbox"></div> <!-- Saturate the margin space --> 58 <div class="longbox"></div> <!-- Saturate the border space --> 59 <div class="longbox"></div> <!-- Saturate the padding space --> 60 <div class="box"></div> 61 <div class="longbox"></div> <!-- Saturate the padding space --> 62 <div class="longbox"></div> <!-- Saturate the border space --> 63 <div class="longbox"></div> <!-- Saturate the margin space --> 64 </main> 65 </html>