| commit-queue@webkit.org | 14f46fd | 2013-09-05 14:23:14 +0000 | [diff] [blame] | 1 | <!doctype html> |
| 2 | |
| 3 | <style> |
| commit-queue@webkit.org | a8fff7a | 2013-09-09 14:30:45 +0000 | [diff] [blame] | 4 | html { |
| 5 | font: 16px Times; |
| 6 | } |
| 7 | |
| commit-queue@webkit.org | 14f46fd | 2013-09-05 14:23:14 +0000 | [diff] [blame] | 8 | .content { |
| 9 | padding: 5px; |
| 10 | } |
| 11 | |
| 12 | #region2 .content { /*fragmented content only has padding-top in the 1st fragment container*/ |
| 13 | padding-top: 0px; |
| 14 | } |
| 15 | |
| 16 | .first-box { |
| 17 | border: 1px solid blue; |
| 18 | } |
| 19 | |
| 20 | #region2 .first-box { |
| 21 | border-top-width: 0px; |
| 22 | } |
| 23 | |
| 24 | .second-box { |
| 25 | margin:40px; |
| 26 | border: 1px solid green; |
| 27 | overflow:hidden; |
| 28 | } |
| 29 | |
| 30 | #region2 .second-box { |
| 31 | margin-top: 0px; |
| 32 | border-top-width: 0px; |
| 33 | } |
| 34 | |
| 35 | #region2 .second-box > p:first-child { |
| 36 | margin-top: 0px |
| 37 | } |
| 38 | |
| 39 | #region1, #region2, #region3 { |
| 40 | border: 1px solid black; |
| 41 | } |
| 42 | |
| 43 | #region1 { |
| 44 | width: 200px; |
| 45 | height: 100px; |
| 46 | overflow-y: hidden; |
| 47 | } |
| 48 | |
| 49 | #region2 { |
| 50 | width: 300px; |
| 51 | height: 180px; |
| 52 | } |
| 53 | |
| 54 | #region3 { |
| 55 | width: 120px; |
| 56 | height: 120px; |
| 57 | } |
| 58 | </style> |
| 59 | |
| 60 | <body> |
| 61 | <p>The first and last lines of text in the regions below should be clipped to the green box. The overflow |
| 62 | section sizes itself independently in each region.</p> |
| 63 | |
| 64 | <div id="container"> |
| 65 | <div id="region1"> |
| 66 | <div class="content"> |
| 67 | <div class="first-box"> |
| 68 | <div class="second-box"> |
| 69 | <div style="width:500px">Clipped line of text that should not be visible.</div> |
| 70 | <p>These lines will</p> |
| 71 | </div> |
| 72 | </div> |
| 73 | </div> |
| 74 | </div> |
| 75 | <div id="region2"> |
| 76 | <div class="content"> |
| 77 | <div class="first-box"> |
| 78 | <div class="second-box"> |
| 79 | <p>not spill out of the regions. These lines will not spill out of the regions. |
| 80 | These lines will not spill out of the regions. </p> |
| 81 | <div style="width:500px">Clipped line of text that should not be visible.</div> |
| 82 | </div> |
| 83 | </div> |
| 84 | </div> |
| 85 | </div> |
| 86 | <div id="region3"></div> |
| 87 | </div> |
