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

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <title>CSS Test: flow-into on list items from multiple lists, when items contain other 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 or numbering (type, value), even when extracting items from multiple and nested lists into the same named flow.">
  11         <style>
  12         .outer-mixed-1 ul,
  13         .outer-mixed-1 ol {
  14             color: blue;
  15         }
  16
  17         .outer-mixed-1 > li {
  18             -webkit-flow-into: f1;
  19
  20         }
  21         #r1 {
  22             -webkit-flow-from: f1;
  23         }
  24
  25         .region {
  26             margin: 2em;
  27             background-color: lightgray;
  28             width: 20em;
  29         }
  30         </style>
  31     </head>
  32     <body>
  33         <p>This test passes if there is a gray rectangle with two black lists in it, as described below.<br>
  34         The first black list is a bulleted list that has a blue numbered list in it.<br>
  35         The second black list is a numbered list that has two blue nested lists in it: the first nested list is a bulleted list with three items, and the second list is a numbered list with two items.</p>
  36         <p>The numbers and bullets for the black lists should be rendered outside the gray rectangle, while the blue list items should be indented. Also, the blue bulleted list should have a different type of bullets than the black bulleted list.</p>
  37         <ul class="outer-mixed-1">
  38             <li>Unordered list, item 1
  39                 <ol>
  40                     <li>Inner ordered list, item 1</li>
  41                     <li>Inner ordered list, item 2</li>
  42                     <li>Inner ordered list, item 3</li>
  43                 </ol>
  44             </li>
  45             <li>Unordered list, item 2</li>
  46         </ul>
  47         <ol class="outer-mixed-1">
  48             <li>Ordered list, item 1
  49                 <ul>
  50                     <li>Unordered inner list, item 1</li>
  51                     <li>Unordered inner list, item 2</li>
  52                     <li>Unordered inner list, item 3</li>
  53                 </ul>
  54             </li>
  55             <li>Ordered list, item 2
  56                 <ol>
  57                     <li>Second inner ordered list, item 1</li>
  58                     <li>Second inner ordered list, item 2</li>
  59                 </ol>
  60             </li>
  61         </ol>
  62         <div class="region" id="r1"></div>
  63     </body>
  64 </html>