mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-09-22 17:29:01 +00:00
Tests+headless-browser: Move screenshot ref-tests into own directory
This change will make it easier to disable screenshot comparison tests on a specific platform or have per-platform expectations. Additionally, it's nice to be able to tell if a ref-test uses a screenshot as an expectation by looking at the test path.
This commit is contained in:
Aliaksandr Kalenik
Andreas Kling
parent
0ae048102c
commit
715f033007
Notes:
sideshowbarker
2024-07-19 21:35:31 +09:00
Author: https://github.com/kalenikaliaksandr
Commit: 715f033007
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/713
106 changed files with 187 additions and 182 deletions
|
|
@ -1,3 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="match" href="reference/alt-frame.html" />
|
||||
<img alt='Hello!!'>
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
body {
|
||||
background: white url("smiley.png") no-repeat;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<!-- HACK: Force the document to wait for the image to load -->
|
||||
<img src="smiley.png" style="opacity: 0"/>
|
||||
</body>
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
body {
|
||||
background: white url("smiley.png") repeat-x;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<!-- HACK: Force the document to wait for the image to load -->
|
||||
<img src="smiley.png" style="opacity: 0"/>
|
||||
</body>
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
body {
|
||||
background: white url("smiley.png") repeat-y;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<!-- HACK: Force the document to wait for the image to load -->
|
||||
<img src="smiley.png" style="opacity: 0"/>
|
||||
</body>
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
body {
|
||||
background: white url("smiley.png") repeat;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<!-- HACK: Force the document to wait for the image to load -->
|
||||
<img src="smiley.png" style="opacity: 0"/>
|
||||
</body>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 410 B |
|
|
@ -1,324 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<link rel="match" href="reference/border-radius-ref.html" />
|
||||
<head>
|
||||
<style>
|
||||
.box {
|
||||
width: 50px;
|
||||
height: 50px
|
||||
}
|
||||
|
||||
.box-1 {
|
||||
border: 1px solid #000;
|
||||
border-radius: 10px
|
||||
}
|
||||
|
||||
.box-1-1 {
|
||||
border: 1px solid #000;
|
||||
border-radius: 5px 10px 15px 20px
|
||||
}
|
||||
|
||||
.box-1-5 {
|
||||
border: 1px solid #000;
|
||||
border-radius: 20px
|
||||
}
|
||||
|
||||
.box-1-6 {
|
||||
border: 1px solid #000;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 5px;
|
||||
border-bottom-width: 10px;
|
||||
border-left-width: 12px;
|
||||
border-radius: 20px
|
||||
}
|
||||
|
||||
.box-2 {
|
||||
border: 1px solid #000;
|
||||
border-top-left-radius: 10px
|
||||
}
|
||||
|
||||
.box-1-7 {
|
||||
border: 5px solid #000;
|
||||
border-radius: 15px
|
||||
}
|
||||
|
||||
.box-1-8 {
|
||||
border: 20px solid #000;
|
||||
border-radius: 10px
|
||||
}
|
||||
|
||||
.box-1-9 {
|
||||
border: 20px inset #000;
|
||||
border-radius: 10px
|
||||
}
|
||||
|
||||
.box-1-10 {
|
||||
border: 20px outset #000;
|
||||
border-radius: 10px
|
||||
}
|
||||
|
||||
.box-1-11 {
|
||||
border-top: 20px solid #000;
|
||||
border-radius: 10px
|
||||
}
|
||||
|
||||
.box-1-12 {
|
||||
border-radius: 20px;
|
||||
border-top: 5px solid red;
|
||||
border-right: 10px solid #ff0;
|
||||
border-bottom: 15px solid #0f0;
|
||||
border-left: 20px solid #00f
|
||||
}
|
||||
|
||||
.box-1-13 {
|
||||
border-radius: 15px;
|
||||
border-color: #000;
|
||||
border: 3px solid #000;
|
||||
border-top-width: 0;
|
||||
border-bottom-width: 0
|
||||
}
|
||||
|
||||
.box-1-14 {
|
||||
border-radius: 15px;
|
||||
border-color: #000;
|
||||
border: 3px solid #000;
|
||||
border-left-width: 0;
|
||||
border-right-width: 0
|
||||
}
|
||||
|
||||
.box-3 {
|
||||
border: 1px solid #000;
|
||||
border-top-right-radius: 10px
|
||||
}
|
||||
|
||||
.box-4 {
|
||||
border: 1px solid #000;
|
||||
border-bottom-right-radius: 10px
|
||||
}
|
||||
|
||||
.box-5 {
|
||||
border: 1px solid #000;
|
||||
border-bottom-left-radius: 10px
|
||||
}
|
||||
|
||||
.box-6 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 75px
|
||||
}
|
||||
|
||||
.box-7 {
|
||||
background-color: #ff00ff;
|
||||
border-radius: 10px
|
||||
}
|
||||
|
||||
.box-7-1 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: #ff00ff;
|
||||
border-radius: 25px 50px 75px 100px
|
||||
}
|
||||
|
||||
.box-7-2 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: #ff00ff;
|
||||
border-radius: 100px 75px 50px 25px
|
||||
}
|
||||
|
||||
.box-8 {
|
||||
background-color: #ff00ff;
|
||||
border-radius: 20px
|
||||
}
|
||||
|
||||
.box-9 {
|
||||
background-color: #ff00ff;
|
||||
border-radius: 15px
|
||||
}
|
||||
|
||||
.box-10 {
|
||||
background-color: #ff00ff;
|
||||
border-top-left-radius: 10px
|
||||
}
|
||||
|
||||
.box-11 {
|
||||
background-color: #ff00ff;
|
||||
border-top-right-radius: 10px
|
||||
}
|
||||
|
||||
.box-12 {
|
||||
background-color: #ff00ff;
|
||||
border-bottom-right-radius: 10px
|
||||
}
|
||||
|
||||
.box-13 {
|
||||
background-color: #ff00ff;
|
||||
border-bottom-left-radius: 10px
|
||||
}
|
||||
|
||||
.box-14 {
|
||||
background-color: #0f0;
|
||||
border: 1px solid #000;
|
||||
border-radius: 500px
|
||||
}
|
||||
|
||||
.box-15 {
|
||||
background-color: red;
|
||||
border: 1px solid #000;
|
||||
border-radius: 500px
|
||||
}
|
||||
|
||||
.rect {
|
||||
width: 300px;
|
||||
height: 100px;
|
||||
background-color: red
|
||||
}
|
||||
|
||||
.rect-1 {
|
||||
border-radius: 50%
|
||||
}
|
||||
|
||||
.rect-2 {
|
||||
border-radius: 50% 20%/10% 40%;
|
||||
width: 280px;
|
||||
height: 215px;
|
||||
background-color: #5b6dcd
|
||||
}
|
||||
|
||||
.rect-3 {
|
||||
border-top-left-radius: 50%
|
||||
}
|
||||
|
||||
.rect-4 {
|
||||
border-top-right-radius: 50%
|
||||
}
|
||||
|
||||
.rect-5 {
|
||||
border-bottom-left-radius: 50%
|
||||
}
|
||||
|
||||
.rect-6 {
|
||||
border-bottom-right-radius: 50%
|
||||
}
|
||||
|
||||
.rect-7 {
|
||||
border-radius: 10px 100px/120px;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
border: 1px solid #000;
|
||||
background-color: transparent
|
||||
}
|
||||
|
||||
.nut {
|
||||
width: 220px;
|
||||
height: 180px;
|
||||
background-size: 220px 180px;
|
||||
border-radius: 70% 30% 30% 70%/60% 40% 60% 40%;
|
||||
background-image: url(assets/car.png)
|
||||
}
|
||||
|
||||
.screenshot {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
background-image: url(assets/car.png)
|
||||
}
|
||||
|
||||
.rounded-image {
|
||||
background-image: url(assets/car.png);
|
||||
background-repeat: repeat;
|
||||
border-radius: 20px;
|
||||
width: 150px;
|
||||
height: 100px
|
||||
}
|
||||
|
||||
.solid-color {
|
||||
background: red content-box
|
||||
}
|
||||
|
||||
.image {
|
||||
background: center/contain url(car.png) content-box
|
||||
}
|
||||
|
||||
.image-layers {
|
||||
background: center/contain url(car.png) content-box, center/contain url(assets/car.png)
|
||||
}
|
||||
|
||||
.box-background-clip {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 10px solid #000;
|
||||
border-radius: 50px;
|
||||
padding: 10px
|
||||
}
|
||||
|
||||
.positioned {
|
||||
background-color: red;
|
||||
position: relative
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
div {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box box-7"></div>
|
||||
<div class="box box-7-1"></div>
|
||||
<div class="box box-7-2"></div>
|
||||
<div class="box box-8"></div>
|
||||
<div class="box box-9"></div>
|
||||
<div class="box box-10"></div>
|
||||
<div class="box box-11"></div>
|
||||
<div class="box box-12"></div>
|
||||
<div class="box box-13"></div>
|
||||
<div class="rect rect-1"></div>
|
||||
<div class="rect rect-2"></div>
|
||||
<div class="rect rect-3"></div>
|
||||
<div class="rect rect-4"></div>
|
||||
<div class="rect rect-5"></div>
|
||||
<div class="rect rect-6"></div>
|
||||
<div class="rect rect-7"></div>
|
||||
<div class="nut"></div>
|
||||
<div class="screenshot"></div>
|
||||
<div class="rounded-image"></div>
|
||||
<img src="assets/car.png" style="border-radius: 20px; width: 200px">
|
||||
<div class="box-background-clip solid-color"></div>
|
||||
<div class="box-background-clip image"></div>
|
||||
<div class="box-background-clip image-layers"></div>
|
||||
<a style="display: inline-block; border-radius: 50%; overflow: hidden; width: 100px; height: 100px;">
|
||||
<img src="assets/car.png" style="width: 100px; height: 100px">
|
||||
</a>
|
||||
<div class="box" style="border-radius: 10px; overflow: hidden;">
|
||||
<div class="box positioned"></div>
|
||||
</div>
|
||||
<div class="box" style="border-radius: 10px; overflow: hidden;">
|
||||
<div class="box" style="background-color: blue;"></div>
|
||||
</div>
|
||||
<img src="assets/car.png" style="border-radius: 100%; border: 10px solid limegreen;">
|
||||
<div class="box box-1"></div>
|
||||
<div class="box box-1-1"></div>
|
||||
<div class="box box-1-5"></div>
|
||||
<div class="box box-1-6"></div>
|
||||
<div class="box box-1-7"></div>
|
||||
<div class="box box-1-8"></div>
|
||||
<div class="box box-1-9"></div>
|
||||
<div class="box box-1-10"></div>
|
||||
<div class="box box-1-11"></div>
|
||||
<div class="box box-1-12"></div>
|
||||
<div class="box box-1-13"></div>
|
||||
<div class="box box-1-14"></div>
|
||||
<div class="box box-2"></div>
|
||||
<div class="box box-3"></div>
|
||||
<div class="box box-4"></div>
|
||||
<div class="box box-5"></div>
|
||||
<div class="box box-6"></div>
|
||||
<div class="box box-14"></div>
|
||||
<div class="box box-15"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<link rel="match" href="reference/canvas-arcs-and-ellipses-ref.html" />
|
||||
<style>
|
||||
canvas {
|
||||
border: 1px solid black;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
</style>
|
||||
<canvas id="canvas" width="125" height="125"></canvas>
|
||||
<script>
|
||||
const canvas = document.getElementById("canvas")
|
||||
|
||||
const context = canvas.getContext("2d");
|
||||
context.beginPath();
|
||||
context.arc(59, 55, 38, 5.3849570248895775, 2.9421639085067177);
|
||||
context.stroke();
|
||||
context.fill();
|
||||
|
||||
context.beginPath();
|
||||
context.ellipse(20,20,15,8,1.2273132071162383,4.1926143018618225,2.8853539230051624);
|
||||
context.stroke();
|
||||
context.fill();
|
||||
</script>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<link rel="match" href="reference/canvas-fillstyle-rgb.html" />
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<canvas width=500 height=500></canvas>
|
||||
<script type="text/javascript">
|
||||
const canvas = document.querySelector("canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
// Integer numbers
|
||||
ctx.fillStyle = "rgb(0,255,0)";
|
||||
ctx.fillRect(0, 0, 500, 100);
|
||||
|
||||
// Decimal numbers
|
||||
ctx.fillStyle = "rgb(0.28813966673057,254.56022744510793,0.2973971574794)";
|
||||
ctx.fillRect(0, 100, 500, 100);
|
||||
|
||||
// Numbers below 0 and above 255 should be clamped
|
||||
ctx.fillStyle = "rgba(-50,500,-50,1)";
|
||||
ctx.fillRect(0, 200, 500, 100);
|
||||
|
||||
// Percentages
|
||||
ctx.fillStyle = "rgb(0%, 100%, 0%)";
|
||||
ctx.fillRect(0, 300, 500, 100);
|
||||
|
||||
// Calc
|
||||
ctx.fillStyle = "rgb(0, calc(infinity), 0)";
|
||||
ctx.fillRect(0, 400, 500, 100);
|
||||
</script>
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
<link rel="match" href="reference/canvas-implict-moves-and-lines-ref.html" />
|
||||
<canvas id="canvas" width="300" height="300"></canvas>
|
||||
<style>
|
||||
#canvas {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
body {
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
const canvas = document.getElementById("canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(NaN, 0); // Do nothing.
|
||||
ctx.lineTo(25, 25); // Equivalent to moveTo(25, 25)
|
||||
ctx.lineTo(100, 25); // Line (25, 25) -> (100, 25)
|
||||
ctx.stroke();
|
||||
}
|
||||
{
|
||||
let cp1 = { x: 25, y: 75 };
|
||||
let cp2 = { x: 114.6, y: 113.4 };
|
||||
let end = { x: 119.72, y: 87.8 };
|
||||
ctx.beginPath();
|
||||
ctx.bezierCurveTo(cp1.x, cp1.y, NaN, cp2.y, end.x, end.y); // Do nothing.
|
||||
ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y); // Curve from cp1.
|
||||
ctx.stroke();
|
||||
}
|
||||
{
|
||||
let cp = { x: 230, y: 230 };
|
||||
let end = { x: 50, y: 200 };
|
||||
ctx.beginPath();
|
||||
ctx.quadraticCurveTo(cp.x, cp.y, 1000, NaN); // Do nothing.
|
||||
ctx.quadraticCurveTo(cp.x, cp.y, end.x, end.y); // Appears as line from cp to end.
|
||||
ctx.stroke();
|
||||
}
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(200, 95);
|
||||
ctx.ellipse(200, 100, 50, 75, Math.PI / 0, 0, 2 * Math.PI); // Do nothing.
|
||||
ctx.ellipse(200, 100, 50, 75, Math.PI / 4, 0, 2 * Math.PI); // Ellipse with line from centre.
|
||||
ctx.stroke();
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<link rel="match" href="reference/canvas-path-rect-ref.html" />
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<canvas width=500 height=500></canvas>
|
||||
<script>
|
||||
function drawRect() {
|
||||
var canvas = document.querySelector("canvas");
|
||||
var ctx = canvas.getContext("2d");
|
||||
ctx.fillStyle = 'black';
|
||||
ctx.fillRect(0, 0, 500, 500);
|
||||
|
||||
ctx.fillStyle = 'red';
|
||||
ctx.beginPath();
|
||||
ctx.rect(10, 20, 150, 100);
|
||||
ctx.fill();
|
||||
|
||||
ctx.fillStyle = 'yellow';
|
||||
ctx.beginPath();
|
||||
ctx.roundRect(50, 310, 100, 100, 25);
|
||||
ctx.fill('evenodd');
|
||||
|
||||
ctx.fillStyle = 'green';
|
||||
ctx.beginPath();
|
||||
ctx.rect(200, 210, 100, 100);
|
||||
ctx.fill('evenodd');
|
||||
|
||||
ctx.rotate(0.2);
|
||||
ctx.fillStyle = 'orange';
|
||||
ctx.beginPath();
|
||||
ctx.roundRect(325, 300, 100, 100, [ { x: 5, y: 20 }, 10, { x: 15, y: 30 }, 20 ]);
|
||||
ctx.fill('evenodd');
|
||||
}
|
||||
drawRect();
|
||||
</script>
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
<link rel="match" href="reference/canvas-text-ref.html" />
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
canvas {
|
||||
border: 1px solid black;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = 600;
|
||||
canvas.height = 280;
|
||||
document.body.appendChild(canvas);
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
ctx.font = "48px serif";
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(20, 250);
|
||||
ctx.rotate(-Math.PI*0.2);
|
||||
ctx.fillText("Rotated Text!", 10, 40);
|
||||
ctx.restore();
|
||||
|
||||
ctx.strokeText("Stroke Text!", 10, 50);
|
||||
|
||||
const gradient = ctx.createLinearGradient(280, 20, 580, 120);
|
||||
gradient.addColorStop(0,"red");
|
||||
gradient.addColorStop(0.15,"yellow");
|
||||
gradient.addColorStop(0.3,"green");
|
||||
gradient.addColorStop(0.45,"aqua");
|
||||
gradient.addColorStop(0.6,"blue");
|
||||
gradient.addColorStop(0.7,"fuchsia");
|
||||
gradient.addColorStop(1,"red");
|
||||
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.fillText("Gradient Text!", 260, 150);
|
||||
|
||||
ctx.fillStyle = "red";
|
||||
ctx.fillText("Squished Text", 50, 120, 100);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
<link rel="match" href="reference/clip-path-polygon-ref.html" />
|
||||
<style>
|
||||
.comment {
|
||||
position: absolute;
|
||||
|
||||
left: 20px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.comment::before {
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
width: 8px;
|
||||
height: 16px;
|
||||
pointer-events: none;
|
||||
content: " ";
|
||||
background-color: black;
|
||||
clip-path: polygon(0 50%, 100% 0, 100% 100%);
|
||||
}
|
||||
</style>
|
||||
<div class=comment></div>
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,118 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>CSS background-position tests</title>
|
||||
<link rel="match" href="reference/css-background-position-ref.html" />
|
||||
<style>
|
||||
.example {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid black;
|
||||
overflow: auto;
|
||||
margin-bottom: 10px;
|
||||
background: url("assets/smiley.png") bottom right no-repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- FIXME: This <img> tag is only here as a hack. The test runner takes a screenshot after the load event,
|
||||
which waits for img tags to load, but not images referred to in CSS. -->
|
||||
<img src="assets/smiley.png"/>
|
||||
|
||||
<!-- Single value -->
|
||||
<div class="example" style="background-position: left"></div>
|
||||
<div class="example" style="background-position-x: left"></div>
|
||||
<div class="example" style="background-position: top"></div>
|
||||
<div class="example" style="background-position-y: top"></div>
|
||||
<div class="example" style="background-position: center"></div>
|
||||
<div class="example" style="background-position-x: center"></div>
|
||||
<div class="example" style="background-position-y: center"></div>
|
||||
|
||||
<!-- Two values: side side -->
|
||||
<div class="example" style="background-position: top left"></div>
|
||||
<div class="example" style="background-position: left top"></div>
|
||||
<div class="example" style="background-position: center right"></div>
|
||||
<div class="example" style="background-position: right center"></div>
|
||||
<div class="example" style="background-position: center top"></div>
|
||||
<div class="example" style="background-position: top center"></div>
|
||||
<div class="example" style="background-position-x: left; background-position-y: top"></div>
|
||||
|
||||
<!-- Two values: side offset -->
|
||||
<div class="example" style="background-position: left 10px"></div>
|
||||
<div class="example" style="background-position-x: left; background-position-y: 10px"></div>
|
||||
<div class="example" style="background-position: left 25%"></div>
|
||||
<div class="example" style="background-position-x: left; background-position-y: 25%"></div>
|
||||
|
||||
<!-- Two values: offset side -->
|
||||
<div class="example" style="background-position: 10px top"></div>
|
||||
<div class="example" style="background-position-x: 10px; background-position-y: top"></div>
|
||||
<div class="example" style="background-position: 25% top"></div>
|
||||
<div class="example" style="background-position-x: 25%; background-position-y: top"></div>
|
||||
|
||||
<!-- Two values: offset offset -->
|
||||
<div class="example" style="background-position: 10px 20%"></div>
|
||||
<div class="example" style="background-position-x: 10px; background-position-y: 20%"></div>
|
||||
<div class="example" style="background-position: 20% 10px"></div>
|
||||
<div class="example" style="background-position-x: 20%; background-position-y: 10px"></div>
|
||||
|
||||
<!-- Three values: side offset side -->
|
||||
<div class="example" style="background-position: left 10px top"></div>
|
||||
<div class="example" style="background-position: top left 10px"></div>
|
||||
<div class="example" style="background-position-x: left 10px; background-position-y: top"></div>
|
||||
<div class="example" style="background-position: left 25% top"></div>
|
||||
<div class="example" style="background-position: top left 25%"></div>
|
||||
<div class="example" style="background-position-x: left 25%; background-position-y: top"></div>
|
||||
<div class="example" style="background-position: center left 25%"></div>
|
||||
<div class="example" style="background-position-x: left 25%; background-position-y: center"></div>
|
||||
|
||||
<!-- Three values: side side offset -->
|
||||
<div class="example" style="background-position: left top 10px"></div>
|
||||
<div class="example" style="background-position: top 10px left"></div>
|
||||
<div class="example" style="background-position-x: left; background-position-y: top 10px"></div>
|
||||
<div class="example" style="background-position: left top 25%"></div>
|
||||
<div class="example" style="background-position: top 25% left"></div>
|
||||
<div class="example" style="background-position-x: left; background-position-y: top 25%"></div>
|
||||
<div class="example" style="background-position: center top 10px"></div>
|
||||
<div class="example" style="background-position-x: center; background-position-y: top 25%"></div>
|
||||
|
||||
<!-- Four values: side offset side offset -->
|
||||
<div class="example" style="background-position: left 10px top 25%"></div>
|
||||
<div class="example" style="background-position: top 25% left 10px"></div>
|
||||
<div class="example" style="background-position-x: left 10px; background-position-y: top 25%"></div>
|
||||
<div class="example" style="background-position: right 10px bottom 25%"></div>
|
||||
<div class="example" style="background-position: bottom 25% right 10px"></div>
|
||||
<div class="example" style="background-position-x: right 10px; background-position-y: bottom 25%"></div>
|
||||
|
||||
<!-- Below cases should not parse, so all the images should be in the bottom-right from the .example CSS. -->
|
||||
|
||||
<!-- Two sides, both the same axis -->
|
||||
<div class="example" style="background-position: top top"></div>
|
||||
<div class="example" style="background-position: top bottom"></div>
|
||||
<div class="example" style="background-position-x: top"></div>
|
||||
<div class="example" style="background-position-x: bottom"></div>
|
||||
<div class="example" style="background-position: left left"></div>
|
||||
<div class="example" style="background-position: left right"></div>
|
||||
<div class="example" style="background-position-y: left"></div>
|
||||
<div class="example" style="background-position-y: right"></div>
|
||||
|
||||
<!-- Three values: center followed by <length-percentage> -->
|
||||
<div class="example" style="background-position: center 25% top"></div>
|
||||
<div class="example" style="background-position: top center 25%"></div>
|
||||
|
||||
<!-- No trailing tokens -->
|
||||
<div class="example" style="background-position: top left yellow"></div>
|
||||
<div class="example" style="background-position: 10px 25% 0"></div>
|
||||
<div class="example" style="background-position: left top 10px 20px"></div>
|
||||
<div class="example" style="background-position: left 10% top 10px red"></div>
|
||||
|
||||
<!-- No offsets from "center" side -->
|
||||
<div class="example" style="background-position: center 10px right"></div>
|
||||
<div class="example" style="background-position: right center 10px"></div>
|
||||
<div class="example" style="background-position: center 10px center 20%"></div>
|
||||
|
||||
<!-- Doubled side -->
|
||||
<div class="example" style="background-position: left left top 20%"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="match" href="reference/css-background-repeat-ref.html" />
|
||||
<style>
|
||||
body {
|
||||
background: cyan;
|
||||
}
|
||||
iframe {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.background {
|
||||
background: white url(assets/smiley.png);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<iframe src="assets/background-repeat.html"></iframe>
|
||||
<iframe src="assets/background-repeat-x.html"></iframe>
|
||||
<iframe src="assets/background-no-repeat.html"></iframe>
|
||||
<iframe src="assets/background-repeat-y.html"></iframe>
|
||||
|
||||
<div class="background" style="background-repeat: repeat"></div>
|
||||
<div class="background" style="background-repeat: repeat-x"></div>
|
||||
<div class="background" style="background-repeat: no-repeat"></div>
|
||||
<div class="background" style="background-repeat: repeat-y"></div>
|
||||
<div class="background" style="background-repeat: repeat repeat"></div>
|
||||
<div class="background" style="background-repeat: repeat no-repeat"></div>
|
||||
<div class="background" style="background-repeat: no-repeat no-repeat"></div>
|
||||
<div class="background" style="background-repeat: no-repeat repeat"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>CSS Background Tests</title>
|
||||
<link rel="match" href="reference/css-backgrounds-ref.html" />
|
||||
<style>
|
||||
.box {
|
||||
width: 180px;
|
||||
height: 160px;
|
||||
border: 1px solid black;
|
||||
padding: 5px 10px 15px 20px;
|
||||
overflow: auto;
|
||||
margin-bottom: 10px;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.force-scroll {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- FIXME: This <img> tag is only here as a hack. The test runner takes a screenshot after the load event,
|
||||
which waits for img tags to load, but not images referred to in CSS. -->
|
||||
<img src="assets/smiley.png"/>
|
||||
|
||||
<div class="box" style="background: url('assets/smiley.png') fixed;">
|
||||
<div class="force-scroll"></div>
|
||||
</div>
|
||||
<div class="box" style="background-image: url('assets/smiley.png'); background-attachment: fixed;">
|
||||
<div class="force-scroll"></div>
|
||||
</div>
|
||||
|
||||
<div class="box" style="background: url('assets/smiley.png') local">
|
||||
<div class="force-scroll"></div>
|
||||
</div>
|
||||
<div class="box" style="background-image: url('assets/smiley.png'); background-attachment: local">
|
||||
<div class="force-scroll"></div>
|
||||
</div>
|
||||
|
||||
<div class="box" style="background: url('assets/smiley.png') scroll">
|
||||
<div class="force-scroll"></div>
|
||||
</div>
|
||||
<div class="box" style="background-image: url('assets/smiley.png'); background-attachment: scroll">
|
||||
<div class="force-scroll"></div>
|
||||
</div>
|
||||
|
||||
<div class="box" style="background: url('assets/smiley.png') bottom 5% right 10px no-repeat"></div>
|
||||
<div class="box" style="background-image: url('assets/smiley.png'); background-position: bottom 5% right 10px; background-repeat: no-repeat"></div>
|
||||
|
||||
|
||||
<div class="box" style="background: url('assets/smiley.png') yellow padding-box content-box"></div>
|
||||
<div class="box" style="background-image: url('assets/smiley.png'); background-color: yellow; background-origin: padding-box; background-clip: content-box"></div>
|
||||
|
||||
<div class="box" style="background: url('assets/smiley.png') center / contain"></div>
|
||||
<div class="box" style="background-image: url('assets/smiley.png'); background-position: center; background-size: contain"></div>
|
||||
|
||||
<div class="box" style="background: url('assets/smiley.png') center / cover"></div>
|
||||
<div class="box" style="background-image: url('assets/smiley.png'); background-position: center; background-size: cover"></div>
|
||||
|
||||
<div class="box" style="background: url('assets/smiley.png') top / 50% 25px"></div>
|
||||
<div class="box" style="background-image: url('assets/smiley.png'); background-position: top; background-size: 50% 25px"></div>
|
||||
|
||||
<div class="box" style="background: url('assets/smiley.png') space"></div>
|
||||
<div class="box" style="background-image: url('assets/smiley.png'); background-repeat: space"></div>
|
||||
|
||||
<div class="box" style="background: url('assets/smiley.png') round"></div>
|
||||
<div class="box" style="background-image: url('assets/smiley.png'); background-repeat: round"></div>
|
||||
|
||||
<div class="box" style="background: url('assets/smiley.png') space round"></div>
|
||||
<div class="box" style="background-image: url('assets/smiley.png'); background-repeat: space round"></div>
|
||||
|
||||
<div class="box" style="background: url('assets/smiley.png') no-repeat top 5px left 5px, url('assets/smiley.png') no-repeat top 5px right 5px, url('assets/smiley.png') no-repeat bottom 5px left 5px, url('assets/smiley.png') no-repeat bottom 5px right 5px, url('assets/smiley.png') no-repeat center cyan"></div>
|
||||
<div class="box" style="background-color: cyan;
|
||||
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
|
||||
background-position: top 5px left 5px, top 5px right 5px, bottom 5px left 5px, bottom 5px right 5px, center;
|
||||
background-image: url('assets/smiley.png'), url('assets/smiley.png'), url('assets/smiley.png'), url('assets/smiley.png'), url('assets/smiley.png');"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,254 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<link rel="match" href="reference/css-gradients-ref.html" />
|
||||
<style>
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
div {
|
||||
border: 1px solid black;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.rect {
|
||||
width: 400px;
|
||||
height: 225px;
|
||||
}
|
||||
|
||||
.grad-0 {
|
||||
background-image: linear-gradient(to top, red, yellow);
|
||||
}
|
||||
|
||||
.grad-1 {
|
||||
background-image: linear-gradient(to bottom, red, yellow);
|
||||
}
|
||||
|
||||
.grad-2 {
|
||||
background-image: linear-gradient(to left, red, yellow);
|
||||
}
|
||||
|
||||
.grad-3 {
|
||||
background-image: linear-gradient(to right, red, yellow);
|
||||
}
|
||||
|
||||
.grad-4 {
|
||||
background-image: linear-gradient(to top, rgba(255, 0, 0, .8), rgba(255, 0, 0, 0) 70.71%),
|
||||
linear-gradient(to bottom, rgba(0, 255, 0, .8), rgba(0, 255, 0, 0) 70.71%),
|
||||
linear-gradient(to left, rgba(0, 0, 255, .8), rgba(0, 0, 255, 0) 70.71%);
|
||||
}
|
||||
|
||||
.grad-5 {
|
||||
background-image: linear-gradient(to top, blue, 30%, orange, 10%, red);
|
||||
}
|
||||
|
||||
.grad-6 {
|
||||
background-image: linear-gradient(to top, blue 30%, 30%, orange 20%, 10%, red);
|
||||
}
|
||||
|
||||
.grad-7 {
|
||||
width: 400px;
|
||||
height: 225px;
|
||||
background-image: linear-gradient(to right, red 0%, black 20%, yellow 60%, cyan 100%);
|
||||
}
|
||||
|
||||
.grad-8 {
|
||||
background-image: linear-gradient(to right,
|
||||
red,
|
||||
#f06d06,
|
||||
rgb(255, 255, 0),
|
||||
green);
|
||||
}
|
||||
|
||||
.grad-9 {
|
||||
background: linear-gradient(135deg, #f2f2f2 25%, transparent 25%) -20px 0,
|
||||
linear-gradient(225deg, #f2f2f2 25%, transparent 25%) -20px 0,
|
||||
linear-gradient(315deg, #f2f2f2 25%, transparent 25%),
|
||||
linear-gradient(45deg, #f2f2f2 25%, transparent 25%);
|
||||
background-size: 40px 40px;
|
||||
background-color: #50e3c2;
|
||||
}
|
||||
|
||||
.grad-10 {
|
||||
background-image: linear-gradient(90deg, red, transparent, blue);
|
||||
}
|
||||
|
||||
.grad-11 {
|
||||
background-image: linear-gradient(to top right, indigo, white, deeppink);
|
||||
}
|
||||
|
||||
.grad-12 {
|
||||
background-image: linear-gradient(to top left, indigo, white, deeppink);
|
||||
}
|
||||
|
||||
.grad-13 {
|
||||
background-image: linear-gradient(to bottom left, indigo, white, deeppink);
|
||||
}
|
||||
|
||||
.grad-14 {
|
||||
background-image: linear-gradient(to bottom right, indigo, white, deeppink);
|
||||
}
|
||||
|
||||
.grad-webkit {
|
||||
background-image: -webkit-linear-gradient(top right, yellow, black, yellow, black);
|
||||
}
|
||||
|
||||
.grad-15 {
|
||||
background-image: linear-gradient(to top left, red, green, blue);
|
||||
background-size: 30px 30px;
|
||||
}
|
||||
|
||||
.grad-hints {
|
||||
background-image: linear-gradient(to right, hotpink, 50%, rebeccapurple);
|
||||
}
|
||||
|
||||
.grad-rainbow {
|
||||
background-image: linear-gradient(to right,
|
||||
tomato,
|
||||
25%,
|
||||
orange 0,
|
||||
50%,
|
||||
yellowgreen 0,
|
||||
75%,
|
||||
dodgerblue 0)
|
||||
}
|
||||
|
||||
.grad-repeat-0 {
|
||||
background-image: repeating-linear-gradient(#e66465, #e66465 20px, #9198e5 20px, #9198e5 25px);
|
||||
}
|
||||
|
||||
.grad-repeat-1 {
|
||||
background-image: repeating-linear-gradient(45deg, #3f87a6, #ebf8e1 15%, #f69d3c 20%);
|
||||
}
|
||||
|
||||
.grad-repeat-2 {
|
||||
background-image: repeating-linear-gradient(transparent, #4d9f0c 40px),
|
||||
repeating-linear-gradient(0.25turn, transparent, #3f87a6 20px);
|
||||
}
|
||||
|
||||
.grad-repeat-3 {
|
||||
background-image: -webkit-repeating-linear-gradient(left, red 10%, blue 30%);
|
||||
}
|
||||
|
||||
.grad-double-position {
|
||||
background-image: linear-gradient(to right, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%)
|
||||
}
|
||||
|
||||
.grad-conic-1 {
|
||||
background-image: conic-gradient(red, orange, yellow, green, blue);
|
||||
}
|
||||
|
||||
.grad-conic-2 {
|
||||
background-image: conic-gradient(from 0.25turn at 50% 30%, #f69d3c, 10deg, #3f87a6, 350deg, #ebf8e1);
|
||||
}
|
||||
|
||||
.grad-conic-3 {
|
||||
background-image: conic-gradient(from 3.1416rad at 10% 50%, #e66465, #9198e5);
|
||||
}
|
||||
|
||||
.grad-conic-4 {
|
||||
background-image: conic-gradient(red 6deg, orange 6deg 18deg, yellow 18deg 45deg,
|
||||
green 45deg 110deg, blue 110deg 200deg, purple 200deg);
|
||||
}
|
||||
|
||||
.grad-conic-5 {
|
||||
background-image: conic-gradient(at 60% 45%, red, yellow, green);
|
||||
}
|
||||
|
||||
.grad-conic-6 {
|
||||
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg, green 270deg, blue 270deg);
|
||||
}
|
||||
|
||||
.grad-conic-repeat-1 {
|
||||
background-image: repeating-conic-gradient(red 0%,
|
||||
yellow 15%,
|
||||
red 33%);
|
||||
}
|
||||
|
||||
.grad-conic-repeat-2 {
|
||||
background-image: repeating-conic-gradient(from 45deg at 10% 50%,
|
||||
brown 0deg 10deg,
|
||||
darkgoldenrod 10deg 20deg,
|
||||
chocolate 20deg 30deg);
|
||||
}
|
||||
|
||||
.grad-radial-1 {
|
||||
background-image: radial-gradient(#e66465, #9198e5);
|
||||
}
|
||||
|
||||
.grad-radial-2 {
|
||||
background-image: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);
|
||||
}
|
||||
|
||||
.grad-radial-3 {
|
||||
background-image: radial-gradient(circle at 100px, #333, #333 50%, #eee 75%, #333 75%);
|
||||
}
|
||||
|
||||
.grad-radial-4 {
|
||||
background-image: radial-gradient(200px 100px ellipse at 25% 50%, yellow, #009966, purple);
|
||||
}
|
||||
|
||||
.grad-radial-repeat-1 {
|
||||
background-image: repeating-radial-gradient(#e66465, #9198e5 20%);
|
||||
}
|
||||
|
||||
.grad-radial-repeat-2 {
|
||||
background-image: repeating-radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);
|
||||
}
|
||||
|
||||
.grad-radial-repeat-3 {
|
||||
background-image: repeating-radial-gradient(circle at 100%, #333, #333 10px, #eee 10px, #eee 20px);
|
||||
}
|
||||
|
||||
.grad-radial-calc {
|
||||
background-image: repeating-radial-gradient(circle at calc(100% - 10px) calc(20% + 10px), #333, #333 10px, #eee 10px, #eee 20px);
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="box grad-0"></div>
|
||||
<div class="box grad-1"></div>
|
||||
<div class="box grad-2"></div>
|
||||
<div class="box grad-3"></div>
|
||||
<div class="box grad-4"></div>
|
||||
<div class="box grad-5"></div>
|
||||
<div class="box grad-6"></div>
|
||||
<div class="box grad-rainbow"></div>
|
||||
<div class="box grad-hints"></div>
|
||||
<div class="rect grad-7"></div>
|
||||
<div class="box grad-8"></div>
|
||||
<div class="box grad-9"></div>
|
||||
<div class="box grad-10"></div>
|
||||
<div class="rect grad-11"></div>
|
||||
<div class="rect grad-12"></div>
|
||||
<div class="rect grad-13"></div>
|
||||
<div class="rect grad-14"></div>
|
||||
<div class="rect grad-15"></div>
|
||||
<div class="box grad-webkit"></div>
|
||||
<div class="box grad-repeat-0"></div>
|
||||
<div class="box grad-repeat-1"></div>
|
||||
<div class="box grad-repeat-2"></div>
|
||||
<div class="box grad-repeat-3"></div>
|
||||
<div class="box grad-double-position"></div>
|
||||
<div class="box grad-conic-1"></div>
|
||||
<div class="box grad-conic-2"></div>
|
||||
<div class="box grad-conic-3"></div>
|
||||
<div class="box grad-conic-4"></div>
|
||||
<div class="box grad-conic-5"></div>
|
||||
<div class="box grad-conic-6"></div>
|
||||
<div class="box grad-conic-repeat-1"></div>
|
||||
<div class="box grad-conic-repeat-2"></div>
|
||||
<div class="rect grad-radial-1"></div>
|
||||
<div class="rect grad-radial-2"></div>
|
||||
<div class="rect grad-radial-3"></div>
|
||||
<div class="rect grad-radial-4"></div>
|
||||
<div class="rect grad-radial-repeat-1"></div>
|
||||
<div class="rect grad-radial-repeat-2"></div>
|
||||
<div class="rect grad-radial-repeat-3"></div>
|
||||
<div class="rect grad-radial-calc"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
<!doctype html>
|
||||
<link rel="match" href="reference/css-transform-box-ref.html" />
|
||||
<style>
|
||||
svg {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
border: 1px solid #d9d9d9;
|
||||
}
|
||||
|
||||
.box {
|
||||
stroke-width: 4;
|
||||
transform-origin: 20% 20%;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
div.box {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: solid black;
|
||||
border-width: 10px 20px 30px 40px;
|
||||
margin: 80px;
|
||||
}
|
||||
</style>
|
||||
<div class="box" style="transform-box: content-box">Hi</div>
|
||||
<div class="box" style="transform-box: border-box">Hi</div>
|
||||
<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<!-- NOTE: We don't currently calculate the fill or stroke boxes for SVG elements, so the test will need to be
|
||||
rebaselined once we do! -->
|
||||
<rect class="box" style="transform-box: fill-box" x="10" y="10" width="10" height="10" stroke="black" fill="yellow" />
|
||||
<circle fill="red" r="1" cx="15" cy="15" />
|
||||
|
||||
<rect class="box" style="transform-box: stroke-box" x="10" y="40" width="10" height="10" stroke="black" fill="cyan" />
|
||||
<circle fill="red" r="1" cx="15" cy="45" />
|
||||
|
||||
<rect class="box" style="transform-box: view-box" x="10" y="70" width="10" height="10" stroke="black" fill="green" />
|
||||
<circle fill="red" r="1" cx="15" cy="75" />
|
||||
</svg>
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="match" href="reference/inline-node-ref.html" />
|
||||
<meta charset="UTF-8">
|
||||
<title>Inline Node styling test</title>
|
||||
<style>
|
||||
body {
|
||||
line-height: 200%;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background-color: orange;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.bg-highlight {
|
||||
background: magenta;
|
||||
color: white;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.br-highlight {
|
||||
border: 2px solid green;
|
||||
border-radius: 6px;
|
||||
box-shadow: 4px 4px 4px darkgreen;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
Hello world <span class="highlight">this is some text</span> not in a box. <span class="bg-highlight">This text has a background</span> and <span class="br-highlight">this text has a shadow!</span>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<link rel="match" href="reference/input-placeholder-ref.html" />
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
font: 16px 'SerenitySans';
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<input value="PASS" placeholder="FAIL">
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<link rel="match" href="reference/meter-ref.html" />
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<meter value="0.5">50%</meter>
|
||||
<meter value="4" max="10">4/10</meter>
|
||||
<meter min="1" value="3" max="10">grade 3</meter>
|
||||
<meter low="4" value="1" max="10"></meter>
|
||||
<meter low="4" high="6" value="9" max="10"></meter>
|
||||
<meter low="4" high="6" value="9" max="10" optimum="1"></meter>
|
||||
<meter low="4" value="1" high="5" min="3" max="10" optimum="10"></meter>
|
||||
<meter low="4" value="3" high="5" min="1" max="2" optimum="10"></meter>
|
||||
<meter min="1" low="2" high="5" optimum="7" max="10" value="6"></meter>
|
||||
<meter min="1" low="2" high="5" optimum="7" max="10" value="8"></meter>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="match" href="reference/nested-boxes-with-hidden-overflow-and-border-radius-ref.html" />
|
||||
<style>
|
||||
.outer {
|
||||
overflow: hidden;
|
||||
border-radius: 100px;
|
||||
background-color: magenta;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.middle {
|
||||
overflow: hidden;
|
||||
border-radius: 50px;
|
||||
transform: translate(10px, 10px);
|
||||
background-color: lawngreen;
|
||||
}
|
||||
|
||||
.inner {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: black;
|
||||
transform: translate(10px, 10px);
|
||||
}
|
||||
</style>
|
||||
<div class="outer">
|
||||
<div class="middle">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,296 +0,0 @@
|
|||
<link rel="match" href="reference/object-fit-position-ref.html"/>
|
||||
<style>
|
||||
.images img {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.img-wrapper {
|
||||
margin-left: 20px;
|
||||
|
||||
}
|
||||
|
||||
.fit-cover .images img {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.fit-contain .images img {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.fit-fill .images img {
|
||||
object-fit: fill;
|
||||
}
|
||||
|
||||
.fit-none .images img {
|
||||
object-fit: none;
|
||||
}
|
||||
|
||||
.wider img {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.taller img {
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
img.pos-left {
|
||||
object-position: left;
|
||||
}
|
||||
|
||||
img.pos-right {
|
||||
object-position: right;
|
||||
}
|
||||
|
||||
img.pos-top {
|
||||
object-position: top;
|
||||
}
|
||||
|
||||
img.pos-bottom {
|
||||
object-position: bottom;
|
||||
}
|
||||
|
||||
img.pos-center {
|
||||
object-position: bottom;
|
||||
}
|
||||
|
||||
img.pos-absolute {
|
||||
object-position: 20px 30%;
|
||||
}
|
||||
|
||||
</style>
|
||||
<h2>Object-Fit: Cover</h2>
|
||||
<div class="fit-cover">
|
||||
<h3>Box wider</h3>
|
||||
<div class="wider images">
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Left</h6>
|
||||
<img class="pos-left" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Right</h6>
|
||||
<img class="pos-right" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Top</h6>
|
||||
<img class="pos-top" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Bottom</h6>
|
||||
<img class="pos-bottom" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Center</h6>
|
||||
<img class="pos-center" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: 20px 30%</h6>
|
||||
<img class="pos-absolute" src="assets/car.png">
|
||||
</div>
|
||||
</div>
|
||||
<h3>Box taller</h3>
|
||||
<div class="taller images">
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Left</h6>
|
||||
<img class="pos-left" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Right</h6>
|
||||
<img class="pos-right" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Top</h6>
|
||||
<img class="pos-top" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Bottom</h6>
|
||||
<img class="pos-bottom" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Center</h6>
|
||||
<img class="pos-center" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: 20px 30%</h6>
|
||||
<img class="pos-absolute" src="assets/car.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Object-Fit: contain</h2>
|
||||
<div class="fit-contain">
|
||||
<h3>Box wider</h3>
|
||||
<div class="wider images">
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Left</h6>
|
||||
<img class="pos-left" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Right</h6>
|
||||
<img class="pos-right" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Top</h6>
|
||||
<img class="pos-top" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Bottom</h6>
|
||||
<img class="pos-bottom" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Center</h6>
|
||||
<img class="pos-center" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: 20px 30%</h6>
|
||||
<img class="pos-absolute" src="assets/car.png">
|
||||
</div>
|
||||
</div>
|
||||
<h3>Box taller</h3>
|
||||
<div class="taller images">
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Left</h6>
|
||||
<img class="pos-left" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Right</h6>
|
||||
<img class="pos-right" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Top</h6>
|
||||
<img class="pos-top" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Bottom</h6>
|
||||
<img class="pos-bottom" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Center</h6>
|
||||
<img class="pos-center" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: 20px 30%</h6>
|
||||
<img class="pos-absolute" src="assets/car.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Object-Fit: fill</h2>
|
||||
<div class="fit-fill">
|
||||
<h3>Box wider</h3>
|
||||
<div class="wider images">
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Left</h6>
|
||||
<img class="pos-left" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Right</h6>
|
||||
<img class="pos-right" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Top</h6>
|
||||
<img class="pos-top" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Bottom</h6>
|
||||
<img class="pos-bottom" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Center</h6>
|
||||
<img class="pos-center" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: 20px 30%</h6>
|
||||
<img class="pos-absolute" src="assets/car.png">
|
||||
</div>
|
||||
</div>
|
||||
<h3>Box taller</h3>
|
||||
<div class="taller images">
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Left</h6>
|
||||
<img class="pos-left" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Right</h6>
|
||||
<img class="pos-right" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Top</h6>
|
||||
<img class="pos-top" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Bottom</h6>
|
||||
<img class="pos-bottom" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Center</h6>
|
||||
<img class="pos-center" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: 20px 30%</h6>
|
||||
<img class="pos-absolute" src="assets/car.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Object-Fit: none</h2>
|
||||
<div class="fit-none">
|
||||
<h3>Box wider</h3>
|
||||
<div class="wider images">
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Left</h6>
|
||||
<img class="pos-left" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Right</h6>
|
||||
<img class="pos-right" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Top</h6>
|
||||
<img class="pos-top" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Bottom</h6>
|
||||
<img class="pos-bottom" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Center</h6>
|
||||
<img class="pos-center" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: 20px 30%</h6>
|
||||
<img class="pos-absolute" src="assets/car.png">
|
||||
</div>
|
||||
</div>
|
||||
<h3>Box taller</h3>
|
||||
<div class="taller images">
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Left</h6>
|
||||
<img class="pos-left" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Right</h6>
|
||||
<img class="pos-right" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Top</h6>
|
||||
<img class="pos-top" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Bottom</h6>
|
||||
<img class="pos-bottom" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Center</h6>
|
||||
<img class="pos-center" src="assets/car.png">
|
||||
</div>
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: 20px 30%</h6>
|
||||
<img class="pos-absolute" src="assets/car.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
<html>
|
||||
<link rel="match" href="reference/outer-box-shadow-ref.html" />
|
||||
<head>
|
||||
<style>
|
||||
.box {
|
||||
border: 1px solid black;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
margin: 50px;
|
||||
}
|
||||
|
||||
#with-bg {
|
||||
background-image: linear-gradient(to right, red, blue, cyan, yellow, green);
|
||||
|
||||
width: 240px;
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.cmy {
|
||||
box-shadow: 20px 10px 5px magenta, cyan -20px -10px 5px, yellow 10px -5px 5px 20px;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="no-bg">
|
||||
<div class="box cmy" style="border-radius: 50%;">
|
||||
</div>
|
||||
<div class="box cmy" style="border-radius: 80% 15% 55% 50% / 55% 15% 80% 50%;">
|
||||
</div>
|
||||
<div class="box cmy" style="border-radius: 20px;">
|
||||
</div>
|
||||
<div class="box" style="box-shadow: magenta -40px -20px; border-radius: 30%;">
|
||||
</div>
|
||||
<div class="box cmy">
|
||||
</div>
|
||||
<div class="box" style="box-shadow: 20px 10px 5px magenta">
|
||||
</div>
|
||||
<div class="box" style="box-shadow: 20px 10px magenta">
|
||||
</div>
|
||||
<div class="box" style="box-shadow: magenta -40px -20px">
|
||||
</div>
|
||||
<div class="box" style="box-shadow: 20px 10px rgba(255,0,255,0.5)">
|
||||
</div>
|
||||
<div class="box" style="box-shadow: -40px -20px rgba(255,0,255,0.5)">
|
||||
</div>
|
||||
</div>
|
||||
<div id="with-bg">
|
||||
<div class="box cmy" style="border-radius: 50%;">
|
||||
</div>
|
||||
<div class="box cmy" style="border-radius: 80% 15% 55% 50% / 55% 15% 80% 50%;">
|
||||
</div>
|
||||
<div class="box cmy" style="border-radius: 20px;">
|
||||
</div>
|
||||
<div class="box" style="box-shadow: magenta -40px -20px; border-radius: 30%;">
|
||||
</div>
|
||||
<div class="box cmy">
|
||||
</div>
|
||||
<div class="box" style="box-shadow: 20px 10px 5px magenta">
|
||||
</div>
|
||||
<div class="box" style="box-shadow: 20px 10px magenta">
|
||||
</div>
|
||||
<div class="box" style="box-shadow: magenta -40px -20px">
|
||||
</div>
|
||||
<div class="box" style="box-shadow: 20px 10px rgba(255,0,255,0.5)">
|
||||
</div>
|
||||
<div class="box" style="box-shadow: -40px -20px rgba(255,0,255,0.5)">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<img src="./images/alt-frame.png">
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<!-- To rebase:
|
||||
1. Open border-radius.html in Ladybird
|
||||
2. Resize the window just above the width of the largest element
|
||||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/border-radius-ref.png">
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<img src="./images/canvas-arcs-and-ellipses-ref.png">
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<!-- To rebase:
|
||||
1. Open canvas-fillstyle-rgb.html in Ladybird
|
||||
2. Resize the window just above the width of the canvas
|
||||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/canvas-fillstyle-rgb.png">
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<img src="./images/canvas-implict-moves-and-lines-ref.png">
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<!-- To rebase:
|
||||
1. Open canvas-path-rect.html in Ladybird
|
||||
2. Resize the window just above the width of the canvas
|
||||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/canvas-path-rect-ref.png">
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<img src="./images/canvas-text-ref.png">
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<img src="./images/clip-path-polygon-ref.png">
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
html {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
</style>
|
||||
<!-- To rebase:
|
||||
1. Open background-clip-text.html in Ladybird
|
||||
2. Resize the window just above the width of the canvas
|
||||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/css-background-clip-text.png">
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<!-- To rebase:
|
||||
1. Open css-background-position.html in Ladybird
|
||||
2. Resize the window just above the width of the largest element
|
||||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/css-background-position-ref.png">
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: cyan;
|
||||
}
|
||||
</style>
|
||||
<!-- To rebase:
|
||||
1. Open css-background-repeat.html in Ladybird
|
||||
2. Resize the window just above the width of the largest element
|
||||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/css-background-repeat-ref.png">
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<!-- To rebase:
|
||||
1. Open css-backgrounds.html in Ladybird
|
||||
2. Resize the window just above the width of the largest element
|
||||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/css-backgrounds-ref.png">
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<!-- To rebase:
|
||||
1. Open css-gradients.html in Ladybird
|
||||
2. Resize the window just above the width of the largest gradient
|
||||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/css-gradients-ref.png">
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<!-- To rebase:
|
||||
1. Open css-backgrounds.html in Ladybird
|
||||
2. Resize the window just above the width of the largest element
|
||||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/css-transform-box-ref.png">
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 401 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 999 B |
Binary file not shown.
|
Before Width: | Height: | Size: 264 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 171 B |
Binary file not shown.
|
Before Width: | Height: | Size: 180 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 135 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 541 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 548 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 196 B |
Binary file not shown.
|
Before Width: | Height: | Size: 407 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1,004 B |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 857 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 831 B |
Binary file not shown.
|
Before Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 45 KiB |
|
|
@ -1,9 +0,0 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<img src="./images/inline-node-ref.png">
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<!-- To rebase:
|
||||
1. Open input-placeholder.html in Ladybird
|
||||
2. Resize the window just above the width of the canvas
|
||||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/input-placeholder-ref.png">
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<!-- To rebase:
|
||||
1. Open meter.html in Ladybird
|
||||
2. Resize the window to 800x600
|
||||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/meter-ref.png">
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<img src="./images/nested-boxes-with-hidden-overflow-and-border-radius-ref.png">
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<!-- To rebase:
|
||||
1. Open object-fit-position.html in Ladybird
|
||||
2. Right click > "Take Full Screenshot"
|
||||
3. Update the image below:
|
||||
-->
|
||||
<img src="./images/object-fit-position.png">
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<!-- To rebase:
|
||||
1. Open outer-box-shadow.html in Ladybird
|
||||
2. Resize the window just above the width of the largest element
|
||||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/outer-box-shadow-ref.png">
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<img src="./images/svg-axis-aligned-lines-ref.png">
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<!-- To rebase:
|
||||
1. Open svg-background-no-natural-size.html in Ladybird
|
||||
2. Right click > "Take Full Screenshot"
|
||||
3. Update the image below:
|
||||
-->
|
||||
<img src="./images/svg-background-no-natural-size-ref.png">
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<img src="./images/svg-clip-path-and-mask-ref.png">
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<img src="./images/svg-clip-rule-ref.png">
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<!-- To rebase:
|
||||
1. Open svg-gradient-spreadMethod.html in Ladybird
|
||||
2. Resize the window just above the width of the largest gradient
|
||||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/svg-gradient-spreadMethod-ref.png">
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<img src="./images/svg-maskContentUnits-ref.png">
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<!-- To rebase:
|
||||
1. Open svg-radialGradient.html in Ladybird
|
||||
2. Resize the window just above the width of the largest gradient
|
||||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/svg-radialGradient-ref.png">
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<img src="./images/svg-simple-clipPath-ref.png">
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<!-- To rebase:
|
||||
1. Open svg-text-effects.html in Ladybird
|
||||
2. Resize the window till there's x and y scrollbars
|
||||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/svg-text-effects-ref.png">
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<!-- To rebase:
|
||||
1. Open svg-textPath.html in Ladybird
|
||||
2. Resize the window till there's x and y scrollbars
|
||||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/svg-textPath-ref.png">
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<img src="./images/text-decorations.png">
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<img src="./images/text-shadow-ref.png">
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<!doctype html>
|
||||
<style>
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<link rel="match" href="reference/svg-axis-aligned-lines-ref.html" />
|
||||
<svg width="100" height="100" viewBox="0 0 24 24" stroke="black" stroke-width="5">
|
||||
<line x1="12" y1="0" x2="12" y2="24"></line>
|
||||
<line x1="0" y1="12" x2="24" y2="12"></line>
|
||||
</svg>
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
<!doctype html>
|
||||
<link rel="match" href="reference/svg-background-no-natural-size-ref.html" />
|
||||
<style>
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
div {
|
||||
border: 1px solid black;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
}
|
||||
.svg-rect {
|
||||
background-size: 34%;
|
||||
background-image: url(assets/vertical-rect.svg);
|
||||
}
|
||||
img {
|
||||
width: 100px;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="svg-rect"></div>
|
||||
<body><span></span><img src="assets/vertical-rect.svg">
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<link rel="match" href="reference/svg-clip-path-and-mask-ref.html" />
|
||||
<style>
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<svg height="200" viewBox="0 0 100 100">
|
||||
<mask id="mask">
|
||||
<circle cx="60" cy="35" r="35" fill="white"/>
|
||||
</mask>
|
||||
|
||||
<clipPath id="clip">
|
||||
<circle cx="40" cy="35" r="35" />
|
||||
</clipPath>
|
||||
|
||||
<path
|
||||
id="heart"
|
||||
d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />
|
||||
|
||||
<use clip-path="url(#clip)" mask="url(#mask)" href="#heart" fill="red" />
|
||||
</svg>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<svg
|
||||
width="100"
|
||||
viewBox="0 0 100 90"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.1">
|
||||
<defs>
|
||||
<link rel="match" href="reference/svg-clip-rule-ref.html" />
|
||||
<path d="M50,0 21,90 98,35 2,35 79,90z" id="star" />
|
||||
</defs>
|
||||
<clipPath id="emptyStar">
|
||||
<use href="#star" clip-rule="evenodd" />
|
||||
</clipPath>
|
||||
<rect clip-path="url(#emptyStar)" width="50" height="90" fill="blue" />
|
||||
<clipPath id="filledStar">
|
||||
<use href="#star" clip-rule="nonzero" />
|
||||
</clipPath>
|
||||
<rect clip-path="url(#filledStar)" width="50" height="90" x="50" fill="red" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 574 B |
|
|
@ -1,60 +0,0 @@
|
|||
<link rel="match" href="reference/svg-gradient-spreadMethod-ref.html" />
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<svg width="220" height="590" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="LinearPad" x1="33%" x2="67%">
|
||||
<stop offset="0%" stop-color="fuchsia" />
|
||||
<stop offset="100%" stop-color="orange" />
|
||||
</linearGradient>
|
||||
<linearGradient id="LinearReflect" spreadMethod="reflect" x1="33%" x2="67%">
|
||||
<stop offset="0%" stop-color="fuchsia" />
|
||||
<stop offset="100%" stop-color="orange" />
|
||||
</linearGradient>
|
||||
<linearGradient id="LinearRepeat" spreadMethod="repeat" x1="33%" x2="67%">
|
||||
<stop offset="0%" stop-color="fuchsia" />
|
||||
<stop offset="100%" stop-color="orange" />
|
||||
</linearGradient>
|
||||
<radialGradient id="RadialPad" cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" spreadMethod="pad">
|
||||
<stop offset="0%" stop-color="red" />
|
||||
<stop offset="100%" stop-color="blue" />
|
||||
</radialGradient>
|
||||
<radialGradient id="RadialRepeat" cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" spreadMethod="repeat">
|
||||
<stop offset="0%" stop-color="red" />
|
||||
<stop offset="100%" stop-color="blue" />
|
||||
</radialGradient>
|
||||
<radialGradient id="RadialReflect" cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" spreadMethod="reflect">
|
||||
<stop offset="0%" stop-color="red" />
|
||||
<stop offset="100%" stop-color="blue" />
|
||||
</radialGradient>
|
||||
<radialGradient id="RadialPadFocalOffCenter" cx="75%" cy="25%" r="33%" fx="64%" fy="18%" fr="17%">
|
||||
<stop offset="0%" stop-color="fuchsia" />
|
||||
<stop offset="100%" stop-color="orange" />
|
||||
</radialGradient>
|
||||
<radialGradient id="RadialReflectFocalOffCenter" spreadMethod="reflect" cx="75%" cy="25%" r="33%" fx="64%" fy="18%"
|
||||
fr="17%">
|
||||
<stop offset="0%" stop-color="fuchsia" />
|
||||
<stop offset="100%" stop-color="orange" />
|
||||
</radialGradient>
|
||||
<radialGradient id="RadialRepeatFocalOffCenter" spreadMethod="repeat" cx="75%" cy="25%" r="33%" fx="64%" fy="18%"
|
||||
fr="17%">
|
||||
<stop offset="0%" stop-color="fuchsia" />
|
||||
<stop offset="100%" stop-color="orange" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="10" y="10" width="100" height="100" fill="url(#RadialPad)" />
|
||||
<rect x="10" y="120" width="100" height="100" fill="url(#RadialRepeat)" />
|
||||
<rect x="120" y="120" width="100" height="100" fill="url(#RadialReflect)" />
|
||||
<rect x="10" y="230" width="200" height="40" fill="url(#LinearPad)" />
|
||||
<rect x="10" y="280" width="200" height="40" fill="url(#LinearReflect)" />
|
||||
<rect x="10" y="330" width="200" height="40" fill="url(#LinearRepeat)" />
|
||||
<rect fill="url(#RadialPadFocalOffCenter)" x="10" y="380" width="100" height="100" />
|
||||
<rect fill="url(#RadialReflectFocalOffCenter)" x="10" y="490" width="100" height="100" />
|
||||
<rect fill="url(#RadialRepeatFocalOffCenter)" x="120" y="490" width="100" height="100" />
|
||||
</svg>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
<svg width="200" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<link rel="match" href="reference/svg-maskContentUnits-ref.html" />
|
||||
<mask id="myMask1" maskContentUnits="userSpaceOnUse">
|
||||
<rect fill="black" x="0" y="0" width="100%" height="100%" />
|
||||
<circle fill="white" cx="50" cy="50" r="35" />
|
||||
</mask>
|
||||
|
||||
<mask id="myMask2" maskContentUnits="objectBoundingBox">
|
||||
<rect fill="black" x="0" y="0" width="100%" height="100%" />
|
||||
<circle fill="white" cx=".5" cy=".5" r=".35" />
|
||||
</mask>
|
||||
|
||||
<!-- Some reference rect to materialized the mask -->
|
||||
<rect id="r1" x="0" y="0" width="45" height="45" />
|
||||
<rect id="r2" x="0" y="55" width="45" height="45" />
|
||||
<rect id="r3" x="55" y="55" width="45" height="45" />
|
||||
<rect id="r4" x="55" y="0" width="45" height="45" />
|
||||
|
||||
<!-- The first 3 rect are masked with useSpaceOnUse units -->
|
||||
<use mask="url(#myMask1)" href="#r1" fill="red" />
|
||||
<use mask="url(#myMask1)" href="#r2" fill="red" />
|
||||
<use mask="url(#myMask1)" href="#r3" fill="red" />
|
||||
|
||||
<!-- The last rect is masked with objectBoundingBox units -->
|
||||
<use mask="url(#myMask2)" href="#r4" fill="red" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
|
|
@ -1,188 +0,0 @@
|
|||
<link rel="match" href="reference/svg-radialGradient-ref.html" />
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
svg {
|
||||
margin-right: calc(100% - 400px)
|
||||
}
|
||||
</style>
|
||||
<!-- spreadMethod=pad -->
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<radialGradient id="baseGrad">
|
||||
<stop offset="0%" stop-color="red" />
|
||||
<stop offset="40%" stop-color="purple" />
|
||||
<stop offset="100%" stop-color="cyan" />
|
||||
</radialGradient>
|
||||
<!-- Start circle inside end circle -->
|
||||
<radialGradient href="#baseGrad" id="test0" gradientUnits="userSpaceOnUse" cx="200" cy="150" r="100" fx="158" fy="93" fr="10">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#test0)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle outside end circle -->
|
||||
<radialGradient href="#baseGrad" id="test1" gradientUnits="userSpaceOnUse" cx="200" cy="150" r="100" fx="370" fy="44" fr="10">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#test1)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle radius == end circle radius -->
|
||||
<radialGradient href="#baseGrad" id="test2" gradientUnits="userSpaceOnUse" cx="200" cy="150" r="10" fx="40" fy="225" fr="10">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#test2)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle larger than end circle (inside end circle) -->
|
||||
<radialGradient href="#baseGrad" id="test3" gradientUnits="userSpaceOnUse" cx="200" cy="150" r="30" fx="200" fy="182" fr="70">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#test3)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle larger than end circle (outside end circle) -->
|
||||
<radialGradient href="#baseGrad" id="test4" gradientUnits="userSpaceOnUse" cx="200" cy="150" r="30" fx="242" fy="150" fr="70">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#test4)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle radius == 0 (inside end circle) -->
|
||||
<radialGradient href="#baseGrad" id="test5" gradientUnits="userSpaceOnUse" cx="200" cy="150" r="120" fx="144" fy="186" fr="0">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#test5)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle radius == 0 (outside end circle) -->
|
||||
<radialGradient href="#baseGrad" id="test6" gradientUnits="userSpaceOnUse" cx="200" cy="150" r="120" fx="23" fy="40" fr="0">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#test6)"></rect>
|
||||
</svg>
|
||||
<!-- spreadMethod=reflect -->
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle inside end circle -->
|
||||
<radialGradient href="#test0" id="reflectTest0" spreadMethod="reflect">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#reflectTest0)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle outside end circle -->
|
||||
<radialGradient href="#test1" id="reflectTest1" spreadMethod="reflect">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#reflectTest1)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle radius == end circle radius -->
|
||||
<radialGradient href="#test2" id="reflectTest2" spreadMethod="reflect">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#reflectTest2)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle larger than end circle (inside end circle) -->
|
||||
<radialGradient href="#test3" id="reflectTest3" spreadMethod="reflect">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#reflectTest3)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle larger than end circle (outside end circle) -->
|
||||
<radialGradient href="#test4" id="reflectTest4" spreadMethod="reflect">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#reflectTest4)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle radius == 0 (inside end circle) -->
|
||||
<radialGradient href="#test5" id="reflectTest5" spreadMethod="reflect">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#reflectTest5)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle radius == 0 (outside end circle) -->
|
||||
<radialGradient href="#test6" id="reflectTest6" spreadMethod="reflect">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#reflectTest6)"></rect>
|
||||
</svg>
|
||||
<!-- spreadMethod=repeat -->
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle inside end circle -->
|
||||
<radialGradient href="#test0" id="repeatTest0" spreadMethod="repeat">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#repeatTest0)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle outside end circle -->
|
||||
<radialGradient href="#test1" id="repeatTest1" spreadMethod="repeat">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#repeatTest1)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle radius == end circle radius -->
|
||||
<radialGradient href="#test2" id="repeatTest2" spreadMethod="repeat">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#repeatTest2)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle larger than end circle (inside end circle) -->
|
||||
<radialGradient href="#test3" id="repeatTest3" spreadMethod="repeat">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#repeatTest3)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle larger than end circle (outside end circle) -->
|
||||
<radialGradient href="#test4" id="repeatTest4" spreadMethod="repeat">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#repeatTest4)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle radius == 0 (inside end circle) -->
|
||||
<radialGradient href="#test5" id="repeatTest5" spreadMethod="repeat">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#repeatTest5)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle radius == 0 (outside end circle) -->
|
||||
<radialGradient href="#test6" id="repeatTest6" spreadMethod="repeat">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#repeatTest6)"></rect>
|
||||
</svg>
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<link rel="match" href="reference/svg-simple-clipPath-ref.html" />
|
||||
<style>
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<svg width="300">
|
||||
<defs>
|
||||
<clipPath id="clipPath3">
|
||||
<path d="M10,10 q60,60 100,0 q50,50 50,50 l40,0 l-40,40 l-100,-20"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<rect x="5" y="5" width="190" height="90"
|
||||
style="stroke: none; fill:#00ff00; clip-path: url(#clipPath3);"/>
|
||||
</svg>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<link rel="match" href="reference/svg-text-effects-ref.html" />
|
||||
<svg height="200" width="350" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
.text {
|
||||
font: italic 40px serif;
|
||||
}
|
||||
|
||||
.thakis {
|
||||
font: bold 70px sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<linearGradient id="gradient">
|
||||
<stop offset="0%" stop-color="rgba(255, 0, 0, 1)"/>
|
||||
<stop offset="10%" stop-color="rgba(255, 154, 0, 1)"/>
|
||||
<stop offset="20%" stop-color="rgba(208, 222, 33, 1)"/>
|
||||
<stop offset="30%" stop-color="rgba(79, 220, 74, 1)"/>
|
||||
<stop offset="40%" stop-color="rgba(63, 218, 216, 1)"/>
|
||||
<stop offset="50%" stop-color="rgba(47, 201, 226, 1)"/>
|
||||
<stop offset="60%" stop-color="rgba(28, 127, 238, 1)"/>
|
||||
<stop offset="70%" stop-color="rgba(95, 21, 242, 1)"/>
|
||||
<stop offset="80%" stop-color="rgba(186, 12, 248, 1)"/>
|
||||
<stop offset="90%" stop-color="rgba(251, 7, 217, 1)"/>
|
||||
<stop offset="100%" stop-color="rgba(255, 0, 0, 1)"/>
|
||||
</linearGradient>
|
||||
<text x="20" y="105" class="text" transform="rotate(-10 50 100)">There you go :^)</text>
|
||||
<text x="90" y="220" class="thakis" fill="url(#gradient)" transform="rotate(-10 50 100) skewY(-10)">thakis</text>
|
||||
</svg>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<link rel="match" href="reference/svg-textPath-ref.html" />
|
||||
<svg width="400" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
id="path"
|
||||
fill="none"
|
||||
stroke="red"
|
||||
d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
|
||||
<text>
|
||||
<textPath href="#path">Quick brown fox jumps over the lazy dog.</textPath>
|
||||
</text>
|
||||
</svg>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue