blob: 6cf96963fabe56402b4f4ef44c1a40b3e46b83c4 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!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>
|
