forked from mirrors/gecko-dev
93940f9cd8
Automatic update from web-platform-tests [css-text] Additional tests for the CSS Text suite This CL implements several tests, fundamentally for the 'line-break: anywhere' feature, to increase the coverage and evaluate different scenarios, combining different line-breaking CSS properties and values. They also consider text lines with different inline boxes and some corner cases that were recently discussed by the CSS WG and implemented already in other browsers. Change-Id: Ic6079a95df7adf265799ce51938433e14355b887 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1904077 Reviewed-by: Koji Ishii <kojii@chromium.org> Commit-Queue: Javier Fernandez <jfernandez@igalia.com> Cr-Commit-Position: refs/heads/master@{#713616} -- wpt-commits: e8ffee929e248301089dd142d272c3fefc1bb55e wpt-pr: 20157
34 lines
1.2 KiB
HTML
34 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang=en>
|
|
<meta charset="utf-8">
|
|
<title>CSS Text Test: overflow-wrap: anywhere</title>
|
|
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
|
<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
|
|
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
|
|
<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
|
|
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
|
<meta name="flags" content="Ahem">
|
|
<meta name="assert" content="'overflow-wrap: anywhere' applies correctly when there is styled text using 'span' elements.">
|
|
<style>
|
|
div {
|
|
position: relative;
|
|
font: 25px / 1 Ahem;
|
|
}
|
|
.red {
|
|
position: absolute;
|
|
background: green;
|
|
color: red;
|
|
height: 100px;
|
|
z-index: -1;
|
|
}
|
|
.test {
|
|
color: transparent;
|
|
width: 4ch;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
</style>
|
|
<body>
|
|
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
|
<div class="red"><span style="color: green">XX</span>XX<br>XX</div>
|
|
<div class="test">XX<span style="color: green">XXXX</span>XX</div>
|
|
</body>
|