LayoutTests/imported/w3c/web-platform-tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-004.html

   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: 199px;
  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>
  54         <div class="square"></div>
  55         <div class="square"></div>
  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>