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

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. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« 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') | Hide Comments ('s')

OLD	NEW
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...) Expand all Loading...
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...) Expand all Loading...
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>

OLD	NEW