| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <script> |
| 5 if (window.internals) |
| 6 window.internals.settings.setCSSExclusionsEnabled(true); |
| 7 </script> |
| 8 <script src="../../js/resources/js-test-pre.js"></script> |
| 9 <script src="../resources/subpixel-utils.js"></script> |
| 10 |
| 11 <style> |
| 12 #container { |
| 13 font: 20px/1 Ahem, sans-serif; |
| 14 width: 200px; |
| 15 height: 300px; |
| 16 } |
| 17 |
| 18 #float-left { |
| 19 float: left; |
| 20 position: relative; |
| 21 overflow: visible; |
| 22 -webkit-shape-outside: polygon(50px 0px, 100px 50px, 50px 100px, 0px 50px); |
| 23 -webkit-shape-margin: 20px; |
| 24 } |
| 25 |
| 26 #svg-shape { |
| 27 position: absolute; |
| 28 display:block; |
| 29 width: 100px; |
| 30 height: 100px; |
| 31 } |
| 32 </style> |
| 33 |
| 34 <body> |
| 35 <p></p> |
| 36 <div id="container"> |
| 37 <div id="float-left"> |
| 38 <svg id="svg-shape" xmlns="http://www.w3.org/2000/"> |
| 39 <polygon points="50,0 100,50 50,100 0,50" fill="rgba(0,150,0, 0.5)"/
> |
| 40 </svg> |
| 41 </div> |
| 42 <span id="l1">X</span></br><span id="l2">X</span><br/><span id="l3">X</span>
<br/><br/><span id="l4">X</span><br/><span id="l5">X</span><br/><span id="l6">X<
/span> |
| 43 </div> |
| 44 </body> |
| 45 <script> |
| 46 function elementRect(elementId) |
| 47 { |
| 48 var s = document.getElementById("container").getBoundingClientRect(); |
| 49 var r = document.getElementById(elementId).getBoundingClientRect(); |
| 50 return {left: r.left - s.left, top: r.top - s.top, width: r.width, height: r
.height}; |
| 51 } |
| 52 |
| 53 // The polygon's X coordinates are 0, 50, 100, specified relative to the "float-
left" element. Its shape-marign is 20px. |
| 54 // The horizontal center of the margin polygon, relative to the container elemen
t is 20*sqrt(2) + 50. So the left |
| 55 // edge of the (20px square) Ahem character on the first "l1" line (y == 20) is:
20 + (20*sqrt(2) + 50) = 98.28. |
| 56 // The second and third lines, "l2" and "l3" are similar, each one begins 20 pix
els farther to the right. |
| 57 // The left edges of "l4-l6" are the same as the first three, just in reverse or
der. |
| 58 |
| 59 function marginLeftXIntercept(lineNumber) |
| 60 { |
| 61 return SubPixelLayout.roundLineLeft(lineNumber * 20 + 20 * Math.sqrt(2) + 50
); |
| 62 } |
| 63 |
| 64 shouldBe("elementRect('l1').top", "0"); |
| 65 shouldBeCloseTo("elementRect('l1').left", marginLeftXIntercept(1), 1); |
| 66 |
| 67 shouldBe("elementRect('l2').top", "20"); |
| 68 shouldBeCloseTo("elementRect('l2').left", marginLeftXIntercept(2), 1); |
| 69 |
| 70 shouldBe("elementRect('l3').top", "40"); |
| 71 shouldBeCloseTo("elementRect('l3').left", marginLeftXIntercept(3), 1); |
| 72 |
| 73 shouldBe("elementRect('l4').top", "80"); |
| 74 shouldBeCloseTo("elementRect('l4').left", marginLeftXIntercept(3), 1); |
| 75 |
| 76 shouldBe("elementRect('l5').top", "100"); |
| 77 shouldBeCloseTo("elementRect('l5').left", marginLeftXIntercept(2), 1); |
| 78 |
| 79 shouldBe("elementRect('l6').top", "120"); |
| 80 shouldBeCloseTo("elementRect('l6').left", marginLeftXIntercept(1), 1); |
| 81 |
| 82 </script> |
| 83 </html> |
| 84 |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 14220005:
Add support for the simple case of shape-margin polygonal shape-outside (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master