55 lines
1.8 KiB
HTML
55 lines
1.8 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;
|
|
}
|
|
#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>
|