68995 2011-09-28 05:04:39 -0700 Height of SVG element is incorrectly calculated when svg when width of containing element is set as a percentage 2014-05-12 06:43:45 -0700 1 1 1 Unclassified WebKit SVG 528+ (Nightly build) All All RESOLVED FIXED http://e-st.glam.ac.uk/simulationgames/svgheightbug/index.html P2 Normal --- 0 brichard webkit-unassigned fmalita krit myles.borins pdr robertc zimmermann oldest_to_newest 474677 0 brichard 2011-09-28 05:04:39 -0700 When an SVG file is set to width = 100% and height = 100% (and viewport is set correctly) and its' containing element width is set in percentages, the height of the SVG image is incorrectly calculated. The SVG image displays at the correct size/ratio in browser window, but its' container picks up its' height from the SVG in code and this value is incorrect. It is larger than the SVG height as displayed in the browser window. If you inspect the SVG element and look at the metrics you will see the reported size is way bigger than the displayed size. To demonstrate the bug I have posted code at http://e-st.glam.ac.uk/simulationgames/svgheightbug/index.html The green areas are the background of the element containing the SVG. You should only be able to see a small amount of green, which I deliberately set in the css via padding and margins. For correct behaviour open the url in Firefox. In Webkit you will notice that the green areas are far bigger and break the layout. I've attached a screenshot of the behaviour in Safari OS X. The height of the containing element should match the height of the SVG as displayed in the browser window. Other details: HTML5 SVGs are rendered using Raphaël JS 663873 1 151018 myles.borins 2012-07-05 21:32:11 -0700 Created attachment 151018 An http example of svg elements that render correctly in firefox, but incorrectly in webkit based browsers 663875 2 myles.borins 2012-07-05 21:32:54 -0700 I am having the same problem in regards to SVG and height. Expected Behavior: An SVG element with a viewBox attribute should responsively scale to fit the div element it is within, and the div element should accurately scale based on the aspect ratio of the viewBox. In firefox this behavior is accurate and consistent. Bug: When an svg element is drawn the height of the div / viewBox defaults to the full height of the window if no style for height or width are present. When multiple SVG elements are placed side by side, and on top of one another, the side by side elements scale as expect, but large gaps are present between the rows. http://jsfiddle.net/Ede2v/ The above jsfiddle is a perfect example of the problem mentioned in this bug report. (It will also be attached as html). It would appear that the cause of this bug is a miscalculation of the height of the viewbox... I will attempt to dig in to the source and find the cause of the error. Any guidance or suggestions would be greatly appreciated. 663876 3 151018 myles.borins 2012-07-05 21:33:49 -0700 Comment on attachment 151018 An http example of svg elements that render correctly in firefox, but incorrectly in webkit based browsers <!DOCTYPE html> <html> <head></head> <body> <div> <div style="float:left; width:50%; height:100%;"> <svg viewBox="0 0 750 250" id="viewbox"> <g transform="translate(25,25)"> <rect style="stroke: #000000; fill: #ffff00; " x="0" y="0" width="50" height="200" id="60" class="note" noteType="yellow"></rect> <rect style="stroke: #000000; fill: #ffff00; " x="50" y="0" width="50" height="200" id="62" class="note" noteType="yellow"></rect> <rect style="stroke: #000000; fill: #ffff00; " x="100" y="0" width="50" height="200" id="64" class="note" noteType="yellow"></rect> <rect style="stroke: #000000; fill: #ffff00; " x="150" y="0" width="50" height="200" id="65" class="note" noteType="yellow"></rect> <rect style="stroke: #000000; fill: #ffff00; " x="200" y="0" width="50" height="200" id="67" class="note" noteType="yellow"></rect> <rect style="stroke: #000000; fill: #ffff00; " x="250" y="0" width="50" height="200" id="69" class="note" noteType="yellow"></rect> <rect style="stroke: #000000; fill: #ffff00; " x="300" y="0" width="50" height="200" id="71" class="note" noteType="yellow"></rect> <rect style="stroke: #000000; fill: #ffff00; " x="350" y="0" width="50" height="200" id="72" class="note" noteType="yellow"></rect> <rect style="stroke: #000000; fill: #ffff00; " x="400" y="0" width="50" height="200" id="74" class="note" noteType="yellow"></rect> <rect style="stroke: #000000; fill: #ffff00; " x="450" y="0" width="50" height="200" id="76" class="note" noteType="yellow"></rect> <rect style="stroke: #000000; fill: #ffff00; " x="500" y="0" width="50" height="200" id="77" class="note" noteType="yellow"></rect> <rect style="stroke: #000000; fill: #ffff00; " x="550" y="0" width="50" height="200" id="79" class="note" noteType="yellow"></rect> <rect style="stroke: #000000; fill: #ffff00; " x="600" y="0" width="50" height="200" id="81" class="note" noteType="yellow"></rect> <rect style="stroke: #000000; fill: #ffff00; " x="650" y="0" width="50" height="200" id="83" class="note" noteType="yellow"></rect> <rect style="stroke: #000000; fill: #ffa500; " x="35" y="0" width="30" height="125" id="61" class="note" noteType="orange"></rect> <rect style="stroke: #000000; fill: #ffa500; " x="85" y="0" width="30" height="125" id="63" class="note" noteType="orange"></rect> <rect style="stroke: #000000; fill: #ffa500; " x="185" y="0" width="30" height="125" id="66" class="note" noteType="orange"></rect> <rect style="stroke: #000000; fill: #ffa500; " x="235" y="0" width="30" height="125" id="68" class="note" noteType="orange"></rect> <rect style="stroke: #000000; fill: #ffa500; " x="285" y="0" width="30" height="125" id="70" class="note" noteType="orange"></rect> <rect style="stroke: #000000; fill: #ffa500; " x="385" y="0" width="30" height="125" id="73" class="note" noteType="orange"></rect> <rect style="stroke: #000000; fill: #ffa500; " x="435" y="0" width="30" height="125" id="75" class="note" noteType="orange"></rect> <rect style="stroke: #000000; fill: #ffa500; " x="535" y="0" width="30" height="125" id="78" class="note" noteType="orange"></rect> <rect style="stroke: #000000; fill: #ffa500; " x="585" y="0" width="30" height="125" id="80" class="note" noteType="orange"></rect> <rect style="stroke: #000000; fill: #ffa500; " x="635" y="0" width="30" height="125" id="82" class="note" noteType="orange"></rect> </g> </svg> </div> <div style="float:left; width:50%; height:100%;"> <svg viewBox="0 0 750 250" id="viewbox"> <g transform="translate(25,25)"> <rect style="stroke: #000000; fill: #ffff00; " x="0" y="0" width="50" height="200" id="60" class="note" noteType="yellow"></rect> <rect style="stroke: #000000; fill: #ffff00; " x="50" y="0" width="50" height="200" id="62" class="note" noteType="yellow"></rect> <rect style="stroke: #000000; fill: #ffff00; " x="100" y="0" width="50" height="200" id="64" class="note" noteType="yellow"></rect> <rect style="stroke: #000000; fill: #ffff00; " x="150" y="0" width="50" height="200" id="65" class="note" noteType="yellow"></rect> <rect style="stroke: #000000; fill: #ffff00; " x="200" y="0" width="50" height="200" id="67" class="note" noteType="yellow"></rect> <rect style="stroke: #000000; fill: #ffff00; " x="250" y="0" width="50" height="200" id="69" class="note" noteType="yellow"></rect> <rect style="stroke: #000000; fill: #ffff00; " x="300" y="0" width="50" height="200" id="71" class="note" noteType="yellow"></rect> <rect style="stroke: #000000; fill: #ffff00; " x="350" y="0" width="50" height="200" id="72" class="note" noteType="yellow"></rect> <rect style="stroke: #000000; fill: #ffff00; " x="400" y="0" width="50" height="200" id="74" class="note" noteType="yellow"></rect> <rect style="stroke: #000000; fill: #ffff00; " x="450" y="0" width="50" height="200" id="76" class="note" noteType="yellow"></rect> <rect style="stroke: #000000; fill: #ffff00; " x="500" y="0" width="50" height="200" id="77" class="note" noteType="yellow"></rect> <rect style="stroke: #000000; fill: #ffff00; " x="550" y="0" width="50" height="200" id="79" class="note" noteType="yellow"></rect> <rect style="stroke: #000000; fill: #ffff00; " x="600" y="0" width="50" height="200" id="81" class="note" noteType="yellow"></rect> <rect style="stroke: #000000; fill: #ffff00; " x="650" y="0" width="50" height="200" id="83" class="note" noteType="yellow"></rect> <rect style="stroke: #000000; fill: #ffa500; " x="35" y="0" width="30" height="125" id="61" class="note" noteType="orange"></rect> <rect style="stroke: #000000; fill: #ffa500; " x="85" y="0" width="30" height="125" id="63" class="note" noteType="orange"></rect> <rect style="stroke: #000000; fill: #ffa500; " x="185" y="0" width="30" height="125" id="66" class="note" noteType="orange"></rect> <rect style="stroke: #000000; fill: #ffa500; " x="235" y="0" width="30" height="125" id="68" class="note" noteType="orange"></rect> <rect style="stroke: #000000; fill: #ffa500; " x="285" y="0" width="30" height="125" id="70" class="note" noteType="orange"></rect> <rect style="stroke: #000000; fill: #ffa500; " x="385" y="0" width="30" height="125" id="73" class="note" noteType="orange"></rect> <rect style="stroke: #000000; fill: #ffa500; " x="435" y="0" width="30" height="125" id="75" class="note" noteType="orange"></rect> <rect style="stroke: #000000; fill: #ffa500; " x="535" y="0" width="30" height="125" id="78" class="note" noteType="orange"></rect> <rect style="stroke: #000000; fill: #ffa500; " x="585" y="0" width="30" height="125" id="80" class="note" noteType="orange"></rect> <rect style="stroke: #000000; fill: #ffa500; " x="635" y="0" width="30" height="125" id="82" class="note" noteType="orange"></rect> </g> </svg> </div> </div> <div> <div style="float:left; width:50%; height:150px;"> <svg viewBox="0 0 300 30"> <rect width="300" height="30"></rect> </svg> </div> <div style="float:left; width:50%; height:150px;"> <svg viewBox="0 0 300 30"> <rect width="300" height="30"></rect> </svg> </div> </div> <div> <div style="float:left; width:50%; height:100%;"> <svg viewBox="0 0 300 300"> <rect x="0" y="0" width="150" height="300"></rect> <rect x="150" y="0" width="150" height="300"></rect> </svg> </div> <div style="float:left; width:50%; height:100%;"> <svg viewBox="0 0 300 300"> <rect width="300" height="300"></rect> </svg> </div> </div> </body> </html> 663878 4 myles.borins 2012-07-05 21:45:05 -0700 Sorry about the spam... I have confirmed that this bug is present on OSX, Windows, and Linux OSX - present in webkit browser, chrome, and Safari Windows 7 - present in chrome Ubuntu - Present in chrome 665449 5 pdr 2012-07-09 20:46:48 -0700 Adding fmalita who was recently in this space. 665457 6 pdr 2012-07-09 21:18:15 -0700 After some further discussion on IRC it looks like the issue boils down to calculating the height of an SVG element with viewBox set. WebKit appears to be using 100% of the viewport... is that correct? Here's a smaller testcase: http://jsfiddle.net/FTcSA/2/ Notice that in WebKit the box is centered, whereas Firefox leaves it at the top. 665478 7 krit 2012-07-09 22:07:00 -0700 (In reply to comment #6) > After some further discussion on IRC it looks like the issue boils down to calculating the height of an SVG element with viewBox set. WebKit appears to be using 100% of the viewport... is that correct? > > Here's a smaller testcase: > http://jsfiddle.net/FTcSA/2/ > > Notice that in WebKit the box is centered, whereas Firefox leaves it at the top. I can just say that the behavior is looks incorrect. The actual size of the SVG is dependent on the CSS box of the SVG. This must be specified directly: <svg style="width: 100px; height:100px"> The with and height attribute are independent of the properties. If the properties were not specified, the default size (calculated value) for an inline SVG is 500px to 250px. That is what Firefox and Opera are doing if you do NOT specify a viewBox. Strangely this behavior changes if a viewBox was specified. I don't see a reason for that. IE10 on the other side, is doing what I would expect. To the centralization: This depends on the default values of preserveAspectRatio. However, if we assume that the 500px to 250px are not used in combination with viewBox (which does not make sense), the size should be dependent on the viewport (which also makes not much sense in HTML), and the behavior of WebKit would be correct. Just like it would be for a standalone SVG. But like I said, the SVG size should not be scaled, and the rect should fit in the size of 500px to 250px IMO. Since this is just a resolution of the SVG WG and not specified, it might be a good idea to bring it up on the www-svg mailing list, or open bugs for other browsers :). 665484 8 krit 2012-07-09 22:26:25 -0700 (In reply to comment #2) > I am having the same problem in regards to SVG and height. > > Expected Behavior: > > An SVG element with a viewBox attribute should responsively scale to fit the div element it is within, and the div element should accurately scale based on the aspect ratio of the viewBox. In firefox this behavior is accurate and consistent. It is consistent, but definitely not accurate since it does not take the default value for preserveAspectRatio into account. Just open your black SVG example snippets as standalone in any browser, then resize the window. You'll see that the black rect won't fit into the whole window, what it should following your assumptions on the pasted test. It doesn't because of the default value of preserveAspectRatio. Therefore WebKit is correct and Firefox and Opera are wrong on this particular part of the test. 665508 9 myles.borins 2012-07-09 23:42:19 -0700 > It doesn't because of the default value of preserveAspectRatio. Therefore WebKit is correct and Firefox and Opera are wrong on this particular part of the test. It does take the default value of preserveAspectRation into account... the problem is that the Height is being incorrectly calculated... creating an excess buffer on the top and bottom of the svg element. This prevents developers from "Stacking" svg elements on top of each other in the DOM in a responsive way using div elements. If one were to place multiple svg elements in a single div... they would not be able to have multiple viewports placed side by side in the window. The below example places 4 svg elements in a single div. It renders as expected in all major browsers (untested in IE) http://jsfiddle.net/teYA2/ Now if I were to place the elements into seperate divs I can use a bit of css to place four of them. Having not specified any dimension this result should "in theory" be responsive to the size of the window. http://jsfiddle.net/KS69Z/ This above example renders as expected in firefox, but with web-kit the default calculated height for the element is based on the size of the window rather than the aspect ratio of the viewbox. Funny enough there is a hack to fix this that works in the chrome dev past v21.x and also seems to work in the nightly build of web-kit. Adding style="height: 100%;" seems to render the expected output (although this will not work in the public release of either browser). http://jsfiddle.net/TmVVe/ It would seem to me like the default behavior is currently off, is it not strange that we need to specify a height of 100% with css? Should that not be the default? 1008575 10 krit 2014-05-12 06:43:45 -0700 This works the same in Firefox, WebKit trunk and Chromium now. Closing the bug. 151018 2012-07-05 21:32:11 -0700 2012-07-05 21:33:49 -0700 An http example of svg elements that render correctly in firefox, but incorrectly in webkit based browsers svg.html text/html 8946 myles.borins PCFET0NUWVBFIGh0bWw+CjxodG1sPgogICAgPGhlYWQ+PC9oZWFkPgogICAgPGJvZHk+CiAgICAg ICAgPGRpdj4KICAgICAgICAgICAgPGRpdj4KICAgICAgICAgICAgICAgIDxzdmcgdmlld0JveD0i MCAwIDc1MCAyNTAiIGlkPSJ2aWV3Ym94Ij4KICAgICAgICAgICAgICAgICAgICA8ZyB0cmFuc2Zv cm09InRyYW5zbGF0ZSgyNSwyNSkiPgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBzdHls ZT0ic3Ryb2tlOiAjMDAwMDAwOyBmaWxsOiAjZmZmZjAwOyAiIHg9IjAiIHk9IjAiIHdpZHRoPSI1 MCIgaGVpZ2h0PSIyMDAiIGlkPSI2MCIgY2xhc3M9Im5vdGUiIG5vdGVUeXBlPSJ5ZWxsb3ciPjwv cmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3Qgc3R5bGU9InN0cm9rZTogIzAwMDAw MDsgZmlsbDogI2ZmZmYwMDsgIiB4PSI1MCIgeT0iMCIgd2lkdGg9IjUwIiBoZWlnaHQ9IjIwMCIg aWQ9IjYyIiBjbGFzcz0ibm90ZSIgbm90ZVR5cGU9InllbGxvdyI+PC9yZWN0PgogICAgICAgICAg ICAgICAgICAgICAgICA8cmVjdCBzdHlsZT0ic3Ryb2tlOiAjMDAwMDAwOyBmaWxsOiAjZmZmZjAw OyAiIHg9IjEwMCIgeT0iMCIgd2lkdGg9IjUwIiBoZWlnaHQ9IjIwMCIgaWQ9IjY0IiBjbGFzcz0i bm90ZSIgbm90ZVR5cGU9InllbGxvdyI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8 cmVjdCBzdHlsZT0ic3Ryb2tlOiAjMDAwMDAwOyBmaWxsOiAjZmZmZjAwOyAiIHg9IjE1MCIgeT0i MCIgd2lkdGg9IjUwIiBoZWlnaHQ9IjIwMCIgaWQ9IjY1IiBjbGFzcz0ibm90ZSIgbm90ZVR5cGU9 InllbGxvdyI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBzdHlsZT0ic3Ry b2tlOiAjMDAwMDAwOyBmaWxsOiAjZmZmZjAwOyAiIHg9IjIwMCIgeT0iMCIgd2lkdGg9IjUwIiBo ZWlnaHQ9IjIwMCIgaWQ9IjY3IiBjbGFzcz0ibm90ZSIgbm90ZVR5cGU9InllbGxvdyI+PC9yZWN0 PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBzdHlsZT0ic3Ryb2tlOiAjMDAwMDAwOyBm aWxsOiAjZmZmZjAwOyAiIHg9IjI1MCIgeT0iMCIgd2lkdGg9IjUwIiBoZWlnaHQ9IjIwMCIgaWQ9 IjY5IiBjbGFzcz0ibm90ZSIgbm90ZVR5cGU9InllbGxvdyI+PC9yZWN0PgogICAgICAgICAgICAg ICAgICAgICAgICA8cmVjdCBzdHlsZT0ic3Ryb2tlOiAjMDAwMDAwOyBmaWxsOiAjZmZmZjAwOyAi IHg9IjMwMCIgeT0iMCIgd2lkdGg9IjUwIiBoZWlnaHQ9IjIwMCIgaWQ9IjcxIiBjbGFzcz0ibm90 ZSIgbm90ZVR5cGU9InllbGxvdyI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVj dCBzdHlsZT0ic3Ryb2tlOiAjMDAwMDAwOyBmaWxsOiAjZmZmZjAwOyAiIHg9IjM1MCIgeT0iMCIg d2lkdGg9IjUwIiBoZWlnaHQ9IjIwMCIgaWQ9IjcyIiBjbGFzcz0ibm90ZSIgbm90ZVR5cGU9Inll bGxvdyI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBzdHlsZT0ic3Ryb2tl OiAjMDAwMDAwOyBmaWxsOiAjZmZmZjAwOyAiIHg9IjQwMCIgeT0iMCIgd2lkdGg9IjUwIiBoZWln aHQ9IjIwMCIgaWQ9Ijc0IiBjbGFzcz0ibm90ZSIgbm90ZVR5cGU9InllbGxvdyI+PC9yZWN0Pgog ICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBzdHlsZT0ic3Ryb2tlOiAjMDAwMDAwOyBmaWxs OiAjZmZmZjAwOyAiIHg9IjQ1MCIgeT0iMCIgd2lkdGg9IjUwIiBoZWlnaHQ9IjIwMCIgaWQ9Ijc2 IiBjbGFzcz0ibm90ZSIgbm90ZVR5cGU9InllbGxvdyI+PC9yZWN0PgogICAgICAgICAgICAgICAg ICAgICAgICA8cmVjdCBzdHlsZT0ic3Ryb2tlOiAjMDAwMDAwOyBmaWxsOiAjZmZmZjAwOyAiIHg9 IjUwMCIgeT0iMCIgd2lkdGg9IjUwIiBoZWlnaHQ9IjIwMCIgaWQ9Ijc3IiBjbGFzcz0ibm90ZSIg bm90ZVR5cGU9InllbGxvdyI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBz dHlsZT0ic3Ryb2tlOiAjMDAwMDAwOyBmaWxsOiAjZmZmZjAwOyAiIHg9IjU1MCIgeT0iMCIgd2lk dGg9IjUwIiBoZWlnaHQ9IjIwMCIgaWQ9Ijc5IiBjbGFzcz0ibm90ZSIgbm90ZVR5cGU9InllbGxv dyI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBzdHlsZT0ic3Ryb2tlOiAj MDAwMDAwOyBmaWxsOiAjZmZmZjAwOyAiIHg9IjYwMCIgeT0iMCIgd2lkdGg9IjUwIiBoZWlnaHQ9 IjIwMCIgaWQ9IjgxIiBjbGFzcz0ibm90ZSIgbm90ZVR5cGU9InllbGxvdyI+PC9yZWN0PgogICAg ICAgICAgICAgICAgICAgICAgICA8cmVjdCBzdHlsZT0ic3Ryb2tlOiAjMDAwMDAwOyBmaWxsOiAj ZmZmZjAwOyAiIHg9IjY1MCIgeT0iMCIgd2lkdGg9IjUwIiBoZWlnaHQ9IjIwMCIgaWQ9IjgzIiBj bGFzcz0ibm90ZSIgbm90ZVR5cGU9InllbGxvdyI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAg ICAgICA8cmVjdCBzdHlsZT0ic3Ryb2tlOiAjMDAwMDAwOyBmaWxsOiAjZmZhNTAwOyAiIHg9IjM1 IiB5PSIwIiB3aWR0aD0iMzAiIGhlaWdodD0iMTI1IiBpZD0iNjEiIGNsYXNzPSJub3RlIiBub3Rl VHlwZT0ib3JhbmdlIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IHN0eWxl PSJzdHJva2U6ICMwMDAwMDA7IGZpbGw6ICNmZmE1MDA7ICIgeD0iODUiIHk9IjAiIHdpZHRoPSIz MCIgaGVpZ2h0PSIxMjUiIGlkPSI2MyIgY2xhc3M9Im5vdGUiIG5vdGVUeXBlPSJvcmFuZ2UiPjwv cmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3Qgc3R5bGU9InN0cm9rZTogIzAwMDAw MDsgZmlsbDogI2ZmYTUwMDsgIiB4PSIxODUiIHk9IjAiIHdpZHRoPSIzMCIgaGVpZ2h0PSIxMjUi IGlkPSI2NiIgY2xhc3M9Im5vdGUiIG5vdGVUeXBlPSJvcmFuZ2UiPjwvcmVjdD4KICAgICAgICAg ICAgICAgICAgICAgICAgPHJlY3Qgc3R5bGU9InN0cm9rZTogIzAwMDAwMDsgZmlsbDogI2ZmYTUw MDsgIiB4PSIyMzUiIHk9IjAiIHdpZHRoPSIzMCIgaGVpZ2h0PSIxMjUiIGlkPSI2OCIgY2xhc3M9 Im5vdGUiIG5vdGVUeXBlPSJvcmFuZ2UiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAg PHJlY3Qgc3R5bGU9InN0cm9rZTogIzAwMDAwMDsgZmlsbDogI2ZmYTUwMDsgIiB4PSIyODUiIHk9 IjAiIHdpZHRoPSIzMCIgaGVpZ2h0PSIxMjUiIGlkPSI3MCIgY2xhc3M9Im5vdGUiIG5vdGVUeXBl PSJvcmFuZ2UiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3Qgc3R5bGU9InN0 cm9rZTogIzAwMDAwMDsgZmlsbDogI2ZmYTUwMDsgIiB4PSIzODUiIHk9IjAiIHdpZHRoPSIzMCIg aGVpZ2h0PSIxMjUiIGlkPSI3MyIgY2xhc3M9Im5vdGUiIG5vdGVUeXBlPSJvcmFuZ2UiPjwvcmVj dD4KICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3Qgc3R5bGU9InN0cm9rZTogIzAwMDAwMDsg ZmlsbDogI2ZmYTUwMDsgIiB4PSI0MzUiIHk9IjAiIHdpZHRoPSIzMCIgaGVpZ2h0PSIxMjUiIGlk PSI3NSIgY2xhc3M9Im5vdGUiIG5vdGVUeXBlPSJvcmFuZ2UiPjwvcmVjdD4KICAgICAgICAgICAg ICAgICAgICAgICAgPHJlY3Qgc3R5bGU9InN0cm9rZTogIzAwMDAwMDsgZmlsbDogI2ZmYTUwMDsg IiB4PSI1MzUiIHk9IjAiIHdpZHRoPSIzMCIgaGVpZ2h0PSIxMjUiIGlkPSI3OCIgY2xhc3M9Im5v dGUiIG5vdGVUeXBlPSJvcmFuZ2UiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPHJl Y3Qgc3R5bGU9InN0cm9rZTogIzAwMDAwMDsgZmlsbDogI2ZmYTUwMDsgIiB4PSI1ODUiIHk9IjAi IHdpZHRoPSIzMCIgaGVpZ2h0PSIxMjUiIGlkPSI4MCIgY2xhc3M9Im5vdGUiIG5vdGVUeXBlPSJv cmFuZ2UiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3Qgc3R5bGU9InN0cm9r ZTogIzAwMDAwMDsgZmlsbDogI2ZmYTUwMDsgIiB4PSI2MzUiIHk9IjAiIHdpZHRoPSIzMCIgaGVp Z2h0PSIxMjUiIGlkPSI4MiIgY2xhc3M9Im5vdGUiIG5vdGVUeXBlPSJvcmFuZ2UiPjwvcmVjdD4K ICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L3N2Zz4KICAgICAgICAg ICAgPC9kaXY+CiAgICAgICAgICAgIDxkaXY+CiAgICAgICAgICAgICAgICA8c3ZnIHZpZXdCb3g9 IjAgMCA3NTAgMjUwIiBpZD0idmlld2JveCI+CiAgICAgICAgICAgICAgICAgICAgPGcgdHJhbnNm b3JtPSJ0cmFuc2xhdGUoMjUsMjUpIj4KICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3Qgc3R5 bGU9InN0cm9rZTogIzAwMDAwMDsgZmlsbDogI2ZmZmYwMDsgIiB4PSIwIiB5PSIwIiB3aWR0aD0i NTAiIGhlaWdodD0iMjAwIiBpZD0iNjAiIGNsYXNzPSJub3RlIiBub3RlVHlwZT0ieWVsbG93Ij48 L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IHN0eWxlPSJzdHJva2U6ICMwMDAw MDA7IGZpbGw6ICNmZmZmMDA7ICIgeD0iNTAiIHk9IjAiIHdpZHRoPSI1MCIgaGVpZ2h0PSIyMDAi IGlkPSI2MiIgY2xhc3M9Im5vdGUiIG5vdGVUeXBlPSJ5ZWxsb3ciPjwvcmVjdD4KICAgICAgICAg ICAgICAgICAgICAgICAgPHJlY3Qgc3R5bGU9InN0cm9rZTogIzAwMDAwMDsgZmlsbDogI2ZmZmYw MDsgIiB4PSIxMDAiIHk9IjAiIHdpZHRoPSI1MCIgaGVpZ2h0PSIyMDAiIGlkPSI2NCIgY2xhc3M9 Im5vdGUiIG5vdGVUeXBlPSJ5ZWxsb3ciPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAg PHJlY3Qgc3R5bGU9InN0cm9rZTogIzAwMDAwMDsgZmlsbDogI2ZmZmYwMDsgIiB4PSIxNTAiIHk9 IjAiIHdpZHRoPSI1MCIgaGVpZ2h0PSIyMDAiIGlkPSI2NSIgY2xhc3M9Im5vdGUiIG5vdGVUeXBl PSJ5ZWxsb3ciPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3Qgc3R5bGU9InN0 cm9rZTogIzAwMDAwMDsgZmlsbDogI2ZmZmYwMDsgIiB4PSIyMDAiIHk9IjAiIHdpZHRoPSI1MCIg aGVpZ2h0PSIyMDAiIGlkPSI2NyIgY2xhc3M9Im5vdGUiIG5vdGVUeXBlPSJ5ZWxsb3ciPjwvcmVj dD4KICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3Qgc3R5bGU9InN0cm9rZTogIzAwMDAwMDsg ZmlsbDogI2ZmZmYwMDsgIiB4PSIyNTAiIHk9IjAiIHdpZHRoPSI1MCIgaGVpZ2h0PSIyMDAiIGlk PSI2OSIgY2xhc3M9Im5vdGUiIG5vdGVUeXBlPSJ5ZWxsb3ciPjwvcmVjdD4KICAgICAgICAgICAg ICAgICAgICAgICAgPHJlY3Qgc3R5bGU9InN0cm9rZTogIzAwMDAwMDsgZmlsbDogI2ZmZmYwMDsg IiB4PSIzMDAiIHk9IjAiIHdpZHRoPSI1MCIgaGVpZ2h0PSIyMDAiIGlkPSI3MSIgY2xhc3M9Im5v dGUiIG5vdGVUeXBlPSJ5ZWxsb3ciPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPHJl Y3Qgc3R5bGU9InN0cm9rZTogIzAwMDAwMDsgZmlsbDogI2ZmZmYwMDsgIiB4PSIzNTAiIHk9IjAi IHdpZHRoPSI1MCIgaGVpZ2h0PSIyMDAiIGlkPSI3MiIgY2xhc3M9Im5vdGUiIG5vdGVUeXBlPSJ5 ZWxsb3ciPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3Qgc3R5bGU9InN0cm9r ZTogIzAwMDAwMDsgZmlsbDogI2ZmZmYwMDsgIiB4PSI0MDAiIHk9IjAiIHdpZHRoPSI1MCIgaGVp Z2h0PSIyMDAiIGlkPSI3NCIgY2xhc3M9Im5vdGUiIG5vdGVUeXBlPSJ5ZWxsb3ciPjwvcmVjdD4K ICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3Qgc3R5bGU9InN0cm9rZTogIzAwMDAwMDsgZmls bDogI2ZmZmYwMDsgIiB4PSI0NTAiIHk9IjAiIHdpZHRoPSI1MCIgaGVpZ2h0PSIyMDAiIGlkPSI3 NiIgY2xhc3M9Im5vdGUiIG5vdGVUeXBlPSJ5ZWxsb3ciPjwvcmVjdD4KICAgICAgICAgICAgICAg ICAgICAgICAgPHJlY3Qgc3R5bGU9InN0cm9rZTogIzAwMDAwMDsgZmlsbDogI2ZmZmYwMDsgIiB4 PSI1MDAiIHk9IjAiIHdpZHRoPSI1MCIgaGVpZ2h0PSIyMDAiIGlkPSI3NyIgY2xhc3M9Im5vdGUi IG5vdGVUeXBlPSJ5ZWxsb3ciPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3Qg c3R5bGU9InN0cm9rZTogIzAwMDAwMDsgZmlsbDogI2ZmZmYwMDsgIiB4PSI1NTAiIHk9IjAiIHdp ZHRoPSI1MCIgaGVpZ2h0PSIyMDAiIGlkPSI3OSIgY2xhc3M9Im5vdGUiIG5vdGVUeXBlPSJ5ZWxs b3ciPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3Qgc3R5bGU9InN0cm9rZTog IzAwMDAwMDsgZmlsbDogI2ZmZmYwMDsgIiB4PSI2MDAiIHk9IjAiIHdpZHRoPSI1MCIgaGVpZ2h0 PSIyMDAiIGlkPSI4MSIgY2xhc3M9Im5vdGUiIG5vdGVUeXBlPSJ5ZWxsb3ciPjwvcmVjdD4KICAg ICAgICAgICAgICAgICAgICAgICAgPHJlY3Qgc3R5bGU9InN0cm9rZTogIzAwMDAwMDsgZmlsbDog I2ZmZmYwMDsgIiB4PSI2NTAiIHk9IjAiIHdpZHRoPSI1MCIgaGVpZ2h0PSIyMDAiIGlkPSI4MyIg Y2xhc3M9Im5vdGUiIG5vdGVUeXBlPSJ5ZWxsb3ciPjwvcmVjdD4KICAgICAgICAgICAgICAgICAg ICAgICAgPHJlY3Qgc3R5bGU9InN0cm9rZTogIzAwMDAwMDsgZmlsbDogI2ZmYTUwMDsgIiB4PSIz NSIgeT0iMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjEyNSIgaWQ9IjYxIiBjbGFzcz0ibm90ZSIgbm90 ZVR5cGU9Im9yYW5nZSI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBzdHls ZT0ic3Ryb2tlOiAjMDAwMDAwOyBmaWxsOiAjZmZhNTAwOyAiIHg9Ijg1IiB5PSIwIiB3aWR0aD0i MzAiIGhlaWdodD0iMTI1IiBpZD0iNjMiIGNsYXNzPSJub3RlIiBub3RlVHlwZT0ib3JhbmdlIj48 L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IHN0eWxlPSJzdHJva2U6ICMwMDAw MDA7IGZpbGw6ICNmZmE1MDA7ICIgeD0iMTg1IiB5PSIwIiB3aWR0aD0iMzAiIGhlaWdodD0iMTI1 IiBpZD0iNjYiIGNsYXNzPSJub3RlIiBub3RlVHlwZT0ib3JhbmdlIj48L3JlY3Q+CiAgICAgICAg ICAgICAgICAgICAgICAgIDxyZWN0IHN0eWxlPSJzdHJva2U6ICMwMDAwMDA7IGZpbGw6ICNmZmE1 MDA7ICIgeD0iMjM1IiB5PSIwIiB3aWR0aD0iMzAiIGhlaWdodD0iMTI1IiBpZD0iNjgiIGNsYXNz PSJub3RlIiBub3RlVHlwZT0ib3JhbmdlIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAg IDxyZWN0IHN0eWxlPSJzdHJva2U6ICMwMDAwMDA7IGZpbGw6ICNmZmE1MDA7ICIgeD0iMjg1IiB5 PSIwIiB3aWR0aD0iMzAiIGhlaWdodD0iMTI1IiBpZD0iNzAiIGNsYXNzPSJub3RlIiBub3RlVHlw ZT0ib3JhbmdlIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IHN0eWxlPSJz dHJva2U6ICMwMDAwMDA7IGZpbGw6ICNmZmE1MDA7ICIgeD0iMzg1IiB5PSIwIiB3aWR0aD0iMzAi IGhlaWdodD0iMTI1IiBpZD0iNzMiIGNsYXNzPSJub3RlIiBub3RlVHlwZT0ib3JhbmdlIj48L3Jl Y3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IHN0eWxlPSJzdHJva2U6ICMwMDAwMDA7 IGZpbGw6ICNmZmE1MDA7ICIgeD0iNDM1IiB5PSIwIiB3aWR0aD0iMzAiIGhlaWdodD0iMTI1IiBp ZD0iNzUiIGNsYXNzPSJub3RlIiBub3RlVHlwZT0ib3JhbmdlIj48L3JlY3Q+CiAgICAgICAgICAg ICAgICAgICAgICAgIDxyZWN0IHN0eWxlPSJzdHJva2U6ICMwMDAwMDA7IGZpbGw6ICNmZmE1MDA7 ICIgeD0iNTM1IiB5PSIwIiB3aWR0aD0iMzAiIGhlaWdodD0iMTI1IiBpZD0iNzgiIGNsYXNzPSJu b3RlIiBub3RlVHlwZT0ib3JhbmdlIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDxy ZWN0IHN0eWxlPSJzdHJva2U6ICMwMDAwMDA7IGZpbGw6ICNmZmE1MDA7ICIgeD0iNTg1IiB5PSIw IiB3aWR0aD0iMzAiIGhlaWdodD0iMTI1IiBpZD0iODAiIGNsYXNzPSJub3RlIiBub3RlVHlwZT0i b3JhbmdlIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IHN0eWxlPSJzdHJv a2U6ICMwMDAwMDA7IGZpbGw6ICNmZmE1MDA7ICIgeD0iNjM1IiB5PSIwIiB3aWR0aD0iMzAiIGhl aWdodD0iMTI1IiBpZD0iODIiIGNsYXNzPSJub3RlIiBub3RlVHlwZT0ib3JhbmdlIj48L3JlY3Q+ CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9zdmc+CiAgICAgICAg ICAgIDwvZGl2PgogICAgICAgIDwvZGl2PgogICAgICAgIDxkaXY+CiAgICAgICAgICAgIDxkaXYg c3R5bGU9ImZsb2F0OmxlZnQ7IHdpZHRoOjUwJTsgaGVpZ2h0OjE1MHB4OyI+CiAgICAgICAgICAg ICAgICA8c3ZnIHZpZXdCb3g9IjAgMCAzMDAgMzAiPgogICAgICAgICAgICAgICAgICAgIDxyZWN0 IHdpZHRoPSIzMDAiIGhlaWdodD0iMzAiPjwvcmVjdD4KICAgICAgICAgICAgICAgIDwvc3ZnPgog ICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgPGRpdiBzdHlsZT0iZmxvYXQ6bGVmdDsgd2lk dGg6NTAlOyBoZWlnaHQ6MTUwcHg7Ij4KICAgICAgICAgICAgICAgIDxzdmcgdmlld0JveD0iMCAw IDMwMCAzMCI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIz MCI+PC9yZWN0PgogICAgICAgICAgICAgICAgPC9zdmc+CiAgICAgICAgICAgIDwvZGl2PgogICAg ICAgIDwvZGl2PgogICAgICAgIAogICAgICAgIDxkaXY+CiAgICAgICAgICAgIDxkaXYgc3R5bGU9 ImZsb2F0OmxlZnQ7IHdpZHRoOjUwJTsgaGVpZ2h0OjEwMCU7Ij4KICAgICAgICAgICAgICAgIDxz dmcgdmlld0JveD0iMCAwIDMwMCAzMDAiPgogICAgICAgICAgICAgICAgICAgIDxyZWN0IHg9IjAi IHk9IjAiIHdpZHRoPSIxNTAiIGhlaWdodD0iMzAwIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAg ICAgPHJlY3QgeD0iMTUwIiB5PSIwIiB3aWR0aD0iMTUwIiBoZWlnaHQ9IjMwMCI+PC9yZWN0Pgog ICAgICAgICAgICAgICAgPC9zdmc+CiAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICA8ZGl2 IHN0eWxlPSJmbG9hdDpsZWZ0OyB3aWR0aDo1MCU7IGhlaWdodDoxMDAlOyI+CiAgICAgICAgICAg ICAgICA8c3ZnIHZpZXdCb3g9IjAgMCAzMDAgMzAwIj4KICAgICAgICAgICAgICAgICAgICA8cmVj dCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCI+PC9yZWN0PgogICAgICAgICAgICAgICAgPC9zdmc+ CiAgICAgICAgICAgIDwvZGl2PgogICAgICAgIDwvZGl2PgogICAgPC9ib2R5Pgo8L2h0bWw+