src/third_party/WebKit/LayoutTests/fast/regions/selection/selecting-text-through-different-region-flows-2.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../resources/helper.js"></script>
   5 <style>
   6 body { width: 600px; }
   7
   8 #footNote {
   9     -webkit-flow-into: footNote;
  10     display: block;
  11     font-size: 13px;
  12 }
  13
  14 #footNoteRegion { -webkit-flow-from: footNote; }
  15 #content { -webkit-flow-into: content; }
  16 #region { -webkit-flow-from: content; }
  17 </style>
  18 </head>
  19 <body>
  20
  21 <div id="region"></div>
  22 <div id="footNoteRegion"></div>
  23 <div id="content">
  24     <h1 style="margin-top: 0px">Selecting text through different CSS-Region flows</h1>
  25     <div id="contentText">
  26         This text contains a footnote as a nested region what is diplayed <span id="start">below</span> the article. (1) <span id="footNote">
  27         <span><span></span>(1) This is a footnote. Footnotes can be quite long and go over several lines. This footnote
  28         is nested inside the text <span id="end">above</span> and displayed here with the help of css-regions.</span></span> If you start selecting
  29         text from this article until somewhere in the footnote and then click somewhere, the selection should be cleared.
  30     </div>
  31 </div>
  32
  33 <script>
  34 selectContentByIds("start", "end");
  35 </script>
  36 </body>
  37 </html>