src/cobalt/layout_tests/testdata/css-text-3/5-multiple-boxes-should-wrap-at-first-breakable-location-on-first-box-overflow-break-word.html - cobalt - Git at Google

 <!DOCTYPE html>
 <!--
  | Wrapping is only performed at an allowed break point, called a soft wrap
  | opportunity. In most writing systems, in the absence of hyphenation a soft
  | wrap opportunity occurs only at word boundaries. However, when the
  | word-wrap property has a value of break-word, unbreakable "words" may be
  | broken at an arbitrary point to prevent overflow, while still preserving
  | grapheme clusters.
  |   https://www.w3.org/TR/css3-text/#soft-wrap-opportunity
  |   https://www.w3.org/TR/css-text-3/#line-break-details
  |   https://www.w3.org/TR/css-text-3/#word-wrap
  |
  | On overflow, the first available break point will be selected. With word-wrap
  | normal, this will be the first soft-wrap location. With word-wrap break-word,
  | this will be at the first grapheme cluster boundary.
  -->
 <html>
 <head>
   <style>
     body {
       margin: 0px;
       font-family: Roboto;
       font-size: 20px;
     }
     .containing-block {
       background-color: #03a9f4;
       width: 100px;
     }
     .word-wrap-break-word {
       word-wrap: break-word;
     }
     .word-wrap-normal {
       word-wrap: normal;
     }
   </style>
 </head>
 <body>
   <div class="containing-block">
     <div>abcdefghijkl<span class="word-wrap-break-word">op</span> qr<span>st</span></div>
     <div>abcdefghijkl<span>op</span><span class="word-wrap-break-word">q r<span>s t</span></span></div>
     <div>abcdefghijklmn<span>op</span>qr<span class="word-wrap-break-word">s t </span></div>
   </div>
 </body>
 </html>
	<!DOCTYPE html>
	<!--
	\| Wrapping is only performed at an allowed break point, called a soft wrap
	\| opportunity. In most writing systems, in the absence of hyphenation a soft
	\| wrap opportunity occurs only at word boundaries. However, when the
	\| word-wrap property has a value of break-word, unbreakable "words" may be
	\| broken at an arbitrary point to prevent overflow, while still preserving
	\| grapheme clusters.
	\| https://www.w3.org/TR/css3-text/#soft-wrap-opportunity
	\| https://www.w3.org/TR/css-text-3/#line-break-details
	\| https://www.w3.org/TR/css-text-3/#word-wrap
	\|
	\| On overflow, the first available break point will be selected. With word-wrap
	\| normal, this will be the first soft-wrap location. With word-wrap break-word,
	\| this will be at the first grapheme cluster boundary.
	-->
	<html>
	<head>
	<style>
	body {
	margin: 0px;
	font-family: Roboto;
	font-size: 20px;
	}
	.containing-block {
	background-color: #03a9f4;
	width: 100px;
	}
	.word-wrap-break-word {
	word-wrap: break-word;
	}
	.word-wrap-normal {
	word-wrap: normal;
	}
	</style>
	</head>
	<body>
	<div class="containing-block">
	<div>abcdefghijkl<span class="word-wrap-break-word">op</span> qr<span>st</span></div>
	<div>abcdefghijkl<span>op</span><span class="word-wrap-break-word">q r<span>s t</span></span></div>
	<div>abcdefghijklmn<span>op</span>qr<span class="word-wrap-break-word">s t </span></div>
	</div>
	</body>
	</html>