Xianzhu Wang
76344df3e1
Automatic update from web-platform-tests Align pixels through render surfaces when possible This eliminates the misalignment between textures under the render surface and the screen pixels, when possible. If a render surface has a non-integral translation, the fraction is subtracted from the render surface's draw transform to make the translation integral, and the fraction will be passed to contributing render surfaces and layers: - For a contributing render surface, the fraction will be added before the contributing surface's draw transform calculated from paint properties; - For a layer, the fraction will be added before the layer's draw transform, and the fraction of the result draw transform will be used to calculate the raster translation (existing logic to align pixels in layers with non-integral translation). Bug: 40892376 Change-Id: Iac7578b0150f43f6136818ba699a8a3ff82f5127 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6043172 Reviewed-by: Vladimir Levin <vmpstr@chromium.org> Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org> Cr-Commit-Position: refs/heads/main@{#1419595} -- wpt-commits: 5c736da5b5ee45bf9404e9443ac3387e84f147ac wpt-pr: 50670
60 lines
1.8 KiB
HTML
60 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>CSS Transforms Test: transform property with backface visibility = hidden</title>
|
|
<link rel="author" title="Jian Zhang" href="mailto:jian.andy.zhang@gmail.com">
|
|
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
|
|
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility">
|
|
<link rel="match" href="reference/backface-visibility-hidden-ref.html">
|
|
<meta name="fuzzy" content="maxDifference=0-100;totalPixels=0-300">
|
|
<meta name="assert" content="When the value of backface visibility property is 'hidden', the back side of a transformed element is invisible when facing the viewer.">
|
|
<style type="text/css">
|
|
.greenSquare {
|
|
position: absolute;
|
|
top: 50px;
|
|
left: 50px;
|
|
width: 100px;
|
|
height: 100px;
|
|
background: green;
|
|
z-index: 2;
|
|
}
|
|
|
|
.redSquare {
|
|
position: absolute;
|
|
top: 50px;
|
|
left: 50px;
|
|
width: 100px;
|
|
height: 100px;
|
|
background: red;
|
|
z-index: 1;
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
.face {
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
.card {
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.container {
|
|
width: 200px;
|
|
height: 200px;
|
|
perspective: 1000px;
|
|
transform: rotateY(45deg);
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p>The test passes if there is a green retangle and no red.</p>
|
|
<div class="container">
|
|
<div class="card">
|
|
<div class="redSquare face"></div>
|
|
<div class="greenSquare face"></div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|