OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <style> |
| 5 #scrollBehaviorInstant { |
| 6 scroll-behavior: instant; |
| 7 } |
| 8 |
| 9 #scrollBehaviorSmooth { |
| 10 scroll-behavior: smooth; |
| 11 } |
| 12 </style> |
| 13 <script src="../../resources/js-test.js"></script> |
| 14 </head> |
| 15 <body> |
| 16 <div id="scrollBehaviorInstant"></div> |
| 17 <div id="scrollBehaviorSmooth"></div> |
| 18 <script> |
| 19 description('Test that setting and getting scroll-behavior works as expected'); |
| 20 |
| 21 debug("Test getting scroll-behavior set through CSS"); |
| 22 var scrollBehaviorInstant = document.getElementById("scrollBehaviorInstant"); |
| 23 shouldBe("getComputedStyle(scrollBehaviorInstant, '').getPropertyValue('scroll-b
ehavior')", "'instant'"); |
| 24 |
| 25 var scrollBehaviorSmooth = document.getElementById("scrollBehaviorSmooth"); |
| 26 shouldBe("getComputedStyle(scrollBehaviorSmooth, '').getPropertyValue('scroll-be
havior')", "'smooth'"); |
| 27 |
| 28 debug(""); |
| 29 debug("Test initial value of scroll-behavior"); |
| 30 var element = document.createElement("div"); |
| 31 document.body.appendChild(element); |
| 32 shouldBe("getComputedStyle(element, '').getPropertyValue('scroll-behavior')", "'
instant'"); |
| 33 |
| 34 debug(""); |
| 35 debug("Test getting and setting scroll-behavior through JS"); |
| 36 element = document.createElement("div"); |
| 37 document.body.appendChild(element); |
| 38 element.style.scrollBehavior = "smooth"; |
| 39 shouldBe("getComputedStyle(element, '').getPropertyValue('scroll-behavior')", "'
smooth'"); |
| 40 |
| 41 element.style.scrollBehavior = "instant"; |
| 42 shouldBe("getComputedStyle(element, '').getPropertyValue('scroll-behavior')", "'
instant'"); |
| 43 |
| 44 debug(""); |
| 45 debug("Test the value 'initial'"); |
| 46 element.style.scrollBehavior = "smooth"; |
| 47 shouldBe("getComputedStyle(element, '').getPropertyValue('scroll-behavior')", "'
smooth'"); |
| 48 element.style.scrollBehavior = "initial"; |
| 49 shouldBe("getComputedStyle(element, '').getPropertyValue('scroll-behavior')", "'
instant'"); |
| 50 |
| 51 debug(""); |
| 52 debug("Test the value 'inherit'"); |
| 53 var parentElement = document.createElement("div"); |
| 54 document.body.appendChild(parentElement); |
| 55 parentElement.style.scrollBehavior = "smooth"; |
| 56 shouldBe("getComputedStyle(parentElement, '').getPropertyValue('scroll-behavior'
)", "'smooth'"); |
| 57 element = document.createElement("div"); |
| 58 parentElement.appendChild(element); |
| 59 element.style.scrollBehavior = "inherit"; |
| 60 shouldBe("getComputedStyle(element, '').getPropertyValue('scroll-behavior')", "'
smooth'"); |
| 61 |
| 62 debug(""); |
| 63 debug("Test that scroll-behavior is not inherited by default"); |
| 64 var parentElement = document.createElement("div"); |
| 65 document.body.appendChild(parentElement); |
| 66 parentElement.style.scrollBehavior = "smooth"; |
| 67 shouldBe("getComputedStyle(parentElement, '').getPropertyValue('scroll-behavior'
)", "'smooth'"); |
| 68 element = document.createElement("div"); |
| 69 parentElement.appendChild(element); |
| 70 shouldBe("getComputedStyle(element, '').getPropertyValue('scroll-behavior')", "'
instant'"); |
| 71 </script> |
| 72 </body> |
| 73 </html> |
OLD | NEW |