src/third_party/WebKit/LayoutTests/fast/regions/counters/extract-list-items-004.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <title>CSS Test: flow-into on unordered list items, when items contain other unordered lists</title>
   5         <link rel="author" title="Mihai Balan" href="mibalan@adobe.com">
   6         <link rel="help" href="http://www.w3.org/TR/css3-regions/#properties-and-rules" />
   7         <link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" />
   8         <link rel="stylesheet" type="text/css" href="../resources/font-smoothing-disabler.css">
   9         <meta name="flags" content="">
  10         <meta name="assert" content="The flow-into property can be applied to individual list items. List items extracted in named flows and flowed into regions must preserve their list markers, even when extracting items from multiple and nested lists into the same named flow.">
  11         <style>
  12         #outer-unordered-1 ul,
  13         #outer-unordered-2 ul {
  14             color: blue;
  15         }
  16         #outer-unordered-2 ul ul {
  17             color: green;
  18         }
  19
  20
  21         #outer-unordered-1 > li {
  22             -webkit-flow-into: f1;
  23         }
  24         #r1 {
  25             -webkit-flow-from: f1;
  26         }
  27
  28         #outer-unordered-2 li {
  29             -webkit-flow-into: f2;
  30         }
  31         #r2 {
  32             -webkit-flow-from: f2;
  33         }
  34
  35         .region {
  36             margin: 2em;
  37             background-color: lightgray;
  38             width: 20em;
  39         }
  40         </style>
  41     </head>
  42     <body>
  43         <p>This test passes if there are two gray rectangles:  each with a list with another lists nested in it. The list markers for the black list in the first rectangle, and for all the lists in the second rectangle should be rendered outside of the gray boxes</p>
  44         <p>The list in the first rectangle should be black, with two blue nested lists in it. The nested lists should appear after the first and the second items, they should be indented and use a different kind of bullet.</p>
  45         <p>The list in the second rectangle should be black, with a blue nested list in it that has in turn a nested green list in it. Each of the black, blue and green list should use different kinds of bullets and list items of the same color should have the same kind of bullet.</p>
  46         <ul id="outer-unordered-1">
  47             <li>First unordered list, item 1
  48                 <ul>
  49                     <li>First inner unordered list, item 1</li>
  50                     <li>First inner unordered list, item 2</li>
  51                     <li>First inner unordered list, item 3</li>
  52                 </ul>
  53             </li>
  54             <li>First unordered list, item 2
  55                 <ul>
  56                     <li>Second inner unordered list, item 1</li>
  57                     <li>Second inner unordered list, item 2</li>
  58                 </ul>
  59             </li>
  60             <li>First unordered list, item 3</li>
  61         </ul>
  62         <div class="region" id="r1"></div>
  63
  64         <ul id="outer-unordered-2">
  65             <li>Second unordered list, item 1</li>
  66             <li>Second unordered list, item 2
  67                 <ul>
  68                     <li>Last inner unordered list, item 1</li>
  69                     <li>Last inner unordered list, item 2
  70                         <ul>
  71                             <li>Innermost unordered list, item 1</li>
  72                             <li>Innermost unordered list, item 2</li>
  73                         </ul>
  74                     </li>
  75                     <li>Last inner unordered list, item 3</li>
  76                     <li>Last inner unordered list, item 4</li>
  77                 </ul>
  78             </li>
  79             <li>Second unordered list, item 3</li>
  80         </ul>
  81         <div class="region" id="r2"></div>
  82     </body>
  83 </html>