eliott/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird synced 2026-04-30 11:37:16 +02:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Add scroll-behavior CSS property

Browse Source 
To quote the spec:
"User agents may ignore this property."
So that is what we do.
This commit is contained in:
Psychpsyo
2026-03-15 16:46:56 +01:00
committed by Sam Atkins
parent a141c2c492
commit 80a0a39b79
Notes: github-actions[bot] 2026-03-16 08:46:13 +00:00 
Author: https://github.com/Psychpsyo
Commit: https://github.com/LadybirdBrowser/ladybird/commit/80a0a39b792
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/8434
Reviewed-by: https://github.com/AtkinsSJ ✅
14 changed files with 255 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
Tests/LibWeb/Text/input/wpt-import/css/cssom-view/inheritance.html Normal file
View File

@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inheritance of CSSOM View properties</title>
<link rel="help" href="https://drafts.csswg.org/cssom-view/#property-index">
<meta name="assert" content="Properties inherit or not according to the spec.">
<meta name="assert" content="Properties have initial values according to the spec.">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../css/support/inheritance-testcommon.js"></script>
</head>
<body>
<div id="container">
<div id="target"></div>
</div>
<script>
assert_not_inherited('scroll-behavior', 'auto', 'smooth');
</script>
</body>
</html>

19
Tests/LibWeb/Text/input/wpt-import/css/cssom-view/parsing/scroll-behavior-computed.html Normal file
View File

@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSSOM View: getComputedStyle().scrollBehavior</title>
<link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior">
<meta name="assert" content="scroll-behavior computed value is as specified.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("scroll-behavior", 'auto');
test_computed_value("scroll-behavior", 'smooth');
</script>
</body>
</html>

18
Tests/LibWeb/Text/input/wpt-import/css/cssom-view/parsing/scroll-behavior-valid.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSSOM View: parsing scroll-behavior with valid values</title>
<link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior">
<meta name="assert" content="scroll-behavior supports the full grammar 'auto | smooth'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("scroll-behavior", 'auto');
test_valid_value("scroll-behavior", 'smooth');
</script>
</body>
</html>

57
Tests/LibWeb/Text/input/wpt-import/css/cssom-view/scroll-behavior-default-css.html Normal file
View File

@@ -0,0 +1,57 @@
<!DOCTYPE html>
<title>Testing default value of scroll-behavior</title>
<meta name="timeout" content="long"/>
<link rel="author" title="Frédéric Wang" href="mailto:fwang@igalia.com">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-box">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../dom/events/scrolling/scroll_support.js"></script>
<script src="support/scroll-behavior.js"></script>
<style>
.scrollable {
overflow: auto;
width: 400px;
height: 200px;
}
</style>
<div id="log">
</div>
<div id="overflowNode" class="scrollable">
<div style="width: 2000px; height: 1000px; background: linear-gradient(135deg, red, green);">
<span style="display: inline-block; width: 500px; height: 250px;"></span><span id="elementToReveal" style="display: inline-block; vertical-align: -15px; width: 10px; height: 15px; background: black;"></span>
</div>
</div>
<script>
var scrollingElement = overflowNode;
var elementToRevealLeft = 500;
var elementToRevealTop = 250;
var scrollFunction = "scroll";
promise_test(async () => {
await waitForCompositorReady();
}, "Make sure the page is ready for animation.");
promise_test(() => {
resetScroll(scrollingElement);
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, "scroll", "instant", elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, "Instant scrolling of an element with default scroll-behavior");
promise_test(() => {
resetScroll(scrollingElement);
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
});
}, "Smooth scrolling of an element with default scroll-behavior");
</script>

92
Tests/LibWeb/Text/input/wpt-import/css/cssom-view/support/scroll-behavior.js Normal file
View File

@@ -0,0 +1,92 @@
// TODO(crbug.com/888443): It would be better to listen to the scrollend event
// instead of polling the scroll position.
function observeScrolling(elements, callback) {
if (!Array.isArray(elements))
elements = [elements];
var lastChangedFrame = 0;
var lastLeft = new Map();
var lastTop = new Map();
elements.forEach((element) => {
lastLeft.set(element, element.scrollLeft);
lastTop.set(element, element.scrollTop);
});
function tick(frames) {
// We requestAnimationFrame either for 5000 frames or until 20 frames with
// no change have been observed. (In Chromium, frames may run as frequently
// as once per millisecond when threaded compositing is disabled. The limit
// of 5000 frames is chosen to be high enough to reasonably ensure any
// scroll animation will run to completion.)
if (frames >= 5000 || frames - lastChangedFrame > 20) {
callback(true);
} else {
var scrollHappened = elements.some((element) => {
return element.scrollLeft != lastLeft.get(element) || element.scrollTop != lastTop.get(element);
});
if (scrollHappened) {
lastChangedFrame = frames;
elements.forEach((element) => {
lastLeft.set(element, element.scrollLeft);
lastTop.set(element, element.scrollTop);
});
callback(false);
}
requestAnimationFrame(tick.bind(null, frames + 1));
}
}
tick(0);
}
function waitForScrollEnd(elements) {
return new Promise((resolve) => {
observeScrolling(elements, (done) => {
if (done)
resolve();
});
});
}
function resetScroll(scrollingElement) {
// Try various methods to ensure the element position is reset immediately.
scrollingElement.scrollLeft = 0;
scrollingElement.scrollTop = 0;
scrollingElement.scroll({left: 0, top: 0, behavior: "instant"});
}
function resetScrollForWindow(scrollingWindow) {
// Try various methods to ensure the element position is reset immediately.
scrollingWindow.document.scrollingElement.scrollLeft = 0;
scrollingWindow.document.scrollingElement.scrollTop = 0;
scrollingWindow.scroll({left: 0, top: 0, behavior: "instant"});
}
function setScrollBehavior(styledElement, className) {
styledElement.classList.remove("autoBehavior", "smoothBehavior");
styledElement.classList.add(className);
}
function scrollNode(scrollingElement, scrollFunction, behavior, elementToRevealLeft, elementToRevealTop) {
var args = {};
if (behavior)
args.behavior = behavior;
switch (scrollFunction) {
case "scrollIntoView":
args.inline = "start";
args.block = "start";
elementToReveal.scrollIntoView(args);
break;
default:
args.left = elementToRevealLeft;
args.top = elementToRevealTop;
scrollingElement[scrollFunction](args);
break;
}
}
function scrollWindow(scrollingWindow, scrollFunction, behavior, elementToRevealLeft, elementToRevealTop) {
var args = {};
if (behavior)
args.behavior = behavior;
args.left = elementToRevealLeft;
args.top = elementToRevealTop;
scrollingWindow[scrollFunction](args);
}