LayoutTests/fast/shapes/shape-inside/shape-inside-bottom-edge-expected.html - Issue 200633005: [CSS Shapes] Remove deprecated shapes

Side by Side Diff: LayoutTests/fast/shapes/shape-inside/shape-inside-bottom-edge-expected.html

Issue 200633005: [CSS Shapes] Remove deprecated shapes (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Rebase against ToR 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

« LayoutTests/fast/shapes/shape-inside/shape-inside-animation.html ('K') | « LayoutTests/fast/shapes/shape-inside/shape-inside-bottom-edge.html ('k') | LayoutTests/fast/shapes/shape-inside/shape-inside-box-sizing.html » ('j') | Source/core/css/parser/CSSPropertyParser.h » ('J')
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 <style>	4 <style>

5 .box {	5 .box {

6 width: 450px;	6 width: 450px;

7 height: 100px;	7 height: 100px;

8 line-height: 20px;	8 line-height: 20px;

9 outline: 2px solid green;	9 outline: 2px solid green;

10 }	10 }

11	11

12 .rounded-rectangle {

13 width: 100px;

14 height: 100px;

15 }

16

17 .details {	12 .details {

18 padding-top: 15px;	13 padding-top: 15px;

19 font-style: italic;	14 font-style: italic;

20 }	15 }

21	16

22 </style>	17 </style>

23 </head>	18 </head>

24	19

25 <body>	20 <body>

26 <div class="box">	21 <div class="box">

27 <p style="padding-top: 55px; padding-left: 25px;">Content1</p>	22 <p style="padding-top: 55px; padding-left: 25px;">Content1</p>

28 </div>	23 </div>

29 <p class="details">There is a 400x50px shape-inside rectangle inside the green b ox.<br/>The Content1 text line's bottom equals to the shape-inside's rectangle b ottom boundary, so it should fit in the shape-inside.</p>	24 <p class="details">There is a 400x50px shape-inside polygon inside the green box .<br/>The Content1 text line's bottom equals to the shape-inside's polygon botto m boundary, so it should fit in the shape-inside.</p>

30 <hr>	25 <hr>

31	26

32 <div class="box">	27 <div class="box">

33 <p style="padding-top: 100px;">Content2</p>	28 <p style="padding-top: 100px;">Content2</p>

34 </div>	29 </div>

35	30

36 <p class="details">There is a 400x50px shape-inside rectangle inside the green b ox.<br/>The Content2 text line overlaps with the shape-inside's rectangle bottom boundary, so the Content2 should be pushed below the content box.</p>	31 <p class="details">There is a 400x50px shape-inside polygon inside the green box .<br/>The Content2 text line overlaps with the shape-inside's polygon bottom bou ndary, so the Content2 should be pushed below the content box.</p>

37 <hr>	32 <hr>

38	33

39 <div class="box">	34 <div class="box">

40 <p style="padding-top: 100px;">Content3</p>	35 <p style="padding-top: 100px;">Content3</p>

41 </div>	36 </div>

42	37

43 <p class="details">There is a 400x50px shape-inside rectangle inside the green b ox.<br/>The Content3 text line starts after the shape-inside's rectangle bottom boundary, so the Content3 should be pushed below the content box.</p>	38 <p class="details">There is a 400x50px shape-inside polygon inside the green box .<br/>The Content3 text line starts after the shape-inside's polygon bottom boun dary, so the Content3 should be pushed below the content box.</p>

44 <hr>

45

46 <div class="box rounded-rectangle">

47 <p style="padding-top: 100px;">Content4</p>

48 </div>

49 <p class="details">There is a 100x100px shape-inside rounded rectangle inside th e green box.<br/>The shape top and bottom boundaries match with the content box boundaries, the overflow should start on the left, below the green content box.< /p>

50 <hr>

51

52 <div class="box rounded-rectangle">

53 <p style="padding-top: 100px;">Content5</p>

54 </div>

55 <p class="details">There is a 75x75px shape-inside rounded rectangle inside the green 100x100px box.<br/>The forth line should overflow, the overflow should sta rt on the left, below the green content box.</p>

56 <hr>	39 <hr>

57	40

58 <p>Based on a recent change on the <a href="http://dev.w3.org/csswg/css-exclusio ns/#shape-inside-property">exclusions specification</a>. The 'shape-inside' prop erty adds an exclusion area to the element's wrapping context.	41 <p>Based on a recent change on the <a href="http://dev.w3.org/csswg/css-exclusio ns/#shape-inside-property">exclusions specification</a>. The 'shape-inside' prop erty adds an exclusion area to the element's wrapping context.

59 This modifies the normal rectangular shape of the content area to a possibly non -rectangular wrapping area. The exclusion area added is defined by subtracting t he shape from the element's content area.</p>	42 This modifies the normal rectangular shape of the content area to a possibly non -rectangular wrapping area. The exclusion area added is defined by subtracting t he shape from the element's content area.</p>

60 <p>Bug <a href="http://webkit.org/b/114526 ">114526</a>: [CSS Exclusions] shape- inside overflow should be pushed to the outside of the content box</p>	43 <p>Bug <a href="http://webkit.org/b/114526 ">114526</a>: [CSS Exclusions] shape- inside overflow should be pushed to the outside of the content box</p>

61 </body>	44 </body>

62 </html>	45 </html>

OLD	NEW