mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-30 19:47:17 +02:00
ee3aa865af
Skia deprecated some non-span versions of their API, but they provided SK_SUPPORT_UNSPANNED_APIS to expose the legacy versions. SkFontMgr_New_FontConfig now requires a font scanner to be passed in. There were a few screenshot tests that visibily looked the same but skia must've changed some rendering infrastructure as the PNGs were not matching anymore so I rebaselined those and adjusted the fuzzy matching config to allow them to pass on both macOS and Linux. The empty-radial-gradient-crash Ref test started to fail as we were setting the horizontal scale factor to inf in when the height = 0. It looks like something changed to make doing that not valid anymore. The overlay port is removed as the issues, mainly skcms symbol import and export were resolved upstream in skia and utilized in the new port version.
88 lines
2.4 KiB
HTML
88 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="match" href="../expected/css-background-clip-text-ref.html" />
|
|
<meta name="fuzzy" content="maxDifference=0-3;totalPixels=0-27676">
|
|
|
|
<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('../data/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>
|
|
<!-- FIXME: Workaround to ensure CSS background-image is loaded before taking screenshot: https://github.com/LadybirdBrowser/ladybird/issues/3448 -->
|
|
<img src="../data/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>
|