shape-outside-linear-gradient-horizontal-rtl.html (1612B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test: Test shape-outside with linear gradient when rtl direction is applied.</title> 5 <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"> 6 <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> 7 <link rel="match" href="reference/shape-outside-linear-gradient-horizontal-rtl-ref.html"> 8 <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient when rtl direction is applied."> 9 <link rel="stylesheet" href="/fonts/ahem.css"> 10 <style> 11 .container { 12 inline-size: 100px; 13 block-size: 200px; 14 background-color: red; 15 font-family: Ahem; 16 font-size: 50px; 17 line-height: 1; 18 direction: rtl; 19 color: green; 20 } 21 #float-left { 22 float: left; 23 inline-size: 100px; 24 block-size: 200px; 25 background: linear-gradient(to right, green 50%, transparent 50%); 26 shape-outside: linear-gradient(to right, green 50%, transparent 50%); 27 } 28 #float-right { 29 float: right; 30 inline-size: 100px; 31 block-size: 200px; 32 background: linear-gradient(to left, green 50%, transparent 50%); 33 shape-outside: linear-gradient(to left, green 50%, transparent 50%); 34 } 35 </style> 36 </head> 37 <body> 38 <p> 39 The test passes if you see a green square. There should be no red. 40 </p> 41 <div class="container"> 42 <div id="float-left"></div> 43 x x x x 44 </div> 45 <div class="container"> 46 <div id="float-right"></div> 47 x x x x 48 </div> 49 </body> 50 </html>