| 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 |
|---|
Chromium Code Reviews
Issue 209443007:
Remove shape-inside support (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master