third_party/WebKit/LayoutTests/imported/csswg-test/css-shapes-1/spec-examples/shape-outside-005.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <title>CSS Test: inset with no extent and inline content - inset(150% 150% 0% 0%)</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     <style type="text/css">
  16         .container {
  17           width: 400px;
  18           font-family: Ahem;
  19           font-size: 20px;
  20           line-height: 1.5em;
  21         }
  22         #test {
  23             color: green;
  24         }
  25         #test-float-left {
  26           shape-outside: inset(150% 150% 0% 0%);
  27           float: left;
  28           width: 200px;
  29           height: 200px;
  30         }
  31         #failure {
  32             color: red;
  33             z-index: -1;
  34         }
  35         #test, #failure {
  36             position: absolute;
  37             top: 70px;
  38         }
  39         #square{
  40             position: absolute;
  41             top: 70px;
  42             width: 196px;
  43             height: 196px;
  44             border: 1px solid black;
  45             z-index: 10;
  46         }
  47     </style>
  48 </head>
  49 <body>
  50     <p>
  51         The test passes if there are two columns of six green horizontal bars of the same
  52         size inside the square and two columns of six matching green bars outside and to the
  53         right of the square. There should be no red.
  54     </p>
  55     <div id="test" class="container">
  56         <div id="test-float-left"></div>
  57         XXXX XXXX
  58         XXXX XXXX
  59         XXXX XXXX
  60         XXXX XXXX
  61         XXXX XXXX XXXX XXXX
  62         XXXX XXXX XXXX XXXX
  63         XXXX XXXX XXXX XXXX
  64         XXXX XXXX XXXX XXXX
  65     </div>
  66     <div id="failure" class="container">
  67           XXXX XXXX XXXX XXXX
  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     </div>
  74     <div id="square"></div>
  75 </body>
  76 </html>