| OLD | NEW |
| (Empty) |
| 1 <!doctype html> | |
| 2 | |
| 3 <style> | |
| 4 | |
| 5 @font-face { | |
| 6 font-family: webkit-ahem; | |
| 7 font-style: normal; | |
| 8 src: url(../../resources/Ahem.ttf); | |
| 9 } | |
| 10 | |
| 11 #test-goals, #test, #test2, #test3 { | |
| 12 font-family: webkit-ahem; | |
| 13 } | |
| 14 | |
| 15 #first-box { | |
| 16 border-top: 1px solid blue; | |
| 17 margin-top: 5px; | |
| 18 height: 49px; | |
| 19 } | |
| 20 | |
| 21 #first-box2 { | |
| 22 height: 45px; | |
| 23 } | |
| 24 | |
| 25 #first-box3 { | |
| 26 border-bottom: 1px solid blue; | |
| 27 } | |
| 28 | |
| 29 #first-box, #first-box2, #first-box3 { | |
| 30 border-left: 1px solid blue; | |
| 31 border-right: 1px solid blue; | |
| 32 margin-left: 5px; | |
| 33 margin-right: 5px; | |
| 34 } | |
| 35 | |
| 36 #second-box { | |
| 37 border-top: 1px solid green; | |
| 38 margin-top: 7px; | |
| 39 height: 41px; | |
| 40 } | |
| 41 | |
| 42 #second-box2 { | |
| 43 height: 45px; | |
| 44 } | |
| 45 | |
| 46 #second-box3 { | |
| 47 border-bottom: 1px solid green; | |
| 48 margin-bottom: 7px; | |
| 49 } | |
| 50 | |
| 51 #second-box, #second-box2, #second-box3 { | |
| 52 border-left: 1px solid green; | |
| 53 border-right: 1px solid green; | |
| 54 margin-left: 7px; | |
| 55 margin-right: 7px; | |
| 56 } | |
| 57 | |
| 58 #region1 { | |
| 59 width: 15em; | |
| 60 height: 55px; | |
| 61 } | |
| 62 | |
| 63 #region2 { | |
| 64 width: 35em; | |
| 65 height: 45px; | |
| 66 } | |
| 67 | |
| 68 #region3 { | |
| 69 width: 10em; | |
| 70 height: 55px; | |
| 71 } | |
| 72 | |
| 73 #region1, #region2, #region3 { | |
| 74 border: 1px solid black; | |
| 75 } | |
| 76 | |
| 77 </style> | |
| 78 | |
| 79 <div id="topLevel"> | |
| 80 <span id="test-goals">Text should flow through all three regions and not
spill outside of the border</span> | |
| 81 </div> | |
| 82 | |
| 83 <div id="container"> | |
| 84 <div id="region1"> | |
| 85 <div id="first-box"> | |
| 86 <div id="second-box"> | |
| 87 <span id="test">mnopq mnopq mnopq mnopq</span> | |
| 88 </div> | |
| 89 </div> | |
| 90 </div> | |
| 91 | |
| 92 <div id="region2"> | |
| 93 <div id="first-box2"> | |
| 94 <div id="second-box2"> | |
| 95 <span id="test2">qponmqponm mnopqmnopq mnopqmnop
q mnopqmnopq mnopqmnopq mnopqmnopq</span> | |
| 96 </div> | |
| 97 </div> | |
| 98 </div> | |
| 99 | |
| 100 <div id="region3"> | |
| 101 <div id="first-box3"> | |
| 102 <div id="second-box3"> | |
| 103 <span id="test3">mno mno mno mno mno mno mno mno
</span> | |
| 104 </div> | |
| 105 </div> | |
| 106 </div> | |
| 107 | |
| 108 </div> | |
| OLD | NEW |