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 paragraph { |
| 9 display: paragraph; |
| 10 } |
| 11 </style> |
| 12 <container style="width: 400px"> |
| 13 <border-box> |
| 14 <paragraph>Even though the width of 'border-box' stays the same after it rea
ches 300px, the width available to its children decreases as its padding continu
es to expand. 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 ev
en when its own width remains the same.</paragraph> |
| 15 </div> |
| 16 </container> |
| 17 |
| 18 <script> |
| 19 import "../resources/third_party/unittest/unittest.dart"; |
| 20 import "../resources/unit.dart"; |
| 21 |
| 22 import "dart:sky"; |
| 23 |
| 24 void main() { |
| 25 initUnit(); |
| 26 |
| 27 test("paragraph width should shrink", () { |
| 28 expect(document.querySelector("paragraph").offsetWidth, equals(260)); |
| 29 document.querySelector("container").style["width"] = "800px"; |
| 30 expect(document.querySelector("paragraph").offsetWidth, equals(220)); |
| 31 }); |
| 32 } |
| 33 </script> |
OLD | NEW |