mirror of
https://github.com/servo/servo
synced 2026-05-11 09:26:59 +02:00
38 lines
1.8 KiB
HTML
38 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>CSS Test (Transforms): Transform of Background Image (propagated body with root element transform)</title>
|
|
<link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name">
|
|
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering">
|
|
<link rel="reviewer" title="Apple Inc." href="http://www.apple.com">
|
|
<meta name="assert" content='"If the root element is transformed, the
|
|
transformation applies to the entire canvas, including any background
|
|
specified for the root element. Since the background painting area for the
|
|
root element is the entire canvas, which is infinite, the transformation
|
|
might cause parts of the background that were originally off-screen to
|
|
appear. For example, if the root element's background were repeating
|
|
dots, and a transformation of 'scale(0.5)' were specified on the
|
|
root element, the dots would shrink to half their size, but there will be
|
|
twice as many, so they still cover the whole viewport." In this case, the
|
|
background is specified on the body but propagates to the root element.
|
|
The transform is on the root element, so it needs to affect the background.
|
|
The rotation 90 degrees clockwise means that most of the screen will be
|
|
filled with triangles that were originally above the top of the viewport;
|
|
the original top row of triangles will now be on the left.'>
|
|
<meta name="flags" content="svg">
|
|
<link rel="match" href="transform-background-ref-2.html">
|
|
<style>
|
|
html {
|
|
overflow: hidden;
|
|
transform: rotate(90deg);
|
|
transform-origin: 50px 50px;
|
|
}
|
|
body {
|
|
background: url(support/transform-triangle-left.svg);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
</body>
|
|
</html>
|