Bug 99606

Summary: Asynchronous update to element with text-transform does not update metrics
Product: WebKit Reporter: Jim Cook <jcook>
Component: CSSAssignee: Myles C. Maxfield <mmaxfield>
Status: RESOLVED WORKSFORME    
Severity: Normal CC: dino, eric, mitz, mmaxfield, simon.fraser, webkit.review.bot
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: Mac   
OS: OS X 10.8   
URL: http://jsfiddle.net/oravecz/hwkM8/
Attachments:
Description Flags
Patch none

Jim Cook
Reported 2012-10-17 10:11:07 PDT
It seems that on Webkit browsers (tested on Chrome Version 22.0.1229.94 and Safari Version 6.0.1 (8536.26.14)) content which is asynchronously updated in an element with text-transform applied will not have margins reapplied. Pseudo-steps: 1. Create an inline-block element with no content. 2. Apply a text-transform: uppercase style to it. 3. Apply a margin to the element. 3. Create a setTimeout function that will run a second after page load. 4. In the async function, update the DOM contents of the aforementioned element. The problem is that the DOM contents will be updated, but the margin on the element will not be reapplied based on the element's new contents as it should. Example to reproduce, or go to http://jsfiddle.net/oravecz/hwkM8/ for a live example. <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type='text/css'> a { float: left; margin: 0 20px 10px 20px; display: inline-block; } a.upper { text-transform: uppercase; } p { clear: left; margin: 20px 0; } </style> </head> <body ng-app="myApp"> <h1>Webkit Bug</h1> <p> This one took me a long time to figure out. It seems that on Webkit browsers (tested on Chrome Version 22.0.1229.94 and Safari Version 6.0.1 (8536.26.14)) content which is asynchronously updated in an element with text-transform applied will not have margins reapplied. </p> <p> An example is best to illustrate. The "menu" shown below is a simple set of $lt;a> tags floated left, made inline-block, text transformed to uppercase and with a margin. </p> <p> <b>Note: The menu labels are static</b> </p> <a href="#" class="upper">Menu Item</a> <a href="#" class="upper">Menu Item</a> <a href="#" class="upper">Menu Item</a> <a href="#" class="upper">Menu Item</a> <p> In the next example, the styles are exactly the same, but the menu labels are inserted via Javascript during the window.load event. </p> <p> <b>Note: The menu labels are dynamically inserted.</b> The problem on the noted Webkit-based browsers shows that the margins are not recalculated for these elements after the text is inserted. The individual menu items are stacked on top of each other because the dimensions of the &lt;a> tags are the same as before the new labels were inserted. </p> <a href="#" class="upper findme"></a> <a href="#" class="upper findme"></a> <a href="#" class="upper findme"></a> <a href="#" class="upper findme"></a> <p> These menu labels are dynamically inserted but do <b>not</b> have a text-transform applied. </p> <a href="#" class="findme"></a> <a href="#" class="findme"></a> <a href="#" class="findme"></a> <a href="#" class="findme"></a> <script type='text/javascript'>//<![CDATA[ var updateContents = function() { var eles = document.getElementsByClassName('findme'); for (var i = 0, c = eles.length; i < c; i++) { eles[i].innerHTML = 'Menu Item'; } } window.onload = function() { setTimeout(updateContents, 1000); } //]]> </script> </body> </html>
Attachments
Patch (4.81 KB, patch)
2012-10-18 03:30 PDT, Takashi Sakamoto 		no flags
DetailsFormatted DiffDiff
View All Add attachment proposed patch, testcase, etc.
Takashi Sakamoto
Comment 1 2012-10-18 03:30:50 PDT
Created attachment 169385 [details] Patch
Anders Carlsson
Comment 2 2014-02-05 11:17:16 PST
Comment on attachment 169385 [details] Patch Clearing review flag on patches from before 2014. If this patch is still relevant, please reset the r? flag.
Myles C. Maxfield
Comment 3 2014-02-05 12:09:27 PST
Comment on attachment 169385 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=169385&action=review > Source/WebCore/rendering/RenderObject.cpp:304 > + // If setPreferredLogicalWidthsDirty was invoked before addChild, Comment might not be necessary > LayoutTests/fast/css/text-transform-async-update.html:32 > + } , 100); Might want to set the time-out to 0
Myles C. Maxfield
Comment 4 2014-02-05 12:10:02 PST
Seems reasonable to me, but I'm not a reviewer
Myles C. Maxfield
Comment 5 2014-02-05 12:23:19 PST
Already fixed since this report was filed
Note You need to log in before you can comment on or make changes to this bug.