mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-07-06 09:01:53 +00:00
b7efb61fbe
Now each test type has the same directories: - input - expected - data Also, tests can be in subdirectories within ./input.
88 lines
2.3 KiB
HTML
88 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="../expected/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('../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>
|
|
<!-- Hack to make the test runner wait for the image to load -->
|
|
<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>
|