Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(539)

Side by Side Diff: LayoutTests/imported/csswg-test/css-shapes-1/spec-examples/shape-outside-008.html

Issue 816533002: Import CSSWG Shapes tests (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: One more test expectations update Created 6 years ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>CSS Test: Shape smaller than float content area - 2 floats</title>
5 <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
6 <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#relation-to-box-mo del-and-float-behavior"/>
7 <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-sh apes"/>
8 <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-prop erty"/>
9 <link rel="match" href="reference/shape-outside-008-ref.html"/>
10 <meta name="flags" content="ahem"/>
11 <meta name="assert" content="This test verifies that inline content only wra ps around the
12 shapes, and otherwise overlays the rest of the float margin
13 boxes when two floats are stacked next to each other."/>
14 <!-- This test is derived from Example 5 in this version of the spec:
15 http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/ -->
16 <style type="text/css">
17 .container {
18 width: 260px;
19 font-family: Ahem;
20 font-size: 15px;
21 line-height: 2em;
22 border: 1px solid black;
23 padding-left: 2px;
24 }
25 #test {
26 color: green;
27 }
28 .test-float-left {
29 shape-outside: polygon(0 70px, 50px 120px, 0 120px);
30 float: left;
31 width: 100px;
32 height: 100px;
33 margin-top: 20px;
34 }
35 #test, #failure-container {
36 position: absolute;
37 top: 70px;
38 }
39 #margin-line {
40 position: absolute;
41 top: 100px;
42 width: 263px;
43 border-bottom: 1px solid black;
44 }
45 .fail {
46 position: absolute;
47 height: 15px;
48 background-color: red;
49 z-index: -1;
50 }
51 #bar-1 {
52 top: 8px;
53 left: 3px;
54 width: 255px;
55 }
56 #bar-2 {
57 top: 38px;
58 left: 3px;
59 width: 255px;
60 }
61 #bar-3 {
62 top: 68px;
63 left: 23px;
64 width: 225px;
65 }
66 #bar-4 {
67 top: 98px;
68 left: 123px;
69 width: 135px;
70 }
71 #bar-5 {
72 top: 128px;
73 left: 153px;
74 width: 105px;
75 }
76 .triangle {
77 position: absolute;
78 width: 100px;
79 height: 100px;
80 background-color: lightblue;
81 clip-path: polygon(0% 50%, 50% 100%, 0 100%);;
82
83 }
84 #triangle-1 {
85 top: 90px;
86 margin-left: 2px;
87 }
88 #triangle-2 {
89 top: 120px;
90 margin-left: 102px;
91 }
92 </style>
93 </head>
94 <body>
95 <p>
96 The test passes if one green bar is inside the top rectangle, four gre en bars
97 are in the bottom rectangle, and none intersect the triangles. There s hould be no
98 red.
99 </p>
100 <div id="test" class="container">
101 <div class="test-float-left"></div>
102 XXXXXXXXXXXXXXXXX
103 <div class="test-float-left"></div>
104 XXXXXXXXXXXXXXXXX
105 XXXXXXXXXXXXXXX
106 XXXXXXXXX
107 XXXXXXX
108 </div>
109 <div id="margin-line"></div>
110 <div id="failure-container">
111 <div id="bar-1" class="fail"></div>
112 <div id="bar-2" class="fail"></div>
113 <div id="bar-3" class="fail"></div>
114 <div id="bar-4" class="fail"></div>
115 <div id="bar-5" class="fail"></div>
116 </div>
117 <div id="triangle-1" class="triangle"></div>
118 <div id="triangle-2" class="triangle"></div>
119 </body>
120 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698