| 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-dashoffset 1s linear; | 7 transition: stroke-dashoffset 1s linear; |
| 8 stroke-dashoffset: 1; | 8 stroke-dashoffset: 1; |
| 9 stroke-dasharray: 15, 15; | 9 stroke-dasharray: 15, 15; |
| 10 stroke-width: 10; | 10 stroke-width: 10; |
| 11 stroke: black; | 11 stroke: black; |
| 12 fill: blue; | 12 fill: blue; |
| 13 } | 13 } |
| 14 #box1 { | 14 #box1 { |
| 15 -webkit-transition-timing-function: cubic-bezier(0.3, 1.5, 0.8, 1.5); | 15 transition-timing-function: cubic-bezier(0.3, 1.5, 0.8, 1.5); |
| 16 } | 16 } |
| 17 #box2 { | 17 #box2 { |
| 18 -webkit-transition-timing-function: cubic-bezier(0.4, -0.8, 0.7, 1.7); | 18 transition-timing-function: cubic-bezier(0.4, -0.8, 0.7, 1.7); |
| 19 } | 19 } |
| 20 #box3 { | 20 #box3 { |
| 21 -webkit-transition-timing-function: cubic-bezier(0.7, -2, 1, -1.5); | 21 transition-timing-function: cubic-bezier(0.7, -2, 1, -1.5); |
| 22 } | 22 } |
| 23 #box4 { | 23 #box4 { |
| 24 -webkit-transition-timing-function: cubic-bezier(0, 4, 1, -3); | 24 transition-timing-function: cubic-bezier(0, 4, 1, -3); |
| 25 } | 25 } |
| 26 .animating > .box { | 26 .animating > .box { |
| 27 stroke-dashoffset: 50; | 27 stroke-dashoffset: 50; |
| 28 } | 28 } |
| 29 </style> | 29 </style> |
| 30 <script src="../animations/resources/animation-test-helpers.js"></script> | 30 <script src="../animations/resources/animation-test-helpers.js"></script> |
| 31 <script> | 31 <script> |
| 32 const expectedValues = [ | 32 const expectedValues = [ |
| 33 // [time, element-id, property, expected-value, tolerance] | 33 // [time, element-id, property, expected-value, tolerance] |
| 34 [0.50, "box1", "stroke-dashoffset", 61, 4], | 34 [0.50, "box1", "stroke-dashoffset", 61, 4], |
| (...skipping 18 matching lines...) Expand all Loading... |
| 53 <body> | 53 <body> |
| 54 <svg id="container"> | 54 <svg id="container"> |
| 55 <path class="box" id="box1" d="M5,10 l0,100 l100,0 l0,-100 l-100,0" /> | 55 <path class="box" id="box1" d="M5,10 l0,100 l100,0 l0,-100 l-100,0" /> |
| 56 <path class="box" id="box2" d="M5,130 l0,100 l100,0 l0,-100 l-100,0" /> | 56 <path class="box" id="box2" d="M5,130 l0,100 l100,0 l0,-100 l-100,0" /> |
| 57 <path class="box" id="box3" d="M5,250 l0,100 l100,0 l0,-100 l-100,0" /> | 57 <path class="box" id="box3" d="M5,250 l0,100 l100,0 l0,-100 l-100,0" /> |
| 58 <path class="box" id="box4" d="M5,370 l0,100 l100,0 l0,-100 l-100,0" /> | 58 <path class="box" id="box4" d="M5,370 l0,100 l100,0 l0,-100 l-100,0" /> |
| 59 </svg> | 59 </svg> |
| 60 <div id="result"></div> | 60 <div id="result"></div> |
| 61 </body> | 61 </body> |
| 62 </html> | 62 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2521493002:
CSS Transitions: Reduce usage of -webkit prefix in layout tests (Closed)
