Update web-platform-tests to revision b'468d01bbd84da2babf265c6af46947be68713440'

This commit is contained in:
WPT Sync Bot 2021-09-07 11:16:33 +00:00 committed by cybai
parent 35e95f55a1
commit 58e8ee674b
9438 changed files with 266112 additions and 106976 deletions

View file

@ -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 {

View file

@ -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 {

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>