| <!DOCTYPE html> |
| <style> |
| body { |
| width: 600px; |
| font-family: "Arial"; |
| font-size: 20px; |
| line-height: 20px; |
| } |
| |
| .polygonContainer { |
| width: 200px; |
| height: 200px; |
| margin: 5px; |
| padding: 8px; |
| border: 10px solid yellow; |
| background: green; |
| } |
| |
| #polygonLeftBorderBox { |
| position: absolute; |
| top: 200px; |
| left: 0px; |
| -webkit-clip-path: polygon(0 0, 50% 0, 50% 25%, 100% 25%, 100% 75%, 50% 75%, 50% 100%, 0 100%) border-box; |
| } |
| |
| #polygonLeftMarginBox { |
| position: absolute; |
| top: 200px; |
| left: 300px; |
| -webkit-clip-path: polygon(0 0, 50% 0, 50% 25%, 100% 25%, 100% 75%, 50% 75%, 50% 100%, 0 100%) margin-box; |
| } |
| |
| #polygonLeftPaddingBox { |
| position: absolute; |
| top: 450px; |
| left: 0px; |
| -webkit-clip-path: polygon(0 0, 50% 0, 50% 25%, 100% 25%, 100% 75%, 50% 75%, 50% 100%, 0 100%) padding-box; |
| } |
| |
| #polygonLeftContentBox { |
| position: absolute; |
| top: 450px; |
| left: 300px; |
| -webkit-clip-path: polygon(0 0, 50% 0, 50% 25%, 100% 25%, 100% 75%, 50% 75%, 50% 100%, 0 100%) content-box; |
| } |
| </style> |
| |
| <div id="polygonLeftBorderBox" class="polygonContainer">Although the Culture was originated by humanoid species...</div> |
| <div id="polygonLeftMarginBox" class="polygonContainer">Although the Culture was originated by humanoid species...</div> |
| <div id="polygonLeftPaddingBox" class="polygonContainer">Although the Culture was originated by humanoid species...</div> |
| <div id="polygonLeftContentBox" class="polygonContainer">Although the Culture was originated by humanoid species...</div> |
| |
| <script src="../../resources/js-test.js"></script> |
| <script> |
| var selection = window.getSelection(); |
| |
| function compareSelectionWithText(startX, startY, endX, endY, expectedText) { |
| if (!window.testRunner) |
| return; |
| |
| selection.removeAllRanges(); |
| eventSender.mouseMoveTo(startX, startY); |
| eventSender.mouseDown(); |
| eventSender.mouseMoveTo(endX, endY); |
| eventSender.mouseUp(); |
| shouldBe('selection.toString()', expectedText); |
| } |
| |
| // polygonLeftBorderBox, select part of the polygon, not the text |
| compareSelectionWithText(160, 222, 180, 242, '""'); |
| // polygonLeftBorderBox, select 'was' using select drag |
| compareSelectionWithText(23, 242, 59, 260, "'was'"); |
| |
| // polygonLeftMarginBox, select part of the polygon, not the text |
| compareSelectionWithText(460, 160, 480, 180, '""'); |
| // polygonLeftMarginBox, select 'was' using select drag |
| compareSelectionWithText(323, 242, 359, 260, "'was'"); |
| |
| // polygonLeftPaddingBox, select part of the polygon, not the text |
| compareSelectionWithText(160, 472, 180, 492, '""'); |
| // polygonLeftPaddingBox, select 'was' using select drag |
| compareSelectionWithText(23, 492, 59, 510, "'was'"); |
| |
| // polygonLeftContentBox, select part of the polygon, not the text |
| compareSelectionWithText(460, 472, 480, 492, '""'); |
| // polygonLeftContentBox, select 'was' using select drag |
| compareSelectionWithText(323, 492, 359, 510, "'was'"); |
| |
| // Remove testing content from output. |
| var polygons = document.getElementsByClassName('polygonContainer'); |
| for (var i = polygons.length -1 ; i >= 0; --i) |
| polygons[i].remove(); |
| </script> |
