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 |