<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<meta name="Generator" content="Microsoft Word 15 (filtered medium)">
<style><!--
/* Font Definitions */
@font-face
{font-family:Wingdings;
panose-1:5 0 0 0 0 0 0 0 0 0;}
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:"Malgun Gothic";
panose-1:2 11 5 3 2 0 0 2 0 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:"Malgun Gothic";
panose-1:2 11 5 3 2 0 0 2 0 4;}
@font-face
{font-family:Consolas;
panose-1:2 11 6 9 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
text-align:justify;
text-justify:inter-ideograph;
text-autospace:none;
word-break:break-hangul;
font-size:10.0pt;
font-family:"Malgun Gothic";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:#0563C1;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:#954F72;
text-decoration:underline;}
p.MsoListParagraph, li.MsoListParagraph, div.MsoListParagraph
{mso-style-priority:34;
margin-top:0cm;
margin-right:0cm;
margin-bottom:0cm;
margin-left:40.0pt;
margin-bottom:.0001pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:0cm;
mso-para-margin-left:4.0gd;
mso-para-margin-bottom:.0001pt;
text-align:justify;
text-justify:inter-ideograph;
text-autospace:none;
word-break:break-hangul;
font-size:10.0pt;
font-family:"Malgun Gothic";}
span.EmailStyle17
{mso-style-type:personal-compose;
font-family:"Malgun Gothic";
color:windowtext;}
.MsoChpDefault
{mso-style-type:export-only;}
/* Page Definitions */
@page WordSection1
{size:612.0pt 792.0pt;
margin:3.0cm 72.0pt 72.0pt 72.0pt;}
div.WordSection1
{page:WordSection1;}
/* List Definitions */
@list l0
{mso-list-id:323751705;
mso-list-type:hybrid;
mso-list-template-ids:-1970261850 811998662 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;}
@list l0:level1
{mso-level-tab-stop:none;
mso-level-number-position:left;
margin-left:38.0pt;
text-indent:-18.0pt;}
@list l0:level2
{mso-level-number-format:alpha-upper;
mso-level-tab-stop:none;
mso-level-number-position:left;
margin-left:60.0pt;
text-indent:-20.0pt;}
@list l0:level3
{mso-level-number-format:roman-lower;
mso-level-tab-stop:none;
mso-level-number-position:right;
margin-left:80.0pt;
text-indent:-20.0pt;}
@list l0:level4
{mso-level-tab-stop:none;
mso-level-number-position:left;
margin-left:100.0pt;
text-indent:-20.0pt;}
@list l0:level5
{mso-level-number-format:alpha-upper;
mso-level-tab-stop:none;
mso-level-number-position:left;
margin-left:120.0pt;
text-indent:-20.0pt;}
@list l0:level6
{mso-level-number-format:roman-lower;
mso-level-tab-stop:none;
mso-level-number-position:right;
margin-left:140.0pt;
text-indent:-20.0pt;}
@list l0:level7
{mso-level-tab-stop:none;
mso-level-number-position:left;
margin-left:160.0pt;
text-indent:-20.0pt;}
@list l0:level8
{mso-level-number-format:alpha-upper;
mso-level-tab-stop:none;
mso-level-number-position:left;
margin-left:180.0pt;
text-indent:-20.0pt;}
@list l0:level9
{mso-level-number-format:roman-lower;
mso-level-tab-stop:none;
mso-level-number-position:right;
margin-left:200.0pt;
text-indent:-20.0pt;}
@list l1
{mso-list-id:1131437418;
mso-list-type:hybrid;
mso-list-template-ids:194430444 -1955302804 67698691 67698693 67698689 67698691 67698693 67698689 67698691 67698693;}
@list l1:level1
{mso-level-number-format:bullet;
mso-level-text:-;
mso-level-tab-stop:none;
mso-level-number-position:left;
margin-left:38.0pt;
text-indent:-18.0pt;
font-family:"Calibri","sans-serif";
mso-fareast-font-family:"Malgun Gothic";
mso-bidi-font-family:"Times New Roman";}
@list l1:level2
{mso-level-number-format:bullet;
mso-level-text:\F06E;
mso-level-tab-stop:none;
mso-level-number-position:left;
margin-left:60.0pt;
text-indent:-20.0pt;
font-family:Wingdings;}
@list l1:level3
{mso-level-number-format:bullet;
mso-level-text:\F075;
mso-level-tab-stop:none;
mso-level-number-position:left;
margin-left:80.0pt;
text-indent:-20.0pt;
font-family:Wingdings;}
@list l1:level4
{mso-level-number-format:bullet;
mso-level-text:\F06C;
mso-level-tab-stop:none;
mso-level-number-position:left;
margin-left:100.0pt;
text-indent:-20.0pt;
font-family:Wingdings;}
@list l1:level5
{mso-level-number-format:bullet;
mso-level-text:\F06E;
mso-level-tab-stop:none;
mso-level-number-position:left;
margin-left:120.0pt;
text-indent:-20.0pt;
font-family:Wingdings;}
@list l1:level6
{mso-level-number-format:bullet;
mso-level-text:\F075;
mso-level-tab-stop:none;
mso-level-number-position:left;
margin-left:140.0pt;
text-indent:-20.0pt;
font-family:Wingdings;}
@list l1:level7
{mso-level-number-format:bullet;
mso-level-text:\F06C;
mso-level-tab-stop:none;
mso-level-number-position:left;
margin-left:160.0pt;
text-indent:-20.0pt;
font-family:Wingdings;}
@list l1:level8
{mso-level-number-format:bullet;
mso-level-text:\F06E;
mso-level-tab-stop:none;
mso-level-number-position:left;
margin-left:180.0pt;
text-indent:-20.0pt;
font-family:Wingdings;}
@list l1:level9
{mso-level-number-format:bullet;
mso-level-text:\F075;
mso-level-tab-stop:none;
mso-level-number-position:left;
margin-left:200.0pt;
text-indent:-20.0pt;
font-family:Wingdings;}
ol
{margin-bottom:0cm;}
ul
{margin-bottom:0cm;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang="KO" link="#0563C1" vlink="#954F72">
<div class="WordSection1">
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif"">Hi experts,<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif""><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif"">While hacking composited layer in WebKit, I realized CSS outline style inflate size of all RenderLayers. Since WebKit has default css of 5px outline for focused
element, focusing input in the below sample inflate the cyan box. This can reproduced in WK2 OSX port in r186227.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif""><o:p> </o:p></span></p>
<p class="MsoNormal" style="margin-left:10.0pt;mso-para-margin-left:1.0gd"><span lang="EN-US" style="font-size:11.0pt;font-family:Consolas"><style><o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:10.0pt;mso-para-margin-left:1.0gd"><span lang="EN-US" style="font-size:11.0pt;font-family:Consolas">.box {<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:10.0pt;mso-para-margin-left:1.0gd"><span lang="EN-US" style="font-size:11.0pt;font-family:Consolas"> position: fixed;<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:10.0pt;mso-para-margin-left:1.0gd"><span lang="EN-US" style="font-size:11.0pt;font-family:Consolas"> top: 50px;<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:10.0pt;mso-para-margin-left:1.0gd"><span lang="EN-US" style="font-size:11.0pt;font-family:Consolas"> width: 100px;<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:10.0pt;mso-para-margin-left:1.0gd"><span lang="EN-US" style="font-size:11.0pt;font-family:Consolas"> height: 30px;<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:10.0pt;mso-para-margin-left:1.0gd"><span lang="EN-US" style="font-size:11.0pt;font-family:Consolas"> border-radius: 10%;<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:10.0pt;mso-para-margin-left:1.0gd"><span lang="EN-US" style="font-size:11.0pt;font-family:Consolas"> background-color: cyan;<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:10.0pt;mso-para-margin-left:1.0gd"><span lang="EN-US" style="font-size:11.0pt;font-family:Consolas">}<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:10.0pt;mso-para-margin-left:1.0gd"><span lang="EN-US" style="font-size:11.0pt;font-family:Consolas"></style><o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:10.0pt;mso-para-margin-left:1.0gd"><span lang="EN-US" style="font-size:11.0pt;font-family:Consolas"><o:p> </o:p></span></p>
<p class="MsoNormal" style="margin-left:10.0pt;mso-para-margin-left:1.0gd"><span lang="EN-US" style="font-size:11.0pt;font-family:Consolas"><input type='text'><o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:10.0pt;mso-para-margin-left:1.0gd"><span lang="EN-US" style="font-size:11.0pt;font-family:Consolas"><div class='box'></div><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif""><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif"">Through investigation, I found `RenderView::m_maximalOutlineSize` value is set in the RenderElement::setStyle() function. And this cause inflation of layers
in RenderLayer::localBoundingBox() function. Since setter of `m_maximalOutlineSize` scheduled rebuild of the whole composited layers, all layers inflated by the value.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif""><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif"">Honestly, I don’t know about this value’s purpose. But it seems weird to me that this value does not cleared in the RenderView even after outline style cleared.
(i.e. loose focus of the input)<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif""><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif"">And this behavior makes several problem in our ports, [EAWebKit][1]. Since we uses composited layers backed by DirectX, this makes paint call requests larger
size than texture itself in TextureMapperTile::paint() function. This cause rendering of corrupted memory. Steps follow,<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif""><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif"">a. layer inflated by maximalOutlineSize. Let 100x100 layer increased to 110x110.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif"">b. texture increased in the TextureMapperTiledBackingStore::createOrDestroyTilesIfNeeded() to 110x110.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif"">c. layer’s texture destroyed then reconstructed by display style change.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif"">d. while reconstruct of the layer’s texture, this time texture created with the size of 100x100 instead of 110x110.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif"">e. then painting this texture in TextureMapperTile::paint() request 110x110 rect for 100x100 texture.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif""><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif"">While step d. GraphicsLayerTextureMapper::m_needsDisplayRect intersected with TextureMapperTile::m_rect, makes texture smaller then layer’s size. On the other
hand, TextureMapperTile::paint() call in the step e. request whole TextureMapperTile::m_rect for draw request.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif""><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif"">To escape this problem, I overridden default style of :focus to `outline: none`. I wonder better solution for this. Is it some bug of WebKit? Is there some proper
way to handle this? If inflation of the layers inevitable, it seems reasonable shrunken back after outline style cleared.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif""><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif"">Regards,<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif"">Namhoon<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif""><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif"">[1]: http://gpl.ea.com/eawebkit.html<o:p></o:p></span></p>
</div>
</body>
</html>