← Back to branch summary

~ubuntu-branches/ubuntu/raring/qtwebkit-source/raring-proposed

« back to all changes in this revision

Viewing changes to ManualTests/computed-transform-value.html

  • Committer: Package Import Robot
  • Author(s): Jonathan Riddell
  • Date: 2013-02-18 14:24:18 UTC
  • Revision ID: package-import@ubuntu.com-20130218142418-eon0jmjg3nj438uy
Tags: upstream-2.3
Import upstream version 2.3

Show diffs side-by-side

added added

removed removed

Lines of Context:
ManualTests/computed-transform-value.html
 
1
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 
2
   "http://www.w3.org/TR/html4/loose.dtd">
 
3
 
 
4
<html lang="en">
 
5
<head>
 
6
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
7
    <title>Get Computed Transform</title>
 
8
    <style type="text/css" media="screen">
 
9
    .box {
 
10
        height: 200px;
 
11
        width: 200px;
 
12
        background-color: #00a0a0;
 
13
    }
 
14
    </style>
 
15
    <script type="text/javascript" charset="utf-8">
 
16
        function printTransform(event)
 
17
        {
 
18
            var box = event.target;
 
19
            var computedTransform = window.getComputedStyle(box).webkitTransform;
 
20
            document.getElementById("output").innerHTML = 'Computed transform is ' + computedTransform;
 
21
        }
 
22
        
 
23
    </script>
 
24
</head>
 
25
<body onclick="printTransform(event)">
 
26
 
 
27
<h1>Testing transform computed style</h1>
 
28
<p>All boxes are 200x200 pixels. When you click on an element, the computed transform style will be displayed below</p>
 
29
<p id="output">Computed style for -webkit-transform displayed here</p>
 
30
 
 
31
 
 
32
<div class="box" style="position: absolute; left: 100px; top: 200px; -webkit-transform: scale(1.5, 0.75)">
 
33
  scale(1.5, 0.75)
 
34
</div>
 
35
 
 
36
<div class="box" style="position: absolute; left: 400px; top: 200px; -webkit-transform: rotate(30deg)">
 
37
  rotate(30deg)
 
38
</div>
 
39
 
 
40
<div class="box" style="position: absolute; left: 100px; top: 400px; -webkit-transform: translate(50px, 80px)">
 
41
  translate(50px, 80px)
 
42
</div>
 
43
 
 
44
<div class="box" style="position: absolute; left: 400px; top: 400px; -webkit-transform: translate(10px, 50px) scale(0.8) rotate(-10deg)">
 
45
  translate(10px, 50px) scale(0.8) rotate(-10deg)
 
46
</div>
 
47
 
 
48
</body>
 
49
</html>