OLD | NEW |
1 <style> | 1 <style> |
2 #outerDiv, #innerDiv, #remainderDiv | 2 #outerDiv, #innerDiv, #remainderDiv |
3 { | 3 { |
4 background-color: green; | 4 background-color: green; |
5 height: 100.5px; | 5 height: 100.5px; |
6 } | 6 } |
7 #outerDiv | 7 #outerDiv |
8 { | 8 { |
9 width: 100.5px; | 9 width: 100.5px; |
10 background-color: red; | 10 background-color: red; |
11 } | 11 } |
12 #innerDiv { | 12 #innerDiv { |
13 width: calc(100% - 10.5px); | 13 width: calc(100% - 10.5px); |
14 float: left; | 14 float: left; |
15 } | 15 } |
16 #remainderDiv | 16 #remainderDiv |
17 { | 17 { |
18 width: 10.5px; | 18 width: 10.5px; |
19 float: left; | 19 float: left; |
20 } | 20 } |
21 </style> | 21 </style> |
22 <script src="../../resources/check-layout.js"></script> | 22 <script src="../../resources/check-layout.js"></script> |
23 <body onload="checkLayout('#outerDiv')"> | 23 <body onload="checkLayout('#outerDiv')"> |
24 <p>Test that a calc() with a percentage against a containing block with a | 24 <p>Test that a calc() with a percentage against a containing block with a |
25 fractional width does not round to integer.</p> | 25 fractional width does not round to integer.</p> |
26 <div id="outerDiv" data-expected-width="100.5px" data-expected-height="100.5px
"> | 26 <div id="outerDiv" data-expected-width="100.5" data-expected-height="100.5"> |
27 <div id="innerDiv" data-expected-width="90px" data-expected-height="100.5px"
></div> | 27 <div id="innerDiv" data-expected-width="90" data-expected-height="100.5"></d
iv> |
28 <div id="remainderDiv" data-expected-width="10.5px" data-expected-height="10
0.5px"></div> | 28 <div id="remainderDiv" data-expected-width="10.5" data-expected-height="100.
5"></div> |
29 </div> | 29 </div> |
30 </body> | 30 </body> |
OLD | NEW |