Chromium Code Reviews

Side by Side Diff: LayoutTests/fast/shapes/shape-inside/shape-inside-recursive-layout.html

Issue 19865002: [CSS Shapes] Port shape-inside on regions and shape's content overflow from WebKit (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: [CSS Shapes] Port shape-inside on regions and shape's content overflow from WebKit Created 7 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff |
« no previous file with comments | « LayoutTests/fast/shapes/shape-inside/shape-inside-percentage-expected.html ('k') | LayoutTests/fast/shapes/shape-inside/shape-inside-recursive-layout-expected.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <script src='../resources/simple-rectangle.js'></script> 4 <script src='../resources/simple-rectangle.js'></script>
5 <style id='stylesheet'> 5 <style id='stylesheet'>
6 .content { 6 .content {
7 font: 50px/1 Ahem, sans-serif; 7 font: 50px/1 Ahem, sans-serif;
8 color: green; 8 color: green;
9 word-break: break-all; 9 word-break: break-all;
10 width: 100px; 10 width: 100px;
(...skipping 14 matching lines...)
25 #table table { 25 #table table {
26 display: inline-table; 26 display: inline-table;
27 border-collapse: collapse; 27 border-collapse: collapse;
28 } 28 }
29 #table tr { 29 #table tr {
30 dispay: inline-table; 30 dispay: inline-table;
31 } 31 }
32 #table td, #table tr { 32 #table td, #table tr {
33 padding: 0; margin: 0; 33 padding: 0; margin: 0;
34 } 34 }
35 #old-flexbox { 35 #old-flexbox * {
36 display: -webkit-inline-box; 36 display: -webkit-inline-box;
37 } 37 }
38 #new-flexbox { 38 #new-flexbox * {
39 display: -webkit-inline-flex; 39 display: -webkit-inline-flex;
40 } 40 }
41 #grid {
42 display: -webkit-inline-grid;
43 -webkit-grid-rows: 100px;
44 -webkit-grid-columns: 100px;
45 }
46 #grid > .content {
47 -webkit-grid-row: 1;
48 -webkit-grid-column: 1;
49 }
50 </style> 41 </style>
51 <script> 42 <script>
52 window.onload = function() { 43 window.onload = function() {
53 var elementBounds = { width: 200, height: 200 }; 44 var elementBounds = { width: 200, height: 200 };
54 var shapeBounds = { x: 50, y: 50, width: 100, height: 100 }; 45 var shapeBounds = { x: 50, y: 50, width: 100, height: 100 };
55 createRectangleTest('inline-block', 'stylesheet', elementBounds, shapeBounds , 'px'); 46 createRectangleTest('inline-block', 'stylesheet', elementBounds, shapeBounds , 'px');
56 createRectangleTest('float', 'stylesheet', elementBounds, shapeBounds, 'px') ; 47 createRectangleTest('float', 'stylesheet', elementBounds, shapeBounds, 'px') ;
57 createRectangleTest('list', 'stylesheet', elementBounds, shapeBounds, 'px'); 48 createRectangleTest('list', 'stylesheet', elementBounds, shapeBounds, 'px');
58 createRectangleTest('table', 'stylesheet', elementBounds, shapeBounds, 'px') ; 49 createRectangleTest('table', 'stylesheet', elementBounds, shapeBounds, 'px') ;
59 createRectangleTest('old-flexbox', 'stylesheet', elementBounds, shapeBounds, 'px'); 50 createRectangleTest('old-flexbox', 'stylesheet', elementBounds, shapeBounds, 'px');
60 createRectangleTest('new-flexbox', 'stylesheet', elementBounds, shapeBounds, 'px'); 51 createRectangleTest('new-flexbox', 'stylesheet', elementBounds, shapeBounds, 'px');
61 createRectangleTest('grid', 'stylesheet', elementBounds, shapeBounds, 'px');
62 } 52 }
63 </script> 53 </script>
64 </head> 54 </head>
65 <body> 55 <body>
66 <p>This set of tests ensures that basic recursive layouts with inline-block elem ents 56 <p>This set of tests ensures that basic recursive layouts with inline-block elem ents
67 function correctly with shape-inside. They require the Ahem font, and should eac h display 57 function correctly with shape-inside. They require the Ahem font, and should eac h display
68 a green square within a blue border.</p> 58 a green square within a blue border.</p>
69 59
70 <p>Inline-block div</p> 60 <p>Inline-block div</p>
71 <div id='inline-block'> 61 <div id='inline-block'>
(...skipping 23 matching lines...)
95 85
96 <p>Old flexbox</p> 86 <p>Old flexbox</p>
97 <div id='old-flexbox'> 87 <div id='old-flexbox'>
98 <div class='content'>xxxx</div> 88 <div class='content'>xxxx</div>
99 </div> 89 </div>
100 90
101 <p>New flexbox</p> 91 <p>New flexbox</p>
102 <div id='new-flexbox'> 92 <div id='new-flexbox'>
103 <div class='content'>xxxx</div> 93 <div class='content'>xxxx</div>
104 </div> 94 </div>
105
106 <p>Grid</p>
107 <div id='grid'>
108 <div class='content'>xxxx</div>
109 </div>
110 </body> 95 </body>
111 </html> 96 </html>
OLDNEW
« no previous file with comments | « LayoutTests/fast/shapes/shape-inside/shape-inside-percentage-expected.html ('k') | LayoutTests/fast/shapes/shape-inside/shape-inside-recursive-layout-expected.html » ('j') | no next file with comments »

Powered by Google App Engine