OLD | NEW |
| (Empty) |
1 <style> | |
2 border-box { | |
3 background-color: pink; | |
4 box-sizing: border-box; | |
5 max-width: 300px; | |
6 padding: 0 5%; | |
7 } | |
8 </style> | |
9 <container style="width: 400px"> | |
10 <border-box> | |
11 <p>Even though the width of 'border-box' stays the same after it reaches 300
px, the width available to its children decreases as its padding continues to ex
pand. Because the padding is based off the width before it's constrained by min/
max. This tests that we continue to layout the contents of border-box even when
its own width remains the same.</p> | |
12 </div> | |
13 </container> | |
14 | |
15 <script> | |
16 import "../resources/third_party/unittest/unittest.dart"; | |
17 import "../resources/unit.dart"; | |
18 | |
19 import "dart:sky"; | |
20 | |
21 void main() { | |
22 initUnit(); | |
23 | |
24 test("paragraph width should shrink", () { | |
25 expect(document.querySelector("p").offsetWidth, equals(260)); | |
26 document.querySelector("container").style["width"] = "800px"; | |
27 expect(document.querySelector("p").offsetWidth, equals(220)); | |
28 }); | |
29 } | |
30 </script> | |
OLD | NEW |