OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <style> | 2 <style> |
3 #container { | 3 #container { |
4 position: relative; | 4 position: relative; |
5 width: 500px; | 5 width: 500px; |
6 } | 6 } |
7 | 7 |
8 #dynamic-padding { | 8 #dynamic-padding { |
9 position: absolute; | 9 position: absolute; |
10 left: 0; | 10 left: 0; |
11 top: 0; | 11 top: 0; |
12 | 12 |
13 box-sizing: border-box; | 13 box-sizing: border-box; |
14 width: 300px; | 14 width: 300px; |
15 height: 300px; | 15 height: 300px; |
16 padding: 10%; | 16 padding: 10%; |
17 | 17 |
18 background-clip: content-box; | 18 background-clip: content-box; |
19 background-color: yellow; | 19 background-color: yellow; |
20 } | 20 } |
21 </style> | 21 </style> |
22 <div id="container"> | 22 <div id="container"> |
23 <div id="dynamic-padding"></div> | 23 <div id="dynamic-padding"></div> |
24 </div> | 24 </div> |
25 This test verifies an element with percentage padding and background-clip:conten
t-box correctly repaints when its padding changes due to container layout. | 25 This test verifies an element with percentage padding and background-clip:conten
t-box correctly repaints when its padding changes due to container layout. |
26 <script src="../../resources/run-after-layout-and-paint.js"></script> | 26 <script src="../../fast/../resources/run-after-layout-and-paint.js"></script> |
27 <script> | 27 <script> |
28 runAfterLayoutAndPaint(function() { | 28 runAfterLayoutAndPaint(function() { |
29 document.getElementById("container").style.width = "100px"; | 29 document.getElementById("container").style.width = "100px"; |
30 }, true); | 30 }, true); |
31 </script> | 31 </script> |
OLD | NEW |