LayoutTests/editing/style/relative-font-size-change-003.html - WebKit - Git at Google

 <html>
 <head>

 <style>
 .editing {
     border: 2px solid red;
     padding: 12px;
     font-size: 24px;
 }
 .explanation {
     border: 2px solid blue;
     padding: 12px;
     font-size: 24px;
     margin-bottom: 24px;
 }
 </style>
 <script src=../editing.js language="JavaScript" type="text/JavaScript" ></script>

 <script>
 if (window.internals)
     internals.settings.setEditingBehavior('mac');

 function editingTest() {
     moveSelectionForwardByLineCommand();
     for (i = 0; i < 5; i++)
         extendSelectionForwardByWordCommand();
     for (i = 0; i < 6; i++)
         fontSizeDeltaCommand("+1px");
     moveSelectionBackwardByCharacterCommand();
     for (i = 0; i < 2; i++)
         extendSelectionForwardByWordCommand();
     for (i = 0; i < 6; i++)
         fontSizeDeltaCommand("-1px");
 }

 </script>

 <title>Editing Test</title>
 </head>
 <body contenteditable="true">
 <div class="explanation">
 Size check should say: 24px. The first two words of the second line should appear to be 24px. The rest of the
 words on the second line should appear to be 30px.
 </div>

 <div style="font-size: 24px; margin-bottom: 16px;">Size check: <span id="check"></span></div>

 <div id="root" style="word-wrap: break-word; -khtml-nbsp-mode: space; -khtml-line-break: after-white-space;">
 <div id="test" class="editing">There is a tide
 <div id="sizeTest" class="editing">In the affairs of men
 </div>
 Which taken at the flood
 </div>
 </div>

 <script>
 runEditingTest();
 test = document.getElementById("sizeTest").firstChild;
 check = document.getElementById("check");
 size = document.defaultView.getComputedStyle(test, "").getPropertyValue("font-size");
 check.innerHTML = size;
 </script>

 </body>
 </html>
	<html>
	<head>

	<style>
	.editing {
	border: 2px solid red;
	padding: 12px;
	font-size: 24px;
	}
	.explanation {
	border: 2px solid blue;
	padding: 12px;
	font-size: 24px;
	margin-bottom: 24px;
	}
	</style>
	<script src=../editing.js language="JavaScript" type="text/JavaScript" ></script>

	<script>
	if (window.internals)
	internals.settings.setEditingBehavior('mac');

	function editingTest() {
	moveSelectionForwardByLineCommand();
	for (i = 0; i < 5; i++)
	extendSelectionForwardByWordCommand();
	for (i = 0; i < 6; i++)
	fontSizeDeltaCommand("+1px");
	moveSelectionBackwardByCharacterCommand();
	for (i = 0; i < 2; i++)
	extendSelectionForwardByWordCommand();
	for (i = 0; i < 6; i++)
	fontSizeDeltaCommand("-1px");
	}

	</script>

	<title>Editing Test</title>
	</head>
	<body contenteditable="true">
	<div class="explanation">
	Size check should say: 24px. The first two words of the second line should appear to be 24px. The rest of the
	words on the second line should appear to be 30px.
	</div>

	<div style="font-size: 24px; margin-bottom: 16px;">Size check: <span id="check"></span></div>

	<div id="root" style="word-wrap: break-word; -khtml-nbsp-mode: space; -khtml-line-break: after-white-space;">
	<div id="test" class="editing">There is a tide
	<div id="sizeTest" class="editing">In the affairs of men
	</div>
	Which taken at the flood
	</div>
	</div>

	<script>
	runEditingTest();
	test = document.getElementById("sizeTest").firstChild;
	check = document.getElementById("check");
	size = document.defaultView.getComputedStyle(test, "").getPropertyValue("font-size");
	check.innerHTML = size;
	</script>

	</body>
	</html>