| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| #scrollBehaviorAuto { |
| scroll-behavior: auto; |
| } |
| |
| #scrollBehaviorSmooth { |
| scroll-behavior: smooth; |
| } |
| </style> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <div id="scrollBehaviorAuto"></div> |
| <div id="scrollBehaviorSmooth"></div> |
| <script> |
| description('Test that setting and getting scroll-behavior works as expected'); |
| |
| debug("Test getting scroll-behavior set through CSS"); |
| var scrollBehaviorAuto = document.getElementById("scrollBehaviorAuto"); |
| shouldBe("getComputedStyle(scrollBehaviorAuto, '').getPropertyValue('scroll-behavior')", "'auto'"); |
| |
| var scrollBehaviorSmooth = document.getElementById("scrollBehaviorSmooth"); |
| shouldBe("getComputedStyle(scrollBehaviorSmooth, '').getPropertyValue('scroll-behavior')", "'smooth'"); |
| |
| debug(""); |
| debug("Test initial value of scroll-behavior"); |
| var element = document.createElement("div"); |
| document.body.appendChild(element); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('scroll-behavior')", "'auto'"); |
| |
| debug(""); |
| debug("Test getting and setting scroll-behavior through JS"); |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| element.style.scrollBehavior = "smooth"; |
| shouldBe("getComputedStyle(element, '').getPropertyValue('scroll-behavior')", "'smooth'"); |
| |
| element.style.scrollBehavior = "auto"; |
| shouldBe("getComputedStyle(element, '').getPropertyValue('scroll-behavior')", "'auto'"); |
| |
| debug(""); |
| debug("Test the value 'initial'"); |
| element.style.scrollBehavior = "smooth"; |
| shouldBe("getComputedStyle(element, '').getPropertyValue('scroll-behavior')", "'smooth'"); |
| element.style.scrollBehavior = "initial"; |
| shouldBe("getComputedStyle(element, '').getPropertyValue('scroll-behavior')", "'auto'"); |
| |
| debug(""); |
| debug("Test the value 'inherit'"); |
| var parentElement = document.createElement("div"); |
| document.body.appendChild(parentElement); |
| parentElement.style.scrollBehavior = "smooth"; |
| shouldBe("getComputedStyle(parentElement, '').getPropertyValue('scroll-behavior')", "'smooth'"); |
| element = document.createElement("div"); |
| parentElement.appendChild(element); |
| element.style.scrollBehavior = "inherit"; |
| shouldBe("getComputedStyle(element, '').getPropertyValue('scroll-behavior')", "'smooth'"); |
| |
| debug(""); |
| debug("Test that scroll-behavior is not inherited by default"); |
| var parentElement = document.createElement("div"); |
| document.body.appendChild(parentElement); |
| parentElement.style.scrollBehavior = "smooth"; |
| shouldBe("getComputedStyle(parentElement, '').getPropertyValue('scroll-behavior')", "'smooth'"); |
| element = document.createElement("div"); |
| parentElement.appendChild(element); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('scroll-behavior')", "'auto'"); |
| </script> |
| </body> |
| </html> |
