| <html> |
| <head> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <style> |
| #a { |
| background-color: red; |
| height: 100px; |
| width: 100px; |
| transition: height 0.5s linear; |
| overflow: hidden; |
| } |
| |
| #b { |
| background-color: blue; |
| height: 100px; |
| width: 100px; |
| transition: transform 0.5s linear; |
| } |
| </style> |
| <script> |
| const testObject = async_test("Removed transition on #b doesn't affect transition on #a"); |
| |
| function startTest() { |
| var a = document.getElementById("a"); |
| var b = document.getElementById("b"); |
| a.addEventListener("transitionend", testObject.step_func_done(() => { |
| assert_equals(getComputedStyle(a).height, "0px"); |
| })); |
| |
| // Trigger transitions. |
| a.style.height = "0px"; |
| b.style.transform = "translateX(10px)"; |
| |
| // Force layout. |
| document.body.offsetHeight; |
| |
| // Remove the transform transition by hiding its div. |
| b.style.display = "none"; |
| } |
| </script> |
| </head> |
| <body onload="startTest()"> |
| <div id="a">FAIL</div> |
| <div id="b"></div> |
| PASS |
| </body> |
| |
| </html> |
