mirror of
https://github.com/servo/servo.git
synced 2025-08-10 07:55:33 +01:00
Update web-platform-tests to revision b'468d01bbd84da2babf265c6af46947be68713440'
This commit is contained in:
parent
35e95f55a1
commit
58e8ee674b
9438 changed files with 266112 additions and 106976 deletions
|
@ -1,9 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Ethan Malasky" href="mailto:emalasky@adobe.com">
|
||||
<meta name="flags" content="ahem image">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<link rel="preload" as="image" href="../support/cat.png" onload="takeScreenshot()" />
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style type="text/css">
|
||||
#content {
|
||||
|
|
|
@ -1,5 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<meta name="flags" content="ahem image">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<link rel="preload" as="image" href="../support/cat.png" onload="takeScreenshot()" />
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style type="text/css">
|
||||
#content {
|
||||
|
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Consistent image fidelity of background-image with border-radius (reference)</title>
|
||||
<style>
|
||||
#target {
|
||||
background-image: url("../support/aqua-yellow-32x32.png");
|
||||
background-size: 100% 100%;
|
||||
border-radius: 8px;
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
}
|
||||
</style>
|
||||
<div id="target" style="background-clip: padding-box"></div>
|
|
@ -1,15 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Reference File</title>
|
||||
<link rel="author" title="Ren Jing" href="mailto:reni2046@gmail.com">
|
||||
<style type="text/css">
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if diamonds in corners are red, and other diamonds are orange, there are 4 orange diamonds on each side.</p>
|
||||
<div class="container">
|
||||
<img class="result-image" alt="border-image-round-result" src="../support/border-image-round-result.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<title>CSS Border Image: border-image-repeat: round (reference)</title>
|
||||
<style type="text/css">
|
||||
.container {
|
||||
position: relative;
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
}
|
||||
.container > div {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-image: url("../support/border.png");
|
||||
background-size: 48px 48px;
|
||||
}
|
||||
.top { top: 0; }
|
||||
.right { left: 80px; }
|
||||
.bottom { top: 80px; }
|
||||
.left { left: 0; }
|
||||
.top-left-corner-tile { background-position: 0px 0px; }
|
||||
.top-edge-tile { background-position: -16px 0px; }
|
||||
.top-right-corner-tile { background-position: -32px 0px; }
|
||||
.left-edge-tile { background-position: 0px -16px; }
|
||||
.right-edge-tile { background-position: -32px -16px; }
|
||||
.bottom-left-corner-tile { background-position: 0px -32px; }
|
||||
.bottom-edge-tile { background-position: -16px -32px; }
|
||||
.bottom-right-corner-tile { background-position: -32px -32px; }
|
||||
.h-pos-0 { left: 16px; }
|
||||
.h-pos-1 { left: 32px; }
|
||||
.h-pos-2 { left: 48px; }
|
||||
.h-pos-3 { left: 64px; }
|
||||
.v-pos-0 { top: 16px; }
|
||||
.v-pos-1 { top: 32px; }
|
||||
.v-pos-2 { top: 48px; }
|
||||
.v-pos-3 { top: 64px; }
|
||||
</style>
|
||||
<p>The test passes if diamonds in corners are red, and other diamonds are orange, there are 4 orange diamonds on each side.</p>
|
||||
<div class="container">
|
||||
<div class="top left top-left-corner-tile"></div>
|
||||
<div class="top top-edge-tile h-pos-0"></div>
|
||||
<div class="top top-edge-tile h-pos-1"></div>
|
||||
<div class="top top-edge-tile h-pos-2"></div>
|
||||
<div class="top top-edge-tile h-pos-3"></div>
|
||||
<div class="top right top-right-corner-tile"></div>
|
||||
<div class="right right-edge-tile v-pos-0"></div>
|
||||
<div class="right right-edge-tile v-pos-1"></div>
|
||||
<div class="right right-edge-tile v-pos-2"></div>
|
||||
<div class="right right-edge-tile v-pos-3"></div>
|
||||
<div class="bottom right bottom-right-corner-tile"></div>
|
||||
<div class="bottom bottom-edge-tile h-pos-0"></div>
|
||||
<div class="bottom bottom-edge-tile h-pos-1"></div>
|
||||
<div class="bottom bottom-edge-tile h-pos-2"></div>
|
||||
<div class="bottom bottom-edge-tile h-pos-3"></div>
|
||||
<div class="bottom left bottom-left-corner-tile"></div>
|
||||
<div class="left left-edge-tile v-pos-0"></div>
|
||||
<div class="left left-edge-tile v-pos-1"></div>
|
||||
<div class="left left-edge-tile v-pos-2"></div>
|
||||
<div class="left left-edge-tile v-pos-3"></div>
|
||||
</div>
|
||||
|
|
|
@ -1,18 +1,104 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Reference File</title>
|
||||
<link rel="author" title="Ren Jing" href="mailto:reni2046@gmail.com">
|
||||
<style type="text/css">
|
||||
.result-image {
|
||||
width:224px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if orange diamonds on top and bottom border repeat 12 times, and orange diamonds on left and right border are stretched, diamonds in corners are red, and other diamonds are orange.</p>
|
||||
<div class="container">
|
||||
<img class="result-image" alt="border-image-result" src="../support/borderresult.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<title>CSS Border Image: border-image-repeat: round and stretch (reference)</title>
|
||||
<style type="text/css">
|
||||
.container {
|
||||
position: relative;
|
||||
width: 224px;
|
||||
height: 109px;
|
||||
}
|
||||
.container > div {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
background-image: url("../support/border.png");
|
||||
}
|
||||
.top { top: 0; }
|
||||
.right { left: 208px; }
|
||||
.bottom { top: 93px; }
|
||||
.left { left: 0; }
|
||||
.top-left-corner-tile {
|
||||
background-position: 0px 0px;
|
||||
background-size: 48px 48px;
|
||||
height: 16px;
|
||||
}
|
||||
.top-edge-tile {
|
||||
background-position: -16px 0px;
|
||||
background-size: 48px 48px;
|
||||
height: 16px;
|
||||
}
|
||||
.top-right-corner-tile {
|
||||
background-position: -32px 0px;
|
||||
background-size: 48px 48px;
|
||||
height: 16px;
|
||||
}
|
||||
.left-edge-tile {
|
||||
background-position: 0px -77px;
|
||||
background-size: 48px 231px;
|
||||
height: 77px;
|
||||
}
|
||||
.right-edge-tile {
|
||||
background-position: -32px -77px;
|
||||
background-size: 48px 231px;
|
||||
height: 77px;
|
||||
}
|
||||
.bottom-left-corner-tile {
|
||||
background-position: 0px -32px;
|
||||
background-size: 48px 48px;
|
||||
height: 16px;
|
||||
}
|
||||
.bottom-edge-tile {
|
||||
background-position: -16px -32px;
|
||||
background-size: 48px 48px;
|
||||
height: 16px;
|
||||
}
|
||||
.bottom-right-corner-tile {
|
||||
background-position: -32px -32px;
|
||||
background-size: 48px 48px;
|
||||
height: 16px;
|
||||
}
|
||||
.h-pos-0 { left: 16px; }
|
||||
.h-pos-1 { left: 32px; }
|
||||
.h-pos-2 { left: 48px; }
|
||||
.h-pos-3 { left: 64px; }
|
||||
.h-pos-4 { left: 80px; }
|
||||
.h-pos-5 { left: 96px; }
|
||||
.h-pos-6 { left: 112px; }
|
||||
.h-pos-7 { left: 128px; }
|
||||
.h-pos-8 { left: 144px; }
|
||||
.h-pos-9 { left: 160px; }
|
||||
.h-pos-10 { left: 176px; }
|
||||
.h-pos-11 { left: 192px; }
|
||||
.v-pos-0 { top: 16px; }
|
||||
</style>
|
||||
<p>The test passes if orange diamonds on top and bottom border repeat 12 times, and orange diamonds on left and right border are stretched, diamonds in corners are red, and other diamonds are orange.</p>
|
||||
<div class="container">
|
||||
<div class="top left top-left-corner-tile"></div>
|
||||
<div class="top top-edge-tile h-pos-0"></div>
|
||||
<div class="top top-edge-tile h-pos-1"></div>
|
||||
<div class="top top-edge-tile h-pos-2"></div>
|
||||
<div class="top top-edge-tile h-pos-3"></div>
|
||||
<div class="top top-edge-tile h-pos-4"></div>
|
||||
<div class="top top-edge-tile h-pos-5"></div>
|
||||
<div class="top top-edge-tile h-pos-6"></div>
|
||||
<div class="top top-edge-tile h-pos-7"></div>
|
||||
<div class="top top-edge-tile h-pos-8"></div>
|
||||
<div class="top top-edge-tile h-pos-9"></div>
|
||||
<div class="top top-edge-tile h-pos-10"></div>
|
||||
<div class="top top-edge-tile h-pos-11"></div>
|
||||
<div class="top right top-right-corner-tile"></div>
|
||||
<div class="right right-edge-tile v-pos-0"></div>
|
||||
<div class="bottom right bottom-right-corner-tile"></div>
|
||||
<div class="bottom bottom-edge-tile h-pos-0"></div>
|
||||
<div class="bottom bottom-edge-tile h-pos-1"></div>
|
||||
<div class="bottom bottom-edge-tile h-pos-2"></div>
|
||||
<div class="bottom bottom-edge-tile h-pos-3"></div>
|
||||
<div class="bottom bottom-edge-tile h-pos-4"></div>
|
||||
<div class="bottom bottom-edge-tile h-pos-5"></div>
|
||||
<div class="bottom bottom-edge-tile h-pos-6"></div>
|
||||
<div class="bottom bottom-edge-tile h-pos-7"></div>
|
||||
<div class="bottom bottom-edge-tile h-pos-8"></div>
|
||||
<div class="bottom bottom-edge-tile h-pos-9"></div>
|
||||
<div class="bottom bottom-edge-tile h-pos-10"></div>
|
||||
<div class="bottom bottom-edge-tile h-pos-11"></div>
|
||||
<div class="bottom left bottom-left-corner-tile"></div>
|
||||
<div class="left left-edge-tile v-pos-0"></div>
|
||||
</div>
|
||||
|
|
|
@ -1,15 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Reference File</title>
|
||||
<link rel="author" title="Ren Jing" href="mailto:reni2046@gmail.com">
|
||||
<style type="text/css">
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if diamonds in corners are red, and other diamonds are orange, there are 4 orange diamonds on each side.</p>
|
||||
<div class="container">
|
||||
<img class="result-image" alt="border-image-round-result" src="../support/border-image-round-result.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
Loading…
Add table
Add a link
Reference in a new issue