| <!doctype html> |
| <html style="font: 14px/1.25 monospace;"> |
| <head> |
| <style> |
| p { |
| margin: 5px; |
| } |
| .overflowText { |
| color: red; |
| font-weight: bold; |
| } |
| .overflowHidden { |
| overflow: hidden; |
| border: 2px solid orange; |
| } |
| .overflowVisible { |
| overflow: visible; |
| border: 2px solid blue; |
| } |
| .content { |
| margin-top: -69px; |
| } |
| .region { |
| width: 80px; |
| height: 40px; |
| } |
| .regionRelative { |
| position: relative; |
| top: 12px; |
| left: 5px; |
| border: 3px dotted green; |
| } |
| .regionStatic { |
| position: static; |
| margin-top: 12px; |
| margin-left: 5px; |
| border: 3px solid green; |
| } |
| .outerContainer { |
| position: absolute; |
| width: 135px; |
| height: 97px; |
| padding: 10px; |
| } |
| .firstRow { |
| top: 200px; |
| } |
| .secondRow { |
| top: 375px; |
| } |
| .outerContainer:hover { |
| -webkit-transform: translateX(15px); |
| } |
| .innerContainer { |
| width: 100px; |
| height: 63px; |
| padding: 10px; |
| margin-top: 5px; |
| } |
| .innerContainer:hover { |
| -webkit-transform: translateX(15px); |
| } |
| .left1 { |
| left: 10px; |
| } |
| .left2 { |
| left: 185px; |
| } |
| .left3 { |
| left: 360px; |
| } |
| .left4 { |
| left: 535px; |
| } |
| |
| #content1 { |
| -webkit-flow-into: flow1; |
| } |
| #content2 { |
| -webkit-flow-into: flow2; |
| } |
| #content3 { |
| -webkit-flow-into: flow3; |
| } |
| #content4 { |
| -webkit-flow-into: flow4; |
| } |
| #content5 { |
| -webkit-flow-into: flow5; |
| } |
| #content6 { |
| -webkit-flow-into: flow6; |
| } |
| #content7 { |
| -webkit-flow-into: flow7; |
| } |
| #content8 { |
| -webkit-flow-into: flow8; |
| } |
| #region1 { |
| -webkit-flow-from: flow1; |
| } |
| #region2 { |
| -webkit-flow-from: flow2; |
| } |
| #region3 { |
| -webkit-flow-from: flow3; |
| } |
| #region4 { |
| -webkit-flow-from: flow4; |
| } |
| #region5 { |
| -webkit-flow-from: flow5; |
| } |
| #region6 { |
| -webkit-flow-from: flow6; |
| } |
| #region7 { |
| -webkit-flow-from: flow7; |
| } |
| #region8 { |
| -webkit-flow-from: flow8; |
| } |
| </style> |
| </head> |
| <body> |
| <p>Tests that content overflowing the region respects the overflow style of the region's container.</p> |
| <p>All <span style="color: red;"><b>red</b></span> overflow lines should be <b>selectable</b>.</p> |
| <p><b>Legend:</b></p> |
| <ul style="margin-top: 0px;"> |
| <li><span style="color: green;"><b>Regions:</b></span> |
| <ul style="color: green;"> |
| <li><b>Solid</b> border means "position: <b>static</b>"</li> |
| <li><b>Dotted</b> border means "position: <b>relative</b>"</li> |
| </ul> |
| </li> |
| <li><span style="color: orange;"><b>Orange</b> containers have "overflow: <b>hidden</b>"</span></li> |
| <li><span style="color: blue;"><b>Blue</b> containers have "overflow: <b>visible</b>"</span></li> |
| </ul> |
| |
| <div id="content1" class="content"> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <br/> |
| <div>flow1_1</div> |
| <div>flow1_2</div> |
| <br/> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| </div> |
| <div id="content2" class="content"> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <br/> |
| <div>flow2_1</div> |
| <div>flow2_2</div> |
| <br/> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| </div> |
| <div id="content3" class="content"> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <br/> |
| <div>flow3_1</div> |
| <div>flow3_2</div> |
| <br/> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| </div> |
| <div id="content4" class="content"> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <br/> |
| <div>flow4_1</div> |
| <div>flow4_2</div> |
| <br/> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| </div> |
| <div id="content5" class="content"> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <br/> |
| <div>flow5_1</div> |
| <div>flow5_2</div> |
| <br/> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| </div> |
| <div id="content6" class="content"> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <br/> |
| <div>flow6_1</div> |
| <div>flow6_2</div> |
| <br/> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| </div> |
| <div id="content7" class="content"> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <br/> |
| <div>flow7_1</div> |
| <div>flow7_2</div> |
| <br/> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| </div> |
| <div id="content8" class="content"> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <br/> |
| <div>flow8_1</div> |
| <div>flow8_2</div> |
| <br/> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| <div class="overflowText">Overflowlonglonglongtext</div> |
| </div> |
| |
| <div id="container1_outer" class="left1 outerContainer firstRow overflowHidden"> |
| <div id="container1_inner" class="innerContainer overflowHidden"> |
| <div id="region1" class="region regionRelative"></div> |
| </div> |
| </div> |
| <div id="container2_outer" class="left2 outerContainer firstRow overflowVisible"> |
| <div id="container2_inner" class="innerContainer overflowHidden"> |
| <div id="region2" class="region regionRelative"></div> |
| </div> |
| </div> |
| <div id="container3_outer" class="left3 outerContainer firstRow overflowHidden"> |
| <div id="container3_inner" class="innerContainer overflowVisible"> |
| <div id="region3" class="region regionRelative"></div> |
| </div> |
| </div> |
| <div id="container4_outer" class="left4 outerContainer firstRow overflowVisible"> |
| <div id="container4_inner" class="innerContainer overflowVisible"> |
| <div id="region4" class="region regionRelative"></div> |
| </div> |
| </div> |
| <div id="container5_outer" class="left1 outerContainer secondRow overflowHidden"> |
| <div id="container5_inner" class="innerContainer overflowHidden"> |
| <div id="region5" class="region regionStatic"></div> |
| </div> |
| </div> |
| <div id="container6_outer" class="left2 outerContainer secondRow overflowVisible"> |
| <div id="container6_inner" class="innerContainer overflowHidden"> |
| <div id="region6" class="region regionStatic"></div> |
| </div> |
| </div> |
| <div id="container7_outer" class="left3 outerContainer secondRow overflowHidden"> |
| <div id="container7_inner" class="innerContainer overflowVisible"> |
| <div id="region7" class="region regionStatic"></div> |
| </div> |
| </div> |
| <div id="container8_outer" class="left4 outerContainer secondRow overflowVisible"> |
| <div id="container8_inner" class="innerContainer overflowVisible"> |
| <div id="region8" class="region regionStatic"></div> |
| </div> |
| </div> |
| </body> |
| </html> |
