| <!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; |
| } |
| span highlight { |
| border: 2px solid red; |
| background: yellow; |
| box-shadow: 0px 1px 3px dimgrey; |
| } |
| #slice highlight { |
| box-decoration-break: slice; |
| -webkit-box-decoration-break: slice; |
| } |
| |
| #clone highlight { |
| box-decoration-break: clone; |
| -webkit-box-decoration-break: clone; |
| } |
| </style> |
| |
| </head> |
| <body> |
| <h1>Box-decoration-break: slice</h1> |
| <span id="slice">This long word should break in a new line : <highlight>veryveryveryveryveryveryvery-<br>-longword</highlight>. 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 id="clone">This long word should break in a new line : <highlight>veryveryveryveryveryveryvery-<br>-longword</highlight>. 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> |
