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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <title>CSS Test: Left float with radial gradient shape, shape margin, and shape-image-threshold</title>
   5     <link rel="author" title="Bear Travis" href="mailto:betravis@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="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"/>
   9     <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-image-threshold-property"/>
  10     <script src="/resources/testharness.js"></script>
  11     <script src="/resources/testharnessreport.js"></script>
  12     <script src="../../supported-shapes/support/rounded-rectangle.js"></script>
  13     <script src="../../supported-shapes/support/subpixel-utils.js"></script>
  14     <script src="../../supported-shapes/support/test-utils.js"></script>
  15     <meta name="flags" content="ahem dom"/>
  16     <meta name="assert" content="This test verifies that shape-outside respects a
  17                                 simple radial gradient when a shape margin
  18                                 and shape-image threshold are applied."/>
  19     <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
  20     <style type="text/css">
  21         body { margin: 0; }
  22         .container {
  23             width: 200px;
  24             height: 200px;
  25             font-family: Ahem;
  26             font-size: 10px;
  27             line-height: 1;
  28         }
  29         #test {
  30             color: green;
  31         }
  32         #gradient {
  33             float: left;
  34             width: 100px;
  35             height: 100px;
  36             shape-outside: radial-gradient(circle, green 10px, rgba(0, 255, 0, 0.75) 25px, rgba(0, 255, 0, 0.25) 25px, transparent 50px);
  37             shape-margin: 25px;
  38             shape-image-threshold: 0.5;
  39         }
  40     </style>
  41 </head>
  42 <body>
  43     <p>
  44         The test passes if you see green boxes following the contour of a circle. There should be no red.
  45     </p>
  46     <div id="test" class="container">
  47         x</br>
  48         <div id="gradient"></div>
  49         <span id='test0'>x</span><br/>
  50         <span id='test1'>x</span><br/>
  51         <span id='test2'>x</span><br/>
  52         <span id='test3'>x</span><br/>
  53         <span id='test4'>x</span><br/>
  54         <span id='test5'>x</span><br/>
  55         <span id='test6'>x</span><br/>
  56         <span id='test7'>x</span><br/>
  57         <span id='test8'>x</span><br/>
  58         <span id='test9'>x</span><br/>
  59         x<br/>
  60     </div>
  61     <div id="log"></div>
  62     <script>
  63         verifyTextPoints({
  64                 roundedRect: {x: 0, y: 10, width: 100, height: 100, rx: 50, ry: 50},
  65                 containerWidth: 200,
  66                 containerHeight: 200,
  67                 lineHeight: 10
  68         }, 10, 1.5);
  69      </script>
  70 </body>
  71 </html>