| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <html> | |
| 3 <head> | |
| 4 <script src="../../../resources/js-test.js"></script> | |
| 5 <!-- | |
| 6 The shape-inside polygon is just a square rotated 90 degrees. The X and Y offset
s of the inset "padded" | |
| 7 boundary are padding * sqrt(2). To make the bouunds of the padded boundary work
out to integral values | |
| 8 (as specified for the SVG polygon), the padding distance is 10 * sqrt(2) = 14.14
2, which makes the X and Y | |
| 9 offsets 20. | |
| 10 --> | |
| 11 <style> | |
| 12 #shape-inside { | |
| 13 position: relative; | |
| 14 width: 500px; | |
| 15 height: 500px; | |
| 16 shape-inside: polygon(300px 80px, 520px 300px, 300px 520px, 80px 300px); | |
| 17 shape-padding: 14.142px; | |
| 18 font: 100px/1 Ahem, sans-serif; | |
| 19 color: green; | |
| 20 } | |
| 21 | |
| 22 #shape-outline { | |
| 23 position: absolute; | |
| 24 top: 0px; | |
| 25 left: 0px; | |
| 26 width: 500px; | |
| 27 height: 500px; | |
| 28 } | |
| 29 </style> | |
| 30 </head> | |
| 31 <body> | |
| 32 <p>The blue diamond outline should be filled by cross made of 5 green square
s.</p> | |
| 33 <div id="shape-inside"> | |
| 34 <svg id="shape-outline" xmlns="http://www.w3.org/2000/svg"> | |
| 35 <polygon points="300,100 500,300 300,500 100,300" stroke="blue" fill
="none"/> | |
| 36 </svg> | |
| 37 <span id="a">X</span> <span id="b">XXX</span> <span id="c">X</span> | |
| 38 </div> | |
| 39 <div id="console"></div> | |
| 40 </body> | |
| 41 <script> | |
| 42 function shapeInsideRect(elementId) | |
| 43 { | |
| 44 var s = document.getElementById("shape-inside").getBoundingClientRect(); | |
| 45 var r = document.getElementById(elementId).getBoundingClientRect(); | |
| 46 return {left: r.left - s.left, top: r.top - s.top, width: r.width, height:
r.height}; | |
| 47 } | |
| 48 | |
| 49 var quiet = true; // PASS output depends on if subpixel layout has been enable
d | |
| 50 | |
| 51 shouldBe("shapeInsideRect('a').top", "150"); | |
| 52 shouldBeCloseTo("shapeInsideRect('a').left", 250, 1, quiet); | |
| 53 shouldBe("shapeInsideRect('a').width", "100"); | |
| 54 | |
| 55 shouldBe("shapeInsideRect('b').top", "250"); | |
| 56 shouldBeCloseTo("shapeInsideRect('b').left", 150, 1, quiet) | |
| 57 shouldBe("shapeInsideRect('b').width", "300"); | |
| 58 | |
| 59 shouldBe("shapeInsideRect('c').top", "350"); | |
| 60 shouldBeCloseTo("shapeInsideRect('c').left", 250, 1, quiet); | |
| 61 shouldBe("shapeInsideRect('c').width", "100"); | |
| 62 </script> | |
| 63 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 209443007:
Remove shape-inside support (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master