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.
Aliaksandr Kalenik
Andreas Kling
Author: https://github.com/kalenikaliaksandr
Commit: 715f033007
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/713
|
|
@ -1,3 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="match" href="reference/alt-frame.html" />
|
||||
<img alt='Hello!!'>
|
||||
|
|
@ -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>
|
||||
3
Tests/LibWeb/Screenshot/alt-frame.html
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="match" href="reference/alt-frame-ref.html" />
|
||||
<img alt='Hello!!'>
|
||||
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 410 B After Width: | Height: | Size: 410 B |
4
Tests/LibWeb/Screenshot/assets/vertical-rect.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg viewBox="310 30 170 412" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="314" y="31" width="164" height="409" color="rgb(0, 0, 0)" fill="#4a90d6" stroke="#222" stroke-dashoffset="" stroke-linejoin="round" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 272 B |
|
|
@ -215,18 +215,18 @@
|
|||
height: 180px;
|
||||
background-size: 220px 180px;
|
||||
border-radius: 70% 30% 30% 70%/60% 40% 60% 40%;
|
||||
background-image: url(assets/car.png)
|
||||
background-image: url(./assets/car.png)
|
||||
}
|
||||
|
||||
.screenshot {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
background-image: url(assets/car.png)
|
||||
background-image: url(./assets/car.png)
|
||||
}
|
||||
|
||||
.rounded-image {
|
||||
background-image: url(assets/car.png);
|
||||
background-image: url(./assets/car.png);
|
||||
background-repeat: repeat;
|
||||
border-radius: 20px;
|
||||
width: 150px;
|
||||
|
|
@ -242,7 +242,7 @@
|
|||
}
|
||||
|
||||
.image-layers {
|
||||
background: center/contain url(car.png) content-box, center/contain url(assets/car.png)
|
||||
background: center/contain url(car.png) content-box, center/contain url(./assets/car.png)
|
||||
}
|
||||
|
||||
.box-background-clip {
|
||||
|
|
@ -287,12 +287,12 @@
|
|||
<div class="nut"></div>
|
||||
<div class="screenshot"></div>
|
||||
<div class="rounded-image"></div>
|
||||
<img src="assets/car.png" style="border-radius: 20px; width: 200px">
|
||||
<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">
|
||||
<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>
|
||||
|
|
@ -300,7 +300,7 @@
|
|||
<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;">
|
||||
<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>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<link rel="match" href="reference/canvas-fillstyle-rgb.html" />
|
||||
<link rel="match" href="reference/canvas-fillstyle-rgb-ref.html" />
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
|
|
@ -11,14 +11,14 @@
|
|||
border: 1px solid black;
|
||||
overflow: auto;
|
||||
margin-bottom: 10px;
|
||||
background: url("assets/smiley.png") bottom right no-repeat;
|
||||
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"/>
|
||||
<img src="./assets/smiley.png"/>
|
||||
|
||||
<!-- Single value -->
|
||||
<div class="example" style="background-position: left"></div>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
.background {
|
||||
background: white url(assets/smiley.png);
|
||||
background: white url(./assets/smiley.png);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin-bottom: 10px;
|
||||
|
|
@ -21,10 +21,10 @@
|
|||
</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>
|
||||
<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>
|
||||
82
Tests/LibWeb/Screenshot/css-backgrounds.html
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
<!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>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 401 KiB After Width: | Height: | Size: 401 KiB |
|
Before Width: | Height: | Size: 999 B After Width: | Height: | Size: 999 B |
|
Before Width: | Height: | Size: 264 B After Width: | Height: | Size: 264 B |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 2 KiB After Width: | Height: | Size: 2 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 171 B After Width: | Height: | Size: 171 B |
|
Before Width: | Height: | Size: 180 KiB After Width: | Height: | Size: 180 KiB |
|
Before Width: | Height: | Size: 6.6 KiB After Width: | Height: | Size: 6.6 KiB |
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 135 KiB After Width: | Height: | Size: 135 KiB |
|
Before Width: | Height: | Size: 541 KiB After Width: | Height: | Size: 541 KiB |
|
Before Width: | Height: | Size: 8.2 KiB After Width: | Height: | Size: 8.2 KiB |
|
Before Width: | Height: | Size: 7.3 KiB After Width: | Height: | Size: 7.3 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 548 KiB After Width: | Height: | Size: 548 KiB |
|
Before Width: | Height: | Size: 83 KiB After Width: | Height: | Size: 83 KiB |
|
Before Width: | Height: | Size: 196 B After Width: | Height: | Size: 196 B |
|
Before Width: | Height: | Size: 407 B After Width: | Height: | Size: 407 B |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 1,004 B After Width: | Height: | Size: 1,004 B |
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 857 KiB After Width: | Height: | Size: 857 KiB |
|
Before Width: | Height: | Size: 831 B After Width: | Height: | Size: 831 B |
|
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 9.2 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 45 KiB |
|
|
@ -66,54 +66,54 @@
|
|||
<div class="wider images">
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Left</h6>
|
||||
<img class="pos-left" src="assets/car.png">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<img class="pos-absolute" src="./assets/car.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -125,54 +125,54 @@
|
|||
<div class="wider images">
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Left</h6>
|
||||
<img class="pos-left" src="assets/car.png">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<img class="pos-absolute" src="./assets/car.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -184,54 +184,54 @@
|
|||
<div class="wider images">
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Left</h6>
|
||||
<img class="pos-left" src="assets/car.png">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<img class="pos-absolute" src="./assets/car.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -243,54 +243,54 @@
|
|||
<div class="wider images">
|
||||
<div class="img-wrapper">
|
||||
<h6>Object-Position: Left</h6>
|
||||
<img class="pos-left" src="assets/car.png">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<img class="pos-absolute" src="./assets/car.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -6,4 +6,4 @@
|
|||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<img src="./images/alt-frame.png">
|
||||
<img src="../images/alt-frame.png">
|
||||
|
|
@ -12,4 +12,4 @@
|
|||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/border-radius-ref.png">
|
||||
<img src="../images/border-radius-ref.png">
|
||||
|
|
@ -6,4 +6,4 @@
|
|||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<img src="./images/canvas-arcs-and-ellipses-ref.png">
|
||||
<img src="../images/canvas-arcs-and-ellipses-ref.png">
|
||||
|
|
@ -12,4 +12,4 @@
|
|||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/canvas-fillstyle-rgb.png">
|
||||
<img src="../images/canvas-fillstyle-rgb.png">
|
||||
|
|
@ -6,4 +6,4 @@
|
|||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<img src="./images/canvas-implict-moves-and-lines-ref.png">
|
||||
<img src="../images/canvas-implict-moves-and-lines-ref.png">
|
||||
|
|
@ -12,4 +12,4 @@
|
|||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/canvas-path-rect-ref.png">
|
||||
<img src="../images/canvas-path-rect-ref.png">
|
||||
|
|
@ -6,4 +6,4 @@
|
|||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<img src="./images/canvas-text-ref.png">
|
||||
<img src="../images/canvas-text-ref.png">
|
||||
|
|
@ -6,4 +6,4 @@
|
|||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<img src="./images/clip-path-polygon-ref.png">
|
||||
<img src="../images/clip-path-polygon-ref.png">
|
||||
|
|
@ -15,4 +15,4 @@
|
|||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/css-background-clip-text.png">
|
||||
<img src="../images/css-background-clip-text.png">
|
||||
|
|
@ -12,4 +12,4 @@
|
|||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/css-background-position-ref.png">
|
||||
<img src="../images/css-background-position-ref.png">
|
||||
|
|
@ -12,4 +12,4 @@
|
|||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/css-background-repeat-ref.png">
|
||||
<img src="../images/css-background-repeat-ref.png">
|
||||
|
|
@ -12,4 +12,4 @@
|
|||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/css-backgrounds-ref.png">
|
||||
<img src="../images/css-backgrounds-ref.png">
|
||||
|
|
@ -12,4 +12,4 @@
|
|||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/css-gradients-ref.png">
|
||||
<img src="../images/css-gradients-ref.png">
|
||||
|
|
@ -12,4 +12,4 @@
|
|||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/css-transform-box-ref.png">
|
||||
<img src="../images/css-transform-box-ref.png">
|
||||
|
|
@ -6,4 +6,4 @@ body {
|
|||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<img src="./images/inline-node-ref.png">
|
||||
<img src="../images/inline-node-ref.png">
|
||||
|
|
@ -12,4 +12,4 @@
|
|||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/input-placeholder-ref.png">
|
||||
<img src="../images/input-placeholder-ref.png">
|
||||
|
|
@ -12,4 +12,4 @@
|
|||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/meter-ref.png">
|
||||
<img src="../images/meter-ref.png">
|
||||
|
|
@ -7,4 +7,4 @@
|
|||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<img src="./images/nested-boxes-with-hidden-overflow-and-border-radius-ref.png">
|
||||
<img src="../images/nested-boxes-with-hidden-overflow-and-border-radius-ref.png">
|
||||
|
|
@ -12,4 +12,4 @@
|
|||
2. Right click > "Take Full Screenshot"
|
||||
3. Update the image below:
|
||||
-->
|
||||
<img src="./images/object-fit-position.png">
|
||||
<img src="../images/object-fit-position.png">
|
||||
|
|
@ -12,4 +12,4 @@
|
|||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/outer-box-shadow-ref.png">
|
||||
<img src="../images/outer-box-shadow-ref.png">
|
||||
|
|
@ -6,4 +6,4 @@ body {
|
|||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<img src="./images/svg-axis-aligned-lines-ref.png">
|
||||
<img src="../images/svg-axis-aligned-lines-ref.png">
|
||||
|
|
@ -11,4 +11,4 @@
|
|||
2. Right click > "Take Full Screenshot"
|
||||
3. Update the image below:
|
||||
-->
|
||||
<img src="./images/svg-background-no-natural-size-ref.png">
|
||||
<img src="../images/svg-background-no-natural-size-ref.png">
|
||||
|
|
@ -6,4 +6,4 @@
|
|||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<img src="./images/svg-clip-path-and-mask-ref.png">
|
||||
<img src="../images/svg-clip-path-and-mask-ref.png">
|
||||
|
|
@ -6,4 +6,4 @@
|
|||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<img src="./images/svg-clip-rule-ref.png">
|
||||
<img src="../images/svg-clip-rule-ref.png">
|
||||
|
|
@ -12,4 +12,4 @@
|
|||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/svg-gradient-spreadMethod-ref.png">
|
||||
<img src="../images/svg-gradient-spreadMethod-ref.png">
|
||||
|
|
@ -6,4 +6,4 @@
|
|||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<img src="./images/svg-maskContentUnits-ref.png">
|
||||
<img src="../images/svg-maskContentUnits-ref.png">
|
||||
|
|
@ -12,4 +12,4 @@
|
|||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/svg-radialGradient-ref.png">
|
||||
<img src="../images/svg-radialGradient-ref.png">
|
||||
|
|
@ -6,4 +6,4 @@
|
|||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<img src="./images/svg-simple-clipPath-ref.png">
|
||||
<img src="../images/svg-simple-clipPath-ref.png">
|
||||
|
|
@ -12,4 +12,4 @@
|
|||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/svg-text-effects-ref.png">
|
||||
<img src="../images/svg-text-effects-ref.png">
|
||||
|
|
@ -12,4 +12,4 @@
|
|||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/svg-textPath-ref.png">
|
||||
<img src="../images/svg-textPath-ref.png">
|
||||
|
|
@ -6,4 +6,4 @@ body {
|
|||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<img src="./images/text-decorations.png">
|
||||
<img src="../images/text-decorations.png">
|
||||
|
|
@ -6,4 +6,4 @@ body {
|
|||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<img src="./images/text-shadow-ref.png">
|
||||
<img src="../images/text-shadow-ref.png">
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
}
|
||||
.svg-rect {
|
||||
background-size: 34%;
|
||||
background-image: url(assets/vertical-rect.svg);
|
||||
background-image: url(./assets/vertical-rect.svg);
|
||||
}
|
||||
img {
|
||||
width: 100px;
|
||||
|
|
@ -21,4 +21,4 @@
|
|||
}
|
||||
</style>
|
||||
<div class="svg-rect"></div>
|
||||
<body><span></span><img src="assets/vertical-rect.svg">
|
||||
<body><span></span><img src="./assets/vertical-rect.svg">
|
||||
|
Before Width: | Height: | Size: 574 B After Width: | Height: | Size: 574 B |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |