forked from mirrors/gecko-dev
d709fcf998
Automatic update from web-platform-tests Increase allowed fuzziness for perspective-transforms-equivalence.html. This increases the fuzziness to match what is shown for Chrome on Linux (which requires the larger maxDifference) and Edge on Windows (which requires the larger totalPixels) on wpt.fyi, and hopefully fixes running with wptrunner on our test platforms. (I'm not entirely sure why this bug number is associated, but it's the one tracked by wpt.fyi's data and in at least one tracking spreadsheet.) See https://wpt.fyi/results/css/css-transforms/perspective-transforms-equivalence.html Bug: 1076121 Change-Id: I012e3ff01a312078f0c7ffe0b0c86099afdb8bb1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4305181 Auto-Submit: David Baron <dbaron@chromium.org> Reviewed-by: Vladimir Levin <vmpstr@chromium.org> Commit-Queue: Vladimir Levin <vmpstr@chromium.org> Cr-Commit-Position: refs/heads/main@{#1112792} -- wpt-commits: c00861eb3cb5c817dd7705c48803d12f81db2e68 wpt-pr: 38796
52 lines
1.5 KiB
HTML
52 lines
1.5 KiB
HTML
<!doctype HTML>
|
|
<meta charset="utf8">
|
|
<title>Perspective with transforms equivalencies.</title>
|
|
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
|
|
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#perspective-property">
|
|
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
|
|
<link rel="match" href="perspective-transforms-equivalence-ref.html">
|
|
<!--
|
|
Perspective with different transforms can have small anti-aliasing
|
|
pixel differences, so the test should fuzzy patch to the ref.
|
|
-->
|
|
<meta name="fuzzy" content="maxDifference=0-94;totalPixels=0-538">
|
|
<style>
|
|
|
|
#container {
|
|
transform: translate(-200px, -200px);
|
|
width: 500px;
|
|
height: 500px;
|
|
perspective: 500px;
|
|
}
|
|
|
|
#container > div {
|
|
width: 100%;
|
|
height: 100%;
|
|
transform-style: preserve-3d;
|
|
transform: translateZ(-250px) rotateZ(45deg);
|
|
}
|
|
|
|
#container > div > div {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
background-color: rgba(3, 121, 255, 0.3);
|
|
box-sizing: border-box;
|
|
border: 3px solid black;
|
|
}
|
|
|
|
/* The following four should be equivalent. */
|
|
#one { transform: rotateY(90deg) translateZ(250px); }
|
|
#two { transform: rotateZ(90deg) rotateX(90deg) translateZ(250px); }
|
|
#three { transform: rotateY(-90deg) translateZ(-250px); }
|
|
#four { transform: rotateZ(-90deg) rotateX(90deg) translateZ(-250px); }
|
|
</style>
|
|
|
|
<div id="container">
|
|
<div>
|
|
<div id="one"></div>
|
|
<div id="two"></div>
|
|
<div id="three"></div>
|
|
<div id="four"></div>
|
|
</div>
|
|
</div>
|