shape-outside-linear-gradient-004.html (2099B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test: Shape outside and repeating linear gradient</title> 5 <link rel="author" title="Alan Stearns" href="mailto:stearns@adobe.com"/> 6 <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/> 7 <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> 8 <link rel="match" href="reference/shape-outside-linear-gradient-004-ref.html"/> 9 <meta name="assert" content="This test verifies that content wraps correctly around a shape defined by a repeating linear gradient."/> 10 <style type="text/css"> 11 .container { 12 position: absolute; 13 top: 70px; 14 width: 200px; 15 font-size: 0px; 16 } 17 .square { 18 display: inline-block; 19 width: 100px; 20 height: 100px; 21 line-height: 100px; 22 background-color: green; 23 } 24 .gradient { 25 float: left; 26 width: 100px; 27 height: 400px; 28 shape-outside: repeating-linear-gradient(transparent 0px, transparent 100px, white 200px); 29 shape-image-threshold: 0.5; 30 } 31 #failure { 32 position: absolute; 33 top: 70px; 34 width: 200px; 35 font-size: 0px; 36 z-index: -1; 37 } 38 #failure > .square { 39 background-color: red; 40 } 41 #failure > .right { 42 margin-left: 100px; 43 } 44 </style> 45 </head> 46 <body> 47 <p> 48 The test passes if there are four green squares alternating left and right. There 49 should be no red. 50 </p> 51 <div id="test" class="container"> 52 <div class="gradient"></div> 53 <div class="square"></div><br> 54 <div class="square"></div><br> 55 <div class="square"></div><br> 56 <div class="square"></div> 57 </div> 58 <div id="failure"> 59 <div class="square"></div><br> 60 <div class="square right"></div><br> 61 <div class="square"></div><br> 62 <div class="square right"></div> 63 </div> 64 </body> 65 </html>