mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-28 02:27:19 +02:00
d2528dd5ce
Instead of rendering a reference HTML page that wraps an <img> tag pointing to a PNG, Screenshot tests now load the expected PNG directly from disk and compare it against the rendered screenshot. This eliminates the indirection of loading and rendering a second page just to display a static image. This also means --rebaseline now works for Screenshot tests, generating the expected PNG automatically instead of requiring manual screenshot capture and placement. Changes: - Add TestMode::Screenshot with its own collector and runner - Move PNGs from Screenshot/images/ to Screenshot/expected/ with normalized names matching input filenames - Remove all 92 reference HTML wrapper files and the images/ directory - Remove <link rel="match"> from all 94 Screenshot input HTML files - Update add_libweb_test.py Screenshot boilerplate accordingly - Add Screenshot mode to results viewer image comparison tabs
117 lines
6.4 KiB
HTML
117 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>CSS background-position tests</title>
|
|
<style>
|
|
.example {
|
|
width: 100px;
|
|
height: 100px;
|
|
border: 1px solid black;
|
|
overflow: auto;
|
|
margin-bottom: 10px;
|
|
background: url("../data/smiley.png") bottom right no-repeat;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- FIXME: Workaround to ensure CSS background-image is loaded before taking screenshot: https://github.com/LadybirdBrowser/ladybird/issues/3448 -->
|
|
<img src="../data/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>
|