shape-outside-004.html (2555B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test: inset with no extent and inline content - inset(50% 50% 50% 50%)</title> 5 <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> 6 <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#relation-to-box-model-and-float-behavior"/> 7 <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes"/> 8 <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> 9 <link rel="match" href="reference/shape-outside-004-ref.html"/> 10 <meta name="flags" content="ahem"/> 11 <meta name="assert" content="This test verifies that a shape with no extent allow inline 12 content to flow through all of the float's box."/> 13 <!-- This test is derived from Example 3 in this version of the spec: 14 http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/ --> 15 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 16 <style type="text/css"> 17 .container { 18 width: 400px; 19 font-family: Ahem; 20 font-size: 20px; 21 line-height: 1.5em; 22 } 23 #test { 24 color: green; 25 } 26 #test-float-left { 27 shape-outside: inset(50% 50% 50% 50%); 28 float: left; 29 width: 200px; 30 height: 200px; 31 } 32 #failure { 33 color: red; 34 z-index: -1; 35 } 36 #test, #failure { 37 position: absolute; 38 top: 70px; 39 } 40 #square{ 41 position: absolute; 42 top: 70px; 43 width: 196px; 44 height: 196px; 45 border: 1px solid black; 46 z-index: 10; 47 } 48 </style> 49 </head> 50 <body> 51 <p> 52 The test passes if there are two columns of six green horizontal bars of the same 53 size inside the square and two columns of six matching green bars outside and to the 54 right of the square. There should be no red. 55 </p> 56 <div id="test" class="container"> 57 <div id="test-float-left"></div> 58 XXXX XXXX 59 XXXX XXXX 60 XXXX XXXX 61 XXXX XXXX 62 XXXX XXXX XXXX XXXX 63 XXXX XXXX XXXX XXXX 64 XXXX XXXX XXXX XXXX 65 XXXX XXXX XXXX XXXX 66 </div> 67 <div id="failure" class="container"> 68 XXXX XXXX XXXX XXXX 69 XXXX XXXX XXXX XXXX 70 XXXX XXXX XXXX XXXX 71 XXXX XXXX XXXX XXXX 72 XXXX XXXX XXXX XXXX 73 XXXX XXXX XXXX XXXX 74 </div> 75 <div id="square"></div> 76 </body> 77 </html>