test_bug621351.html (1458B)
1 <!DOCTYPE html> 2 <html lang=en> 3 <title>Test for Bug 160403</title> 4 <script src="/tests/SimpleTest/SimpleTest.js"></script> 5 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"> 6 <span></span> 7 <style> 8 span { 9 border-inline-start: 0px solid rgb(0, 0, 0); 10 border-inline-end: 0px solid rgb(0, 0, 0); 11 transition: border 100s linear -50s; 12 } 13 span.transitioned { 14 border-inline-start: 100px solid rgb(100, 100, 100); 15 border-inline-end: 10px solid rgb(10, 10, 10); 16 } 17 </style> 18 <script> 19 // Test that transitioning each of border-{left,right}-{color,width} 20 // works when the values are set through the -moz-border-{start,end} 21 // shorthands. 22 23 var e = document.querySelector("span"); 24 var cs = getComputedStyle(e); 25 is(cs.borderLeftColor, "rgb(0, 0, 0)", "value of border-left-color before transition"); 26 is(cs.borderLeftWidth, "0px", "value of border-left-width before transition"); 27 is(cs.borderRightColor, "rgb(0, 0, 0)", "value of border-right-color before transition"); 28 is(cs.borderRightWidth, "0px", "value of border-right-width before transition"); 29 e.className = "transitioned"; 30 is(cs.borderLeftWidth, "50px", "value of border-left-width during transition"); 31 is(cs.borderLeftColor, "rgb(50, 50, 50)", "value of border-left-color during transition"); 32 is(cs.borderRightWidth, "5px", "value of border-right-width during transition"); 33 is(cs.borderRightColor, "rgb(5, 5, 5)", "value of border-right-color during transition"); 34 e.remove(); 35 </script>