LayoutTests/fast/shapes/shape-inside/shape-inside-polygon-padding-003.html - Issue 209443007: Remove shape-inside support

Side by Side Diff: LayoutTests/fast/shapes/shape-inside/shape-inside-polygon-padding-003.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

« no previous file with comments | « LayoutTests/fast/shapes/shape-inside/shape-inside-polygon-padding-002-expected.txt ('k') | LayoutTests/fast/shapes/shape-inside/shape-inside-polygon-padding-003-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
	(Empty)
1 <!DOCTYPE html>

2 <html>

3 <head>

4 <script src="../../../resources/js-test.js"></script>

5 <script src="../resources/subpixel-utils.js"></script>

6 <style>

7 #shape-inside {

8 position: relative;

9 margin: 0;

10 padding: 0;

11 width: 500px;

12 height: 500px;

13 shape-inside: polygon(0px 0px, 400px 0px, 400px 350px, 0px 350px, 200px 175px);

14 shape-padding: 50px;

15 font: 50px/1 Ahem, sans-serif;

16 color: green;

17 }

18

19 #shape-outline {

20 position: absolute;

21 top: 0px;

22 left: 0px;

23 width: 500px;

24 height: 500px;

25 }

26 </style>

27 </head>

28 <body>

29 <div id="shape-inside">

30 <svg id="shape-outline" xmlns="http://www.w3.org/2000/svg">

31 <polygon points="0,0 400,0 400,350 0,350 200,175" stroke="blue" fill ="none"/>

32 <!--

33 In the expressions below, a is the angle the upper reflex edge m akes with the x axis:

34 a = Math.atan2(175, 200)

35

36 The X coordinate of the first (and last) inner path vertex is:

37 x = 50 / Math.tan(a) + 50 / Math.sin(a);

38

39 The X coordinates and y coordinate of the arc's endpoints are

40 x = 200 +/- 50 * Math.sin(a);

41 y = 175 + 50 * Math.sin(a);

42 -->

43 <path d="M 133.07 50 L 350 50 L 350 300 L 133.07 300 L 237.63 207.9 2 A 50 50 0 0 0 237.63 142.07 L 133.07 50" stroke="blue" fill="none"/>

44 </svg>

45 <span id="a">XXX</span><br/><br/><span id="b">XX</span><br/><br/><span i d="c">XXX</span>

46 </div>

47 <div id="console"></div>

48 </body>

49 <script>

50 function shapeInsideRect(elementId)

51 {

52 var s = document.getElementById("shape-inside").getBoundingClientRect();

53 var r = document.getElementById(elementId).getBoundingClientRect();

54 return {left: r.left - s.left, top: r.top - s.top, width: r.width, height: r.height};

55 }

56

57 /*

58 The left edge of span's 'a' and 'c' should begin at the padded (inset) edge that corresponds to

59 the shape-inside polygon edge which goes from 175,200 to 0,0. The expected value is 191.215, which is

60

61 a = Math.atan2(175, 200)

62 left = 2 * 50 * (200 / 175) + (50 / Math.sin(a))

63

64 The perpindicular distance between the polygon edge and the padded edge is 50 (the shape-padding value),

65 and a is the angle between the edges and the X axis, so 50/Math.sin(a), is the horizontal distance

66 between the polygon edge and its padded edge.

67

68 */

69

70 var quiet = true; // PASS output depends on SubPixelLayout.isEnabled()

71

72 shouldBe("shapeInsideRect('a').top", "50");

73 shouldBeCloseTo("shapeInsideRect('a').left", SubPixelLayout.snapToLayoutUnit(1 90.215), 1, quiet);

74 shouldBe("shapeInsideRect('a').width", "150");

75

76 shouldBe("shapeInsideRect('b').top", "150");

77 shouldBeCloseTo("shapeInsideRect('b').left", 250, 1)

78 shouldBe("shapeInsideRect('b').width", "100");

79

80 shouldBe("shapeInsideRect('c').top", "250");

81 shouldBeCloseTo("shapeInsideRect('c').left", SubPixelLayout.snapToLayoutUnit(1 90.215), 1, quiet);

82 shouldBe("shapeInsideRect('c').width", "150");

83 </script>

84 </html>

85

OLD	NEW