| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Test of box-decoration break rendering when the a text is broken in multiple lines</title> |
| <style type="text/css"> |
| body { |
| width: 360px; |
| font: monospace 10px; |
| } |
| span { |
| display: block; |
| width: 360px; |
| } |
| #rightCutHighlight { |
| display: inline; |
| border-top: 2px solid red; |
| border-right: 0px solid red; |
| border-left: 2px solid red; |
| border-bottom: 2px solid red; |
| background: yellow; |
| box-shadow: 0px 1px 3px dimgrey; |
| } |
| #leftCutHighlight { |
| display: inline; |
| margin: 0px; |
| padding: 0px; |
| border-top: 2px solid red; |
| border-right: 2px solid red; |
| border-left: 0px solid red; |
| border-bottom: 2px solid red; |
| background: yellow; |
| box-shadow: 0px 1px 3px dimgrey; |
| } |
| .clone { |
| display: inline; |
| margin: 0px; |
| padding: 0px; |
| border: 2px solid red; |
| background: yellow; |
| box-shadow: 0px 1px 3px dimgrey; |
| } |
| </style> |
| |
| </head> |
| <body> |
| <h1>Box-decoration-break: slice</h1> |
| <span>This long word should break in a new line : <span id="rightCutHighlight">veryveryveryveryveryveryvery-</span><br><span id="leftCutHighlight">-longword</span>. box-decoration-break is set to cloned, |
| so the right edge of the previous line is cut, and the left edge of the highlight in this line is cut too.</span> |
| <h1>Box-decoration-break: clone</h1> |
| <span>This long word should break in a new line : <span class="clone">veryveryveryveryveryveryvery-</span><br><span class="clone">-longword</span>. box-decoration-break is set to cloned, |
| so the right edge of the previous line is similar as its left edge, and the left edge of the highlight in this line is similar as its right one. </span> |
| </body> |
| </body> |
| </html> |
