mirror of
https://github.com/servo/servo
synced 2026-04-28 18:37:39 +02:00
37 lines
1.9 KiB
HTML
37 lines
1.9 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
|
<title>CSS Test (Transforms): Transform of Background Image (propagated body with root element transform)</title>
|
|
<link href="mailto:ayg@aryeh.name" rel="author" title="Aryeh Gregor" />
|
|
<link href="http://www.w3.org/TR/css-transforms-1/#transform-rendering" rel="help" />
|
|
<link href="http://www.apple.com" rel="reviewer" title="Apple Inc." />
|
|
<meta 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." name="assert" />
|
|
<meta content="svg" name="flags" />
|
|
<link href="reference/transform-background-ref-2.xht" rel="match" />
|
|
<style>
|
|
html {
|
|
overflow: hidden;
|
|
transform: rotate(90deg);
|
|
transform-origin: 50px 50px;
|
|
}
|
|
body {
|
|
background: url(support/transform-triangle-left.svg);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
</body></html> |