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

Side by Side Diff: LayoutTests/fast/shapes/shape-inside/shape-inside-box-sizing.html

Issue 209443007: Remove shape-inside support (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Remove now unused segmentIsEmpty Created 6 years, 9 months 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
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 .border {
6 border-left: 5px solid blue;
7 border-top: 10px solid blue;
8 border-right: 15px solid blue;
9 border-bottom: 20px solid blue;
10 width: 50px;
11 height: 70px;
12 border-style: solid;
13 }
14 .padding {
15 padding: 10px 15px 20px 5px;
16 }
17 .border-box {
18 -webkit-box-sizing: border-box;
19 }
20 .border-box.border {
21 width: 70px;
22 height: 100px;
23 }
24 .border-box.border.padding {
25 width: 90px;
26 height: 130px;
27 }
28 .shape-inside {
29 shape-inside: polygon(5px 10px, 35px 10px, 35px 50px, 5px 50px);
30 font-family: Ahem, sans-serif;
31 font-size: 10px;
32 color: green;
33 }
34 .border-box.shape-inside {
35 shape-inside: polygon(10px 20px, 40px 20px, 40px 60px, 10px 60px) border -box;
36 }
37 .border-box.border.padding.shape-inside {
38 shape-inside: polygon(15px 30px, 45px 30px, 45px 70px, 15px 70px) border -box;
39 }
40 .vertical-lr {
41 -webkit-writing-mode: vertical-lr;
42 }
43 .vertical-rl {
44 -webkit-writing-mode: vertical-rl;
45 }
46 .horizontal-tb {
47 -webkit-writing-mode: horizontal-tb;
48 }
49 </style>
50 </head>
51 <body>
52 <p>These tests check that shape inside correctly offsets from the correct bo x. They require the Ahem font.</p>
53 <p>The following tests check writing modes on a box with a 5 10 15 20px blue border, and 5 10 15 20px shape offsets.</p>
54 <div class='border shape-inside horizontal-tb'>
55 xxx xxx xxx xxx
56 </div>
57 <div class='border shape-inside vertical-lr'>
58 xxxx xxxx xxxx
59 </div>
60 <div class='border shape-inside vertical-rl'>
61 xxxx xxxx xxxx
62 </div>
63 <p>The following tests should look the same, but use box-sizing: border-box. </p>
64 <div class='border-box border shape-inside horizontal-tb'>
65 xxx xxx xxx xxx
66 </div>
67 <div class='border-box border shape-inside vertical-lr'>
68 xxxx xxxx xxxx
69 </div>
70 <div class='border-box border shape-inside vertical-rl'>
71 xxxx xxxx xxxx
72 </div>
73 <p>The following tests add 5 10 15 20px of padding.</p>
74 <div class='border padding shape-inside horizontal-tb'>
75 xxx xxx xxx xxx
76 </div>
77 <div class='border padding shape-inside vertical-lr'>
78 xxxx xxxx xxxx
79 </div>
80 <div class='border padding shape-inside vertical-rl'>
81 xxxx xxxx xxxx
82 </div>
83 <p>The following tests should look the same, but use box-sizing: border-box. </p>
84 <div class='border-box border padding shape-inside horizontal-tb'>
85 xxx xxx xxx xxx
86 </div>
87 <div class='border-box border padding shape-inside vertical-lr'>
88 xxxx xxxx xxxx
89 </div>
90 <div class='border-box border padding shape-inside vertical-rl'>
91 xxxx xxxx xxxx
92 </div>
93 </body>
94 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698