41 lines
1.4 KiB
HTML
41 lines
1.4 KiB
HTML
<!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>
|