mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-10-26 14:57:54 +03:00
5285e22f2a
The main intention of this change is to have a consistent look and behavior across all scrollbars, including elements with `overflow: scroll` and `overflow: auto`, iframes, and a page. Before: - Page's scrollbar is painted by Browser (Qt/AppKit) using the corresponding UI framework style, - Both WebContent and Browser know the scroll position offset. - WebContent uses did_request_scroll_to() IPC call to send updates. - Browser uses set_viewport_rect() to send updates. After: - Page's scrollbar is painted on WebContent side using the same style as currently used for elements with `overflow: scroll` and `overflow: auto`. A nice side effects: scrollbars are now painted for iframes, and page's scrollbar respects scrollbar-width CSS property. - Only WebContent knows scroll position offset. - did_request_scroll_to() is no longer used. - set_viewport_rect() is changed to set_viewport_size().
89 lines
2.3 KiB
HTML
89 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="match" href="reference/css-background-clip-text-ref.html" />
|
|
<title>Document</title>
|
|
|
|
<style>
|
|
html {
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
p, .container {
|
|
border: 0.8em darkviolet;
|
|
border-style: dotted double;
|
|
margin: 1em 0;
|
|
padding: 1.4em;
|
|
font: 900 1.2em sans-serif;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.linear-gradient {
|
|
background: linear-gradient(60deg, red, yellow, red, yellow, red);
|
|
}
|
|
|
|
.radial-gradient {
|
|
background: radial-gradient(circle, red, yellow, red, yellow, red);
|
|
}
|
|
|
|
.conic-gradient {
|
|
background: conic-gradient(red, yellow, red, yellow, red);
|
|
}
|
|
|
|
.image-background {
|
|
background: url('./assets/car.png');
|
|
}
|
|
|
|
.border-box {
|
|
background-clip: border-box;
|
|
}
|
|
.padding-box {
|
|
background-clip: padding-box;
|
|
}
|
|
.content-box {
|
|
background-clip: content-box;
|
|
}
|
|
|
|
.text {
|
|
background-clip: text;
|
|
color: rgb(0 0 0 / 20%);
|
|
}
|
|
.new-background {
|
|
background: rgb(255 255 0 / 30%);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Hack to make the test runner wait for the image to load -->
|
|
<img src="./assets/car.png" />
|
|
|
|
<p class="border-box linear-gradient">The background extends behind the border.</p>
|
|
<p class="padding-box radial-gradient">
|
|
The background extends to the inside edge of the border.
|
|
</p>
|
|
<p class="content-box conic-gradient">
|
|
The background extends only to the edge of the content box.
|
|
</p>
|
|
<div class="text container linear-gradient">
|
|
The background is clipped to the foreground text.
|
|
<span>Some other text in a sub-element</span>
|
|
</div>
|
|
<div class="text container radial-gradient">
|
|
The background is clipped to the foreground text.
|
|
<span>Some other text in a sub-element</span>
|
|
</div>
|
|
<div class="text container conic-gradient">
|
|
The background is clipped to the foreground text.
|
|
<span>Some other text in a sub-element</span>
|
|
</div>
|
|
<div class="text container image-background">
|
|
Testing text.
|
|
<div>
|
|
<div class="new-background" style="color: rgb(0 0 0 / 20%);">The is nested text that should still be clipped to the background</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|