e153562c207d7e13485882c96c3f58bf34f2a3ba
[WebKit-https.git] / LayoutTests / inspector-protocol / model / highlight-shape-outside.html
1 <html>
2 <head>
3 <style>
4 body {
5     margin: 0;
6 }
7 .shape {
8     float: left;
9     width: 200px;
10     height: 200px;
11     margin-right: -200px;
12 }
13 .padded {
14     width: 100px;
15     height: 100px;
16     padding: 25px 75px 75px 25px;
17 }
18 .border-box {
19     box-sizing: border-box;
20 }
21 .vertical-lr {
22     -webkit-writing-mode: vertical-lr;
23 }
24 .vertical-rl {
25     -webkit-writing-mode: vertical-rl;
26 }
27 .rectangle {
28     -webkit-shape-outside: rectangle(50px, 50px, 100px, 50px);
29 }
30 .polygon {
31     -webkit-shape-outside: polygon(50px 50px, 100px 50px, 100px 100px, 50px 100px);
32 }
33 </style>
34 <script type="text/javascript" src="../../http/tests/inspector-protocol/resources/protocol-test.js"></script>
35 <script type="text/javascript" src="../resources/shape-info-helper.js"></script>
36 <script>
37 function shapeTests() {
38     var tests = [
39     {
40         'selector' : '.rectangle',
41         'path' : ['M', 50, 50, 'L', 150, 50, 'L', 150, 100, 'L', 50, 100, 'L', 50, 50, 'Z']
42     },
43     {
44         'selector' : '.polygon',
45         'path' : ['M', 50, 50, 'L', 100, 50, 'L', 100, 100, 'L', 50, 100, 'Z']
46     },
47     {
48         'selector' : '.rectangle.padded',
49         'path' : ['M', 75, 75, 'L', 175, 75, 'L', 175, 125, 'L', 75, 125, 'L', 75, 75, 'Z']
50     },
51     {
52         'selector' : '.rectangle.padded.border-box',
53         'path' : ['M', 50, 50, 'L', 150, 50, 'L', 150, 100, 'L', 50, 100, 'L', 50, 50, 'Z']
54     },
55     {
56         'selector' : '.rectangle.vertical-lr',
57         'path' : ['M', 50, 50, 'L', 150, 50, 'L', 150, 100, 'L', 50, 100, 'L', 50, 50, 'Z']
58     },
59     {
60         'selector' : '.rectangle.vertical-rl',
61         'path' : ['M', 50, 50, 'L', 150, 50, 'L', 150, 100, 'L', 50, 100, 'L', 50, 50, 'Z']
62     },
63     {
64         'selector' : '.rectangle.padded.vertical-rl',
65         'path' : ['M', 75, 75, 'L', 175, 75, 'L', 175, 125, 'L', 75, 125, 'L', 75, 75, 'Z']
66     },
67     {
68         'selector' : '.rectangle.padded.vertical-rl.border-box',
69         'path' : ['M', 50, 50, 'L', 150, 50, 'L', 150, 100, 'L', 50, 100, 'L', 50, 50, 'Z']
70     }
71     ];
72
73     function doTests(tests) {
74         if (!tests.length) {
75             InspectorTest.completeTest();
76             return;
77         }
78         var test = tests[0];
79         tests = tests.splice(1);
80         InspectorTest.shapeOutsideInfo(test.selector, function(shapeOutside) {
81             var actual = shapeOutside.path.join(' ');
82             var expected = test.path.join(' ');
83             InspectorTest.assert(actual === expected, "Actual [" + actual + "] Expected [" + expected + "]");
84             doTests(tests);
85         });
86     }
87
88     doTests(tests);
89 }
90 window.onload = function() { ShapeInfoHelper.runShapeTest(shapeTests); }
91 </script>
92 </head>
93 <body>
94     <div class='shape rectangle'></div>
95     <div class='shape polygon'></div>
96     <div class='shape padded rectangle'></div>
97     <div class='shape padded rectangle border-box'></div>
98     <div class='shape rectangle vertical-lr'></div>
99     <div class='shape rectangle vertical-rl'></div>
100     <div class='shape padded rectangle vertical-rl'></div>
101     <div class='shape padded rectangle vertical-rl border-box'></div>
102 </body>
103 </html>