| OLD | NEW |
| 1 <!doctype html> | 1 <!doctype html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <title>cubic-bezier value overflow: SVG Lengths</title> | 4 <title>cubic-bezier value overflow: SVG Lengths</title> |
| 5 <style> | 5 <style> |
| 6 .box { | 6 .box { |
| 7 -webkit-transition: stroke-width 1s linear; | 7 -webkit-transition: stroke-width 1s linear; |
| 8 stroke-width: 1; | 8 stroke-width: 1; |
| 9 stroke: black; | 9 stroke: black; |
| 10 fill: blue; | 10 fill: blue; |
| 11 } | 11 } |
| 12 .animating > .box { | 12 .animating > .box { |
| 13 stroke-width: 50; | 13 stroke-width: 50; |
| 14 } | 14 } |
| 15 </style> | 15 </style> |
| 16 <script src="resources/transition-test-helpers.js"></script> | 16 <script src="../animations/resources/animation-test-helpers.js"></script> |
| 17 <script> | 17 <script> |
| 18 const expectedValues = [ | 18 const expectedValues = [ |
| 19 // [time, element-id, property, expected-value, tolerance] | 19 // [time, element-id, property, expected-value, tolerance] |
| 20 [0.50, "box1", "stroke-width", 61, 4], | 20 [0.50, "box1", "stroke-width", 61, 4], |
| 21 [0.95, "box1", "stroke-width", 55, 4], | 21 [0.95, "box1", "stroke-width", 55, 4], |
| 22 [0.10, "box2", "stroke-width", -6, 4], | 22 [0.10, "box2", "stroke-width", -6, 4], |
| 23 [0.50, "box2", "stroke-width", 19, 4], | 23 [0.50, "box2", "stroke-width", 19, 4], |
| 24 [0.95, "box2", "stroke-width", 54, 4], | 24 [0.95, "box2", "stroke-width", 54, 4], |
| 25 [0.10, "box3", "stroke-width", -12, 4], | 25 [0.10, "box3", "stroke-width", -12, 4], |
| 26 [0.50, "box3", "stroke-width", -53, 4], | 26 [0.50, "box3", "stroke-width", -53, 4], |
| (...skipping 12 matching lines...) Expand all Loading... |
| 39 <body> | 39 <body> |
| 40 <svg id="container"> | 40 <svg id="container"> |
| 41 <rect class="box" id="box1" width="100" height="100" style="-webkit-transi
tion-timing-function: cubic-bezier(0.3, 1.5, 0.8, 1.5);" /> | 41 <rect class="box" id="box1" width="100" height="100" style="-webkit-transi
tion-timing-function: cubic-bezier(0.3, 1.5, 0.8, 1.5);" /> |
| 42 <rect class="box" id="box2" width="100" height="100" y="110" style="-webki
t-transition-timing-function: cubic-bezier(0.4, -0.8, 0.7, 1.7);" /> | 42 <rect class="box" id="box2" width="100" height="100" y="110" style="-webki
t-transition-timing-function: cubic-bezier(0.4, -0.8, 0.7, 1.7);" /> |
| 43 <rect class="box" id="box3" width="100" height="100" y="220" style="-webki
t-transition-timing-function: cubic-bezier(0.7, -2, 1, -1.5);" /> | 43 <rect class="box" id="box3" width="100" height="100" y="220" style="-webki
t-transition-timing-function: cubic-bezier(0.7, -2, 1, -1.5);" /> |
| 44 <rect class="box" id="box4" width="100" height="100" y="330" style="-webki
t-transition-timing-function: cubic-bezier(0, 4, 1, -3);" /> | 44 <rect class="box" id="box4" width="100" height="100" y="330" style="-webki
t-transition-timing-function: cubic-bezier(0, 4, 1, -3);" /> |
| 45 </svg> | 45 </svg> |
| 46 <div id="result"></div> | 46 <div id="result"></div> |
| 47 </body> | 47 </body> |
| 48 </html> | 48 </html> |
| OLD | NEW |