Planet WebKithttp://planet.webkit.org/atom.xml2015-08-02T21:53:18+00:00http://intertwingly.net/code/venus/Using the System Font in Web Contenthttp://www.webkit.org/blog/?p=37092015-07-27T16:00:33+00:00<p>Web content is sometimes designed to fit in with the overall aesthetic of the underlying platform which it is being rendered on. One of the ways to achieve this is by using the platform’s system font, which is possible on iOS and OS X by using the “-apple-system” CSS value for the “font-family” CSS property. On iOS 9 and OS X 10.11, doing this allows you to use Apple’s new system font, San Francisco. Using “-apple-system” also correctly interacts with the font-weight CSS property to choose the correct font on Apple’s latest operating systems.</p>
<p><img alt="Mac OS X 10.11 El Capitan System Font" class="alignnone" height="206" src="https://www.webkit.org/blog-files/el-capitan-system-font.png" width="613" /></p>
<p>On platforms which do not support “-apple-system,” the browser will simply fall back to the next item in the font-family fallback list. This provides a great way to make sure all your users get a great experience, regardless of which platform they are using.</p>
<p>There are <a href="https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html">currently discussions in the w3c regarding standardizing this value</a> so authors could simply specify “system.” However, these discussions have not reached consensus, so WebKit prefixes this value.</p>
<p>Using any other mechanism to specify the system font is not guaranteed to behave as you might expect. This includes using any implementation details such as period-prefixed family names.</p>
<p>Going beyond the system font, iOS has dynamic type behavior, which can provide an additional level of fit and finish to your content. These text styles identify more than simply a particular font family; instead, they represent an entire style, including size and weight. These styles are therefore characterized by values given to the more-general “font” CSS property. The supported values are:</p>
<p>font: -apple-system-body<br />
font: -apple-system-headline<br />
font: -apple-system-subheadline<br />
font: -apple-system-caption1<br />
font: -apple-system-caption2<br />
font: -apple-system-footnote<br />
font: -apple-system-short-body<br />
font: -apple-system-short-headline<br />
font: -apple-system-short-subheadline<br />
font: -apple-system-short-caption1<br />
font: -apple-system-short-footnote<br />
font: -apple-system-tall-body</p>
<p>For more information, please see <a href="https://developer.apple.com/videos/wwdc/2015/?id=804">Antonio Cavedoni’s fantastic WWDC presentation</a> or contact <a href="https://twitter.com/jonathandavis/">@jonathandavis</a>.</p>Myles Maxfieldhttps://www.webkit.org/blogSurfin' SafariAll about WebKit developmenthttps://www.webkit.org/blogMichael Catanzaro: Useful DuckDuckGo bangshttps://blogs.gnome.org/mcatanzaro/?p=1592015-07-25T01:47:20+00:00<img align="right" alt="" class="face" height="115" src="http://planet.igalia.com/images/mcatanzaro.png" style="float: right;" width="115" />
<p><a href="https://duckduckgo.com">DuckDuckGo</a> bangs are just shortcuts to redirect your search to another search engine. My personal favorites:</p>
<ul>
<li>!gnomebugs — Runs a search on <a href="https://bugzilla.gnome.org">GNOME Bugzilla</a>. Especially useful followed by a bug number. For example, search for ‘!gnomebugs 100000′ and see what you get.</li>
<li>!wkb — Same thing for <a href="https://bugzilla.webkit.org">WebKit Bugzilla</a>.</li>
<li>!w — Searches Wikipedia.</li>
</ul>
<p><a href="https://duckduckgo.com/bang">There’s 6388 more</a>, but those are the three I can remember. If you work on GNOME or WebKit, these are super convenient.</p>Michael Catanzarohttp://planet.igalia.com/webkitPlanet Igalia WebKitPlanet Igalia WebKit - http://planet.igalia.com/webkithttp://planet.igalia.com/webkitXabier Rodríguez Calvar: ReadableStream almost readyhttp://blogs.igalia.com/xrcalvar/?p=4722015-07-23T16:17:41+00:00<p>Hello dear readers! Long time no see! You might thing that I have been lazy, and I was in blog posting but I was coding like mad.</p>
<p>First remarkable thing is that I attended the <a href="http://www.igalia.com/nc/igalia-247/news/item/igalia-to-attend-the-2015-webkit-contributors-meeting/">WebKit Contributors Meeting</a> that happened in March at <i>Apple</i> campus in Cupertino as part of the <a href="http://www.igalia.com/">Igalia</a> gang. There we discussed of course about <a href="https://streams.spec.whatwg.org/">Streams API</a>, its state and different implementation possibilities. Another very interesting point which would make me very happy would be the movement of Mac to <a href="http://www.cmake.org/">CMake</a>.</p>
<p>In a <a href="http://blogs.igalia.com/xrcalvar/2015/01/07/streams-api-in-webkit-at-the-web-engines-hackfest/">previous post</a> I already introduced the concepts of the <em>Streams API</em> and some of its possible use cases so I’ll save you that part now. The news is that <i>ReadableStream</i> has its basic funcionality complete. And what does it mean? It means that you can create a <i>ReadableStream</i> by providing the constructor with the underlying source and the strategy objects and read from it with its reader and all the internal mechanisms of backpresure and so on will work according to the spec. Yay!</p>
<p>Nevertheless, there’s still quite some work to do to complete the implementation of <em>Streams API</em>, like the implementation of byte streams, writable and transform streams, piping operations and built-in strategies (which is what I am on right now).I don’t know either when <i>Streams API</i> will be activated by default in the next builds of <i>Safari</i>, <a href="http://webkitgtk.org/">WebKitGTK+</a> or <a href="http://www.igalia.com/webkitforwayland/">WebKit for Wayland</a>, but we’ll make it at some point!</p>
<p>Code suffered already lots of changes because we were still figuring out which architecture was the best and Youenn did an awesome job in refactoring some things and providing support for promises in the bindings to make the implementation of <i>ReadableStream</i> more straitghforward and less “custom”.</p>
<p>Implementation could still suffer quite some important changes as, as part of my work implementing the strategies, some reviewers raised their concerns of having <em>Streams API</em> implemented inside <em>WebCore</em> in terms of <em>IDL</em> interfaces. I have already a proof of concept of <i>CountQueuingStrategy</i> and <i>ByteLengthQueuingStrategy</i> implemented inside <em>JavaScriptCore</em>, even a case where we use built-in <em>JavaScript</em> functions, which might help to keep closer to the spec if we can just include <em>JavaScript</em> code directly. We’ll see how we end up!</p>
<p>Last and not least I would like to thank <a href="http://www.igalia.com/">Igalia</a> for sponsoring me to attend the <i>WebKit Contributors Meeting</i> in Cupertino and also <a href="https://twitter.com/adenilsonc">Adenilson</a> for being so nice and taking us to very nice places for <a href="http://www.alicesrestaurant.com/">dinner</a> and drinks that we wouldn’t be able to find ourselves (I owe you, promise to return the favor at the <a href="http://www.webengineshackfest.org/">Web Engines Hackfest</a>). It was also really nice to have the oportunity of quickly visiting New York City for some hours because of the long connection there which usually would be a PITA, but it was very enjoyable this time.</p>calvarishttp://planet.igalia.com/webkitPlanet Igalia WebKitPlanet Igalia WebKit - http://planet.igalia.com/webkithttp://planet.igalia.com/webkitAnnouncing JetStream 1.1http://www.webkit.org/blog/?p=36112015-07-13T22:03:33+00:00<p>JetStream is the benchmark suite that WebKit developers use to tune JavaScript engine performance. It comprises latency benchmarks, which measure the start-up and worst-case execution times of the JavaScript engine, and throughput benchmarks, which measure average throughput in steady state. We want to make JetStream accurately reflect our performance goals — a change that improves the score should also improve the user experience. Today we are happy to announce JetStream 1.1, which improves the accuracy of the latency component of the suite. JetStream 1.1 fixes bugs in two existing tests and adds a new test to replace the oldest and smallest test in the latency component.</p>
<h2>A sound approach to responsiveness scores</h2>
<p>The latency component of JetStream is mostly made up of tests that measure the latency incurred when executing code for the first time. But it also includes two tests, splay-latency and mandreel-latency whose scores reflect how close a browser’s worst-case performance is to its average-case. A relatively good score on splay-latency indicates that a browser’s garbage collector is less likely to interfere with a web app’s responsiveness. Mandreel-latency is similar, but due to its larger code base and lower allocation rate, it primarily tests whether a browser’s just-in-time compiler interferes with responsiveness. Both of these tests originate from the <a href="https://developers.google.com/octane/">Octane version 2 benchmark suite</a>.</p>
<p>Splay-latency and mandreel-latency are intended to reward responsive browsers. A responsive browser will always execute the task quickly, rather than usually executing it quickly but sometimes having a hiccup with very bad performance. But these tests use the wrong metric for computing a responsiveness score: they first compute the root mean squared (RMS) of thousands of samples, and then report a score that is the reciprocal of the RMS. It turns out that this number doesn’t adequately reward browsers that have great responsiveness, and in some cases, it gives a high score to browsers that are less responsive.</p>
<p>For example, consider what would happen if Browser A always ran a task in 20 milliseconds, while Browser B ran the same task in either 10 milliseconds or 5 milliseconds at random with equal probability. Clearly, Browser B would appear to be more responsive – it always completes the task at least twice as fast as browser A. But, using RMS as the latency metric means that Browser A gets a higher score: since its performance is always 20 milliseconds, it will have an RMS of zero, which leads to a latency score of 1/0, i.e. infinity. Browser B will have an RMS around 3.5, leading to a score of 1/3.5, i.e. less than infinity. Setting aside the absurdity of a browser getting an infinite score — that’s also something we want to prevent — it’s clear that Browser A has a higher score on these tests despite always being less responsive. We’d like to be able to use these tests to tune the responsiveness of WebKit: we want to accept changes that improve the score and reject those that degrade it. But we can’t do this if the score rewards bad behavior.</p>
<p>The reason is that the RMS will increase (and the 1/RMS score will decrease) whenever there is an outlier in either direction. Both good outliers (the browser sometimes finishes a task much faster than normal) and bad outliers (the browser sometimes takes a long time) increase the RMS by the same amount. Instead of RMS, we want a one-sided metric, which punishes bad outliers while ignoring the good ones — we are fine with browsers sometimes being much faster than the average so long as the worst case is still great.</p>
<p>The simplest solution would be to compute a score based on the slowest execution out of the thousands of executions that these tests do. It’s tempting to do this, but it carries a cost: the worst case can be a noisy number. We want to reduce the measurement noise, since we want to be able to confidently measure small differences in performance between different versions of our code. An easy way to get most of the benefit of a worst-case measurement while reducing noise is to take the 0.5% worst of all samples and report their average.</p>
<p>Using the average of the worst samples never punishes browsers for sometimes running faster than normal. It zeroes in on exactly what we mean by responsiveness: it’s how fast the browser will run in the worst case. Consider how this affects splay-latency. The samples above the 99.5 percentile — roughly 10 samples in a typical run of splay — are exactly those where WebKit’s garbage collector has to do a full scan of the heap. Browsers that can split the heap scan into smaller chunks of work that never incur one long pause will score better on this test. It’s easy to intuit about the splay-latency and mandreel-latency scores: if one browser scores 2× higher than another, it means that this browser’s occasional performance hiccups will be 2× less severe.</p>
<p>The changes to improve the splay-latency and mandreel-latency tests were tracked by WebKit bugs <a href="https://bugs.webkit.org/show_bug.cgi?id=145762">145762</a> and <a href="https://bugs.webkit.org/show_bug.cgi?id=146378">146378</a>.</p>
<h2>Introducing CDjs</h2>
<p>JetStream includes many legacy benchmarks from older benchmark suites like <a href="https://www.webkit.org/perf/sunspider/sunspider.html">SunSpider</a> and <a href="https://v8.googlecode.com/svn/data/benchmarks/v7/run.html">V8</a>. Most of those tests are still relevant, since they feature non-trivial workloads that are representative of what we think developers want to be able to do efficiently in JavaScript. But we can further improve the benchmark suite by incrementally replacing the smallest and most trivial tests with larger and more complex ones. We are taking one small step in this direction in JetStream 1.1 by replacing cordic, previously the smallest latency test with just 80 non-comment lines of code, with a new test called CDjs, which is much more sophisticated.</p>
<p>CDjs is our JavaScript implementation of the <a href="https://www.cs.purdue.edu/sss/projects/cdx/">CDx real-time benchmark</a>. CDx is a collision detection benchmark in which aircraft fly around in a simulated airspace and collisions are reported by interpolating the flight paths between recorded frames. CDx has previously been implemented in Java and C, and <a href="http://dl.acm.org/citation.cfm?id=1755913.1755922">was</a> <a href="http://dl.acm.org/citation.cfm?id=1806615">used</a> for worst-case performance comparisons between those languages. CDx is usually run for hundreds, or even thousands, of iterations and performance results are computed based on the worst-case execution. This makes CDx a natural candidate for the latency component of JetStream. CDjs is a direct port of the Java implementation of CDx (also known as CDj), except for two changes:</p>
<ol>
<li>CDjs uses red-black trees rather than hashtables for its various mappings. This makes CDjs slightly more faithful to the concept of real-time, since hashtables may have random worst-case pathologies due to collisions. Also, while we were tempted to use the new <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map">Map</a> API in ES6, we weren’t able to do so in CDjs because it needs to use objects’ values as keys rather than object identity. The red-black tree implementation is a port of <a href="http://trac.webkit.org/browser/trunk/Source/WTF/wtf/RedBlackTree.h">WebKit’s existing red-black tree</a>.</li>
<li>CDjs doesn’t attempt to reuse objects quite as aggressively as CDj did. This makes CDjs more faithful to the experimental question that CDx was trying to ask: how much slower do you run when you write a real-time workload in a high-level language? The answer is more meaningful if the high-level program fully utilizes the features of the high-level language, like garbage collection.</li>
</ol>
<p>We run CDjs as a benchmark by simulating 1,000 aircraft that occasionally collide. We run the benchmark for 200 frames. This makes the benchmark run for around one second on a modern browser and typical notebook computer. The score is the inverse of the average of the 10 worst execution times from those 200 frames. The addition of this benchmark doesn’t change the overall weighting of JetStream between latency and throughput, though it does shift the definition of latency in the direction of worst-case of many samples rather than the cost of cold start.</p>
<p>The addition of CDjs to JetStream was tracked by WebKit bug <a href="https://bugs.webkit.org/show_bug.cgi?id=146156">146156</a>.</p>
<h2>Conclusion</h2>
<p>We are happy to introduce this significant update to the JetStream benchmark suite. This update makes JetStream’s latency metrics more accurate than they were before. The new suite is now available to run at <a href="http://browserbench.org/JetStream/">browserbench.org/JetStream/</a>. As always, file bugs at <a href="http://bugs.webkit.org/">bugs.webkit.org</a> if you find any issues in this benchmark.</p>Filip Pizlohttps://www.webkit.org/blogSurfin' SafariAll about WebKit developmenthttps://www.webkit.org/blogClaudio Saavedra: Fri 2015/Jul/10http://people.gnome.org/~csaavedra/news-2015-07.html#D102015-07-10T07:26:00+00:00<p>
It's summer! That means that, if you are a student,
you could be one of our summer interns in Igalia this
season. We have two positions available: the first
related to WebKit work and the second to web
development. Both positions can be filled in either of
our locations in Galicia or you can work remotely from
wherever you prefer (plenty of us work remotely, so
you'll have to communicate with some of us via jabber
and email anyway).
</p>
<p>
Have a look at the <a href="http://www.igalia.com/nc/igalia-247/news/item/announcing-igalias-summer-intern-positions/">announcement
in our web page</a> for more details, and don't hesitate
to contact me if you have any doubt about the
internships!
</p>Igalia WebKithttp://planet.igalia.com/webkitPlanet Igalia WebKitPlanet Igalia WebKit - http://planet.igalia.com/webkithttp://planet.igalia.com/webkitManuel Rego: CSS Grid Layout is just around the corner (CSSConf US 2015)http://blogs.igalia.com/mrego/2015/06/30/css-grid-layout-is-just-around-the-corner-cssconf-us-2015/2015-06-29T22:00:00+00:00<p>Coming back to real life after a wonderful week in New York City is not that easy, but here we’re on the other side of the pond writing about CSS Grid Layout again.</p>
<p>First kudos to <a href="http://bocoup.com/">Bocoup</a> for the <a href="https://2015.cssconf.com/"><strong>CSSConf US 2015</strong></a> organization. Specially to <a href="https://twitter.com/ajpiano">Adam Sontag</a> and the rest of the conference staff. You were really supportive during the whole week. And the <a href="https://2015.cssconf.com/#videos">videos with live transcripts</a> were available just a few days after the conference, awesome job! The only issue was the internet connection which was really flaky.</p>
<p>So, yeah I attended CSSConf this year, but not only that, I was also <strong>speaking about <a href="http://dev.w3.org/csswg/css-grid/">CSS Grid Layout</a></strong> and <a href="https://www.youtube.com/watch?v=9js_5MjiGFo">the video of my talk</a> is already online together with the <a href="http://people.igalia.com/mrego/talks/cssconf-us-2015-css-grid-layout/">slides</a>.</p>
<p>During the talk I described the basic concepts, syntax and features of CSS Grid with different live coding examples. Then I tried to explain the main tasks that the browser has to do in order to render a grid and gave some tips about grid performance. Finally, we reviewed the browsers adoption and the status of <a href="http://www.chromium.org/blink">Chromium/Blink</a> and <a href="http://www.webkit.org">Safari/WebKit</a> implementations that <a href="http://www.igalia.com">Igalia</a> is doing.</p>
<p><a href="http://blogs.igalia.com/mrego/files/2015/06/css-grid-layout-sketchnotes.jpg"><img alt="CSS Grid Layout is just around the corner talk sketchnotes by Susan" src="http://blogs.igalia.com/mrego/files/2015/06/css-grid-layout-sketchnotes.jpg" /></a>
<span class="caption text-muted"><em>CSS Grid Layout is just around the corner</em> talk sketchnotes by <a href="http://sketch.bysusanlin.com/post/122179986223/day-2-of-cssconf-2015-many-css-quirks-mastering">Susan</a></span></p>
<p>The feedback about my talk was incredibly positive and everybody seemed really excited about what CSS Grid Layout can bring to the web platform. <strong>Big thanks to you all!</strong></p>
<div>
<blockquote class="twitter-tweet" lang="en"><p dir="ltr" lang="en">The CSS grid spec is blowing my mind. Why haven’t I looked at this before?! <a href="https://twitter.com/regocas">@regocas</a> <a href="https://twitter.com/hashtag/cssconf?src=hash">#cssconf</a></p>— Dave Newton  (@newtron) <a href="https://twitter.com/newtron/status/611923026305650689">June 19, 2015</a></blockquote>
<blockquote class="twitter-tweet" lang="en"><p dir="ltr" lang="en">Love hearing about what the rendering engine is doing when it encounters CSS grids. <a href="https://twitter.com/regocas">@regocas</a> made it visual 💛💛check out his slides! <a href="https://twitter.com/CSSConf">@CSSConf</a></p>— Nicole Sullivan (@stubbornella) <a href="https://twitter.com/stubbornella/status/611926549395341312">June 19, 2015</a></blockquote>
</div>
<div>
<blockquote class="twitter-tweet" lang="en"><p dir="ltr" lang="en">Mind blown by new CSS Grid properties from <a href="https://twitter.com/hashtag/cssconf?src=hash">#cssconf</a> speaker and Blink/WebKit Grid implementer <a href="https://twitter.com/regocas">@regocas</a> !!! <a href="http://t.co/ocHJeeYvJt">pic.twitter.com/ocHJeeYvJt</a></p>— Matt Swensen (@mjswensen) <a href="https://twitter.com/mjswensen/status/611925394892156928">June 19, 2015</a></blockquote>
</div>
<div></div>
<p>Of course, there were other great talks at CSSConf as you can check in the videos. From the top of my head, I loved the <a href="https://youtu.be/s4HdeJctq-A">one by <strong>Lea Verou</strong></a>, impressive talk as usual where she even released a <a href="http://leaverou.github.io/conic-gradient/">polyfill for conic gradients</a> on the stage. SVG and animations have two nice talks by <a href="https://youtu.be/tsGa-gcckwY">Chris Coyier</a> and <a href="https://youtu.be/09_8edPAsR8">Sarah Drasner</a>. <a href="https://youtu.be/1yUFTrAxTzg">PostCSS</a> and <a href="https://youtu.be/NoaxsCi13yQ">inline styles</a> were also hot topics. <a href="https://youtu.be/jYGAjAee0dU">Responsive (and responsible!) images</a>, <a href="https://youtu.be/lvxLb2zy5Hs">Fun.css</a> and <a href="https://youtu.be/vTbV0ZBfxR8">CSS? WTF!</a> were also great (and probably I’m forgetting some other).</p>
<p>Last, on Thursday’s night we attended <a href="http://brooklynjs.com/">BrooklynJS</a> which had a great panel discussing about CSS. The <strong>inline styles vs stylesheets</strong> topic became hot, as projects like <a href="http://facebook.github.io/react/">React</a> are moving people away from stylesheets. <a href="https://twitter.com/chriscoyier">Chris Coyier</a> (one of the panelists and also speaker at CSSConf) wrote a <a href="https://css-tricks.com/the-debate-around-do-we-even-need-css-anymore/">nice post</a> past week giving a good overview of this topic. Also <a href="https://youtu.be/wEJ0rxz4W0U">The Four Fives</a> were amazing!</p>
<p>On top of that, as part of the collaboration between <a href="http://www.igalia.com"><strong>Igalia</strong></a> and <a href="http://www.bloomberg.com/"><strong>Bloomberg</strong></a>, I was visiting their <a href="https://en.wikipedia.org/wiki/731_Lexington_Avenue">fancy office in Manhattan</a>. I spent a great time there talking about grids with several people from the team. They really believe that CSS Grid Layout will change the future of the web benefiting lots of people in different use cases, and hopefully helping to alleviate performance issues in complex scenarios.</p>
<p><img alt="Igalia and Bloomberg working together to build a better web" class="center-block" src="http://blogs.igalia.com/mrego/files/2014/03/igalia-bloomberg.png" />
<span class="caption text-muted"><strong>Igalia</strong> and <strong>Bloomberg</strong> working together to build a better web</span></p>
<p>Looking forward for the next opportunity to talk about CSS Grid Layout. Keeping the hard work to make it a reality as soon as possible!</p>Igalia WebKithttp://planet.igalia.com/webkitPlanet Igalia WebKitPlanet Igalia WebKit - http://planet.igalia.com/webkithttp://planet.igalia.com/webkitWeb Inspector Console Improvementshttp://www.webkit.org/blog/?p=35162015-06-24T21:00:03+00:00<p>The console is an essential part of Web Inspector. Evaluating expressions in the quick console is one of the primary ways of interacting with the inspected page. Logs, errors, and warnings emitted from the page show up in the console and exploring or interacting with these objects is a given while debugging.</p>
<p>We recently improved both the Console and Object views in Web Inspector to make it more powerful and fun to use. Our main focus was getting quicker access to useful data and modernizing it to work better with the new changes in JavaScript.</p>
<h3>Basics – Object Previews, Trees, and $n</h3>
<p>Object previews allow you to see the first few properties without needing to expand them. You’ll notice that each evaluation provides you with a “$n” debugger variable to refer back to that object later. These special variables are known only to the tools, so you won’t be cluttering the page with temporary variables. $0 still exists and refers to the current selected node in the DOM Tree.</p>
<div style="padding-left: 80px;"><img alt="Object Preview" height="82" src="https://www.webkit.org/blog-files/console-improvements/object-preview.png" width="366" /></div>
<p>When expanded, the full object tree view cleanly separates properties and API. Again, we use object previews where possible to reveal more data at a glance. The icons for each property correspond to the type of the value for that property. For example, in the image below you’ll see properties with number values have a blue N icon, strings with a red S, functions a green F, etc. The icons give objects a visual pattern, and makes it easy to visually find a particular property or an unexpected change in the normal data an object holds.</p>
<div style="padding-left: 80px;"><img alt="Object Tree" height="298" src="https://www.webkit.org/blog-files/console-improvements/object-tree.png" width="441" /></div>
<h3>Supporting New Types</h3>
<p>Web Inspector has always had great support for inspecting certain built-in JavaScript types such as Arrays and DOM types like Nodes. Web Inspector has improved those views and now has comprehensive support for all of the built-in JavaScript types. This including the new ES6 types (Symbol, Set, Map, WeakSet, WeakMap, Promises, Classes, Iterators).</p>
<div style="padding-left: 80px;"><img alt="Array, Set, and Map object trees" height="341" src="https://www.webkit.org/blog-files/console-improvements/collections.png" width="462" /></div>
<p>WebKit’s tools are most useful when they show internal state of objects, known only to the engine, that is otherwise inaccessible. For example, showing the current status of Promises:</p>
<div style="padding-left: 80px;"><img alt="Promises" height="125" src="https://www.webkit.org/blog-files/console-improvements/promises.png" width="468" /></div>
<p>Or upcoming values of native Iterators:</p>
<div style="padding-left: 80px;"><img alt="Iterators" height="120" src="https://www.webkit.org/blog-files/console-improvements/iterators.png" width="373" /></div>
<p>Other interesting cases are showing values in WeakSets and WeakMaps, or showing the original target function and bound arguments for bound functions.</p>
<h3>API View</h3>
<p>When expanding an object’s prototype you get a great API view showing what methods you can call on the object. The API view always provides parameter names for user functions and even provides curated versions for native functions. The API view makes it really convenient to lookup or discover the ways that you can interact with objects already available to you in the console.</p>
<div><img alt="Array API View" height="178" src="https://www.webkit.org/blog-files/console-improvements/array-api.png" style="float: left; padding-left: 5px; padding-right: 5px;" width="351" /><img alt="Local Storage Object Tree" height="182" src="https://www.webkit.org/blog-files/console-improvements/localStorage-api.png" style="float: left;" width="250" /></div>
<div style="clear: both;"></div>
<p>As an added bonus, if you are working with ES6 Classes and log a class by its name or its constructor you immediately get the API view for that class.</p>
<h3>Interactivity</h3>
<p>Object trees are more interactive. Hover a property icon to see the property’s descriptor attributes. Hover the property name to see the exact path you can use to access the property. Getters can be invoked, and their results can be further explored.</p>
<div style="margin-bottom: 1em;"><img alt="Property Descriptor tooltip" height="141" src="https://www.webkit.org/blog-files/console-improvements/tooltip-1.png" style="float: left; padding-left: 60px; padding-right: 10px;" width="250" /><img alt="Property Path tooltip" height="141" src="https://www.webkit.org/blog-files/console-improvements/tooltip-2.png" style="float: left;" width="250" /></div>
<div style="clear: both;"></div>
<p>Context menus also provide more options. One of the most powerful features is that with any value in an Object tree you can use the context menu and select “Log Value” to re-log the value to the Console. This immediately creates a $n reference to the live object, letting you interact with it or easily reference it again later.</p>
<div style="padding-left: 80px;"><video controls="controls" height="320" src="/blog-files/console-improvements/interactivity.m4v" width="440"></video></div>
<h3>Console Messages</h3>
<p>Console messages have also had a UI refresh, making logs, errors, warnings, and their location links stand out more:</p>
<p></p><center><img alt="Console Messages" height="253" src="https://www.webkit.org/blog-files/console-improvements/console-messages.png" width="750" /></center><p></p>
<h3>Feedback</h3>
<p>These enhancements are available to use in <a href="http://nightly.webkit.org">WebKit Nightly Builds</a>. We would love to hear your feedback! You can send us quick feedback on Twitter (<a href="https://twitter.com/JosephPecoraro">@JosephPecoraro</a>, <a href="https://twitter.com/xeenon/">@xeenon</a>), <a href="http://webkit.org/new-inspector-bug">file a bug report</a>, or even consider contributing your own enhancements!</p>Joseph Pecorarohttps://www.webkit.org/blogSurfin' SafariAll about WebKit developmenthttps://www.webkit.org/blogJavier Fernández: Performance analysis of Grid Layouthttp://blogs.igalia.com/jfernandez/?p=11042015-06-24T12:03:03+00:00<p>Now that we have a quite complete implementation of <a href="http://dev.w3.org/csswg/css-grid/" target="_blank">CSS Grid Layout</a> specification it’s time to take care of performance analysis and optimizations. In this essay, which is the first of a series of posts about performance, I’ll first introduce briefly how to use Blink (Chrome) and WebKit (Safari) performance analysis tools, some of the most interesting cases I’ve seen during my work on the implementation of this spec and, finally, a basic case to compare Flexbox and Grid layout models, which I’d like to evolve and analyze further in the coming months.</p>
<h3>Performance analysis tools</h3>
<p>Both WebKit and Blink projects provide several useful and easy to use scrips (python) to run a set of test cases and take different measurements and early analysis. They were written before the fork, that’s why related <a href="http://trac.webkit.org/wiki/Performance%20Tests" target="_blank">documentation</a> can be found at WebKit’s track, but both engines still uses them, for the time being.</p>
<blockquote><p>
Tools/Scripts/run-perf-tests<br />
Tools/Scripts/webkitpy/performance_tests/
</p></blockquote>
<p>There are a wide set of performance tests under <strong>PerformanceTest</strong> folder, at Blink’s/WebKit’s root directory, but even though both engines share a substantial number of tests, there are some differences.</p>
<blockquote><p>
(blink’s root directory) $ ls PerformanceTests/<br />
Bindings BlinkGC Canvas CSS DOM Dromaeo Events inspector Layout Mutation OWNERS Parser resources ShadowDOM Skipped SunSpider SVG XMLHttpRequest XSSAuditor
</p></blockquote>
<p>Chromium project has introduced a new performance tool, called <strong>Telemetry</strong>, which in addition of running the above mentioned tests, it’s designed to execute more complex cases like running specific PageSets or doing benchmarking to compare results with a preset recording (<a href="http://github.com/chromium/web-page-replay/blob/master/README.md">WebPageRelay</a>). It’s also possible to send patches to performance try bots, directly from <em>gclient</em> or git (depot_tools) command line. There are quite much information available in the following links:</p>
<ul>
<li><a href="http://sites.google.com/a/chromium.org/dev/developers/telemetry">Telemetry</a></li>
<li><a href="http://www.chromium.org/developers/tree-sheriffs/perf-sheriffs/bisecting-performance-regressions">Bisecting performance regressions</a></li>
<li><a href="http://www.chromium.org/developers/telemetry/performance-try-bots">Performance try-bots</a></li>
</ul>
<p>Regarding profiling tools, it’s possible both in Webkit and Blink to use the <strong>–profiler</strong> option when running the performance tests so we can collect profiling data. However, while WebKit recommends <a href="http://perf.wiki.kernel.org/index.php/Main_Page" target="_blank">perf</a> for linux, Google’s Blink engine provides some <a href="http://sites.google.com/a/chromium.org/dev/developers/profiling-chromium-and-webkit" target="_blank">alternatives</a>.</p>
<h3>CSS Grid Layout performance tests and current status</h3>
<p>While implementing a new browser feature is not easy to measure performance while code evolves so much and quickly and, what it’s worst, be aware of regressions introduced by new logic. When the feature’s syntax changes or there are missing or incomplete functionality, it’s not always possible to establish a well defined baseline for performance. It’s also a though decision to determine which use cases we might care about; obviously the faster the better, but adding performance optimizations usually complicates code, it may affect its robustness and it could lead to unexpected, and even worst, hard to find bugs.</p>
<p>At the time of this writing, we had 3 basic performance tests:</p>
<ul>
<li><a href="http://src.chromium.org/viewvc/blink/trunk/PerformanceTests/Layout/auto-grid-lots-of-data.html?revision=185484">auto-grid-lots-of-data.html</a> – 100 x 20 auto-sized grid (no stretch).</li>
<li><a href="http://src.chromium.org/viewvc/blink?view=revision&amp;revision=185484">fixed-grid-lots-of-data.html</a> – 100 x 20 fixed-sized grid (no stretch).</li>
<li><a href="http://src.chromium.org/viewvc/blink?view=revision&amp;revision=192758">fixed-grid-lots-of-stretched-data.html</a> – 100 x 20 fixed-sized grid (stretch)</li>
</ul>
<p>Why we have selected those uses cases to measure and keep track of performance regression ? First of all, note that <em>auto-sizing</em> one of the most expensive branches inside the <a href="http://dev.w3.org/csswg/css-grid/#algo-track-sizing" target="_blank">grid track sizing algorithm</a>, so we are really interested on both, improving it and keeping track of regressions on this code path.</p>
<div class="wp_syntax"><table><tbody><tr><td class="code"><pre class="css">body <span>{</span>
<span>display</span><span>:</span> grid<span>;</span>
grid-template-rows<span>:</span> <span>repeat</span><span>(</span><span>100</span><span>,</span> <span>auto</span><span>)</span><span>;</span>
grid-template-columns<span>:</span> <span>repeat</span><span>(</span><span>20</span><span>,</span> <span>auto</span><span>)</span><span>;</span>
<span>}</span>
<span>.gridItem</span> <span>{</span>
<span>height</span><span>:</span> <span>200px</span><span>;</span>
<span>width</span><span>:</span> <span>200px</span><span>;</span>
<span>}</span></pre></td></tr></tbody></table></div>
<p>On the other hand, <em>fixed-sized</em> is the easiest/fastest path of the algorithm, so besides the importance of avoiding regressions (when possible), it’s also a good case to compare with <em>auto-sized</em>.</p>
<div class="wp_syntax"><table><tbody><tr><td class="code"><pre class="css">body <span>{</span>
<span>display</span><span>:</span> grid<span>;</span>
grid-template-rows<span>:</span> <span>repeat</span><span>(</span><span>100</span><span>,</span> <span>200px</span><span>)</span><span>;</span>
grid-template-columns<span>:</span> <span>repeat</span><span>(</span><span>20</span><span>,</span> <span>200px</span><span>)</span><span>;</span>
<span>}</span>
<span>.gridItem</span> <span>{</span>
<span>height</span><span>:</span> <span>200px</span><span>;</span>
<span>width</span><span>:</span> <span>200px</span><span>;</span>
<span>}</span></pre></td></tr></tbody></table></div>
<p>Finally, a stretching use cases was added because it’s the <strong>default alignment value</strong> for grid items and the two test cases already described use fixed size items, hence no stretch (even though items fill the whole grid cell area). Given that I implemented <a href="http://dev.w3.org/csswg/css-align/" target="_blank">CSS Box Alignment</a> support for grid I was conscious of how expensive the stretching logic is, so I considered it an important use case to analyze and optimize as much as possible. Actually, I’ve already introduced several optimizations because the early implementation was quite slow, around <strong>40% slower</strong> than using any other basic alignment (start, end, center). We will talk more about this later when we analyze a case to compare Flexbox and Grid performance in layout.</p>
<div class="wp_syntax"><table><tbody><tr><td class="code"><pre class="css">body <span>{</span>
<span>display</span><span>:</span> grid<span>;</span>
grid-template-rows<span>:</span> <span>repeat</span><span>(</span><span>100</span><span>,</span> <span>200px</span><span>)</span><span>;</span>
grid-template-columns<span>:</span> <span>repeat</span><span>(</span><span>20</span><span>,</span> <span>200px</span><span>)</span><span>;</span>
<span>}</span>
<span>.gridItem</span> <span>{</span>
<span>height</span><span>:</span> <span>auto</span><span>;</span>
<span>width</span><span>:</span> <span>auto</span><span>;</span>
<span>}</span></pre></td></tr></tbody></table></div>
<p>The basic HTML body of these 3 tests is quite simple because we want to analyze performance of very specific parts of the Grid Layout logic, in order to detect regressions in sensible code paths. We’d like to have eventually some real use cases to analyze and create many more performance tests, but chrome performance platform it’s definitively not the place to do so. The following graphs show performance evolution during 2015 for the 3 tests we have defined so far.</p>
<p><a href="http://blogs.igalia.com/jfernandez/files/2015/06/grid-performance-overview.png"><img alt="grid-performance-overview" class="aligncenter wp-image-1115" height="502" src="http://blogs.igalia.com/jfernandez/files/2015/06/grid-performance-overview.png" width="875" /></a></p>
<p>Note that yellow trace shows data taken from a reference build, so we can discount temporary glitches on the machine running the performance tests of target build, which are shown in the blue trace; this reference trace is also useful to detect invalid regression alerts.</p>
<h3>Why performance is so different for these cases ?</h3>
<p>The 3 tests we have for Grid Layout use <strong>runs/second</strong> values as a way to measure performance; this is the <a href="http://trac.webkit.org/wiki/Performance%20Tests#MeasuringRunsPerSecond">preferred method</a> for both WebKit and Blink engines because we can detect regressions with relatively small tests. It’s possible, though, to do other kind of measurements. Looking at the graphs above we can extract the following data:</p>
<ul>
<li>auto-sized grid: around 650 runs/sec</li>
<li>fixed-sized grid: around 1400 runs/sec</li>
<li>fixed-sized stretched grid: around 1250 runs/sec</li>
</ul>
<p>Before analyzing possible causes of performance drop for each case, I’ve defined some additional tests to stress even more these 3 cases, so we can realize how grid size affect to the obtained results. I defined 20 tests for these cases, each one with different grid items; from 10×10 up to 200×200 grids. I run those tests in my own laptop, so let’s take the absolute numbers of each case with a grain of salt; although differences between each of these 3 scenarios should be coherent. The table below shows some numeric results of this experiment.</p>
<p><a href="http://blogs.igalia.com/jfernandez/files/2015/06/grid-fixed-VS-auto-VS-stretch.png"><img alt="grid-fixed-VS-auto-VS-stretch" class="aligncenter wp-image-1129" height="355" src="http://blogs.igalia.com/jfernandez/files/2015/06/grid-fixed-VS-auto-VS-stretch.png" width="624" /></a></p>
<p>First of all, recall that these 3 tests produce the same web visualization, consisting of grids with NxN items of 100px each one. The only difference is the grid layout strategy used to produce such result: <em>auto-sizing</em>, <em>fixed-sizing</em> and <em>stretching</em>. So now, focusing on previous table’s data we can evaluate the cost, in terms of layout performance, of using <em>auto-sized</em> tracks for defining the grid (which may be the only solution for certain cases). Performance drop is even growing with the number of grid items, but we can conclude that it’s stabilized around 60%. On the other hand <em>stretching</em> is also slower but, unlike <em>auto-sized</em>, in this case performance drop does not show a high dependency of grid size, more or less constant around 15%.</p>
<p><a href="http://blogs.igalia.com/jfernandez/files/2015/06/grid-performance-graphs-2.png"><img alt="grid-performance-graphs-2" class="aligncenter wp-image-1152" height="244" src="http://blogs.igalia.com/jfernandez/files/2015/06/grid-performance-graphs-2.png" width="769" /></a></p>
<h4>Impact of auto-sized tracks in layout performance</h4>
<p>Basically, the track sizing algorithm can be described in the following 4 steps:</p>
<ul>
<li>1- Initialize per Grid track variables.</li>
<li>2- Resolve content-based TrackSizingFunctions.</li>
<li>3- Grow all Grid tracks in GridTracks from their baseSize up to their growthLimit value until freeSpace is exhausted.</li>
<li>4- Grow all Grid tracks having a fraction as the MaxTrackSizingFunction.</li>
</ul>
<p>These steps will be executed twice, first cycle for determining column tracks’s size and another cycle to set row tracks’s size which it may depend on grid’s width. When using just fixed-sized tracks in the very simple case we are testing, the only computation required to determine grid’s size is completing <strong>step 1</strong> and determining free available space based on the specified fixed-size values of each track.</p>
<div class="wp_syntax"><table><tbody><tr><td class="code"><pre class="c"><span>// 1. Initialize per Grid track variables.</span>
<span>for</span> <span>(</span><span>size_t</span> i <span>=</span> <span>0</span><span>;</span> i <span>&lt;</span> tracks.<span>size</span><span>(</span><span>)</span><span>;</span> <span>++</span>i<span>)</span> <span>{</span>
GridTrack<span>&amp;</span> track <span>=</span> tracks<span>[</span>i<span>]</span><span>;</span>
GridTrackSize trackSize <span>=</span> gridTrackSize<span>(</span>direction<span>,</span> i<span>)</span><span>;</span>
<span>const</span> GridLength<span>&amp;</span> minTrackBreadth <span>=</span> trackSize.<span>minTrackBreadth</span><span>(</span><span>)</span><span>;</span>
<span>const</span> GridLength<span>&amp;</span> maxTrackBreadth <span>=</span> trackSize.<span>maxTrackBreadth</span><span>(</span><span>)</span><span>;</span>
track.<span>setBaseSize</span><span>(</span>computeUsedBreadthOfMinLength<span>(</span>direction<span>,</span> minTrackBreadth<span>)</span><span>)</span><span>;</span>
track.<span>setGrowthLimit</span><span>(</span>computeUsedBreadthOfMaxLength<span>(</span>direction<span>,</span> maxTrackBreadth<span>,</span> track.<span>baseSize</span><span>(</span><span>)</span><span>)</span><span>)</span><span>;</span>
<span>if</span> <span>(</span>trackSize.<span>isContentSized</span><span>(</span><span>)</span><span>)</span>
sizingData.<span>contentSizedTracksIndex</span>.<span>append</span><span>(</span>i<span>)</span><span>;</span>
<span>if</span> <span>(</span>trackSize.<span>maxTrackBreadth</span><span>(</span><span>)</span>.<span>isFlex</span><span>(</span><span>)</span><span>)</span>
flexibleSizedTracksIndex.<span>append</span><span>(</span>i<span>)</span><span>;</span>
<span>}</span>
<span>for</span> <span>(</span><span>const</span> auto<span>&amp;</span> track<span>:</span> tracks<span>)</span> <span>{</span>
freeSpace <span>-=</span> track.<span>baseSize</span><span>(</span><span>)</span><span>;</span>
<span>}</span></pre></td></tr></tbody></table></div>
<p>Focusing now on the <em>auto-sized</em> scenario, we will have the overhead of resolving <em>content-sized</em> functions for all the grid items.</p>
<div class="wp_syntax"><table><tbody><tr><td class="code"><pre class="c"><span>// 2. Resolve content-based TrackSizingFunctions.</span>
<span>if</span> <span>(</span><span>!</span>sizingData.<span>contentSizedTracksIndex</span>.<span>isEmpty</span><span>(</span><span>)</span><span>)</span>
resolveContentBasedTrackSizingFunctions<span>(</span>direction<span>,</span> sizingData<span>)</span><span>;</span></pre></td></tr></tbody></table></div>
<p>I didn’t add source code of <em>resolveContentBasedTrackSizingFunctions</em> because it’s quite complex, but basically it implies a cost proportional to the number of grid tracks (minimum of 2x), in order to determine <em>minContent</em> and <em>maxContent</em> values for each grid item. It might imply additional computation overhead when using <em>spanning</em> items; it would require to sort them based on their spanning value and iterate over them again to resolve their <em>content-sized</em> functions.</p>
<p>Some issues may be interesting to analyze in the future:</p>
<ul>
<li>How much each content-sized track costs ?</li>
<li>What is the impact on performance of using <em>flexible-sized</em> tracks ? Would it be the worst case scenario ? Considering it will require to follow the four steps of track sizing algorithm, it likely will.</li>
<li>Which are the performance implications of using spanning items ?</li>
</ul>
<h4>Why stretching is so performance drain ?</h4>
<p>This is an interesting issue, given that <em>stretch</em> is the <strong>default value</strong> for both Grid and Flexbox items. Actually, it’s the root cause of why Grid beats Flexbox in terms of layout performance for the cases when <em>stretch</em> alignment is used. As I’ll explain later, Flexbox doesn’t have the <strong>optimizations</strong> I’ve implemented for Grid Layout.</p>
<p>Stretching logic takes place during the grid container layout operations, after all tracks have their size precisely determined and we have properly computed all grid track’s positions relatively to the grid container. It happens before the alignment logic is executed because <em>stretching</em> may imply changing some grid item’s size, hence they will be marked for layout (if they wasn’t already).</p>
<p>Obviously, stretching only takes place when the corresponding <a href="http://dev.w3.org/csswg/css-align/#self-alignment" target="_blank">Self Alignment properties</a> (align-self, justify-self) have either <em>auto</em> or <em>stretch</em> as value, but there are other conditions that must be fulfilled to trigger this operation:</p>
<ul>
<li>box’s computed width/height (as appropriate to the axis) is <em>auto</em>.</li>
<li>neither of its margins (in the appropriate axis) are <em>auto</em></li>
<li>still respecting the constraints imposed by min-height/min-width/max-height/max-width</li>
</ul>
<p>In that scenario, stretching logic implies the following operations:</p>
<div class="wp_syntax"><table><tbody><tr><td class="code"><pre class="c">LayoutUnit stretchedLogicalHeight <span>=</span> availableAlignmentSpaceForChildBeforeStretching<span>(</span>gridAreaBreadthForChild<span>,</span> child<span>)</span><span>;</span>
LayoutUnit desiredLogicalHeight <span>=</span> child.<span>constrainLogicalHeightByMinMax</span><span>(</span>stretchedLogicalHeight<span>,</span> <span>-</span><span>1</span><span>)</span><span>;</span>
bool childNeedsRelayout <span>=</span> desiredLogicalHeight <span>!=</span> child.<span>logicalHeight</span><span>(</span><span>)</span><span>;</span>
<span>if</span> <span>(</span>childNeedsRelayout <span>||</span> <span>!</span>child.<span>hasOverrideLogicalContentHeight</span><span>(</span><span>)</span><span>)</span>
child.<span>setOverrideLogicalContentHeight</span><span>(</span>desiredLogicalHeight <span>-</span> child.<span>borderAndPaddingLogicalHeight</span><span>(</span><span>)</span><span>)</span><span>;</span>
<span>if</span> <span>(</span>childNeedsRelayout<span>)</span> <span>{</span>
child.<span>setLogicalHeight</span><span>(</span><span>0</span><span>)</span><span>;</span>
child.<span>setNeedsLayout</span><span>(</span><span>)</span><span>;</span>
<span>}</span>
LayoutUnit LayoutGrid<span>::</span><span>availableAlignmentSpaceForChildBeforeStretching</span><span>(</span>LayoutUnit gridAreaBreadthForChild<span>,</span> <span>const</span> LayoutBox<span>&amp;</span> child<span>)</span> <span>const</span>
<span>{</span>
LayoutUnit childMarginLogicalHeight <span>=</span> marginLogicalHeightForChild<span>(</span>child<span>)</span><span>;</span>
<span>// Because we want to avoid multiple layouts, stretching logic might be performed before</span>
<span>// children are laid out, so we can't use the child cached values. Hence, we need to</span>
<span>// compute margins in order to determine the available height before stretching.</span>
<span>if</span> <span>(</span>childMarginLogicalHeight <span>==</span> <span>0</span><span>)</span>
childMarginLogicalHeight <span>=</span> computeMarginLogicalHeightForChild<span>(</span>child<span>)</span><span>;</span>
<span>return</span> gridAreaBreadthForChild <span>-</span> childMarginLogicalHeight<span>;</span>
<span>}</span></pre></td></tr></tbody></table></div>
<p>In addition to the <strong>extra layout</strong> required for changing grid item’s size, computing the available space for stretching adds an additional overhead, overall if we have to compute grid item’s margins because some layout operations are still incomplete.</p>
<p>Given that grid container relies on generic block’s layout operations to determine the stretched width, this specific logic is only executed for determining the stretched height. Hence performance drop is alleviated, compared with the <em>auto-sized</em> tracks scenario.</p>
<h3>Grid VS Flexbox layout performance</h3>
<p>One of the main goals of CSS Grid Layout specification is to complement Flexbox layout model for 2 dimensions. It’s expectable that creating grid designs with Flexbox will be more inefficient than using a layout model specifically designed for these cases, not only regarding CSS syntax, but also regarding layout performance.</p>
<p>However, I think it’s interesting to measure Grid Layout performance in 1-dimensional cases, usually managed using Flexbox, so we can have comparable scenarios to evaluate both models. In this post I’ll start with such cases, using a very simple one in this occasion. I’d like to get more complex examples in future posts, the ones more usual in Flexbox based designs.</p>
<p>So, let’s consider the following simple test case:</p>
<div class="wp_syntax"><table><tbody><tr><td class="code"><pre class="html">&lt;div class="className"&gt;
&lt;div class="i1"&gt;Item 1&lt;/div&gt;
&lt;div class="i2"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/div&gt;
&lt;div class="i3"&gt;Item 3 longer&lt;/div&gt;
&lt;/div&gt;</pre></td></tr></tbody></table></div>
<p>I evaluated the simple HTML example above with both Flexbox and Grid layouts to measure performance. I used a CPU profiler to figure out where the bottlenecks are for each model, trying to explain where differences came from. So, I defined 2 CSS classes for each layout model, as follows:</p>
<div class="wp_syntax"><table><tbody><tr><td class="code"><pre class="css"><span>.flex</span> <span>{</span>
<span>background-color</span><span>:</span> <span>silver</span><span>;</span>
<span>display</span><span>:</span> flex<span>;</span>
<span>height</span><span>:</span> <span>100px</span><span>;</span>
align-items<span>:</span> start<span>;</span>
<span>}</span>
<span>.grid</span> <span>{</span>
<span>background-color</span><span>:</span> <span>silver</span><span>;</span>
<span>display</span><span>:</span> grid<span>;</span>
grid-template-columns<span>:</span> <span>100px</span> 1fr <span>auto</span><span>;</span>
grid-template-rows<span>:</span> <span>100px</span><span>;</span>
align-items<span>:</span> start<span>;</span>
justify-items<span>:</span> start<span>;</span>
<span>}</span>
<span>.i1</span> <span>{</span>
<span>background-color</span><span>:</span> cyan<span>;</span>
flex-basis<span>:</span> <span>100px</span><span>;</span>
<span>}</span>
<span>.i2</span> <span>{</span>
<span>background-color</span><span>:</span> magenta<span>;</span>
flex<span>:</span> <span>1</span><span>;</span>
<span>}</span>
<span>.i3</span> <span>{</span>
<span>background-color</span><span>:</span> <span>yellow</span><span>;</span>
<span>}</span></pre></td></tr></tbody></table></div>
<p>Given that there is not concept of <em>row</em> in Flexbox, I evaluated performance of 100 up to 2000 grid or flex containers, creating 20 tests to be run inside the chrome performance framework, described at the beginning of this post. You can check out resources and a script to generate them at our <a href="http://github.com/Igalia/css-grid-layout/tree/gh-pages/performance/flexVSGrid">github examples repo</a>.</p>
<p><a href="http://blogs.igalia.com/jfernandez/files/2015/06/flexVSgrid.png"><img alt="flexVSgrid" class="aligncenter wp-image-1166" height="488" src="http://blogs.igalia.com/jfernandez/files/2015/06/flexVSgrid.png" width="738" /></a></p>
<p>When comparing both layout models targeting layout times, we see clearly that Grid Layout beats Flexbox using the default values for CSS properties controlling layout itself and alignment, which is <em>stretch</em> for these containers. As it was explained before, the stretching logic adds an important computation overhead, which as we can see now in the numeric table above, has more weight for Flexbox than Grid.</p>
<p>Looking at the plot about differences in layout time, we see that for the default case, Grid performance improvement is stabilized around 7%. However, when we avoid the stretching logic, for instance by using any other alignment value, layout performance it’s considerable worse than Flexbox, for this test case, around 15% slower. This is something sensible, as this test case is the idea for Flexbox, while a bit artificial for Grid; using a single Grid with N rows improves performance considerably, getting much better numbers than Flexbox, but we will see these cases in future analysis.</p>
<p>Grid layout better results for the default case (stretch) are explained because I implemented several optimizations for Grid. Probably Flexbox should do the same, as it’s the default value and it could affect many sites using this layout model in their designs. </p>
<p>Thanks to <a href="http://www.bloomberg.com/company/" target="_blank">Bloomberg</a> for sponsoring this work, as part of the efforts that <a href="http://www.igalia.com" target="_blank">Igalia</a> has been doing all these years pursuing a better and more open web. </p>
<p><img alt="Igalia &amp; Bloomberg logos" class="size-full wp-image-1489" src="http://blogs.igalia.com/mrego/files/2014/03/igalia-bloomberg.png" width="400" /></p>jfernandezhttp://planet.igalia.com/webkitPlanet Igalia WebKitPlanet Igalia WebKit - http://planet.igalia.com/webkithttp://planet.igalia.com/webkitIntroduction to WebKit Content Blockershttp://www.webkit.org/blog/?p=34762015-06-12T23:26:02+00:00<p>Browser extensions have been a big part of modern browsers for a while now. With extensions, everyone can change their browser to their preferences.</p>
<p>Today, there are several models to extend browsers. Most extensions are written in JavaScript and loaded by the browser, following a model introduced by Mozilla over a decade ago. That model is also used with WebKit. It is the classical way to write extensions for OS X Safari, Web/Epiphany, and other browsers.</p>
<p>On OS X and iOS, there is also the concept of <a href="https://developer.apple.com/app-extensions/">App Extensions</a> with a different approach to security and performance. They are essentially little sandboxed applications that are launched on demand to extend some specific piece of functionality, known as an extension point.</p>
<p>The JavaScript extensions model has been great for many use cases, but there is one category of extensions where members of the WebKit project felt we should do better: the content blocking extensions. Such extensions are the most popular kind; they let users decide what should load and not load, who can track them, what should be visible on pages, etc.</p>
<p>The reason we are unhappy about the JavaScript-based content blocking extensions is they have significant performance drawbacks. The current model uses a lot of energy, reducing battery life, and increases page load time by adding latency for each resource. Certain kinds of extensions also reduce the runtime performance of webpages. Sometimes, they can allocate tremendous amounts of memory, which goes against our efforts to reduce WebKit’s memory footprint.</p>
<p>It is an area were we want to do better. We are working on new tools to enable content blocking at a fraction of the cost.</p>
<p>One new feature, we are developing allows describing content blocking rules in a structured format ahead-of-time, declaratively, rather than running extension-provided code at the moment a decision about blocking needs to be made. This model allows for WebKit to compile the ruleset into a format that’s very efficient to apply to loads and page content.</p>
<h2>Content blockers in action</h2>
<p>Before I dive into the details, let’s see what a declarative extension look like in the new format.</p>
<p>In essence, each content blocker extension is a list of rules that tells the engine how to act when loading a resource.</p>
<p>The rules are written in JSON format. For example, here is an extension with two rules:</p>
<pre><code>
[
{
"trigger": {
"url-filter": "evil-tracker.js"
},
"action": {
"type": "block"
}
},
{
"trigger": {
"url-filter": ".*",
"resource-type": ["image", "style-sheet"]
"unless-domain": ["reputable-content-server.com"]
},
"action": {
"type": "block-cookies"
}
}
]
</code>
</pre>
<p>The first rule activates for any URL that contains the string “evil-tracker.js”. When the first rule is activated, the load is blocked.</p>
<p>The second rule activates for any resource loaded as an image or a style sheet on any domain except “reputable-content-server.com”. When the rule is activated, cookies are stripped from the request before sending it to the server.</p>
<p>The rules are passed to the engine by the browser. In iOS Safari, it is done through the native app extension mechanism. In OS X Safari, browser extensions can provide their rules through a new API. If you hack on WebKit, MiniBrowser also lets you load rule sets directly from the Debug menu.</p>
<p>Once the rules are passed to WebKit, they are compiled into an efficient bytecode format. The engine then executes this bytecode for each resource request, and uses the result to modify the request or inject CSS.</p>
<p>The bytecode is executed for each resource in the network subsystem. The goal is to reduce the latency between a request being created by the page and the request being actually dispatched over the network.</p>
<h2>Content blocker format</h2>
<p>The content blocker rules are passed in JSON format. The top level object is an array containing every rule that needs to be loaded.</p>
<p>Each rule of the content blocker is a dictionary with two parts: a trigger which activates the rule, and an action defining what to do when the rule is activated.</p>
<p>A typical rule set looks like this:</p>
<pre><code>
[
{
"trigger": {
…
},
"action": {
…
}
},
{
"trigger": {
…
},
"action": {
…
}
}
]
</code>
</pre>
<p>The order of the rules is important. For every extension, the actions are applied in order. There is an action that skip all the rules that appears before the current one: “ignore-previous-rules”.</p>
<p>Let’s dive into the “trigger” and “action” objects.</p>
<h3>Trigger definition</h3>
<p>The “trigger” defines what properties activate a rule. When the rule is activated, its action is queued for execution. When all the triggers have been evaluated, the actions are applied in order.</p>
<p>Currently, the triggers are based on resource load information: the url and type of each resource, the domain of the document, and the relation of the resource to the document.</p>
<p>The valid fields in the trigger are:</p>
<ul>
<li>“url-filter” (string, mandatory): matches the resource’s URL.</li>
<li>“url-filter-is-case-sensitive”: (boolean, optional): changes the “url-filter” case-sensitivity.</li>
<li>“resource-type”: (array of strings, optional): matches how the resource will be used.</li>
<li>“load-type”: (array of strings, optional): matches the relation to the main resource.</li>
<li>“if-domain”/”unless-domain” (array of strings, optional): matches the domain of the document.</li>
</ul>
<p>The most important field, and the only mandatory one, is “url-filter”. In this field, you define a regular expression that will be evaluated against the URL of each resource. It is possible to match every URL by matching every character (e.g. “.*”) but in general it is better to be as precise as possible to avoid unforeseen side effects.</p>
<p>The syntax of the regular expression is a strict subset of JavaScript regular expressions. It is introduced later in this post.</p>
<p>It is possible to change the case-sensitivity of “url-filter” with the field “url-filter-is-case-sensitive”. By default, the matching is case-insensitive.</p>
<p>The optional field “resource-type” specifies the type of load to match. The content of this field is an array with all the types of load that can activate the trigger. The possible values are:</p>
<ul>
<li>“document”</li>
<li>“image”</li>
<li>“style-sheet”</li>
<li>“script”</li>
<li>“font”</li>
<li>“raw” (any untyped load, like XMLHttpRequest)</li>
<li>“svg-document”</li>
<li>“media”</li>
<li>“popup”</li>
</ul>
<p>Since the triggers are evaluated before the load starts, these types defines how the engine intends to use the resource, not necessarily the type of the resource itself (for example, &lt;img src=”something.css”&gt; is identified as an image.)</p>
<p>If “resource-type” is not specified, the default is to match all types of resources.</p>
<p>The field “load-type” defines the relation between the domain of the resource being loaded and the domain of the document. The two possible values are:</p>
<ul>
<li>“first-party”</li>
<li>“third-party”</li>
</ul>
<p>A “first-party” load is any load where the URL has the same security origin as the document. Every other case is “third-party”.</p>
<p>Finally, it is possible to make a trigger conditional on the URL of the main document. In this case, the rule only applies for a particular domain, or only outside of a particular domain.</p>
<p>The domain filters are “if-domain” and “unless-domain”, those fields are exclusive. In those fields, you can provide a domain filter for the main document.</p>
<p>It is important to be careful with the trigger to avoid rules being unexpectedly activated. Since it is impossible to test the entire web to validate a trigger, it is advised to be as specific as possible.</p>
<h3>Action definition</h3>
<p>The “action” part of the dictionary defines what the engine should do when a resource is matched by a trigger.</p>
<p>Currently, the action object has only 2 valid fields:</p>
<ul>
<li>“type” (string, mandatory): defines what to do when the rule is activated.</li>
<li>“selector” (string, mandatory for the “css-display-none” type): defines a selector list to apply on the page.</li>
</ul>
<p>There are 3 types of actions that limit resources: “block”, “block-cookies”, “css-display-none”. There is an additional type that does not have any impact on the resource but changes how the content extension behaves: “ignore-previous-rules”.</p>
<p>The action “block” is the most powerful one. It tells the engine to abort loading the resource. If the resource was cached, the cache is ignored and the load will still fail.</p>
<p>The action “block-cookies” changes the way the resource is requested over the network. Before sending the request to the server, all cookies are stripped from the header. Safari has its own privacy policy that applies on top of this rule. It is only possible to block cookies that would otherwise be accepted by the privacy policy, combining “block-cookies” and “ignore-previous-rules” still follows the browser’s privacy settings.</p>
<p>The action “css-display-none” acts on the CSS subsystem. It lets you hide elements of the page based on selectors. When this action is set, there should be a second entry named “selector” containing a selector list. Any element matching the selector list has its “display” property set to “none” which hides it.</p>
<p>Every selector supported by WebKit is supported for content extensions, including compound selectors and the new selectors from <a href="http://dev.w3.org/csswg/selectors-4/">CSS Selectors Level 4</a>. For example, the following action definition is valid:</p>
<pre><code>
"action": {
"type": "css-display-none",
"selector": "#newsletter, :matches(.main-page, .article) .annoying-overlay"
}
</code></pre>
<p>Finally, there is the action type “ignore-previous-rules”. All it does is ignore every rule before the current one if the trigger is activated. Note that it is not possible to ignore the rules of an other extension. Each extension is isolated from the others.</p>
<h2>The Regular expression format</h2>
<p>Triggers support filtering the URLs of each resource based on regular expression.</p>
<p>All strings in “url-filter” are interpreted as regular expressions. You have to be careful to escape regular expression control characters. Typically the dot appears in filters and needs to be escaped (for example, “energy-waster.com” should appear as “energy-waster\.com”.</p>
<p>The format is a strict subset of JavaScript regular expressions. Syntactically, everything supported by JavaScript is reserved but only a subset will be accepted by the parser. An unsupported expression results in a parse error.</p>
<p>The following features are supported:</p>
<ul>
<li>Matching any character with “.”.</li>
<li>Matching ranges with the range syntax [a-b].</li>
<li>Quantifying expressions with “?”, “+” and “*”.</li>
<li>Groups with parenthesis.</li>
</ul>
<p>It is possible to use the beginning of line (“^”) and end of line (“$”) marker but they are restricted to be the first and last character of the expression. For example, a pattern like “^bar$” is perfectly valid, while “(foo)?^bar$” causes a syntax error.</p>
<p>All URL matching is done against the canonical version of the URL. As such, you can expect the URL to be completely ASCII. The domain will already be punycode encoded. Both the scheme and domain are already lowercase. The resource part of the URL is already percent encoded.</p>
<p>Since the URL is known to be ASCII, the url-filter is also restricted to ASCII. Patterns with non-ASCII characters result in a parse error.</p>
<h2>Privacy</h2>
<p>We have been building these features with a focus on providing better control over privacy. We wanted to enable better privacy filters, and that is what has been driving the feature set that exists today.</p>
<p>There is a whole universe of features that can take advantage of the content blocker API, around privacy or better user experience. We would love to hear your feedback about what works well, what needs improvement, and what is missing.</p>
<p>A major benefit of the declarative content blocking extension model is that the extension does not see the URLs of pages and resources the user browsed to or had a page request. WebKit itself does not keep track of what rules have been executed on which URLs; we do not track you by design.</p>
<p>Everything has been developed in the open; everyone is welcome to audit and improve the code. The main part of content blockers lives in <a href="http://trac.webkit.org/browser/trunk/Source/WebCore/contentextensions">Source/WebCore/contentextensions</a>.</p>
<h2>Performance advice</h2>
<p>A big focus of this feature is performance. We are trying to have good scalability with minimal performance impact.</p>
<p>If the rule compiler detects that a set of rules would negatively impact user experience, it refuses to load them and returns an error.</p>
<p>There are parameters in your extensions that do impact performance. In this section, I will give some general rules to get good performance. There are a few big themes to maximize performance:</p>
<ul>
<li>Avoid quantifiers (“*”, “+”, “?”) in “url-filter” as much as possible.</li>
<li>CSS rules are best defined before any “ignore-previous-rules”</li>
<li>Make the trigger as specific as possible.</li>
<li>Group rules with similar actions.</li>
</ul>
<h3>Minimize quantifiers in regular expressions</h3>
<p>Avoiding quantifiers helps us optimize the triggers in the backend. Quantifiers are useful but they increase the matching possibilities which tends to reduce performance. We have found that many existing privacy extensions sometimes use quantifiers excessively which tends to be costly.</p>
<p>One particularly bad case is quantifier appearing in the middle of a string. Cases like:</p>
<pre><code>
foo.*bar
</code>
</pre>
<p>tends to be slower than “foo” and “bar” separately. Using too many of them can cause the rule set to be rejected.</p>
<p>One exception to that rule is common prefixes. For example, if you have many rules such as those:</p>
<pre><code>
https?://user-tracker.com
https?://we-follow-you.com
https?://etc.com
</code>
</pre>
<p>The rules are grouped by the prefix “https?://, and it only counts as one rule with quantifiers.</p>
<h3>Have CSS rules before “ignore-previous-rules”</h3>
<p>When compiling the rules, we group the CSS rules whenever we determine they will be used together. For example, if a set of rules applies on every page (by using the filter “.*”), a special stylesheet is prepared for them to be ready to use them instantly when the page has loaded.</p>
<p>When a “ignore-previous-rules” appears, it forces the compiler to break the stylesheet since the rules appearing before an action “ignore-previous-rules” are all dismissed when the action is activated.</p>
<h3>Use specific triggers</h3>
<p>Good triggers try to exclude everything that could be activated by accident. Regular expressions should be as specific as possible to achieve your desired goal. Specifying the resource types if possible, and using domain filter if the rule should only apply on certain domains.</p>
<p>Having specific rules is important to avoid changing pages inadvertently, but it is also useful for performance. Having few actions to execute is a good idea.</p>
<h3>Grouping rules with the same actions</h3>
<p>Finally, grouping rules with similar actions can simplify the execution. Ideally, your extension will have all the rules blocking loads, followed by all the rules blocking cookies, etc.</p>
<p>Since rules are evaluated in order, it is useful to have them grouped together since matching a trigger means all the following rules of the same action can be skipped.</p>
<p>For example, if all the “block” rules are together, as soon as the first one is activated, all the following block rules are skipped since they have the same actions. The trigger evaluation continues on the first following rule with a different action.</p>
<h2>We want your feedback</h2>
<p>We have been developing these capabilities with the goal of achieving better privacy without incurring an unreasonable performance cost. We have intentionally limited ourselves to just a few features that could be improved.</p>
<p>If you start building content blocker extensions, it would help us if you send us your JSON files. Having many different use cases will help us optimize the code better.</p>
<p>For short questions, you can contact <a href="https://twitter.com/awfulben">me</a> on Twitter. For longer questions, you can email <a href="https://lists.webkit.org/mailman/listinfo/webkit-help">webkit-help</a> or <a href="https://bugs.webkit.org/enter_bug.cgi?product=WebKit">file bug report</a>. If you’re interested in hacking on the code, feel free to ask <a href="https://twitter.com/awfulben">me</a>, <a href="https://twitter.com/alexfchr">Alex Christensen</a>, <a href="https://twitter.com/bradeeoh">Brady Eidson</a> and <a href="https://twitter.com/samweinig">Sam Weinig</a> for help.</p>
<p>For questions about Safari’s adoption of these APIs, contact <a href="https://twitter.com/cleatsupkeep">Brian Weinstein</a> or <a href="mailto:web-evangelist@apple.com">Jon Davis</a>.</p>Benjamin Poulainhttps://www.webkit.org/blogSurfin' SafariAll about WebKit developmenthttps://www.webkit.org/blogManuel Rego: Grid and the Cityhttp://blogs.igalia.com/mrego/2015/06/03/grid-and-the-city/2015-06-02T22:00:00+00:00<p>I’m really glad to announce that my talk “<em>CSS Grid Layout is just around the
corner</em>” has been accepted at <a href="https://2015.cssconf.com/"><strong>CSSConf US 2015</strong></a>
(18-19 June).
Thanks to the organizers for selecting my proposal, it’s a pleasure to be among
all these great speakers.
BTW, If you haven’t grabbed your ticket yet, you could use the following promo
code when checking out to save some money:
<a href="http://ti.to/bocoup/cssconf-2015/discount/MR200"><strong><code>MR200</code></strong></a></p>
<p>I’m part of the <a href="http://www.igalia.com/browsers"><strong>Igalia Web Platform team</strong></a>,
and I’m currently working on the implementation of the <a href="http://dev.w3.org/csswg/css-grid/">CSS Grid Layout W3C
spec</a> on
<a href="http://www.chromium.org/blink">Blink</a> and <a href="http://www.webkit.org">WebKit</a>.
So, I’m kind of an “exotic” profile in a conference like <strong>CSSConf</strong>, as I’m not
working on frontend.
However, I’ll try to bring the implementor perspective to the table, explaining
some internals about how grid works. I’ll also introduce the basic syntax to be
able to start playing with it.</p>
<p><a href="https://2015.cssconf.com/#speakers"><img alt="My talk abstract from CSSConf website" src="http://blogs.igalia.com/mrego/files/2015/06/cssconf-rego-grid.png" /></a>
<span class="caption text-muted">My talk abstract from <strong>CSSConf</strong> website</span></p>
<p><strong>CSSConf</strong> this year is happening in New York City and the venue, <a href="http://www.carolines.com/">Caroline’s
on Broadway</a>, is in the heart of Manhattan.
So, I’ll take advantage to pay a visit to our friends at
<a href="http://www.bloomberg.com/company/"><strong>Bloomberg</strong></a>, whom we collaborate with in
the development of CSS Grid Layout.
In addition, <a href="http://brooklynjs.com/"><strong>BrooklynJS</strong></a> is organized on the
evening of June 18th, and as part of the ticket for CSSConf, we’ll have the
chance to attend this event too.</p>
<p>From the personal side, this will be my first time in NYC, exciting times
ahead! Feel free to ping me if you want to talk about grid, the web,
<a href="http://www.igalia.com"><strong>Igalia</strong></a> or simply do some sightseeing; as I’ll be
arriving on 15th June’s night.</p>
<p><img alt="Igalia and Bloomberg working together to build a better web" class="center-block" src="http://blogs.igalia.com/mrego/files/2014/03/igalia-bloomberg.png" />
<span class="caption text-muted"><strong>Igalia</strong> and <strong>Bloomberg</strong> working together to build a better web</span></p>
<p>As you might guess, I’m very excited about this crazy week, full of events and
new experiences.
I’m sure I’ll meet lots of great people and I’ll do my best to convince the
world about the goodness of grid and make them feel how awesome it is.
Exciting times ahead!</p>Igalia WebKithttp://planet.igalia.com/webkitPlanet Igalia WebKitPlanet Igalia WebKit - http://planet.igalia.com/webkithttp://planet.igalia.com/webkitBuilding WebKit for iOS Simulatorhttp://www.webkit.org/blog/?p=34572015-01-27T16:01:06+00:00<p>I am proud to formally announce that you can now build and run top-of-tree WebKit for iOS in the iOS Simulator. We have updated the pages on webkit.org with details on building for iOS Simulator. For your convenience, I have summarized the steps to get you up and running below:</p>
<ol>
<li><a href="http://www.webkit.org/building/tools.html">Install Xcode 6.1.1</a>.</li>
<li><a href="http://www.webkit.org/building/checkout.html">Get the Code</a>.</li>
<li>Enable Xcode to build command line tools by running <code>sudo Tools/Scripts/configure-xcode-for-ios-development</code> in the Terminal.</li>
<li>Build WebKit for iOS Simulator by running <code>Tools/Scripts/build-webkit --ios-simulator</code>.</li>
<li>Launch Safari in the iOS Simulator with the WebKit version you built by running <code>Tools/Scripts/run-safari --ios-simulator</code>.</li>
</ol>
<p>Early Warning System (EWS) bots for iOS are running to help contributors catch build breakage before a patch is landed. The EWS bots build 32-bit iOS WebKit for ARMv7 hardware. We chose to build this configuration because it will most likely reveal build errors that differ from the configuration built by the existing Mac EWS bots.</p>
<p>We are working to bring up support for running layout tests, build and test build bots and additional iOS EWS configurations to help contributors notice build issues and regressions in WebKit for iOS.</p>
<p>We have always encouraged you to file all WebKit bugs that you find. Since upstreaming iOS WebKit to open source in early 2014, we have tracked iOS WebKit bugs in <a href="https://bugs.webkit.org">bugs.webkit.org</a>. Now that you are able to build and run iOS WebKit yourself, we invite you to help fix them!</p>Daniel Bateshttps://www.webkit.org/blogSurfin' SafariAll about WebKit developmenthttps://www.webkit.org/blogWeb Engines Hackfest 2014http://blog.kov.eti.br/?p=3722014-12-15T23:20:52+00:00<p>For the 6th year in a row, Igalia has organized a hackfest focused on web engines. The 5 years before this one were actually focused on the GTK+ port of WebKit, but the number of web engines that matter to us as Free Software developers and consultancies has grown, and so has the scope of the hackfest.</p>
<p>It was a very productive and exciting event. It has already been covered by <a href="http://blogs.igalia.com/mrego/2014/12/10/web-engines-hackfest-2014/" title="Web Engines Hackfest 2014">Manuel Rego</a>, <a href="http://base-art.net/Articles/web-engines-hackfest-2014/" title="Web Engines Hackfest 2014">Philippe Normand</a>, <a href="https://coaxion.net/blog/2014/12/web-engines-hackfest-2014/" title="Web Engines Hackfest 2014">Sebastian Dröge</a> and <a href="http://wingolog.org/archives/2014/12/09/state-of-js-implementations-2014-edition" title="state of js implementations, 2014 edition">Andy Wingo</a>! I am sure more blog posts will pop up. We had <a href="http://abandonedwig.info/" title="Martin Robinson">Martin Robinson</a> telling us about the new Servo engine that Mozilla has been developing as a proof of concept for both Rust as a language for building big, complex products and for doing layout in parallel. Andy gave us a very good summary of where JS engines are in terms of performance and features. We had talks about CSS grid layouts, TyGL – a GL-powered implementation of the 2D painting backend in WebKit, the new Wayland port, <a href="http://blogs.igalia.com/zdobersek/2014/12/09/announcing-webkit-for-wayland/" title="Announcing WebKit for Wayland">announced by Zan Dobersek</a>, and a lot more.</p>
<p>With help from my colleague ChangSeok OH, I presented a description of how a team at Collabora led by Marco Barisione made the combination of <a href="http://blog.barisione.org/2014-09/rpi-browser/" title="A web browser for the Raspberry Pi">WebKitGTK+ and GNOME’s web browser a pretty good experience for the Raspberry Pi</a>. It took a not so small amount of both pragmatic limitations and hacks to get to a multi-tab browser that can play youtube videos and be quite responsive, but we were very happy with how well WebKitGTK+ worked as a base for that.</p>
<p>One of my main goals for the hackfest was to help drive features that were lingering in the bug tracker for WebKitGTK+. I picked up a patch that had gone through a number of iterations and rewrites: the HTML5 notifications support, and with help from Carlos Garcia, managed to finish it and <a href="http://trac.webkit.org/changeset/177073" title="Changeset 177073">land it at the last day of the hackfest</a>! It provides new signals that can be used to authorize notifications, show and close them.</p>
<p>To make notifications work in the best case scenario, the only thing that the API user needs to do is handle the permission request, since we provide a default implementation for the show and close signals that uses libnotify if it is available when building WebKitGTK+. Originally our intention was to use GNotification for the default implementation of those signals in WebKitGTK+, but it turned out to be a pain to use for our purposes.</p>
<p>GNotification is tied to GApplication. This allows for some interesting features, like notifications being persistent and able to reactivate the application, but those make no sense in our current use case, although that may change once <a href="http://www.w3.org/TR/2014/WD-service-workers-20141118/" title="Service Workers">service workers</a> become a thing. It can also be a bit problematic given we are a library and thus have no GApplication of our own. That was easily overcome by using the default GApplication of the process for notifications, though.</p>
<p>The show stopper for us using GNotification was the way GNOME Shell currently deals with notifications sent using this mechanism. It will <a href="https://git.gnome.org/browse/gnome-shell/tree/js/ui/notificationDaemon.js?h=gnome-3-14#n631">look for a .desktop file named after the application ID</a> used to initialize the GApplication instance and reject the notification if it cannot find that. Besides making this a pain to test – our test browser would need a .desktop file to be installed, that would not work for our main API user! The application ID used for all Web instances is <em>org.gnome.Epiphany</em> at the moment, and that is not the same as any of the desktop files used either by the main browser or by the web apps created with it.</p>
<p>For the future we will probably move Epiphany towards this new era, and all users of the WebKitGTK+ API as well, but the strictness of GNOME Shell would hurt the usefulness of our default implementation right now, so we decided to stick to libnotify for the time being.</p>
<p>Other than that, I managed to review a bunch of patches during the hackfest, and took part in many interesting discussions regarding the next steps for GNOME Web and the GTK+ and Wayland ports of WebKit, such as the <a href="http://blog.ryumiel.net/articles/introducing-threaded-compositor/" title="Introducing Threaded Compositor">potential introduction of a threaded compositor</a>, which is pretty exciting. We also tried to have Bastien Nocera as a guest participant for one of our sessions, but it turns out that requires more than a notebook on top of a bench hooked up to a TV to work well. We could think of something next time ;D.</p>
<p>I’d like to thank <a href="http://www.igalia.com" title="Igalia">Igalia</a> for organizing and sponsoring the event, <a href="http://www.collabora.com/" title="Collabora">Collabora</a> for sponsoring and sending ChangSeok and myself over to Spain from far away Brazil and South Korea, and <a href="http://webplatform.adobe.com/" title="Adobe Web Platform">Adobe</a> for also sponsoring the event! Hope to see you all next year!</p>
<div class="wp-caption aligncenter" id="attachment_1757" style="width: 510px;"><a href="http://www.webengineshackfest.org/#sponsors"><img alt="Web Engines Hackfest 2014 sponsors: Adobe, Collabora and Igalia" class="size-full wp-image-1757" height="124" src="http://blogs.igalia.com/mrego/files/2014/12/web-engines-hackfest-2014-sponsors.png" width="500" /></a><p></p>
<p class="wp-caption-text">Web Engines Hackfest 2014 sponsors: Adobe, Collabora and Igalia</p>
</div>kovhttp://blog.kov.eti.brGustavo Noronha (kov) » webkittchuf tchuf; ou seria nheco nheco fum?http://blog.kov.eti.brHow to build TyGLhttp://browser.sed.hu/feed/69 at http://browser.sed.hu2014-12-08T12:47:20+00:00<p>This is a follow-up blog post of our announcement of <a href="http://webkit.sed.hu/blog/20141112/announcing-tygl-webkit-port-accelerate-2d-web-rendering-gpu">TyGL</a> - the 2D-accelerated GPU rendering port of WebKit.</p>
<p>We have been received lots of feedback about TyGL and we would like to thank you for all questions, suggestions and comments. As we promised lets get into some technical details.</p>
<p><a href="http://browser.sed.hu/blog/20141208/how-build-tygl" target="_blank">read more</a></p>szilard.ledanhttp://browser.sed.hu/feed/webkitUniversity of Szegedhttp://browser.sed.hu/feed/webkitAnnouncing the TyGL-WebKit port to accelerate 2D web rendering with GPUhttp://browser.sed.hu/feed/68 at http://browser.sed.hu2014-11-12T14:18:00+00:00<p>We are proud to announce the TyGL port (link: <a href="http://github.com/szeged/TyGL">http://github.com/szeged/TyGL</a>) on the top of EFL-WebKit. TyGL (pronounced as tigel) is part of WebKit and provides 2D-accelerated GPU rendering on embedded systems. The engine is purely GPU based. It has been developed on and tested against ARM-Mali GPU, but it is designed to work on any GPU conforming to OpenGL ES 2.0 or higher.</p>
<p>The GPU involvement on future graphics is inevitable considering the pixel growth rate of displays, but harnessing the GPU power requires a different approach than CPU-based optimizations.</p>
<p><a href="http://browser.sed.hu/blog/20141112/announcing-tygl-webkit-port-accelerate-2d-web-rendering-gpu" target="_blank">read more</a></p>zoltan.herczeghttp://browser.sed.hu/feed/webkitUniversity of Szegedhttp://browser.sed.hu/feed/webkitFuzzinator reloadedhttp://browser.sed.hu/feed/67 at http://browser.sed.hu2014-10-22T22:38:01+00:00<p>It's been a while since I last (and actually first) posted about Fuzzinator. Now I think that I have enough new experiences worth sharing.</p>
<p>More than a year ago, when I started fuzzing, I was mostly focusing on mutation-based fuzzer technologies since they were easy to build and pretty effective. Having a nice error-prone test suite (e.g. LayoutTests) was the warrant for fresh new bugs. At least for a while.</p>
<p><a href="http://browser.sed.hu/blog/20141023/fuzzinator-reloaded" target="_blank">read more</a></p>renata.hodovanhttp://browser.sed.hu/feed/webkitUniversity of Szegedhttp://browser.sed.hu/feed/webkitMeasuring ASM.JS performancehttp://browser.sed.hu/feed/66 at http://browser.sed.hu2014-09-25T10:40:15+00:00<h2>What is ASM.JS?</h2>
<p>Now that mobile computers and cloud services become part of our lives, more and more developers see the potential of the web and online applications. ASM.JS, a strict subset of JavaScript, is a technology that provides a way to achieve near native speed in browsers, without the need of any plugin or extension. It is also possible to cross-compile C/C++ programs to it and running them directly in your browser.</p>
<p>In this post we will compare the JavaScript and ASM.JS performance in different browsers, trying out various kinds of web applications and benchmarks.</p>
<p><a href="http://browser.sed.hu/blog/20140925/measuring-asmjs-performance" target="_blank">read more</a></p>matyas.mustohahttp://browser.sed.hu/feed/webkitUniversity of Szegedhttp://browser.sed.hu/feed/webkitCSS Shapes now available in Chrome 37 releasehttp://blogs.adobe.com/webplatform/?p=70352014-08-28T17:12:09+00:00<p style="margin-bottom: 0px; padding-bottom: 0px;">Support for <a href="http://www.w3.org/TR/css-shapes-1/" target="_blank">CSS Shapes</a> is now available in the latest Google Chrome 37 release.</p>
<p></p><center><a href="https://www.google.com/chrome/browser/" target="_blank"><img alt="chromelogo" class="aligncenter size-full wp-image-7092" height="104" src="http://blogs.adobe.com/webplatform/files/2014/08/chromelogo.png" width="400" /></a></center><p></p>
<h3>What can I do with CSS Shapes?</h3>
<p>CSS Shapes lets you think out of the box! It gives you the ability to wrap content outside any shape. Shapes can be defined by geometric shapes, images, and even gradients. Using Shapes as part of your website design takes a visitor’s visual and reading experience to the next level. If you want to start with some tutorials, please go visit <a href="http://alistapart.com/blog/post/moving-forward-with-css-shapes">Sarah Soueidan’s article about Shapes</a>.</p>
<h3>Demo</h3>
<p>The following shapes use case is from the <a href="http://blogs.adobe.com/webplatform/2014/05/13/good-looking-shapes-gallery/">Good Looking Shapes Gallery</a> blog post.<br />
</p><center><p></p>
<div style="width: 96%; text-align: center; font-weight: bold;">
<div style="width: 48%; float: left;">Without CSS Shapes<br />
<a href="http://codepen.io/adobe/pen/rmual"><img alt="the_11_guesses_no_shapes" src="http://blogs.adobe.com/webplatform/files/2014/08/the_11_guesses_no_shapes.png" /></a>
</div>
<div style="width: 48%; float: left;">With CSS Shapes<br />
<a href="http://codepen.io/adobe/pen/rmual"><img alt="the_11_guesses_shapes" src="http://blogs.adobe.com/webplatform/files/2014/08/the_11_guesses_shapes.png" /></a>
</div>
</div>
<p></p></center><p></p>
<p style="clear: both;">In the first picture, we don’t use CSS Shapes. The text wraps around the rectangular image container, which leads to a lot of empty space between the text and the visible part of the image.</p>
<p>In the second picture, we use CSS Shapes. You can see the wrapping behavior around the image. In this case the white parts of the image are transparent, thus the browser can automatically wrap the content around the visible part, which leads to this nice and clean, visually more appealing wrapping behavior.</p>
<h3>How do I get CSS Shapes?</h3>
<p>Just update your Chrome browser to the latest version from the Chrome/About Google Chrome menu, or download the latest stable version from <a href="https://www.google.com/chrome/browser/" target="_blank">https://www.google.com/chrome/browser/</a>.</p>
<p>I’d like to thank the collaboration of WebKit and Blink engineers, and everyone else in the community who has contributed to this feature. The fact that Shapes is shipping in two production browsers — Chrome 37 now and Safari 8 later this year — is the upshot of the open source collaboration between the people who believe in a better, more expressive web. Although Shapes will be available in these browsers, you’ll need another solution for the other browsers. The <a href="http://blogs.adobe.com/webplatform/2014/05/12/css-shapes-polyfill/" target="blank">CSS Shapes Polyfill</a> is one method of achieving consistent behavior across browsers.</p>
<h3>Where should I start?</h3>
<p>For more info about CSS Shapes, please check out the following links:</p>
<ul>
<li><a href="http://www.w3.org/TR/css-shapes-1/" target="_blank">CSS Shapes Level 1</a> – Specification</li>
<li><a href="http://blogs.adobe.com/webplatform/2014/05/13/good-looking-shapes-gallery/" target="_blank">Good looking shapes gallery</a> – Demos using shapes by <a href="https://twitter.com/Hans_Muller_CA" target="_blank">Hans Muller</a></li>
<li><a href="http://alistapart.com/blog/post/moving-forward-with-css-shapes" target="_blank">Moving Forward with CSS Shapes</a> by <a href="https://twitter.com/SaraSoueidan" target="_blank">Sara Soueidan</a></li>
<li><a href="http://www.sitepoint.com/css-shapes-breaking-rectangular-design/" target="_blank">CSS Shapes: Breaking the Rectangular Design Shackles</a> by <a href="https://twitter.com/thatpatrickguy" target="_blank">Patrick Catanzariti</a></li>
<li><a href="http://blogs.adobe.com/webplatform/2014/05/12/css-shapes-polyfill/" target="_blank">CSS Shapes polyfill</a> – Blog post, explaining the Shapes polyfill by <a href="https://twitter.com/bear_travis" target="_blank">Bear Travis</a></li>
<li><a href="http://blogs.adobe.com/webplatform/2014/04/17/css-shapes-editor-in-brackets/" target="_blank">CSS Shapes Editor in Brackets</a> – Creating and editing shapes in Brackets easily by <a href="https://twitter.com/razvancaliman" target="_blank">Razvan Caliman</a></li>
<li><a href="http://blogs.adobe.com/webplatform/2014/05/06/css-shapes-feature-testing-is-available-in-modernizr-production-builds/" target="_blank">CSS Shapes feature testing in Modernizr</a> – Browser support testing with JavaScript by <a href="https://twitter.com/zoltanwebkit" target="_blank">Zoltan Horvath</a></li>
<li><a href="http://blogs.adobe.com/webplatform/2014/03/11/add-shape-and-depth-to-your-layout-with-photoshop-and-css-shapes/" target="_blank">Add shape and depth to your layout with Photoshop and CSS Shapes</a> – Shapes workflow with Photoshop by <a href="https://twitter.com/RebeccaHauck" target="_blank">Rebecca Hauck</a></li>
<li><a href="http://blogs.adobe.com/webplatform/2014/02/11/new-css-shapes-syntax/" target="_blank">CSS Shapes syntax</a> – Summary about the CSS Shapes syntax by <a href="https://twitter.com/bemjb" target="_blank">Bem Jones-Bey</a></li>
<li><a href="http://codepen.io/collection/qFesk/" target="_blank">CSS Shapes CodePen.io</a> in our <a href="https://twitter.com/adobeweb" target="_blank">AdobeWeb</a> CodePen.io</li>
<li><a href="http://caniuse.com/css-shapes" target="_blank">Can I use CSS Shapes Level 1?</a> by <a href="http://caniuse.com" target="_blank">http://caniuse.com</a></li>
</ul>
<p>Let us know your thoughts or if you have nice demos, here or on Twitter: <a href="http://twitter.com/adobeweb">@AdobeWeb</a> and <a href="http://twitter.com/zoltanwebkit">@ZoltanWebKit</a>.</p>Zoltan Horvathhttp://blogs.adobe.com/webplatformWeb Platform Team Blog » WebKitMaking the web awesomehttp://blogs.adobe.com/webplatformUsing ARIA 1.0 and the WebKit Accessibility Node Inspectorhttp://www.webkit.org/blog/?p=33022014-06-10T17:40:12+00:00<p>On the heels of the 25th birthday of the Web, <a href="http://www.w3.org/TR/wai-aria/complete">WAI-ARIA 1.0</a>—the specification for Accessible Rich Internet Applications—is a <abbr title="World Wide Web Consortium">W3C</abbr> Recommendation, thanks in part to WebKit’s implementation. Most major web applications use ARIA and related techniques to improve accessibility and general usability.</p>
<p>Many web developers are familiar with the simple parts of ARIA, such as retrofitting roles in legacy or otherwise non-semantic uses of HTML like <code>&lt;div role="button" tabindex="0"&gt;</code>, but ARIA has other equally important uses:</p>
<ul>
<li>Improving languages like SVG where no accessibility semantics exist natively.</li>
<li>Augmenting technologies like EPUB that build on existing HTML semantics.</li>
<li>Allowing accessibility in native implementations, like the sub-DOM controls of <code>&lt;video&gt;</code> elements.</li>
<li>Supporting accessibility and full keyboard access when HTML is insufficient, such as with data grids, tree controls, or application dialogs.</li>
<li>Enabling accessible solutions where there is no equivalent semantic or functionality. For example, HTML has no concept similar to “live” regions.</li>
</ul>
<p>More on these topics below, including how to diagnose and debug problems using new accessibility inspection features in the WebKit Web Inspector.</p>
<h2>Example 1: ARIA in an SVG Map of Africa</h2>
<p>The Scalable Vector Graphics (SVG) language does not include semantics to indicate what type of content is represented, such as a chart, illustration, or interactive application control. However, ARIA roles and attributes can be used in SVG today for both raster- and vector-based images, and the SVG Working Group recently adopted ARIA officially into <a href="https://svgwg.org/svg2-draft/single-page.html#struct-WAIARIAAttributes">SVG 2</a>.</p>
<p>The following video shows VoiceOver’s touchscreen navigation of an accessible map. It uses a simple <code>role="img"</code> on each country path, and an <code>aria-labelledby</code> relationship to associate that country path with the text label. After watching the video, view the source of the test case <a href="https://www.webkit.org/blog-files/aria1.0/africa_large.svg">SVG map of Africa</a> to see how it works.</p>
<figure>
<video controls="controls" width="525"><source src="/blog-files/aria1.0/AfricanSVG_ClosedCaptioned.m4v" type="video/mp4" /></video><p></p>
Closed captioned video showing VoiceOver on iOS with touch screen navigation of African map in SVG+ARIA.
</figure>
<p>Prior to WebKit’s implementation of ARIA in SVG, the best opportunity for a blind individual to experience spatial data like charts and maps was to print expensive <a href="http://en.wikipedia.org/wiki/Tactile_graphic">tactile graphics</a> on swell paper or with a modified braille embosser. Along with WebKit’s first native implementation of accessible MathML, accessible graphics represent new possibilities in the category of study collectively referred to as STEM: science, technology, engineering, and math.</p>
<p>Note: The test case <a href="https://www.webkit.org/blog-files/aria1.0/africa_large.svg">SVG map of Africa</a> is based on an original by <a href="http://www.petercollingridge.co.uk/data-visualisation/interactive-svg-map">Peter Collingridge</a>, with accessibility added for the demo.</p>
<h2>Introducing the Accessibility Node Inspector</h2>
<p>Recent <a href="http://nightly.webkit.org/">nightly builds of WebKit</a> include a new accessibility section in the node properties of the Web Inspector. Select any DOM element to see relevant accessibility information, such as the computed role.</p>
<p>The properties and relationships displayed come from WebCore. Accessibility children and parent nodes cannot be detected through a JavaScript interface and are not a one-to-one mapping to the DOM, so these relationships have not previously been available to web developers. Many other accessibility properties are likewise not detectable through the rendered DOM or a JavaScript interface.</p>
<p>We’ll use the WebKit Accessibility Node Inspector to diagnose and inspect the examples below.</p>
<h2>Complex ARIA Widget Examples</h2>
<p>Many of the original features of ARIA (such as dialogs, landmarks, and menus) have been adopted into recent versions of HTML as elements. However, there are interaction patterns, common on the Web since the 1990s, that still have no native support or unreliable rendering support in HTML, such as date pickers, combo boxes, tab sets, data grids, tree controls, and more. Web developers must render all these controls themselves, using custom code or a JavaScript framework.</p>
<p>Making ARIA widgets can be challenging. The examples below illustrate some of the trickier bits of implementation. Debugging these controls is made easier by observing accessibility properties in the Web Inspector.</p>
<h3>Example 2: Selectable List Box with Full Keyboard Support Using Native Focus Events</h3>
<p>This demo was created in 2009 for Apple’s World Wide Developer Conference (WWDC) and uses the “roaming tabindex” technique on a custom list box.</p>
<p>Assistive technologies do not change the DOM, so there’s no hidden magic happening. JavaScript running in the page uses standard event handling and DOM interfaces like <code>setAttribute()</code> and <code>focus()</code>. View the source or step through in the WebKit debugger for a deeper understanding.</p>
<figure>
<video controls="controls" width="525"><source src="/blog-files/aria1.0/WebKitManagedFocusDemo.m4v" type="video/mp4" /></video><p></p>
Closed captioned video showing an accessible “managed focus” list box demo
</figure>
<p>For a full explanation of the techniques and test case <a href="https://www.webkit.org/blog-files/aria1.0/roaming_tabindex/final.html">roaming tabindex demo</a> used in the video, see <a href="https://developer.apple.com/videos/safari/#8-video">WWDC 2009: Improving Accessibility in Web Applications</a>.</p>
<h3>Example 3: Combo Box with a “Status” Live Region</h3>
<p>During the life cycle of a web application, there may be multiple points of user interest. In the list box example, the web application moves focus to the updated item, but moving focus is not always appropriate. In a combo box, keyboard focus should remain on the text field so the user can continue typing. The selected item in the related drop-down list is conveyed to the API when the selection changes, allowing a a screen reader to speak updates to both elements. Some combo boxes have an additional status display to indicate the total number of results. In this demo, we’ll use an ARIA “live region” for the status updates.</p>
<p>As with the previous example, there’s no hidden magic occurring in the DOM. JavaScript running in the page uses standard event handling and DOM interfaces like <code>setAttribute()</code>. View the source or step through in the WebKit debugger for a deeper understanding of the techniques.</p>
<figure>
<video controls="controls" width="525"><source src="/blog-files/aria1.0/WebKitComboBoxExample.m4v" type="video/mp4" /></video><p></p>
Closed captioned video showing an accessible combo box demo with live region support
</figure>
<p>As this <a href="https://www.webkit.org/blog-files/aria1.0/combobox_with_live_region_status.html">combo box demo</a> shows, the ability for an assistive technology to simultaneously follow and report changes to multiple points of user interest was never possible in web applications prior to ARIA.</p>
<h2>Major Contributors to WebKit’s ARIA Implementation</h2>
<p>WebKit’s implementation of ARIA played a significant part in the ARIA 1.0 Recommendation milestone, and many individuals collaborated on the work.</p>
<p>The initial implementation was completed in 2008 by Alice Liu Barraclough and Beth Dakin. Much of the remaining ARIA implementation in WebCore, as well as the Mac and iOS platform mapping, was completed by Chris Fleizach. Sam White made major improvements to WebKit’s accessibility architecture. Jon Honeycutt, Brent Fulgham, Dominic Mazzoni, Mario Sánchez Prada, and others completed the platform mapping to the Windows and Linux accessibility APIs. Credit for the ARIA test harness and WebKit test results goes to Michael Cooper, Jon Gunderson, Mona Heath, Joseph Scheuhammer, Rich Schwerdtfeger, and others. The full list of <a href="http://www.w3.org/TR/wai-aria/complete#acknowledgements">working group acknowledgements</a> is available in the ARIA spec.</p>
<p>The Web is a more enabling resource for everyone because of the efforts of these individuals. Thank you!</p>
<h2>Future Direction of ARIA</h2>
<p>ARIA 1.0 has much room for improvement, but it’s an incredibly important step toward ensuring equal access, opportunity, and usability of the web platform.</p>
<p>Future work on ARIA will cover additional semantics for HTML, SVG, and EPUB, and some of the work proposed includes non-declarative JavaScript accessibility API support for custom view technologies like WebGL and Canvas. There is also work to be done for rich text editing that is beyond the capability of <code>contenteditable</code>, such as the custom display and input-proxied views that are used on application suites like Google Docs and iWork for iCloud.</p>
<h2>A Call to Action</h2>
<p>Many of the widget libraries available in JavaScript frameworks do NOT include support for accessibility and keyboard behavior. If you are a front-end engineer, you have an opportunity to change this situation.</p>
<p>When you contribute to JavaScript UI libraries, include support for accessibility. Test your code for accessibility and keyboard behavior using <code>focus()</code> where appropriate. Detect and update your web app state based on user focus events. Don’t just style the CSS of controls to look focused; use real keyboard focus.</p>
<p>The amount of effort it takes to add and test for accessibility is well worth the fit-and-finish it will bring to your web app. You’ll improve the experience for all users.</p>
<h2>Additional Video Resources</h2>
<p>Each of these videos is about an hour in length. They cover ARIA and related techniques in detail.</p>
<ul>
<li><a href="https://developer.apple.com/videos/wwdc/2014/#516-video"> WWDC 2014: Improving the Accessibility and Usability of Complex Web Applications</a></li>
<li><a href="https://developer.apple.com/videos/wwdc/2014/#512-video"> WWDC 2014: Web Inspector and Modern JavaScript</a></li>
<li><a href="https://developer.apple.com/videos/wwdc/2012/?id=518"> WWDC 2012: Improving Accessibility in Books</a></li>
<li><a href="https://developer.apple.com/videos/wwdc/2011/?id=519">WWDC 2011: Combining Web Accessibility and Automation on iOS</a></li>
<li><a href="https://developer.apple.com/videos/safari/#8-video">WWDC 2009: Improving Accessibility in Web Applications</a></li>
</ul>James Craighttps://www.webkit.org/blogSurfin' SafariAll about WebKit developmenthttps://www.webkit.org/blogGood-Looking Shapes Galleryhttp://blogs.adobe.com/webplatform/?p=64122014-05-13T17:38:52+00:00<p>As a modern consumer of media, you rarely crack open a magazine or a pamphlet or anything that would be characterized as “printed”. Let me suggest that you take a walk on the wild side. The next time you are in a doctor’s office, or a supermarket checkout lane, or a library, thumb though a magazine. Most of the layouts you’ll find inside can also be found on the web, but not all of them. Layouts where content hugs the boundaries of illustrations are common in print and rare on the web. One of the reasons non-rectangular contour-hugging layouts are uncommon on the web is that they are difficult to produce.</p>
<p>They are not difficult to produce anymore.</p>
<p><a href="http://dev.w3.org/csswg/css-shapes-1/" target="_blank" title="CSS Shapes Module Level 1 Specification">The CSS Shapes specification</a> is now in the final stages of standardization. This feature enables flowing content around geometric shapes (like circles and polygons), as well as around shapes defined by an image’s alpha channel. Shapes make it easy to produce the kinds of layouts you can find in print today, with all the added flexibility and power that modern online media affords. You can use CSS Shapes right now with the latest builds of WebKit and Blink based browsers, like Safari and Chrome.</p>
<p>Development of CSS Shapes has been underway for about two years, and we’ve been regularly heralding its progress <a href="http://blogs.adobe.com/webplatform/category/features/css-shapes/" target="-blank">here</a>. Many of those reports have focused on the evolution of the spec and implementations, and they’ve included examples that emphasized basics over beauty. This article is an attempt to tilt the balance back towards good-looking. Listed below are simple shapes demos that we think look pretty good. Everyone on Adobe’s CSS Shapes engineering team contributed at least one.</p>
<p>There’s a <a href="http://codepen.io/collection/lrmwd/" target="_blank">live CodePen.io version of each demo</a> in the gallery. Click on the demo screenshot or one of the handy links to take a look. You’ll want to view the demos with <a href="http://html.adobe.com/webplatform/layout/shapes/browser-support/" target="_blank">a browser that supports Shapes</a> and you’ll need to <a href="http://html.adobe.com/webplatform/enable" target="_blank">enable CSS Shapes in that browser</a>. For example you can use a <a href="http://nightly.webkit.org/">nightly build of the Safari browser</a> or you can enable shapes in Chrome or Chrome Canary like this:</p>
<ol style="padding-left: 1.25em; font-size: smaller;">
<li>Copy and paste <strong><code>chrome://flags/#enable-experimental-web-platform-features</code></strong> into the address bar, then press enter.</li>
<li>Click the ‘Enable’ link within that section.</li>
<li>Click the ‘Relaunch Now’ button at the bottom of the browser window.</li>
</ol>
<p>A few of the demos use the new <a href="http://blogs.adobe.com/webplatform/2014/05/12/css-shapes-polyfill/">Shapes Polyfill</a> and will work in most browsers. </p>
<p>And now, without further ado, please have a look through our good-looking shapes gallery.</p>
<hr />
<h2>Ozma of Oz</h2>
<p></p><center><a href="http://codepen.io/adobe/full/rmual"><img alt="ozma-demo-screenshot" class="wp-image-6439 size-full" height="550" src="http://blogs.adobe.com/webplatform/files/2014/05/ozma-demo-screenshot.jpg" width="394" /></a></center><p></p>
<p><a href="http://codepen.io/adobe/full/rmual">This demo</a> reproduces the layout style that opens many of the chapters of the L. Frank Baum books, including <a href="http://books.google.com/books?id=A-EQAAAAYAAJ&amp;dq=ozma%20of%20oz%20the%20eleven%20guesses&amp;pg=PA175#v=onepage&amp;q=ozma%20of%20oz%20the%20eleven%20guesses&amp;f=false" target="_blank">Ozma of Oz</a>. The first page is often dominated by an illustration on the left or right. The chapter’s text conforms to the illustration, but not too tightly. The books were published over 100 years ago and they still look good print. With CSS Shapes they can still look good on the web.</p>
<h2>Top Cap</h2>
<p></p><center><a href="http://codepen.io/adobe/full/rCdjv"><img alt="topcap-demo-screenshot" class="wp-image-6439 size-full" height="503" src="http://blogs.adobe.com/webplatform/files/2014/05/topcap-demo-screenshot.png" width="400" /></a></center><p></p>
<p>The conventional “drop-cap” opens a paragraph by enlarging and highlighting the first letter, word or phrase. The drop-cap’s goal is to draw your attention to where you can start reading. <a href="http://codepen.io/adobe/full/rCdjv">This demo</a> delivers the same effect by crowning the entire opening paragraph with a “top cap” that funnels your attention into the article. In both cases, what’s going on is a segue from a graphic element to the text.</p>
<h2>Violator</h2>
<p></p><center><a href="http://codepen.io/adobe/full/cbjsy"><img alt="monsters-demo-screenshot" class="wp-image-6421 size-full" height="453" src="http://blogs.adobe.com/webplatform/files/2014/05/violator-demo-screenshot.png" width="640" /></a></center><p></p>
<p><a href="http://codepen.io/adobe/full/cbjsy">A violator</a> is small element that “violates” rectangular text layout by encroaching on a corner or a small part of an edge. This layout idiom is common in short-form magazines and product packaging. That “new and improved” banner which blazes through the corner of thousands of consumer products (whether or not they are new or improved) – it’s a violator.</p>
<h2>Column Interest</h2>
<p></p><center><a href="http://codepen.io/adobe/full/DCeGf"><img alt="columns-demo-screenshot" class="wp-image-6421 size-full" height="427" src="http://blogs.adobe.com/webplatform/files/2014/05/column-demo.png" width="640" /></a></center><p></p>
<p>When a print magazine feels the need to incorporate some column layout melodrama, they often reach for this idiom. <a href="http://codepen.io/adobe/full/DCeGf">The shape spans a pair of columns</a>, which creates visual interest in the middle of the page. Without it you’d be faced with a wall of attention sapping text and more than likely turn the page. </p>
<h2>Caption</h2>
<p></p><center><a href="http://codepen.io/adobe/full/Brtdz"><img alt="Screenshot of the wine jug caption demo." class="wp-image-6425 size-full" height="423" src="http://blogs.adobe.com/webplatform/files/2014/05/caption-demo-screenshot.png" width="640" /></a></center><p></p>
<p>The old-school approach for including a caption with an image is to put the caption text alongside or below the image. Putting a <a href="http://codepen.io/adobe/full/Brtdz">caption on top of an image</a> requires a little more finesse, since you have to ensure that the text doesn’t obscure anything important and that the text is rendered in a way that preserves readability. The result can be relatively attractive.</p>
<p>This photograph was taken by Zoltan Horvath who has pointed out that I’ve combined a quote about tea with a picture of a ceremonial wine jug. I apologize for briefly breaching that beverage boundary. It’s just a demo.</p>
<h2>Paging</h2>
<p></p><center><a href="http://codepen.io/adobe/full/yoEvB"><img alt="Screenshot of the paging demo." class="aligncenter wp-image-6429 size-full" src="http://blogs.adobe.com/webplatform/files/2014/05/paging-demo1.png" width="640" /></a></center><p></p>
<p>With a layout like this, one could simple let the content wrap and around the shape on the right and then expand into the usual rectangle. In <a href="http://codepen.io/adobe/full/yoEvB">this demo</a> the content is served up a paragraph at a time, in response to the left and right arrow keys.</p>
<p>Note also: yes in fact the mate gourd is perched on exactly the same windowsill as the previous demo. Zoltan and Pope Francis are among the many fans of yerba mate tea.</p>
<h2>Ersatz shape-inside</h2>
<p></p><center><a href="http://codepen.io/adobe/full/tbhfB"><img alt="Screenshot of the ersatz shape-inside demo." class="aligncenter wp-image-6429 size-full" src="http://blogs.adobe.com/webplatform/files/2014/05/ersatz-demo-screenshot.png" width="640" /></a></center><p></p>
<p>Originally the CSS Shapes spec included <em>shape-inside</em> as well as shape-outside. Sadly, shape-inside was promoted to “Level 2″ of the spec and isn’t available in the current implementations. Fortunately for shape insiders everywhere, it’s still sometimes possible to mimic shape-inside with an adjacent pair of carefully designed shape-outside floats. <a href="http://codepen.io/adobe/full/tbhfB">This demo</a> is a nice example of that, where the text appears inside a bowl of oatmeal.</p>
<h2>Animation</h2>
<p></p><center><a href="http://codepen.io/adobe/full/sGvLE" target="_blank"><img alt="animation-demo-screeenshot" class="wp-image-6434 size-full" src="http://blogs.adobe.com/webplatform/files/2014/05/animation-demo.png" width="632" /></a></center><p></p>
<p><a href="http://codepen.io/adobe/full/sGvLE" target="_blank">This is an animated demo</a>, so to appreciate it you’ll really need to take a look at the live version. It is an example of using an animated shape to draw the user’s attention to a particular message. Of course one must use this approach with restraint, since an animated loop on a web page doesn’t just gently tug at the user’s attention. It drags at their attention like a tractor beam.</p>
<h2>Performance</h2>
<p></p><center><a href="http://codepen.io/adobe/full/plroa/"><img alt="performance-demo-screenshot" class="aligncenter size-full wp-image-6448" height="578" src="http://blogs.adobe.com/webplatform/files/2014/05/performance-demo-screenshot.png" width="655" /></a></center><p></p>
<p>Advertisements are intended to grab the user’s attention and a second or two of animation will do that. In <a href="http://codepen.io/adobe/full/plroa/">this demo</a> a series of transition motions have been strung together into a tiny performance that will temporarily get the reader’s attention. The highlight of the performance is – of course – the text snapping into the robot’s contour for the finale. Try and imagine a soundtrack that punctuates the action with some whirring and clanking noises, it’s even better that way.</p>hmullerhttp://blogs.adobe.com/webplatformWeb Platform Team Blog » WebKitMaking the web awesomehttp://blogs.adobe.com/webplatformAdobe Web Platform Goes to the 2014 WebKit Contributors’ Meetinghttp://blogs.adobe.com/webplatform/?p=63922014-04-24T17:23:46+00:00<p>Last week, Apple hosted the <a href="https://trac.webkit.org/wiki/April%202014%20Meeting">2014 WebKit Contributors’ Meeting</a> at their campus in Cupertino. As usual it was an unconference-style event, with session scheduling happening on the morning of the first day. While much of the session content was very specific to WebKit implementation, there were topics covered that are interesting to the wider web community. This post is a roundup of some of these topics from the sessions that Adobe Web Platform Team members attended.</p>
<h3 style="color: #000000;">CSS Custom Properties for Cascading Variables</h3>
<p style="color: #000000;"><a href="https://twitter.com/alanstearns">Alan Stearns</a> suggested a session on planning a new implementation of <a href="http://dev.w3.org/csswg/css-variables/">CSS Custom Properties for Cascading Variables</a>. While implementations of this spec have been attempted in WebKit in the past, they never got past the experimental stage. Despite this, there is still much interest in implementing this feature. In addition, the current version of the spec has addressed many of the issues that WebKit contributors had previously expressed. We talked about a possible issue with using variables in custom property values, which Alan is investigating. More detail is available in the <a href="https://trac.webkit.org/wiki/Cleanroom%20implement%20CSS%20Custom%20Properties">notes from the Custom Properties session</a>.</p>
<h3 style="color: #000000;">CSS Regions</h3>
<p style="color: #000000;">Andrei Bucur presented the current state of the CSS Regions implementation in WebKit. The presentation was well received and well attended. Notably, this was one of the few sessions with enough interest that it had a time slot all to itself.</p>
<p style="color: #000000;">While <a href="http://html.adobe.com/webplatform/layout/regions/">CSS Regions</a> shipped last year in <a href="http://blogs.adobe.com/webplatform/2013/09/23/design-next-generation-responsive-designs-for-ios7-with-edge-reflow-cc-and-css-regions-a-story-of-collaboration/">iOS 7</a> and <a href="http://blogs.adobe.com/webplatform/2013/11/11/take-css-regions-out-for-a-drive-in-safari-6-1-7/">Safari 6.1 and 7</a>, the implementation in WebKit hasn’t been standing still. Andrei mentioned the following short list of changes in WebKit since the last Safari release:</p>
<ul style="color: #000000;">
<li style="margin-bottom: 0px;">correct painting of fragments and overflow</li>
<li style="margin-bottom: 0px;">scrollable regions</li>
<li style="margin-bottom: 0px;">accelerated content inside regions</li>
<li style="margin-bottom: 0px;"><code>position: fixed</code> elements</li>
<li style="margin-bottom: 0px;">the <code>regionoversetchange</code> event</li>
<li style="margin-bottom: 0px;">better selection</li>
<li style="margin-bottom: 0px;">better WebInspector integration</li>
<li style="margin-bottom: 0px;">and more…</li>
</ul>
<p style="color: #000000;">Andrei’s <a href="http://slides.com/abucur/css-regions-in-webkit?token=rZN8RAhSwzTAvWqrhEQNsyWyCTcr">slides outlining the state of CSS Regions</a> also contain a roadmap for the feature’s future in WebKit as well as a nice demo of the fix to fragment and overflow handling. If you are following the progress of CSS Regions in WebKit, the slides are definitely worth a look. (As of this writing, the Regions demo in the slides only works in Safari and <a href="http://nightly.webkit.org/">WebKit Nightly</a>.)</p>
<h3 style="color: #000000;">CSS Shapes</h3>
<p style="color: #000000;"><a href="https://twitter.com/ZoltanWebKit">Zoltan Horvath</a>, <a href="https://twitter.com/bear_travis">Bear Travis</a>, and <a href="https://twitter.com/bemjb">I</a> covered the current state of <a href="http://html.adobe.com/webplatform/layout/shapes/">CSS Shapes</a> in WebKit. We are almost done implementing the functionality in <a href="http://www.w3.org/TR/css-shapes/">Level 1 of the CSS Shapes Specification</a> (which is itself a Candidate Recommendation, the last step before becoming an official W3C standard). The discussion in this session was very positive. We received good feedback on use cases for shape-outside and even talked a bit about the possibilities for when shape-inside is revisited as part of CSS Shapes Level 2. While I don’t have any slides or demos to share at the moment, we will soon be publishing a blog post to bring everyone up to date on the latest in CSS Shapes. So watch this space for more!</p>
<h3 style="color: #000000;">Subpixel Layout</h3>
<p style="color: #000000;">This session was mostly about implementation. However, Zalan Bujtas drew an interesting distinction between subpixel layout and subpixel painting. Subpixel layout allows for better space utilization when laying out elements on the page, as boxes can be sized and positioned more precisely using fractional units. Subpixel painting allows for better utilization of high DPI displays by actually drawing elements on the screen using fractional CSS pixels (For example: on a 2x “Retina” display, half of a CSS pixel is one device pixel). Subpixel painting allows for much cleaner lines and smoother animations on high DPI displays when combined with subpixel layout. While subpixel layout is currently implemented in WebKit, subpixel painting is currently a work in progress.</p>
<h3 style="color: #000000;">Web Inspector</h3>
<p style="color: #000000;">The Web Inspector is full of shiny new features. The front-end continues to shift to a new design, while the back-end gets cleaned up to remove cruft. The architecture for custom visual property editors is in place and will hopefully enable quick and intuitive editing of gradients, transforms, and animations in the future. Other goodies include new breakpoint actions (like value logging), a redesigned timeline, and IndexedDB debugging support. The Web Inspector still has room for new features, and you can always check out the <a href="irc://irc.freenode.net/#webkit-inspector">#webkit-inspector channel</a> on <a href="irc://irc.freenode.net">freenode IRC</a> for the latest and greatest.</p>
<h3 style="color: #000000;">Web Components</h3>
<p style="color: #000000;">The <a href="http://www.w3.org/TR/components-intro/">Web Components</a> set of features continues to gather interest from the browser community. Web Components is made up of four different features: HTML Components, HTML Imports, Shadow DOM, and HTML Templates. The general gist of the talk was that the Web Components concepts are desirable, but there are concerns that the features’ complexity may make implementation difficult. The main concerns seemed to center around performance and encapsulation with Shadow DOM, and will hopefully be addressed with a prototype implementation of the feature (in the works). You can also take a look at the <a href="https://www.icloud.com/iw/#keynote/BAK-8W4OetTXW4BCpcyBCbuyzVm2YAQqnjSF/Presentation">slides from the Web Components session</a>.</p>
<h3 style="color: #000000;">CSS Grid Layout</h3>
<p style="color: #000000;">The WebKit implementation of the <a href="http://www.w3.org/TR/css-grid-1/">CSS Grid Layout</a> specification is relatively advanced. After learning in this session that the only way to test out Grid Layout in WebKit was to make a custom build with it enabled, session attendees concluded that it should be turned on by default in the <a href="http://nightly.webkit.org/">WebKit Nightlies</a>. So in the near future, experimenting with Grid Layout in WebKit should be as easy as installing a nightly build.</p>
<h3 style="color: #000000;">More?</h3>
<p style="color: #000000;">As I mentioned earlier, this was just a high-level overview of a few of the topics at this year’s WebKit Contributors’ Meeting. Notes and slides for some of the topics not mentioned here are available on the <a href="https://trac.webkit.org/wiki/April%202014%20Meeting">2014 WebKit Meeting</a> page in the wiki. The WebKit project is always welcoming new contributors, so if you happen to see a topic on that wiki page that interests you, feel free to <a href="https://www.webkit.org/contact.html">get in touch with the community</a> and see how you can get involved.</p>
<h3 style="color: #000000;">Acknowledgements</h3>
<p style="color: #000000;">This post would not have been possible without the notes and editing assistance of my colleagues on the Adobe Web Platform Team that attended the meeting along with me: <a href="https://twitter.com/alanstearns">Alan Stearns</a>, Andrei Bucur, <a href="https://twitter.com/bear_travis">Bear Travis</a>, and <a href="https://twitter.com/ZoltanWebKit">Zoltan Horvath</a>.</p>Bem Jones-Beyhttp://blogs.adobe.com/webplatformWeb Platform Team Blog » WebKitMaking the web awesomehttp://blogs.adobe.com/webplatformQtWebKit is no more, what now?http://blog.kov.eti.br/?p=3542014-03-18T19:44:07+00:00<p>Driven by the technical choices of some of our early clients, QtWebKit was one of the first web engines <a href="http://collabora.com/" title="Collabora">Collabora</a> worked on, building the initial support for NPAPI plugins and more. Since then we had kept in touch with the project from time to time when helping clients with specific issues, hardware or software integration, and particularly GStreamer-related work.</p>
<p>With Google forking Blink off WebKit, a decision had to be made by all vendors of browsers and platform APIs based on WebKit on whether to stay or follow Google instead. After quite a bit of consideration and prototyping, the Qt team decided to take the second option and build the <a href="http://qt-project.org/wiki/QtWebEngine" title="QtWebEngine">QtWebEngine</a> library to replace QtWebKit.</p>
<p>The main advantage of WebKit over Blink for engine vendors is the ability to implement custom platform support. That meant QtWebKit was able to use Qt graphics and networking APIs and other Qt technologies for all of the platform-integration needs. It also enjoyed the great flexibility of using GStreamer to implement HTML5 media. GStreamer brings hardware-acceleration capabilities, support for several media formats and the ability to expand that support without having to change the engine itself. </p>
<p>People who are using QtWebKit because of its being Gstreamer-powered will probably be better served by switching to one of the remaining GStreamer-based ports, such as WebKitGTK+. Those who don’t care about the underlying technologies but really need or want to use Qt APIs will be better served by porting to the new QtWebEngine.</p>
<p>It’s important to note though that QtWebEngine drops support for Android and iOS as well as several features that allowed tight integration with the Qt platform, such as DOM manipulation through the <a href="http://qt-project.org/doc/qt-5/qwebelement.html">QWebElement APIs</a>, making <a href="http://qt-project.org/doc/qt-5/qtwebkit-bridge.html">QObject instances available to web applications</a>, and the ability to <a href="http://qt-project.org/doc/qt-5/qwebpage.html#setNetworkAccessManager">set the QNetworkAccessManager</a> used for downloading resources, which allowed for fine-grained control of the requests and sharing of cookies and cache.</p>
<p>It might also make sense to go Chromium/Blink, either by using the <a href="http://www.chromium.org/developers/content-module/content-api">Chrome Content API</a>, or switching to one its siblings (QtWebEngine included) if the goal is to make a browser which needs no integration with existing toolkits or environments. You will be limited to the formats supported by Chrome and the hardware platforms targeted by Google. Blink does not allow multiple implementations of the platform support layer, so you are stuck with what upstream decides to ship, or with a fork to maintain.</p>
<p>It is a good alternative when Android itself is the main target. That is the technology used to build its main browser. The main advantage here is you get to follow Chrome’s fast-paced development and great support for the targeted hardware out of the box. If you need to support custom hardware or to be flexible on the kinds of media you would like to support, then WebKit still makes more sense in the long run, since that support can be maintained upstream.</p>
<p>At Collabora we’ve dealt with several WebKit ports over the years, and still actively maintain the custom WebKit Clutter port out of tree for clients. We have also done quite a bit of work on Chromium-powered projects. Some of the decisions you have to make are not easy and we believe we can help. Not sure what to do next? If you have that on your plate, <a href="https://www.collabora.com/contact/">get in touch</a>!</p>kovhttp://blog.kov.eti.brGustavo Noronha (kov) » webkittchuf tchuf; ou seria nheco nheco fum?http://blog.kov.eti.brImproving your site’s visual details: CSS3 text-align-lasthttp://blogs.adobe.com/webplatform/?p=57982014-02-25T16:58:34+00:00<p>In this post, I want to give a status report regarding the text-align-last CSS3 property. If you are interested in taking control of the small visual details of your site with CSS, I encourage you to keep reading.</p>
<p><strong>The problem</strong></p>
<p>First, let’s talk about why we need this property. You’ve probably already seen many text blocks on pages that don’t quite seem visually correct, because the last line isn’t justified with the previous lines. Check out the example paragraph below:</p>
<p><a href="http://blogs.adobe.com/webplatform/files/2014/02/text_align_last.png"><img alt="Example of the CSS3 text-align-last property" class="aligncenter size-full wp-image-5800" src="http://blogs.adobe.com/webplatform/files/2014/02/text_align_last.png" width="833" /></a></p>
<p>In the first column, the last line isn’t justified. This is the expected behavior, when you apply the ‘text-align: justify’ CSS property on a container. On the other hand, in the second column, the content is entirely justified, including the last line.</p>
<p><strong>The solution</strong></p>
<p>This magic is the ‘text-align-last’ CSS3 property, which is set to justify on the second container. The text-align-last property is part of the CSS Text Module Level 3 specification, which is currently a working draft. The text-align-last property describes how the last line of a block or a line right before a <a href="http://www.w3.org/TR/css3-text/#forced-line-break" target="_blank">forced line break</a> is aligned when ‘<a href="http://www.w3.org/TR/css3-text/#text-align" target="_blank">text-align</a>’ is ‘justify’, which means you gain <strong>full control over the alignment of the last line of a block</strong>. The property allows several more options, which you can read about on <a href="http://docs.webplatform.org/wiki/css/properties/text-align-last" target="_blank">WebPlatform.org docs</a>, or the <a href="http://www.w3.org/TR/css3-text/#text-align-last-property" target="_blank">CSS Text Module Level 3</a> W3C Specification.</p>
<p><strong>A possible use case (Added April – 2014)</strong></p>
<p>After looking at the previous example (which was rather focusing on the functionality of the property), let’s move on to a more realistic use case. The feature is perfect to make our multi-line captions look better. Check out the centered, and the justified image caption examples below.<br />
</p><center><a href="http://blogs.adobe.com/webplatform/files/2014/04/center.png"><img alt="center" class="aligncenter size-full wp-image-6304" height="321" src="http://blogs.adobe.com/webplatform/files/2014/04/center.png" style="float: left;" width="390" /></a><a href="http://blogs.adobe.com/webplatform/files/2014/04/text_align__simple_justify.png"><img alt="text_align__simple_justify" class="aligncenter size-full wp-image-6307" height="320" src="http://blogs.adobe.com/webplatform/files/2014/04/text_align__simple_justify.png" width="390" /></a></center><br />
And now, compare them with a justified, multi-line caption, where the last line has been centered by <strong>text-align-last: center</strong>.<br />
<center><a href="http://blogs.adobe.com/webplatform/files/2014/04/text_align_last_center.png"><img alt="text_align_last_center" class="aligncenter size-full wp-image-6306" height="322" src="http://blogs.adobe.com/webplatform/files/2014/04/text_align_last_center.png" width="389" /></a></center><br />
I think the proper alignment of the last line gives a better overlook to the caption.<p></p>
<p><strong>Browser Support</strong></p>
<p>I recently <a href="http://trac.webkit.org/changeset/162213" target="_blank">added rendering support</a> for the property in WebKit (Safari) based on the latest specification. Dongwoo Joshua Im from Samsung added rendering support in Blink (Chrome). If you like to try it out in WebKit, you’ll need to make a custom developer build and use the CSS3 text support build flag (<code>--css3-text</code>).</p>
<p>The property is already included in Blink’s developer nightlies by default, so after launching your latest <a href="https://www.google.com/intl/en/chrome/browser/canary.html" target="_blank">Chrome Canary</a>, you only need to enable ‘Enable experimental Web Platform features’ under <a target="_blank">chrome://flags</a>, and enjoy the full control over your last lines.</p>
<p><strong>Developer note</strong></p>
<p>Please keep in mind that both the W3C specification and the implementations are under experimental status. I’ll keep blogging about the feature and let you know if anything changes, including when the feature ships for production use!</p>Zoltan Horvathhttp://blogs.adobe.com/webplatformWeb Platform Team Blog » WebKitMaking the web awesomehttp://blogs.adobe.com/webplatformFunding MathML Developments in Gecko and WebKit (part 2)urn:md5:9faec7080006a98ebfb7b63a009f9eca2014-01-05T19:45:19+00:00<p>As I mentioned <a href="http://www.maths-informatique-jeux.com/blog/frederic/?post/2013/10/12/Funding-MathML-Developments-in-Gecko-and-WebKit">three months ago</a>, I wanted to start a crowdfunding campaign so that I can have more time to devote to MathML developments in browsers and (at least for Mozilla) continue to mentor volunteer contributors. Rather than doing several crowdfunding campaigns for small features, I finally decided to do a single crowdfunding campaign with <a href="http://www.ulule.com/">Ulule</a> so that I only have to worry only once about the funding. This also sounded more convenient for me to rely on some French/EU website regarding legal issues, taxes etc. Also, just like <a href="http://www.kickstarter.com/">Kickstarter</a> it's possible with Ulule to offer some "rewards" to backers according to the level of contributions, so that gives a better way to motivate them.</p>
<p>As everybody following MathML activities noticed, big companies/organizations do not want to significantly invest in funding MathML developments at the moment. So the rationale for a crowdfunding campaign is to rely on the support of the current community and on the help of smaller companies/organizations that have business interest in it. Each one can give a small contribution and these contributions sum up in enough money to fund the project. Of course this model is probably not viable for a long term perspective, but at least this allows to start something instead of complaining without acting ; and to show bigger actors that there is a demand for these developments. As indicated on the Ulule Website, this is a way to start some relationship and to build a community around a common project. My hope is that it could lead to a long term funding of MathML developments and better partnership between the various actors.</p>
<p>Because one of the main demand for MathML (besides accessibility) is in EPUB, I've included in the project goals a collection of documents that demonstrate advanced Web features with native MathML. That way I can offer more concrete rewards to people and federate them around the project. Indeed, many of the work needed to improve the MathML rendering requires some preliminary "code refactoring" which is not really exciting or immediately visible to users...</p>
<p>Hence I launched the crowdfunding campaign the 19th of November and <strong>we reached 1/3 of the minimal funding goal in only three days</strong>! This was mainly thanks to the support of individuals from the MathML community. In mid december we reached the minimal funding goal after a significant contribution from the <a href="http://www.maths-informatique-jeux.com/blog/frederic/?post/2014/01/05/kwarc.info">KWARC Group</a> (<a href="https://en.wikipedia.org/wiki/Jacobs_University_Bremen">Jacobs University Bremen</a>, Germany) with which I have been in communication since the launch of the campaign. Currently, we are at 125% and this means that, minus the Ulule commision and my social/fiscal obligations, I will be able to work on the project during about 3 months.</p>
<div style="width: 362px; margin-right: auto; margin-left: auto;">
<a href="http://www.ulule.com/mathematics-ebooks/">
<img alt="MathML crowdfunding" height="162" src="http://www.maths-informatique-jeux.com/ulule/proposal/ulule.png" width="362" />
</a>
</div>
<p><strong>I'd like to thank again all the companies, organizations and people who have supported the project so far! The crowdfunding campaign continues until the end of January so I hope more people will get involved.</strong> If you want better MathML in Web rendering engines and ebooks then please support this project, even a symbolic contribution. If you want to do a more significant contribution as a company/organization then note that Ulule is only providing a service to organize the crowdfunding campaign but otherwise the funding is legally treated the same <a href="http://fr.vox.ulule.com/obligations-comptables-auto-entrepreneurs-et-traitement-en-comptabilite-fonds-recus-ulule-2931/">as required by my self-employed status</a>; feel free to contact me for any questions on the project or funding and discuss the long term perspective.</p>
<p>Finally, note that I've used my savings and I plan to continue like that until the official project launch in February. Below is a summary of what have been done during the five weeks before the holiday season. This is based on my <a href="http://www.ulule.com/mathematics-ebooks/news/">weekly updates for supporters</a> where you can also find references to the Bugzilla entries. Thanks to the Apple &amp; Mozilla developers who spent time to review my patches!</p>
<h2>Collection of documents</h2>
<p>The goal is to show how to use existing tools (LaTeXML, itex2MML, tex4ht etc) to build EPUB books for science and education using Web standards. The idea is to cover various domains (maths, physics, chemistry, education, engineering...) as well as Web features. Given that
<a href="https://wiki.mozilla.org/ScienceLab">many scientific circles are too much biased by "math on paper / PDF" and closed research practices</a>, it may look innovative to use the Open Web but to be honest the MathML language and its integration with other Web formats is well established for a long time. Hence in theory it should "just work" once you have native MathML support, without any circonvolutions or hacks. Here are a couple of features that are tested in the sample EPUB books that I wrote:</p>
<ul>
<li>Rendering of MathML equations (of course!). Since the screen size and resolution vary for e-readers, automatic line breaking / reflowing of the page is "naturally" tested and is an important distinction with respect to paper / PDF documents.</li>
<li>CSS styling of the page and equations. This includes using (Web) fonts,
which are very important for mathematical publishing.</li>
<li>Using SVG schemas and how they can be mixed with MathML equations.</li>
<li>Using non-ASCII (Arabic) characters and RTL/LTR rendering of both the text and equations.</li>
<li>Interactive document using Javascript and <code>&lt;maction&gt;</code>, <code>&lt;input&gt;</code>, <code>&lt;button&gt;</code> etc. For those who are curious, I've created some videos for an <a href="http://www.youtube.com/watch?v=imIwtZ-mNcc">algebra course</a> and a <a href="http://www.youtube.com/watch?v=otlUBb_gtdY">lab practical</a>.</li>
<li>Using the <code>&lt;video&gt;</code> element to include short sequences of an experiment in a physics course.</li>
<li>Using the <code>&lt;canvas&gt;</code> element to draw graphs of functions or of physical measurements.</li>
<li>Using WebGL to draw interactive 3D schemas. At the moment, I've only adapted a chemistry course and used <a href="http://www.chemdoodle.com/">ChemDoodle</a> to load Crystallographic Information Files (CIF) and provide 3D-representation of crystal structures. But of course, there is not any problem to put <a href="http://www.maths-informatique-jeux.com/international/mathml-in-webgl/index.html">MathML equations in WebGL</a> to create other kinds of scientific 3D schemas.</li>
</ul>
<div style="width: 362px; margin-right: auto; margin-left: auto;">
<a href="http://www.ulule.com/mathematics-ebooks/">
<img alt="MathML crowdfunding" height="180" src="http://www.maths-informatique-jeux.com/ulule/proposal/ebookmath.png" width="320" />
</a>
</div>
<h2>WebKit</h2>
<p>I've finished some work started as a MathJax developer, including the maction support requested by the KWARC Group. I then tried to focus on the main goals: rendering of token elements and more specifically operators (spacing and stretching).</p>
<ul>
<li>I improved LTR/RTL handling of equations (full RTL support is not implemented yet and not part of the project goal).</li>
<li>I improved the maction elements and implemented the toggle actiontype.</li>
<li>I refactored the code of some "mrow-like" elements to make them all behave like an <code>&lt;mrow&gt;</code> element. For example while WebKit stretched (some) operators in <code>&lt;mrow&gt;</code> elements it could not stretch them in <code>&lt;mstyle&gt;</code>, <code>&lt;merror&gt;</code> etc Similarly, this will be needed to implement correct spacing around operators in <code>&lt;mrow&gt;</code> and other "mrow-like" elements.</li>
<li>I analyzed more carefully the vertical stretching of operators. I see at least two serious bugs to fix: baseline alignment and stretch size. I've uploaded an experimental patch to improve that.</li>
<li>Preliminary work on the MathML Operator Dictionary. This dictionary contains various properties of operators like spacing and stretchiness and is fundamental for later work on operators.</li>
<li>I have started to refactor the code for mi, mo and mfenced elements. This is also necessary for many serious bugs like the operator dictionary and the style of mi elements.</li>
<li>I have written a patch to restore support for foreign objects in annotation-xml elements and to implement the same selection algorithm as Gecko.</li>
</ul>
<h2>Gecko</h2>
<p>I've continued to clean up the MathML code and to mentor volunteer contributors. The main goal is the support for the Open Type MATH table, at least for operator stretching.</p>
<ul>
<li>Xuan Hu's work on the <code>&lt;mpadded&gt;</code> element landed in trunk. This element is used to modify the spacing of equations, for example by some TeX-to-MathML generators.</li>
<li>On Linux, I fixed a bug with preferred widths of MathML token elements. Concretely, when equations are used inside table cells or similar containers there is a bug that makes equations overflow the containers. Unfortunately, this bug is still present on Mac and Windows...</li>
<li>James Kitchener implemented the mathvariant attribute (e.g used by some tools to write symbols like double-struck, fraktur etc). This also fixed remaining issues with preferred widths of MathML token elements. Khaled Hosny started
to update his Amiri and XITS fonts to add the glyphs for Arabic mathvariants.</li>
<li>I finished Quentin Headen's code refactoring of mtable. This allowed to fix some bugs like bad alignment with columnalign. This is also a preparation for future support for rowspacing and columnspacing.</li>
<li>After the two previous points, it was finally possible to remove the private "_moz-" attributes. These were visible in the DOM or when manipulating MathML via Javascript (e.g. in editors, tree inspector, the html5lib etc)</li>
<li>Khaled Hosny fixed a regression with script alignments. He started to work on improvements regarding italic correction when positioning scripts. Also, James Kitchener made some progress on script size correction via the Open Type "ssty" feature.</li>
<li>I've refactored the stretchy operator code and prepared some patches to read the OpenType MATH table. You can try experimental support for new math fonts with e.g. <a href="http://www.wg9s.com/mozilla/firefox/">Bill Gianopoulos' builds</a> and the <a href="https://developer.mozilla.org/en-US/docs/Mozilla/MathML_Project/MathML_Torture_Test">MathML Torture Tests</a>.</li>
</ul>
<h2>Blink/Trident</h2>
<p>MathML developments in Chrome or Internet Explorer is not part of the
project goal,
even if obviously MathML improvements to WebKit could
<a href="https://code.google.com/p/chromium/issues/detail?id=152430#c85">hopefully be imported to Blink in the future</a>. <a href="https://connect.microsoft.com/IE/SearchResults.aspx?SearchQuery=mathml">Users keep asking for MathML in IE</a> and I hope that a solution will be found <a href="http://news.dessci.com/2013/10/microsoft-cripples-display-math-ie10-11.html"> to save MathPlayer's work</a>. In the meantime, I've sent a proposal to <a href="https://code.google.com/p/chromium/issues/detail?id=324764">Google</a> and <a href="https://connect.microsoft.com/IE/feedback/details/812595/add-some-css-rules-to-select-mathml-annotations-and-alttext">Microsoft</a> to implement fallback content (<code>alttext</code> and <code>semantics</code> annotation) so that authors can use it. This is just a couple of CSS rules that could be integrated in the user agent style sheet. Let's see which of the two companies is the most reactive...
</p>
<div style="width: 362px; margin-right: auto; margin-left: auto;">
<a href="http://www.ulule.com/mathematics-ebooks/">
<img alt="electronic VS paper" height="180" src="http://www.maths-informatique-jeux.com/ulule/proposal/electronicVSpaper.png" width="320" />
</a>
</div>fredwhttp://www.maths-informatique-jeux.com/blog/frederic/Blog de Frédéric - Tag - webkitFrédéric Wang's Blog, about mathematics and computer science / Blog de Frédéric Wang, sur les mathématiques et l'informatique.urn:md5:856637f86f94ed5243b6f6f713360bdaWebKitGTK+ hackfest 5.0 (2013)!http://blog.kov.eti.br/?p=3302013-12-11T09:47:26+00:00<p>For the fifth year in a row the fearless WebKitGTK+ hackers have gathered in A Coruña to bring GNOME and the web closer. Igalia has organized and hosted it as usual, welcoming a record 30 people to its office. The GNOME foundation has sponsored my trip allowing me to fly the cool 18 seats propeller airplane from Lisbon to A Coruña, which is a nice adventure, and have pulpo a feira for dinner, which I simply love! That in addition to enjoying the company of so many great hackers.</p>
<div class="wp-caption alignright" id="attachment_332" style="width: 1038px;"><a href="http://blog.kov.eti.br/wp-content/uploads/2013/12/webprefs.png"><img alt="Web with wider tabs and the new prefs dialog" class="size-full wp-image-332" height="801" src="http://blog.kov.eti.br/wp-content/uploads/2013/12/webprefs.png" width="1028" /></a><p class="wp-caption-text">Web with wider tabs and the new prefs dialog</p></div>
<p>The goals for the hackfest have been ambitious, as usual, but we made good headway on them. Web the browser (AKA Epiphany) has seen a ton of little improvements, with Carlos splitting the shell search provider to a separate binary, which allowed us to remove some hacks from the session management code from the browser. It also makes testing changes to Web more convenient again. Jon McCan has been pounding at Web’s UI making it more sleek, with tabs that expand to make better use of available horizontal space in the tab bar, new dialogs for preferences, cookies and password handling. I have made my <a href="https://git.gnome.org/browse/epiphany/commit/?id=29c990d5a4662467e4708db1ab1cc06c4901fc7f">tiny contribution</a> by making it not keep tabs that were created just for what turned out to be a download around. For this last day of hackfest I plan to also fix an issue with text encoding detection and help track down a hang that happens upon page load.</p>
<div class="wp-caption alignright" id="attachment_334" style="width: 2398px;"><a href="http://blog.kov.eti.br/wp-content/uploads/2013/12/mrobinson-danw.jpg"><img alt="Martin Robinson and Dan Winship hack" class="size-full wp-image-334" height="1548" src="http://blog.kov.eti.br/wp-content/uploads/2013/12/mrobinson-danw.jpg" width="2388" /></a><p class="wp-caption-text">Martin Robinson and Dan Winship hack</p></div>
<p>Martin Robinson and myself have as usual dived into the more disgusting and wide-reaching maintainership tasks that we have lots of trouble pushing forward on our day-to-day lives. Porting our build system to CMake has been one of these long-term goals, not because we love CMake (we don’t) or because we hate autotools (we do), but because it should make people’s lives easier when adding new files to the build, and should also make our build less hacky and quicker – it is sad to see how slow our build can be when compared to something like Chromium, and we think a big part of the problem lies on how complex and dumb autotools and make can be. We have picked up a few of our old branches, brought them up-to-date and landed, which now lets us build the main WebKit2GTK+ library through cmake in trunk. This is an important first step, but <a href="https://bugs.webkit.org/show_bug.cgi?id=115966">there’s plenty to do</a>.</p>
<div class="wp-caption alignright" id="attachment_337" style="width: 3274px;"><a href="http://blog.kov.eti.br/wp-content/uploads/2013/12/IMG_20131209_193824_154.jpg"><img alt="Hackers take advantage of the icecream network for faster builds" class="size-full wp-image-337" height="1836" src="http://blog.kov.eti.br/wp-content/uploads/2013/12/IMG_20131209_193824_154.jpg" width="3264" /></a><p class="wp-caption-text">Hackers take advantage of the icecream network for faster builds</p></div>
<p>Under the hood, Dan Winship has been pushing HTTP2 support for libsoup forward, with a dead-tree version of the spec by his side. He is refactoring libsoup internals to accomodate the new code paths. Still on the HTTP front, I have been updating soup’s MIME type sniffing support to match the <a href="http://mimesniff.spec.whatwg.org/">newest living specification</a>, which includes specification for several new types and <a href="http://msdn.microsoft.com/en-us/library/ie/gg622941(v=vs.85).aspx">a new security feature introduced by Internet Explorer</a> and later adopted by other browsers. The huge task of preparing the ground for a one process per tab (or other kinds of process separation, this will still be topic for discussion for a while) has been pushed forward by several hackers, with Carlos Garcia and Andy Wingo leading the charge.</p>
<div class="wp-caption alignright" id="attachment_344" style="width: 2298px;"><a href="http://blog.kov.eti.br/wp-content/uploads/2013/12/mccan.jpg"><img alt="Jon and Guillaume battling code" class="size-full wp-image-344" height="1288" src="http://blog.kov.eti.br/wp-content/uploads/2013/12/mccan.jpg" width="2288" /></a><p class="wp-caption-text">Jon and Guillaume battling code</p></div>
<p>Other than that I have been putting in some more work on improving the integration of the new Web Inspector with WebKitGTK+. Carlos has reviewed the patch to allow attaching the inspector to the right side of the window, but we have decided to split it in two, one providing the functionality and one the API that will allow browsers to customize how that is done. There’s a lot of work to be done here, I plan to land at least this first patch durign the hackfest. I have also <a href="https://bugs.webkit.org/show_bug.cgi?id=125444">fought one more battle in the never-ending User-Agent sniffing war</a>, in which we cannot win, it looks like.</p>
<div class="wp-caption alignright" id="attachment_345" style="width: 2297px;"><a href="http://blog.kov.eti.br/wp-content/uploads/2013/12/hackers-acoruna.jpg"><img alt="Hackers chillin' at A Coruña" class="size-full wp-image-345" height="1288" src="http://blog.kov.eti.br/wp-content/uploads/2013/12/hackers-acoruna.jpg" width="2287" /></a><p class="wp-caption-text">Hackers chillin’ at A Coruña</p></div>
<p>I am very happy to be here for the fifth year in a row, and I hope we will be meeting here for many more years to come! Thanks a lot to Igalia for sponsoring and hosting the hackfest, and to the GNOME foundation for making it possible for me to attend! See you in 2014!</p>
<p><a href="http://www.igalia.com/"><img src="http://blogs.gnome.org/xan/files/2011/12/igalia.png" style="width: 150;" width="150" /></a><br />
<a href="http://foundation.gnome.org/"><img src="http://www.gnome.org/wp-content/themes/gnome-grass/images/gnome-logo.png" style="width: 150;" width="150" /></a></p>kovhttp://blog.kov.eti.brGustavo Noronha (kov) » webkittchuf tchuf; ou seria nheco nheco fum?http://blog.kov.eti.brFunding MathML Developments in Gecko and WebKiturn:md5:d698292892c248f977b3ae357b9b8c2c2013-10-15T21:05:32+00:00<p style="font-style: italic;">update 2013-10-15: since I got feedback, I have to say that my funding plan is independent of my work at MathJax ; I'm not a MathJax employee but I have an independent contractor status. Actually, I already used my business to fund an intern for Gecko MathML developments during Summer 2011 :-)</p>
<h2>Retrospect</h2>
<p>Since last April, I have been allowed by the MathJax Consortium to dedicate a small amount of my time to do MathML development in browsers, until possibly more serious involvement later. At the same time, we mentioned this plan to Google developers but unfortunately they just decided to drop the WebKit MathML code from Blink, making external contributions hard and unwelcome...</p>
<p>Hence I have focused mainly on Gecko and WebKit: You can find the MathML bugs that have been closed during that period on <a href="https://bugzilla.mozilla.org/buglist.cgi?list_id=8185699&amp;resolution=FIXED&amp;resolution=DUPLICATE&amp;resolution=---&amp;classification=Components&amp;chfieldto=2013-10-31&amp;chfield=cf_last_resolved&amp;query_format=advanced&amp;chfieldfrom=2013-04-01&amp;component=MathML&amp;product=Core">bugzilla.mozilla.org</a> and <a href="https://bugs.webkit.org/buglist.cgi?query_format=advanced&amp;short_desc_type=allwordssubstr&amp;short_desc=&amp;product=WebKit&amp;component=MathML&amp;long_desc_type=substring&amp;long_desc=&amp;bug_file_loc_type=allwordssubstr&amp;bug_file_loc=&amp;keywords_type=allwords&amp;keywords=&amp;bug_status=RESOLVED&amp;resolution=FIXED&amp;resolution=DUPLICATE&amp;resolution=---&amp;emailassigned_to1=1&amp;emailtype1=substring&amp;email1=&amp;emailassigned_to2=1&amp;emailreporter2=1&amp;emailcc2=1&amp;emailtype2=substring&amp;email2=&amp;bugidtype=include&amp;bug_id=&amp;chfieldfrom=2013-04-01&amp;chfieldto=2013-10-31&amp;chfield=resolution&amp;chfieldvalue=&amp;cmdtype=doit&amp;order=Reuse+same+sort+as+last+time&amp;field0-0-0=noop&amp;type0-0-0=noop&amp;value0-0-0=">bugs.webkit.org</a>. For Gecko, this has allowed me to finish some of the work I started as a volunteer before I was involved full-time in MathJax as well as to continue to mentor MathML contributors. Regarding WebKit, I added a few new basic features like MathML lengths, <code>&lt;mspace&gt;</code> or <code>&lt;mmultiscripts&gt;</code> while I was getting familiar with the MathML code and WebKit organization/community. I also started to work
on <code>&lt;semantics&gt;</code> and <code>&lt;maction&gt;</code>.
<strong>More importantly, I worked with Martin Robinson to address the design concerns of Google developers and a patch to fix these issues finally landed early this week.</strong></p>
<p>However, my progress has been slow so as I mentioned in my <a href="http://www.maths-informatique-jeux.com/blog/frederic/?post/2013/10/07/Post-Summit-Thoughts-on-the-MathML-Project">previous blog post</a>, I am planning to find
a way to fund MathML developments...</p>
<h2>Why funding MathML?</h2>
<p style="font-style: italic;">Note: I am assuming that the readers of this blog know why MathML is important and are aware of the benefits it can bring
to the Web community. If not, please check
<a href="http://fiduswriter.org/2013/08/06/math-in-the-browser/">Peter Krautzberger's Interview by Fidus Writer</a> or the <a href="http://fred-wang.github.io/MozSummitMathML/index.html">MozSummit MathML slides</a> for a quick introduction.
Here my point is to explain why we need more than volunteer-driven
development for MathML.</p>
<p>First the obvious thing: Volunteer time is limited so if
we really want to see serious progress in MathML support we need to give a
boost to MathML developments. e-book publishers/readers, researchers/educators who are stuck outside the Web in a LaTeX-to-PDF world, developers/users of accessibility tools or the MathML community in general want good math support in browsers now and not to wait again for 15 more years until all layout engines catch up with
Gecko or that the old Gecko bugs are fixed.
</p>
<div style="float: left; margin: .5em;">
<a href="http://www.w3.org/Math/"><img alt="MathML" height="50" src="http://www.maths-informatique-jeux.com/blog/all-blogs/public/logos/mathml-logo.png" width="150" /></a>
</div>
<div>
<p>There are classical misunderstandings from people thinking that non-native
MathML solutions and other polyfills are the future or that math on the Web could be implemented
via PNG/SVG images or Web Components.
Just open a math book and you will see
that e.g. inline equations must be correctly aligned with the text or
participate
in line wrapping. Moreover we are considering math on the Web not math on paper,
so we want it to be compatible with HTML, SVG, CSS, Javascript,
Unicode, Bidi etc and also something that is fast and responsive. Technically,
this means that a clean solution must be in the core rendering engine,
spread over several parts of the code and must have strong interaction with the
various components like the HTML5 parser, the layout tree,
the graphic and font libraries, the DOM module, the style tree and so forth.
I do not see any volunteer-driven
Blink/Gecko/WebKit feature off the top of my head that has this
characteristic and actually even SVG or any other kind of language for
graphics have less interaction with HTML than MathML has.</p>
</div>
<div>
<p>The consequence of this is that it is extremely difficult for volunteers
to get involved in native MathML
and to do quick progress because they have to understand
how the various components of the Blink/Gecko/WebKit code work and be sure to do
things correctly. Good mathematical rendering is already something hard by
itself, so that is even more complicated when you are not writing an isolated
rendering engine for math on which you can have full control.
Also, working at the Blink/Gecko/WebKit level requires technical skills above the average
so finding volunteers who can work with the high-minded engineers of
the big browser companies is not something easy.
For instance, among the enthusiastic people coming to me and
willing to help MathML in Gecko, many got stuck when e.g. they tried to build
the Firefox source or do something more advanced and I never heard back from
them.
In the other direction, Blink/Gecko/WebKit paid developers are generally
not familiar with
MathML and do not have time to learn more about it
and thus can not always provide a relevant review of the code, or they may
break something while trying to modify code they do not entirely understand.
Moreover,
both the volunteers and paid staff have only a small amount of time to do
MathML stuff while the other parts of the engine evolve very quickly,
so it's sometimes hard to keep everything in sync.
Finally,
the core layout engines have strong security requirements that are difficult to satisfy in a volunteer-driven situation...</p>
</div>
<h2>Beyond volunteer-driven MathML developments</h2>
<p>At that point, there are several options. First the lazy one: Give up
with native math rendering, only focus on features that have impact on the
widest Web audience (i.e. those that would allow browser vendors to get more market share and thus increase their profit), thank the math people for creating the Web and kindly ask them to use
whatever hacks they can imagine to display equations on the Web. Of course as a
<a href="https://www.mozilla.org/en-US/mission/">Mozillian</a>, I think people
must decide the Web they want and thus exclude this option.</p>
<p>Next there is the ingenuous option: Expect that browser companies
will understand the importance of math-on-the-Web and start investing
seriously in MathML support. However, Netscape and Microsoft
rejected the &lt;MATH&gt; tag from the 1995 HTML 3.0 draft and the browser
companies have kept repeating they would only rely on volunteer contributions
to move MathML forward, despite the repeated requests from MathML folks and other scientific communities. So that option is excluded too, at least in the short
to medium term.
</p>
<p>So it remains the ambitious option: Math people and other interested parties
must get together and try to fund native MathML developments. Despite the effort
of my manager at MathJax to convince partners and raise funds, my situation has
not changed much since April and it is not clear when/if the MathJax Consortium
can take the lead in native MathML developments. Given my expertise
in Gecko, WebKit and MathML, I feel the duty to do something.
Hence I wish to reorganize
my work time: Decrease my involvement in MathJax core in order to increase
my involvement in Gecko/WebKit developments. But I need the help of the
community for that purpose. If you run a business with interest for math-on-the-Web
and are willing to fund my work, then feel free to contact me directly by
mail for further discussion. In the short term, I want
to experiment with
<a href="https://en.wikipedia.org/wiki/Crowd_funding">Crowd Funding</a> as
discussed in the next section. If this is successful we can think
of a better organization for MathML developments in the long term.</p>
<div style="clear: both;"></div>
<h2>Crowd Funding</h2>
<div style="float: right;">
<a href="https://www.catincan.com/">
<img alt="Catincan" height="198" src="http://www.maths-informatique-jeux.com/blog/all-blogs/public/logos/catincan.png" width="192" />
</a>
</div>
<div>
<p>Wikipedia defines
<a href="https://en.wikipedia.org/wiki/Crowd_funding">Crowd funding</a> as
"the collective effort of individuals who network and pool their money, usually
via the Internet, to support efforts initiated by other people or organizations". There are several Crowd Funding platforms with similar rule/interface.
I am considering <a href="https://en.wikipedia.org/wiki/Catincan">Catincan</a> which is specialized in Open Source Crowd Funding, can be used by any backer/developer around the world, can rely on Bugzilla to track the bug status and
seems to have good process to collect the
fund from backers and to pay developers.
You can easily login to the Catincan Website if
you have a GitHub, Facebook or Google account (apparently
<a href="https://login.persona.org/about">Persona</a> is not supported yet...). Finally, it seems to have a communication interface between backers and
developers, so that everybody can follow the development on the funded
features.
</p>
</div>
<p>One distinctive feature of catincan is that only well-established Open
Source projects can be funded and only developers from these projects can
propose and work on the new features ; so that backers can trust that the
features will be implemented. Of course, I have been working on Gecko, WebKit and
MathML projects
so I hope people believe I sincerely want to improve
MathML support in browsers and that I have the skills to do so ;-)</p>
<p>As said in my previous blog post, it is not clear at all (at least to me)
whether Crowd Funding can be a reliable method, but it is worth trying. There are
many individuals and small businesses showing interest in MathML, without
the technical knowledge or appropriate staff to improve MathML in browsers. So if each
one fund a small amount of money, perhaps we can get something.</p>
<p>One constraint is that each feature has 60 days to reach the
funding goal. I do not have any idea about how many people are willing
to contribute to MathML and how much money they can give.
The statistical sample of projects currently funded is too small to extract relevant
information. However, I essentially see two options:
Either propose small features
and split the big ones in small steps, so that each catincat submission
will need less work/money and improvements will be progressive with
regular feedback to backers ;
or propose larger features so they look more attractive and exciting to people
and will require less frequent submissions to catincat.
At the beginning, I plan to start with the former and if the crowd funding is
successful perhaps try the latter.</p>
<div style="clear: both;"></div>
<h2>Status in Open Source Layout Engines</h2>
<p style="font-style: italic;">Note: Obviously, Open Source Crowd Funding does not apply
to Internet Explorer, which is the one main rendering engine not mentioned below. Although
Microsoft has done a great job on MathML for Microsoft Word, they did not
give any public statement about MathML in Internet Explorer and all the bug
reports for MathML have been resolved "by design" so far. If you are interested
in MathML rendering and accessibility in Internet Explorer, please check
<a href="http://news.dessci.com">Design Science blog</a> for the latest updates
and tools.</p>
<h3>Blink</h3>
<p style="font-style: italic;">Note: I am actually focusing on the history of Chromium here but of course there are other Blink-based browsers. Note that programs like QtWebEngine (formerly WebKit-based) or Opera (formerly Presto-based) lost the opportunity to get MathML support when they switched to Blink.</p>
<p>Alex Milowski and François Sausset's first MathML implementation did not
pass Google's security review. Dave Barton fixed many issues in that implementation and as far as I know, there were not any known security vulnerabilities when Dave submitted his last version. MathML was enabled in Chrome 24 but Chrome developers had some concerns about the design of the MathML implementation in WebKit, which indeed violated some assumptions of WebKit layout code. So MathML was disabled in Chrome 25 and as said in the introduction, the source code was entirely removed when they forked.</p>
<p>Currently, the <a href="http://www.chromestatus.com/features/5240822173794304">Chromium Dashboard</a> indicates that MathML is shipped in Firefox/Safari, has positive feedback from developers and is an established standard ; but the Chromium status remains "No active development".
If I understand correctly,
Google's official position is that
they do not plan to invest in MathML development but will accept external
contributions and may re-enable MathML when it is ready
(for some sense of "ready" to be defined).
Given the MathML story in
Chrome, it seems really unlikely that any volunteer will magically show up and be willing to
submit a MathML patch. Incidentally, note the
interesting work
of the ChromeVox team regarding MathML accessibility:
<a href="http://www.youtube.com/watch?v=HVviF06S1T8">Their recent video</a>
provides a good overview of what they achieve (where Volker Sorge politely regrets
that "MathML is not implemented in all browsers").
</p>
<p>Although Google's design concerns have now been addressed in WebKit, one
most serious remark from one Google engineer is that the WebKit MathML implementation is
of too low quality to be shipped so they just prefer to have no MathML
at all. As a consequence, the best short term strategy seems to be improving
WebKit MathML support and, once it is good enough, to submit a patch to
Google. <strong>The immediate corollary is that if you wish to see MathML in Chrome
or other Blink-based browsers you should
help WebKit MathML development</strong>. See the next section for
more details.
</p>
<div style="float: left; margin: .5em; padding: 2px; background: #eef;">
<a href="http://www.maths-informatique-jeux.com/blog/all-blogs/public/logos/chromatic.svg"><img alt="Chromatic" height="32" src="http://www.maths-informatique-jeux.com/blog/all-blogs/public/logos/chromatic.svg" width="32" /></a>
<span style="color: grey; font-family: sans-serif; font-size: 20px; vertical-align: 10px;">chromatic</span>
</div>
<p>Actually, I tried to import MathML into Blink one day this summer. However,
there were divergences between the WebKit and Blink code bases that made that
a bit difficult. I do not plan to try again anytime soon, but if someone is
interested, I have published <a href="https://github.com/fred-wang/Chromatic">my script and patch on GitHub</a>. Note there may be even more divergences now and the patch is
certainly bit-rotten. I also thought about creating/maintaining a "Chromatic"
browser (Chrome + mathematics) that would be a temporary fork to let Blink
users benefit from native MathML until it is integrated back in Blink. But
at the moment, that would probably be too much effort for one person and
I would prefer to focus on WebKit/Gecko developments for now.</p>
<div style="clear: both;"></div>
<h3>WebKit</h3>
<p>The situation in WebKit is much better. As said before, Google's concerns
are now addressed and MathML will be enabled again in all WebKit releases
soon.
Martin Robinson is interested in helping the MathML developments in
WebKit and his knowledge of fonts will be important to improve operator
stretching, which is one of the biggest issue right now.
One new volunteer contributor, Gurpreet Kaur, also started to
do some work on WebKit like support for the <code>*scriptshifts</code>
attributes or for the <code>&lt;menclose&gt;</code> element. Last but
not least, a couple of Apple/WebKit developers reviewed and accepted
patches and even helped to fix a few bugs, which made possible to move
development forward.
</p>
<div style="float: right; margin: .5em;">
<a href="http://www.maths-informatique-jeux.com/blog/all-blogs/public/logos/webkinetic.svg"><img alt="WebKineTic" height="150" src="http://www.maths-informatique-jeux.com/blog/all-blogs/public/logos/webkinetic.png" width="150" /></a>
</div>
<p>When he was still working on WebKit, Dave Barton opened <a href="https://bugs.webkit.org/show_bug.cgi?id=99623">bug 99623</a> to track the top priorities. When the bugs below and their related dependencies are fixed, I think the rendering in WebKit will be good enough to be usable for advanced math notations and WebKit will pass the <a href="http://fred-wang.github.io/AcidTestsMathML/acid1/">MathML Acid 1 test</a>.</p>
<ul>
<li><a href="https://bugs.webkit.org/show_bug.cgi?id=44208">Bug 44208</a>:
For example, in expression like
<math xmlns="http://www.w3.org/1998/Math/MathML"><mrow><mi>sin</mi><mo>⁡</mo><mo>(</mo><mi>x</mi><mo>)</mo></mrow></math>,
the "x" should be in italic but not the "sin". This is actually slightly
more complicated: It says when the default <code>mathvariant</code>
value must be <code>normal</code>/<code>italic</code>.
<code>mathvariant</code> is more like
the
<code>text-transform</code> CSS property in the sense that it remaps
some characters to the corresponding mathematical characters (italic, bold, fraktur,
double-struck...) for example
<math xmlns="http://www.w3.org/1998/Math/MathML"><mi mathvariant="fraktur">A</mi></math> (mathvariant=fraktur A)
should render exactly the same as <math xmlns="http://www.w3.org/1998/Math/MathML"><mi>𝔄</mi></math> (U+1D504).
By the way, there is the related <a href="https://bugs.webkit.org/show_bug.cgi?id=24230">bug 24230</a> on Windows, that prevents to use plane 1 characters.
The best solution will probably be to
<a href="https://bugs.webkit.org/show_bug.cgi?id=108778">implement mathvariant</a> correctly. See also Gecko's ongoing work by James Kitchener below.</li>
<li><del><a href="https://bugs.webkit.org/show_bug.cgi?id=99618">Bug 99618</a></del>: Implement <code>&lt;mmultiscripts&gt;</code>, that allows expressions like
<math xmlns="http://www.w3.org/1998/Math/MathML"><mmultiscripts><mi mathvariant="normal">C</mi><mprescripts></mprescripts><mn>6</mn><mn>14</mn></mmultiscripts></math> or <math xmlns="http://www.w3.org/1998/Math/MathML"><mmultiscripts><mi>R</mi><mi>i</mi><none></none><mi>j</mi><none></none><mo>;</mo><none></none><none></none><mi>j</mi></mmultiscripts><mo>=</mo><mfrac><mn>1</mn><mn>2</mn></mfrac><mmultiscripts><mi>S</mi><mo>;</mo><none></none><mi>i</mi><none></none></mmultiscripts></math>. As said in the introduction, this is fixed in WebKit Nightly.</li>
<li><a href="https://bugs.webkit.org/show_bug.cgi?id=99614">Bug 99614</a>: Support for stretchy operators like in
<math xmlns="http://www.w3.org/1998/Math/MathML"><msup><mrow><mo>(</mo><mfrac><mover><mrow><msub><mi>z</mi><mn>1</mn></msub><mo>+</mo><msub><mi>z</mi><mn>2</mn></msub></mrow><mo>¯</mo></mover><mn>3</mn></mfrac><mo>)</mo></mrow><mn>4</mn></msup></math>. Currently,
WebKit can only stretch operators vertically using a few Unicode constructions
like ⎛ (U+239B) + ⎜ (U+239C) + ⎝ (U+239D) for the left parenthesis.
Essentially only similar delimiters like brackets, braces etc are supported.
For small
sizes like <math xmlns="http://www.w3.org/1998/Math/MathML"><mrow><mo>(</mo><mtext><span style="display: inline-block; height: 1.5em; width: 2px; background: red;"></span></mtext></mrow></math> or for large operators like
<math displaystyle="true" xmlns="http://www.w3.org/1998/Math/MathML"><mo>∑</mo><msup><mi>n</mi><mn>2</mn></msup></math> it is necessary to use non-unicode glyphs in various math fonts, but this
is not possible in WebKit MathML yet. All of this will require a fair amount of
work: implementing horizontal stretching, font-specific stuff,
largeop/symmetric properties etc</li>
<li><a href="https://bugs.webkit.org/show_bug.cgi?id=99620">Bug 99620</a>:
Implement the <a href="http://www.w3.org/TR/MathML3/appendixc.html">operator dictionary</a>. Currently, WebKit treats all the operators the same way, so for
example it will use the same 0.2em spacing before and after parenthesis, equal sign or invisible
operators in e.g.
<math xmlns="http://www.w3.org/1998/Math/MathML"><mi>f</mi><mo>⁡</mo><mo>(</mo><mi>x</mi><mo>)</mo><mo>=</mo><msup><mi>x</mi><mn>2</mn></msup></math>. Instead it should use the information provided by the MathML operator dictionary. This dictionary also specifies whether operators are stretchy, symmetric or
largeop and thus is related to the previous point.
</li>
<li><a href="https://bugs.webkit.org/show_bug.cgi?id=119038">Bug 119038</a>: Use the code for vertical stretchy operators to draw the radical symbols
in roots like <math xmlns="http://www.w3.org/1998/Math/MathML"><msqrt><mfrac><mn>2</mn><mn>3</mn></mfrac></msqrt></math>. Currently,
WebKit uses graphic primitives which do not give a really good rendering.</li>
<li><del><a href="https://bugs.webkit.org/show_bug.cgi?id=115610">Bug 115610</a></del>: Implement &lt;mspace&gt; which is used by many MathML generators
to do some spacing in mathematical formulas. As said in the introduction, this is fixed in WebKit Nightly.</li>
</ul>
<p>In order to pass the <a href="https://developer.mozilla.org/en-US/docs/Mozilla/MathML_Project/MathML_Torture_Test">Mozilla MathML torture tests</a>, at least <a href="https://bugs.webkit.org/show_bug.cgi?id=118737">displaystyle</a> and <a href="https://bugs.webkit.org/show_bug.cgi?id=118737">scriptlevel</a> must be implemented too, probably as internal CSS properties. This should also allow to pass
<a href="https://eyeasme.com/Joe/MathML/MathML_browser_test">Joe Java's MathML test</a>, although that one relies on the infamous <code>&lt;mfenced&gt;</code>
that duplicates the stretchy operator features and is implemented inconsistently
in rendering engines. I think passing the <a href="http://fred-wang.github.io/AcidTestsMathML/acid1/">MathML Acid 2 test</a> will require slightly more effort,
but I expect this goal to be achievable if I have more time to work on WebKit:</p>
<ul>
<li><del><a href="https://bugs.webkit.org/show_bug.cgi?id=115610">Bug 115610</a></del>: Implement &lt;mspace&gt;. Fixed!</li>
<li><a href="https://bugs.webkit.org/show_bug.cgi?id=120164">Bug 120164</a>: Implement negative spacing for &lt;mspace&gt; (I have an experimental patch).</li>
<li><a href="https://bugs.webkit.org/show_bug.cgi?id=85730">Bug 85730</a>: Implement &lt;mpadded&gt;, which is also used by MathML generators to do some tweaking of formulas. I have only done some experiments, that would be a generalization of &lt;mspace&gt;</li>
<li><a href="https://bugs.webkit.org/show_bug.cgi?id=85733">Bug 85733</a>: Implement the <code>href</code> attribute ; well I guess the name is explicit enough to understand what it is used for! I only have some experimental patch here too. That would be mimicing what is done in SVG or HTML.</li>
<li><a href="https://bugs.webkit.org/show_bug.cgi?id=120059">Bug 120059</a> and
<a href="https://bugs.webkit.org/show_bug.cgi?id=100626">bug 100626</a>: Implement <code>&lt;maction&gt;</code> (at least partially) and <code>&lt;semantics&gt;</code>,
which have been asked by long-time MathML users Jacques Distler and Michael Kohlhase. I have patches ready for that and this could be fixed relatively soon, I just need to find time to finish the work.</li>
</ul>
<p>In general passing the MathML Acid 2 test is not too hard, you merely only need to implement those few MathML elements whose exact rendering is clearly defined by the MathML specification. Passing the <a href="http://fred-wang.github.io/AcidTestsMathML/acid3/">MathML Acid 3 test</a> is not expected in the medium term. However, the score will
naturally increase while we improve WebKit MathML implementation. The priority
is to implement what is currently known to be important to users.
To give examples of bugs not previously mentioned: Implementing <a href="https://bugs.webkit.org/show_bug.cgi?id=85729">menclose</a> or fixing various DOM issues like bugs <a href="https://bugs.webkit.org/show_bug.cgi?id=57695">57695</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=57696">57696</a> or <a href="https://bugs.webkit.org/show_bug.cgi?id=107392">107392</a>.</p>
<p>More advanced features like those mentioned in the next section for Gecko
are probably worth considering later (Open type MATH, linebreaking,
mlabeledtr...). It is worth noting that Apple has already
done some work on accessibility (with MathML being readable by VoiceOver
in iOS7), authoring and EPUB (MathML is enabled in WebKit-based ebook
readers
and <a href="https://www.apple.com/ibooks-author/">ibooks-author</a> has
an integrated LaTeX-to-MathML converter).</p>
<div style="clear: both;"></div>
<h3>Gecko</h3>
<div style="float: left; margin: .5em;">
<a href="http://www.maths-informatique-jeux.com/blog/all-blogs/public/logos/mathzilla.svg"><img alt="Mathzilla" height="150" src="http://www.maths-informatique-jeux.com/blog/all-blogs/public/logos/mathzilla.svg" width="150" /></a>
</div>
<p>In general I think I have a good relationship with the Mozilla community and most people have respect for the work that has been done by volunteers for almost 15 years now. The situation has greatly improved since I joined the project, at that time some people claimed the
<a href="https://groups.google.com/forum/#!topic/mozilla.dev.tech.mathml/GIkKITEW48A">Mozilla MathML project was dead after Roger Sidge's departure</a>.
One important point is that Karl Tomlinson has worked
on repairing the MathML support when Roger Sidge left the project. Hence
there is at least one Mozilla employee with good knowledge of MathML who
can review the volunteer patches. Another key ingredient is the work that has recently been made by Mozilla to increase engagement of the volunteer
community like good documentation on MDN, the <code>#Introduction</code> channel, Josh Matthews' <a href="http://www.joshmatthews.net/bugsahoy/">mentored bugs</a> and of course programs like GSOC. However, as said
above, it is one thing to attract enthusiastic contributors and another thing
to get long-term contributors who can work independently on more advanced features. So
let's go back to my latest <a href="http://www.maths-informatique-jeux.com/blog/frederic/?post/2012/09/01/Mozilla-MathML-Project%3A-Roadmap">Roadmap for the Mozilla MathML Project</a> and see what has been accomplished for one year:
</p>
<div style="clear: both;"></div>
<ul>
<li>Font support: Dmitry Shachnev created a Debian package for the
MathJax fonts and Mike Hommey added MathJax and Asana fonts in the list
of suggested packages for Iceweasel. The STIX fonts have also been
updated in Fedora and are installed by default on
Mac OS X Lion (10.7). For Linux distributions, it would be helpful
to implement <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=467729">Auto Installation Support</a>. The bug to
<a href="https://code.google.com/p/android/issues/detail?id=36011">add mathematical fonts to Android</a> has been assigned in June but no more progress has happened so far.
Henri Sinoven opened a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=775060">bug for FirefoxOS</a> but there has not been any progress there either.
I had some patches to restore the "missing MathML fonts" warning (using an information bar) but it was refused by Firefox reviewers. However, the code to detect missing MathML font could still be used for the similar <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=648548">bug 648548</a>, which also seems inactive since January. There are still some issues on the MathJax side that prevent to integrate Web fonts for the native MathML output mode. So at the moment the solution is
still to inform visitors about <a href="https://developer.mozilla.org/en-US/docs/Mozilla/MathML_Project/Fonts">MathML fonts</a> or to <a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Authoring#Mathematical_fonts">add MathML Web fonts</a> to your Web site. Khaled Hosny (font and LaTeX expert) recently updated my patches to prepare the support for Open Type fonts and he offered to help on that feature.
After James Kitchener's work on mathvariant, we realized that we will
probably need to provide Arabic mathematical fonts too.</li>
<li>Spacing: Xuan Hu continued to work on &lt;mpadded&gt; improvements and I think his patch is close to be accepted. Quentin Headen has done some progress on &lt;mtable&gt; before focusing on his <a href="http://clokep.blogspot.fr/2013/10/yahoo-protocol-google-summer-of-code.html">InstantBird GSOC project</a>. He is still far from being able to work on
<code>mtable@rowspacing/columnspacing</code> but a work around for that has been added
to MathJax. I fixed the negative space regression
which was missing to <a href="http://www.maths-informatique-jeux.com/blog/frederic/?post/2013/05/03/Firefox-Nightly-passes-the-Acid2-test">pass the MathML Acid 2 test</a> and is used in MathJax. Again, Khaled Hosny is willing to help to use the spacing of the Open Type MATH, but that will still be a lot of work.</li>
<li>&lt;mlabeledtr&gt;: A work around for native MathML has been added in MathJax.</li>
<li>Linebreaking: No progress except that I have worked on fixing a bug with intrinsic width computation. The unrelated printing issues mentioned in the blog post have been fixed, though.</li>
<li>Operator Stretching: No progress. I tried to analyze the regression more carefully, but nothing is ready yet.</li>
<li>Tabular elements: As said above, Quentin Headen has worked a bit on cleaning up &lt;mtable&gt; but not much improvements on that feature so far.</li>
<li>Token elements: My patch for &lt;ms&gt; landed and I have done significant progress on the bad measurement of intrinsic width for token elements (however, the fix only seems to work on Linux right now). James Kitchener has taken over my work on improving our <code>mathvariant</code> support and doing related refactoring of the code. I am confident that he will be able to have something ready soon. The primes in exponents should render correctly with MathJax fonts but for other math fonts we will have to do some glyph substitutions.</li>
<li>Dynamic MathML: No progress here but there are not so many bugs regarding Javascript+MathML, so that should not be too serious.</li>
<li>Documentation: It is now possible to use MathML in code sample or
directly in the source code. The <a href="https://developer.mozilla.org/en-US/docs/Mozilla/MathML_Project">MathML project pages</a> have been entirely migrated to MDN. Also, Florian Scholz has recently been hired by Mozilla as
a documentation writer (congrats!) and will in particular continue the work he started as a volunteer to <a href="https://developer.mozilla.org/en-US/docs/Web/MathML">document MathML on MDN</a>.
</li>
</ul>
<p>I apologize to volunteers who worked on bugs that are not mentioned above or who are doing documentation or testing that do not appear here. For a complete list of activity since September 2012, <a href="https://bugzilla.mozilla.org/buglist.cgi?list_id=8214220&amp;classification=Components&amp;chfieldto=Now&amp;query_format=advanced&amp;chfieldfrom=2012-09-01&amp;component=MathML&amp;product=Core">Bugzilla is your friend</a>. There are two ways to consider the progress above.
If you see the glass half full, then you see that several people have continued
the work on various MathML issues, they have made some progress and we now pass
the MathML Acid 2 test. If you see
the glass half empty, then you see that most issues have not been addressed
yet and in particular those that are blocking the native MathML to be enabled
in MathJax: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=687807">bug 687807</a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=415413">bug 415413</a>, the math font issues discussed in the first point, and perhaps linebreaking too. That is why I believe we should go beyond volunteer-driven MathML
developments.</p>
<p>Most of the bugs mentioned above are tested by the <a href="http://fred-wang.github.io/AcidTestsMathML/acid3/">MathML Acid 3 tests</a> and we will win a few points when they are fixed. Again, passing MathML Acid 3 test is not a goal by itself so let's consider what are the big remaining areas it contains:</p>
<ul>
<li>Improving Tabular Elements and Operator Stretching, which are obviously important and used a lot in e.g. MathJax.</li>
<li>Linebreaking, which as I said is likely to become fundamental with small screens and ebooks.</li>
<li>Elementary Mathematics (you know addition, subtraction, multiplication, and division that kids learn), which I suspect will be important for educational tools and ebooks.</li>
<li>Alignment: This is the one part of MathML that I am not entirely sure is relevant to work on in the short term. I understand it is useful for advanced layout but most MathML tools currently just rely on tables to do that job and as far as I know the only important engine that implements that is MathPlayer.</li>
</ul>
<p>Finally there are other features outside the MathML rendering engines that
I also find important but for which I have less expertise:</p>
<ul>
<li><a href="http://www.w3.org/TR/MathML3/chapter6.html#world-int-transfers">Transferring MathML</a> that is implementing copy/cut/drag and paste. Currently, we can do that by treating MathML as normal HTML5 code or by using the "show MathML source" feature and copying the source code. However, it would be best to implement a standard way to communicate with other MathML applications like Microsoft Word, Mathematica, Mapple, Windows' Handwriting panel etc I wrote
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=539506">some work-in-progress patches</a> last year.</li>
<li>Authoring MathML: Essentially implementing things like deletion, insertion etc maybe simple MathML token creation ; in <a href="http://dxr.mozilla.org/mozilla-central/source/editor">Gecko's core editor</a>, which is used by BlueGriffon, KompoZer, SeaMonkey, Thunderbird or even MDN. Other things like integrating Javascript parsers (e.g. ASCIIMath) or equation panels with buttons like <button><math xmlns="http://www.w3.org/1998/Math/MathML"><msqrt><mi>□</mi></msqrt></math></button> are probably better done at the higher JS/HTML/XUL level. Daniel Glazman already wrote math input panels for
<a href="http://www.bluegriffon.com/index.php?pages/MathML">BlueGriffon</a> and
<a href="http://www.glazman.org/weblog/dotclear/index.php?post/2012/11/16/MathML-and-Thunderbird">Thunderbird</a>.
</li>
<li>MathML Accessibility: This is one important application of MathML for which there is strong demand and where Mozilla is behind the competitors. James Teh started some experimental work on his NVDA tool before the summit.</li>
<li>EPUB reader for FirefoxOS (and other mobile platforms): During the
"Co-creating Action Plans" session, the Mozilla Taipei people were thinking
about missing features for FirefoxOS and this idea about EPUB reader was my modest contribution.
There are a few <a href="http://www.mathjax.org/resources/epub-readers/">EPUB readers relying on Gecko</a> and it would be good to check if they work in
FirefoxOS and if they could be integrated by default, just like
Apple has iBooks. BTW, there is a version of <a href="http://www.bluegriffon-epubedition.com/BGEE.html">BlueGriffon</a> that can edit EPUB books.
</li>
</ul>
<h2>Conclusion</h2>
<p>I hope I have convinced some of the readers about the need to fund MathMLin browsers. There is a lot of MathML work to do on Gecko and WebKit but both projects have volunteers and core engineers who are willing to help. There are also several individuals / companies relying on MathML support in rendering engines for their projects and could support the MathML developments in some way. I am willing to put more of my time on Gecko and WebKit developments, but I need financial help for that purpose. I'm proposing catincan Crowd Funding in
the short term so that anyone can contribute at the appropriate level, but other alternatives to fund the MathML development can be found like asking Peter Krautzberger about native MathML funding in MathJax,
discussing with <a href="http://www.igalia.com">Igalia</a> about funding Martin Robinson to work more on WebKit
MathML or contacting me directly to establish some kind of part-time
consulting agreement.</p>
<p>Please leave a comment on this blog or send me a private mail, if you
agree that funding MathML in browsers is important, if you like the crowd funding idea and plan to contribute ; or if you have any opinions about alternative funding options. Also, please tell me what seem to be the priority for you and
your projects among what I have mentioned above
(layout engines, features etc) or among others that I may have forgotten. Of course,
any other constructive comment to help MathML support in browsers is welcome. I plan to submit features on catincan soon, once I have more feedback on
what people are interested in. Thank you!</p>fredwhttp://www.maths-informatique-jeux.com/blog/frederic/Blog de Frédéric - Tag - webkitFrédéric Wang's Blog, about mathematics and computer science / Blog de Frédéric Wang, sur les mathématiques et l'informatique.urn:md5:856637f86f94ed5243b6f6f713360bdaPost-Summit Thoughts on the MathML Projecturn:md5:c920a83d594eaeefdaaa58525703bdcd2013-10-07T16:18:37+00:00<p>
I'm back from a great Mozilla Summit 2013 and I'd just like to write
a quick blog post about the MathML booths at the Innovation Fairs.
I did not have the opportunity to talk with the MathML people who
ran the booth at Santa Clara yet. However, everything went pretty
well at Brussels, modulo of course some demos failing when done in
live... If you are interested,
<a href="https://github.com/fred-wang/MozSummitMathML#mozsummitmathml">the slides and other resources</a> are available on my GitHub page.
</p>
<p>
Many Mozillians did not know about MathML or that it
had been available in Gecko since the early days of the Mozilla project.
Many people who use math (or just knowing someone who does)
were curious about that feature and excited about the MathML potentials.
I appreciated to get this positive feedback from Mozillians willing
to use math on the Web and related media, instead of the scorn or hatred
I sometimes see by misinformed people. I expect to provide more
updates on LaTeXML, MediaWiki Math and MathJax when their next versions
are released. The Gecko MathML support improves slowly but there has
been interesting work by James Kitchener recently that I'd like to
mention too.
</p>
<div style="width: 300px; margin-left: auto; margin-right: auto;">
<img alt="MathZilla on blackboard" height="300" src="http://fred-wang.github.io/MozSummitMathML/mathzilla.svg" width="300" />
</div>
<p>
Let's do an estimation
<a href="https://en.wikipedia.org/wiki/Fermi_problem">à la Fermi</a>:
only a few volunteers have been contributing
regularly and simultaneously to MathML in Gecko while most
Mozilla-funded Gecko projects have certainly development teams that are
3 times as large. Let's be optimistic and assume that these
volunteers have been able to dedicate a mean of 1 work day
per week, compared to 5 for full-time staff.
Given that the Mozilla MathML project will celebrate its 15 years
next May, that means that the volunteer work
transposed in terms of paid-staff time is only
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mo>≤</mo>
<mfrac>
<mn>15</mn>
<mrow><mn>3</mn><mo>⋅</mo><mn>5</mn></mrow>
</mfrac>
<mo>=</mo>
<mn>1</mn>
</math>
year. To be honest, I'm disregarding here the great work made by the
Mozilla NZ team around 2007 to repair MathML after the Cairo migration.
But still, what we have achieved in quality and
completeness with such limited resources and time is really impressive.
</p>
<p>
As someone told me at the MathML booth, it's really frustating
that something that is so important for the small portion of
math-educated people
is ignored because it is useless for the vast majority of people. This
is not entirely true, since even elementary mathematics taught at school
like the one of
this blog post are not easily expressed with standard HTML
and even less in a way accessible to people with visual
disabilities. However, it summarizes well the feeling MathML folks had
when they tried to convince
Google to
<a href="https://code.google.com/p/chromium/issues/detail?id=152430#c32">
accept the volunteer work on MathML, despite its low quality</a>.</p>
<p>
As explained at the Summit Sessions, Mozilla's mission is different and
the goal is to give people the right to control the Web they want.
The MathML project is perhaps one of the oldest and successful
volunteer-driven Mozilla project that is still active and
demonstrates concretely the idea of the Mozilla's mission with e.g. the
work of Roger Sidge who started to write the MathML
implementation when Netscape opened its source code or the one of
Florian Scholz who made MDN one of the most complete Web resource for
MathML.
</p>
<p><a href="https://groups.google.com/forum/#!msg/mozilla.dev.tech.mathml/GIkKITEW48A/z-QvVW8pPmkJ">Mozilla Corporation has kept saying they don't want to invest in MathML developments</a> and the focus right now is clearly on other features like FirefoxOS. Even projects that have a larger audience than the MathML support like the mail client or the editor are not in the priorities so someone else definitely need to step in for MathML. I've tried various methods, with more or less success, to boost the MathML developments like mentoring a GSoC project, funding a summer internship or relying on <a href="http://www.joshmatthews.net/bugsahoy/">mentored bugs</a>. I'm now considering <a href="https://en.wikipedia.org/wiki/Crowd_funding">crowd funding</a> to help the MathML developments in Gecko (and WebKit). I don't want to do another Fermi estimation now but
at first that looks like a very unreliable method. The only revenue generated by the MathML project so far are the
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mn>2</mn>
<mfrac>
<mrow>
<mo>⌊</mo>
<mn>100</mn>
<mo>⋅</mo>
<mi>π</mi>
<mo>⌋</mo>
</mrow>
<mn>100</mn>
</mfrac>
<mo>=</mo>
<mn>2</mn>
<mo>⋅</mo>
<mn>3.14</mn>
<mo>=</mo>
<mn>6.28</mn>
</mrow>
</math> dollars to the Mozilla Fundation via contributions to
my <a href="https://addons.mozilla.org/addon/mathml-fonts/">MathML-fonts add-on</a>, so it's hard to get an idea of how much people would contribute
to the Gecko implementaton.
However, that makes sense since the only people who showed interest
in native MathML support so far are individuals or small businesses
(e.g. working on EPUB or accessibility) and I think it's worth
trying it anyway. That's definitely
something I'll consider after MathJax 2.3 is
released...</p>fredwhttp://www.maths-informatique-jeux.com/blog/frederic/Blog de Frédéric - Tag - webkitFrédéric Wang's Blog, about mathematics and computer science / Blog de Frédéric Wang, sur les mathématiques et l'informatique.urn:md5:856637f86f94ed5243b6f6f713360bdaHTML Alchemy – Combining CSS Shapes with CSS Regionshttp://blogs.adobe.com/webplatform/?p=46752013-08-27T16:00:23+00:00<blockquote><p>Note: Support for shape-inside is only available until the following nightly builds: <a href="http://builds.nightly.webkit.org/files/trunk/mac/WebKit-SVN-r166290.dmg" title="r166290">WebKit r166290</a> (2014-03-26); <a href="http://commondatastorage.googleapis.com/chromium-browser-continuous/index.html?path=Mac/260092/" title="Chromium 260092">Chromium 260092</a> (2014-03-28).</p></blockquote>
<div><a href="http://blogs.adobe.com/webplatform/files/2013/08/Mad_scientist.png"><br />
</a>I have been working on rendering for almost a year now. Since I landed the initial implementation of Shapes on Regions in both Blink and WebKit, I’m incredibly excited to talk a little bit about these features and how you can combine them together.</div>
<p></p><center><a href="http://blogs.adobe.com/webplatform/files/2013/08/Mad_scientist.png"><img alt="Mad_scientist" height="408" src="http://blogs.adobe.com/webplatform/files/2013/08/Mad_scientist.png" width="550" /></a><em><br />
</em></center><br />
<strong>Don’t know what CSS Regions and Shapes are? <a href="http://html.adobe.com/webplatform/layout/">Start here!</a></strong><p></p>
<div></div>
<div>
<p>The first ingredient in my HTML alchemy kitchen is <a href="http://html.adobe.com/webplatform/layout/regions/" shape="rect" target="_blank">CSS Regions</a>. With CSS Regions, you can flow content into multiple styled containers, which gives you enormous creative power to make magazine style layouts. The second ingredient is <a href="http://html.adobe.com/webplatform/layout/shapes/" shape="rect" target="_blank">CSS Shapes</a>, which gives you the ability to wrap content inside or outside any shape. In this post I’ll talk about the “shape-inside” CSS property, which allows us to wrap content inside an arbitrary shape.</p>
</div>
<div>Let’s grab a bowl and mix these two features together, CSS Regions and CSS Shapes to produce some really interesting layouts!<p></p>
</div>
<div>In the latest Chrome Canary and Safari WebKit Nightly, after <a href="http://html.adobe.com/webplatform/enable/" shape="rect" target="_blank">enabling the required experimental features</a>, you can flow content continuously through multiple kinds of shapes. This rocks! You can step out from the rectangular text flow world and break up text into multiple, non-rectangular shapes.</div>
<h2 style="padding: 14px 0px 10px 0px;">Demo</h2>
<div>If you already have the latest Chrome Canary/Safari WebKit Nightly, you can just go ahead and try a simple <strong><a href="http://codepen.io/adobe/pen/KcJDu">example on codepen.io</a></strong>. If you are too lazy, or if you want to extend your mouse button life by saving a few button clicks, you can continue reading.</div>
<p></p><center><a href="http://codepen.io/adobe/pen/KcJDu"><br />
<img alt="iBuyd3" class="aligncenter" height="605" src="http://blogs.adobe.com/webplatform/files/2013/08/iBuyd3.jpg" width="654" /></a></center><p></p>
<div></div>
<div>
<div>In the picture above we see that the “Lorem ipsum” story flows through 4 different, colorful regions. There is a circle shape on each of the first two fixed size regions. Check out the code below to see how we apply the shape to the region. It’s pretty straightforward, right?</div>
<div></div>
<div>
<pre class="brush: css; title: ; notranslate">#region1, #region2 {
-webkit-flow-from: flow;
background-color: yellow;
width: 200px;
height: 200px;
-webkit-shape-inside: circle(50%, 50%, 50%);
}</pre>
</div>
<div></div>
<div>The content flows into the third (percentage sized) region, which represents a heart (drawn by me, all rights reserved). I defined the heart’s coordinates in percentages, so the heart will stretch as you resize the window.</div>
<div></div>
<div>
<pre class="brush: css; title: ; notranslate">#region3 {
-webkit-flow-from: flow;
width: 50%;
height: 400px;
background-color: #EE99bb;
-webkit-shape-inside: polygon(11.17% 10.25%,2.50% 30.56%,3.92% 55.34%,12.33% 68.87%,26.67% 82.62%,49.33% 101.25%,73.50% 76.82%,85.17% 65.63%,91.63% 55.51%,97.10% 31.32%,85.79% 10.21%,72.47% 5.35%,55.53% 14.12%,48.58% 27.88%,41.79% 13.72%,27.50% 5.57%);
}</pre>
</div>
<div>
<p>The content that doesn’t fit in the first three regions flows into the fourth region. The fourth region (see the retro-blue background color) has its CSS width and height set to auto, so it grows to fit the remaining content.</p>
<h2>Real world examples</h2>
<ul>
<li><a href="http://galjot.si/css-exclusions" target="_blank">Robert Sedovšek: CSS EXCLUSIONS</a></li>
<li><a href="http://blogs.adobe.com/webplatform/2013/05/06/adobe-explores-the-future-of-responsive-digital-layout-with-national-geographic-content/" target="_blank">Adobe Explores the Future of Responsive Digital Layout with National Geographic Content</a></li>
</ul>
<p>After trying the demo and checking out the links above, I’m sure you’ll see the opportunities for using shape-inside with regions in your next design. If you have some thoughts on this topic, don’t hesitate to <a href="http://blogs.adobe.com/webplatform/tag/webkit/feed/#comment">comment</a>. Please keep in mind that these features are under development, and you might run into bugs. If you do, you should report them on <a href="https://bugs.webkit.org/">WebKit’s Bugzilla</a> for Safari or <a href="http://code.google.com/p/chromium/issues/">Chromium’s issue tracker</a> for Chrome. Thanks for reading!</p>
</div>
</div>Zoltan Horvathhttp://blogs.adobe.com/webplatformWeb Platform Team Blog » WebKitMaking the web awesomehttp://blogs.adobe.com/webplatformWebGL, at last!tag:blogger.com,1999:blog-3416807.post-87226343779298944772013-08-06T05:53:51+00:00It's been a long time since I've written an update -- but my lack of blog posting is not an indication of a lack of progress in WebKit or the WinCairo port. Since I left my former employer (who *still* hasn't gotten around to updating the build machine I set up there), we've:<br /><br /><ul><li>Migrated from Visual Studio 2005 to Visual Studio 2010 (and soon, VS2012)</li><li>Enabled New-run-webkit-tests</li><li>Updated the WinCairo Support Libraries to support 64-bit builds</li><li>Integrated a ton of cURL improvements and extensions thanks to the <a href="http://www.tidesdk.org/">TideSDK</a> guys </li><li>and ...</li></ul><div>... thanks to the hard work of Alex Christensen, brought up WebGL on the WinCairo port. This is a little exciting for me, because it marks the first time (I can recall) where the WinCairo port actually gained a feature that was not already part of the core Apple Windows port.</div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-9S-wyiXuezU/UgCN53K0-bI/AAAAAAAAAXA/5fC11C974uI/s1600/WebGL.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="217" src="http://3.bp.blogspot.com/-9S-wyiXuezU/UgCN53K0-bI/AAAAAAAAAXA/5fC11C974uI/s320/WebGL.png" width="320" /></a></div><div><br /></div><br />The changes needed to see these circa-1992 graphics in all their three-dimensional glory are already landed in the WebKit tree. You just need to:<br /><br /><ol><li>Enable the libEGL, libGLESv2, translator_common, translator_glsl, and translator_hlsl for the WinCairo build (they are currently turned off).</li><li>Make the following change to WTF/wtf/FeatureDefines.h: </li></ol><br /><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">Brent Fulgham@WIN7-VM ~/WebKit/Source/WTF/wtf</span><br /><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">$ svn diff</span><br /><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">Index: FeatureDefines.h</span><br /><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">===================================================================</span><br /><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">--- FeatureDefines.h (revision 153733)</span><br /><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">+++ FeatureDefines.h (working copy)</span><br /><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">@@ -245,6 +245,13 @@</span><br /><span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> #define ENABLE_VIEW_MODE_CSS_MEDIA 0</span><br /><span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> #endif</span><br /><span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><br /></span><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">+#define ENABLE_WEBGL 1</span><br /><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">+#define WTF_USE_3D_GRAPHICS 1</span><br /><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">+#define WTF_USE_OPENGL 1</span><br /><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">+#define WTF_USE_OPENGL_ES_2 1</span><br /><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">+#define WTF_USE_EGL 1</span><br /><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">+#define WTF_USE_GRAPHICS_SURFACE 1</span><br /><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">+</span><br /><span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> #endif /* PLATFORM(WIN_CAIRO) */</span><br /><span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><br /></span><span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> /* --------- EFL port (Unix) --------- */</span><br /><span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><br /></span>Performance is a little ragged, but we hope to improve that in the near future.<br /><br />We have plenty of more plans for the future, including full 64-bit support (soon), and hopefully some improvements to the WinLauncher application to make it a little more useful.<br /><br />As always, if you would like to help out,Brent Fulghamnoreply@blogger.comhttp://whtconstruct.blogspot.com/We Have The Construction!Rantings and Ravings about WebKit, Graphics, and functional programming.tag:blogger.com,1999:blog-3416807CSS Level 3 Text Decoration on WebKit and Blink – statushttp://www.abinader.com.br/?p=1122013-05-15T16:52:23+00:00<p style="text-align: justify;">It’s been a while since I wrote the last post about progress on implementing <a href="http://www.w3.org/TR/css-text-decor-3/" target="_blank">CSS Level 3 Text Decoration</a> features in WebKit. I’ve been involved with other projects but now I can finally resume the work in cooperation with my colleague from <a href="http://basyskom.com/" target="_blank">basysKom</a>, <a href="http://lamarque-lvs.blogspot.com.br/" target="_blank">Lamarque Souza</a>. So far we have implemented:</p>
<ul>
<li><code>text-decoration-line</code> (<a href="http://www.w3.org/TR/css-text-decor-3/#text-decoration-line-property">link</a>)</li>
<li><code>text-decoration-style</code> (<a href="http://www.w3.org/TR/css-text-decor-3/#text-decoration-style">link</a>)</li>
<li><code>text-decoration-color</code> (<a href="http://www.w3.org/TR/css-text-decor-3/#text-decoration-color">link</a>)</li>
<li><code>text-underline-position</code> (<a href="http://www.w3.org/TR/css-text-decor-3/#text-underline-position">link</a>)</li>
</ul>
<p style="text-align: justify;">These properties are currently available under <code>-webkit-</code> prefix on WebKit, and guarded by a feature flag - <code>CSS3_TEXT</code> – which is enabled by default on both EFL and GTK ports. On Blink, plans are to get these properties unprefixed and under a runtime flag, which can be activated by enabling the “<del>Experimental WebKit Features</del>” (updated to <a href="http://src.chromium.org/viewvc/chrome?view=revision&amp;revision=210820">“Experimental Web Platform Features”</a> in latest builds) flag – see <a>chrome://flags</a> inside Google Chrome/Chromium). There are still some Skia-related issues to fix on Blink to enable proper <code>dashed</code> and <code>dotted</code> text decoration styles to be displayed. In the near future, we shall also have the text-decoration shorthand as specified on CSS Level 3 specification.</p>
<p style="text-align: justify;">See below a summary of things I plan to finish in the near future:</p>
<ul>
<li><span style="line-height: 13px;"><del>[webkit] Property <code>text-decoration-line</code> now accepts <code>blink</code> as valid value</del></span></li>
<li><del>[blink] Fix implementation of <code>dashed</code> and <code>dotted</code> styles on Skia</del></li>
<li><del>[blink] Fix an issue where previous Skia stroke styles were used when rendering paint decorations</del></li>
<li><del>[blink] Implement <code>CSS3_TEXT</code> as a runtime flag</del></li>
<li><del>[blink] Property <code>text-decoration-line</code> now accepts <code>blink</code> as valid value</del></li>
<li><del>[blink] Implement support for <code>text-decoration</code> shorthand</del></li>
<li><del>[webkit] Implement support for <code>text-decoration</code> shorthand</del></li>
</ul>
<p style="text-align: justify;"><strong>Note:</strong> Please do not confuse <code>text-decoration</code>‘s <code>blink</code> value with <a href="http://chromium.org/blink" target="_blank">Blink</a> project <img alt=":)" class="wp-smiley" src="http://www.abinader.com.br/wp-includes/images/smilies/icon_smile.gif" /> </p>
<p style="text-align: justify;">Stay tuned for further updates!</p>Bruno Abinaderhttp://www.abinader.com.brBruno Abinader's Blog » webkitTips, guides and tutorials to share knowledge and have fun :)http://www.abinader.com.brFirefox Nightly passes the Acid2 testurn:md5:8d65a7583b5a90787a62eb75f9dd1c992013-05-03T12:43:18+00:00<p>Some updates on the <a href="https://github.com/fred-wang/AcidTestsMathML/">MathML Acid Tests</a>...
First the patch for <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=717546">bug 717546</a>
landed in Nightly and thus Gecko is now the first layout engine to pass the <a href="http://fred-wang.github.io/AcidTestsMathML/acid2/">MathML Acid2 test</a>.
Here is a screenshot that should look familiar:</p>
<p><img alt="MathML Acid2, Nightly" height="619" src="http://www.maths-informatique-jeux.com/blog/all-blogs/public/mathml/acid2_nightly.png" width="546" /></p>
<p>As you know, Google developers forked Webkit and decided to remove from
Blink all the code (including MathML) on which they don't plan to work in the
short term. As a comparison, here is how the MathML Acid2 test looks like in
Chrome Canary:</p>
<p><img alt="MathML Acid 2 Test, Canary" height="621" src="http://www.maths-informatique-jeux.com/blog/all-blogs/public/mathml/acid2_canary.png" width="552" /></p>
<p>Next, someone reported that <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=851835">Firefox Mac got more
errors</a> in the <a href="http://fred-wang.github.io/AcidTestsMathML/acid3/">MathML Acid3 test</a>.
I was already aware of some shortcomings anyway and thus took the opportunity
to rewrite the tests with a better error tolerance. The changes also fixed some
measurement issues with auto resizing on mobile platforms or when the zoom
level is not set to the default. I also made the tests for stretchy operators
more reliable and as a consequence, Gecko lost two points: the new score is
60/100. I still need to review and describe the tests and hope I won't find
more mistakes.</p>
<p>Finally, I also added a <a href="http://fred-wang.github.io/AcidTestsMathML/acid1/">MathML Acid1 test</a>.
It does not really look like the "classical" Acid1 test and is not "automated",
in the sense that a reader must carefully (and in a subjective way) check the
<a href="http://fred-wang.github.io/AcidTestsMathML/acid1/description.html">basic
requirements</a>. But at least it provides a small test in the spirit of CSS
Acid 1: all 100%-conformant HTML 5 agents should be able to render these very
elementary MathML expressions. Note that the formulas in the MathML Acid1 test
are supposed to express mathematical properties of boxes from the CSS Acid1
test.</p>fredwhttp://www.maths-informatique-jeux.com/blog/frederic/Blog de Frédéric - Tag - webkitFrédéric Wang's Blog, about mathematics and computer science / Blog de Frédéric Wang, sur les mathématiques et l'informatique.urn:md5:856637f86f94ed5243b6f6f713360bdaFreeing the Floats of the Future From the Tyranny of the Rectanglehttp://blogs.adobe.com/webplatform/?p=32872013-03-27T17:10:41+00:00<p>With modern web layout you can have your content laid out in whatever shape you want as long as it’s a rectangle. Designers in other media have long been able to have text and other content lay out inside and around arbitrarily complex shapes. The <a href="http://dev.w3.org/csswg/css3-exclusions/">CSS Exclusions</a>, <a href="http://dev.w3.org/csswg/css-shapes/">CSS Shapes Level 1</a>, and <a href="http://dev.w3.org/csswg/css-shapes-2/">CSS Shapes Level 2</a> specifications aim to bring this capability to the web.</p>
<p>While these features aren’t widely available yet, implementation is progressing and it’s already possible to try out some of the features yourself. Internet Explorer 10 has an implementation of the exclusions processing model, so you can try out <a href="http://msdn.microsoft.com/en-us/library/ie/hh673558(v=vs.85).aspx">exclusions in IE 10</a> today.</p>
<p>At Adobe we have been focusing on implementing the shapes specification. We began with an <a href="http://blogs.adobe.com/webplatform/2012/10/17/css-exclusions-now-available-under-flag-in-chrome-canary/">implementation of shape-inside</a> and now have a working implementation of the <a href="http://dev.w3.org/csswg/css-shapes/#shape-outside-property">shape-outside property</a> on floats. We have been building our implementation in WebKit, so the easiest way to try it out yourself is to <a href="https://www.google.com/intl/en/chrome/browser/canary.html">download a copy of Chrome Canary</a>. Once you have Canary, <a href="http://adobe.github.com/web-platform/samples/css-exclusions/index.html#browser-support">enable Experimental Web Platform Features</a> and go wild!</p>
<h2>What is shape-outside?</h2>
<p>“Now hold up there,” you may be thinking, “I don’t even know what a <code>shape-outside</code> is and you want me to read this crazy incomprehensible specification thing to know what it is!?!”</p>
<p>Well you’ll be happy to know that it really isn’t that complex, especially in the case of floats. When an element is floated, inline content avoids the floated element. Content flows around the margin box of the element as defined by the <a href="http://www.w3.org/TR/CSS2/box.html">CSS box model</a>. The <code>shape-outside</code> CSS property allows you to tell the browser to use a specified shape instead of the margin box when wrapping content around the floating element.</p>
<p></p><center><img alt="CSS Exclusions" class="aligncenter size-medium wp-image-3361" src="http://blogs.adobe.com/webplatform/files/2013/03/grid_cssexclusions.png" width="450" /></center><p></p>
<p>The current implementation allows for rectangles, rounded rectangles, circles, ellipses, and polygons. While this gives a lot of flexibility, eventually you will be able to use a SVG path or the alpha channel of an image to make it easier to create complex shapes.</p>
<h2>How do I use it?</h2>
<p>First, you need to get a copy of <a href="https://www.google.com/intl/en/chrome/browser/canary.html">Chrome Canary</a> and then <a href="http://blogs.adobe.com/webplatform/2012/10/17/css-exclusions-now-available-under-flag-in-chrome-canary/">enable Experimental Web Platform features</a>. Once you have that, load up this post in Chrome Canary so that you can click on the images below to see a live example of the code. Even better, the examples are on <a href="http://codepen.io/">Codepen</a>, so you can and should play with them yourself and see what interesting things you can come up with.</p>
<p>Note that in this post and the examples I use the unprefixed <code>shape-outside</code> property.<br />
If you want to test these examples outside of my <a href="http://codepen.io/">Codepen</a> then you will need to use the prefixed <code>-webkit-shape-outside</code> property or use <a href="http://leaverou.github.com/prefixfree/"></a> (which is a built in option in Codepen).</p>
<p>We’ll start with a <a href="http://codepen.io/adobe/pen/xjkyE">HTML document with some content and a float</a>. Currently <code>shape-outside</code> only works on floating elements, so those are the ones to concentrate on. For example: (click on the image to see the code)</p>
<p></p><center><a href="http://codepen.io/adobe/pen/xjkyE"><img alt="HTML without shape-outside" class="aligncenter size-full wp-image-3290" src="http://blogs.adobe.com/webplatform/files/2013/03/shape-outside-html-template1.png" /></a></center><p></p>
<p>You can now add the <code>shape-outside</code> property to the style for your floats.</p>
<pre class="brush: xml; title: ; notranslate">.float {
shape-outside: circle(50%, 50%, 50%);
}
</pre>
<p>A circle is much more interesting than a standard rectangle, don’t you think? This circle is centered in the middle of the float and has a radius that is half the width of the float. The effect on the layout is something like this:</p>
<p></p><center><a href="http://codepen.io/adobe/pen/HEGna"><img alt="shape-outside circle" class="aligncenter size-full wp-image-3295" src="http://blogs.adobe.com/webplatform/files/2013/03/shape-outside-circle1.png" /></a></center><p></p>
<p>While percentages were used for this circle, you can use any CSS unit you like to specify the shape. All of the relative units are relative to the dimensions of element where the <code>shape-outside</code> is specified.</p>
<h3>Supported shapes</h3>
<p>Circles are cool and all, but I promised you other shapes, and I will deliver. There are four types of shapes that are supported by the current <code>shape-outside</code> implementation: rectangle, circle, ellipse, and polygon.</p>
<h4>rectangle</h4>
<p>You have the ability to specify a <code>shape-outside</code> that is a fairly standard rectangle:</p>
<pre class="brush: xml; title: ; notranslate">shape-outside: rectangle(x, y, width, height);
</pre>
<p>The <code>x</code> and <code>y</code> parameters specify the coordinates of the top-left corner of the rectangle. This coordinate is in relation to the top-left corner of the floating element’s content box. Because of the way this interacts with the rules of float positioning, setting these to anything other than 0 causes an effect that is similar to relatively positioning the float’s content. (Explaining this is beyond the scope of this post.)</p>
<p>The <code>width</code> and <code>height</code> parameters should be self-explanatory: they are the width and height of the resulting rectangle.</p>
<p>Where things get interesting is with the six-argument form of <code>rectangle</code>:</p>
<pre class="brush: xml; title: ; notranslate">shape-outside: rectangle(x, y, width, height, rx, ry);
</pre>
<p>The first four arguments are the same as explained above, but the last two specify corner radii in the horizontal (<code>rx</code>) and vertical (<code>ry</code>) directions. This not only allows the creation of rounded rectangles, you can create circles and ellipses as well. (Just like with [border-radius][border-radius].)</p>
<p>Here’s an <a href="http://codepen.io/adobe/pen/kuCGd">example of a rectangle, a rounded rectangle, a circle, and an ellipse using just rectangle syntax</a>:</p>
<p></p><center><a href="http://codepen.io/adobe/pen/kuCGd"><img alt="shape-outside rectangle" class="aligncenter size-full wp-image-3296" src="http://blogs.adobe.com/webplatform/files/2013/03/shape-outside-rectangle1.png" /></a></center><p></p>
<p>If you’re reading this in Chrome Canary with exclusions turned on, play around with this demo and see what other things you can do with the rectangles.</p>
<h4>circle</h4>
<p>I already showed you a <a href="http://codepen.io/adobe/pen/HEGna">simple circle demo</a> and you’ll be happy to know that’s pretty much all there is to know about circles:</p>
<pre class="brush: xml; title: ; notranslate">shape-outside: circle(cx, cy, radius);
</pre>
<p>The <code>cx</code> and <code>cy</code> parameters specify the coordinates of the center of the circle. In most situations you’ll want to put them at the center of your box. Just like with rectangles moving this around can be useful, but it behaves similarly to relatively positioning the float’s content with respect to the shape.</p>
<p>The <code>radius</code> parameter is the radius of the resulting circle.</p>
<p>In case you’d like to see it again, here’s what a circle looks like:</p>
<p></p><center><a href="http://codepen.io/adobe/pen/HEGna"><img alt="shape-outside circle" class="aligncenter size-full wp-image-3295" src="http://blogs.adobe.com/webplatform/files/2013/03/shape-outside-circle1.png" /></a></center><p></p>
<p>While it is possible to create circles with rounded rectangles as described above, having a dedicated circle shape is much more convenient.</p>
<h4>ellipse</h4>
<p>Sometimes, you need to squish your circles and that’s where the ellipse comes in handy.</p>
<pre class="brush: xml; title: ; notranslate">shape-outside: ellipse(cx, cy, rx, ry);
</pre>
<p>Just like a circle, an ellipse has <code>cx</code> and <code>cy</code> to specify the coordinates of its center and you will likely want to have them at the center of your float. And just like all the previous shapes, changing these around will cause the float’s content to position relative to your shape.</p>
<p>The <code>rx</code> and <code>ry</code> parameters will look familiar from the rounded rectangle case and they are exactly what you would expect: the horizontal and vertical radii of the ellipse.</p>
<p>Ellipses can be used to create circles (<code>rx</code> = <code>ry</code>) and rounded rectangles can be used to create ellipses, but it’s best to use the shape that directly suits your purpose. It’s much easier to read and maintain that way.</p>
<p>Here’s an <a href="http://codepen.io/adobe/pen/BGsEu">example of using an ellipse shape</a>:</p>
<p></p><center><a href="http://codepen.io/adobe/pen/BGsEu"><img alt="shape-outside ellipse" class="aligncenter size-full wp-image-3297" src="http://blogs.adobe.com/webplatform/files/2013/03/shape-outside-ellipse1.png" /></a></center><p></p>
<h4>polygon</h4>
<p>Now here’s where things get really interesting. The polygon `shape-outside` allows you to specify an arbitrary polygonal shape for your float:</p>
<pre class="brush: xml; title: ; notranslate">shape-outside: polygon(x1 y1, x2 y2, ... , xn yn);
</pre>
<p>The parameters of the polygon are the x and y coordinates of each vertex of the shape. You can have as many vertices as you would like.</p>
<p>Here’s an <a href="http://codepen.io/adobe/pen/ckvas">example of a simple polygon</a>:</p>
<p></p><center><a href="http://codepen.io/adobe/pen/ckvas"><img alt="shape-outside triangle" class="aligncenter size-full wp-image-3298" src="http://blogs.adobe.com/webplatform/files/2013/03/shape-outside-triangle1.png" /></a></center><p></p>
<p>Feel free to play with this and see what happens if you create more interesting shapes!</p>
<h3>Putting content in the float</h3>
<p>The previous examples all had divs without any content just to make it easier to read and understand the code, but a big motivation for <code>shape-outside</code> is to wrap around other content. Interesting layouts often involve wrapping text around images as this final example shows:</p>
<p></p><center><a href="http://codepen.io/adobe/pen/FnkvC"><img alt="shape-outside with images" class="aligncenter size-full wp-image-3299" height="529" src="http://blogs.adobe.com/webplatform/files/2013/03/shape-outside-with-images.png" width="619" /></a></center><p></p>
<p>As usual, you should take a look and play with the <a href="http://codepen.io/adobe/pen/FnkvC">code for this example of text wrapping around floated images</a>. This is just the beginning of the possibilities, as you can put a shape outside on any floating element with any content you want inside.</p>
<h2>Next steps</h2>
<p>We are still hard at work on fixing bugs in the current implementation and implementing the rest of the features in the <a href="http://dev.w3.org/csswg/css-shapes/">CSS Shapes Level 1 specification</a>. We welcome your feedback on what is already implemented and also on the spec itself. If you are interested in becoming part of the process, you can raise issues with the current WebKit implementation by filing bugs in <a href="http://bugs.webkit.org/">the WebKit bugzilla</a>. If you have issues with the spec, those are best raised on the <a href="http://lists.w3.org/Archives/Public/www-style/">www-style mailing list</a>. And of course, you can leave your feedback as comments on this post.</p>
<p>I hope that you enjoy experimenting with <code>shape-outside</code> and the other features we are currently working on.</p>Bem Jones-Beyhttp://blogs.adobe.com/webplatformWeb Platform Team Blog » WebKitMaking the web awesomehttp://blogs.adobe.com/webplatformMathML Acid Testsurn:md5:979359b62ff8d29c9ceca7f6ae5a72532013-03-02T18:19:18+00:00<p>There has recently been discussion in the Mozilla community about Opera
switch from Presto to Webkit and the need to preserve browser competition and
diversity of rendering engines, especially with mobile devices. Some people
outside the community seem a bit skeptic about that argument. Perhaps a
striking example to convince them is to consider the case of MathML where
basically only Gecko has a decent native implementation and the situation in
the recent <a href="http://www.w3.org/2013/02/11-ebooks-minutes.html">eBooks</a> <a href="http://www.w3.org/2013/02/12-ebooks-minutes.html">workshop</a>
illustrates that very well: MathML support is very important for some publishers
(e.g. for science or education) but the main eBook readers rely
exclusively on the Webkit engine and its rudimentary MathML implementation.
Unfortunately because there is currently essentially no alternatives on mobile
platforms, developers of eBook readers have no other choices than proposing a
partial EPUB support or relying on polyfill....</p>
<p>After Google's announce to remove MathML from Chrome 25, someone
ironized on twitter about the fact that an Acid test for MathML should be
written since that seems to motivate them more than community feedback. I do
not think that MathML support is something considered important from the point
of view of browser competition but I took this idea and started writing MathML
versions of the famous Acid2 and Acid3 tests. The <a href="https://github.com/fred-wang/AcidTestsMathML">current source of these
MathML Acid tests</a> is available on GitHub. Of course, I believe that native
MathML implementation is very important and I expect at least that these tests
could help the MathML community ; users and implementers.</p>
<p>Here is the result of the MathML Acid2 test with the stable Gecko release.
To pass the test we only need to implement negative spacing or at least
integrate the patch I submitted when I was still active in Gecko developments (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=717546">bug 717546</a>).</p>
<p><img alt="MathML Acid2 test ; Gecko" height="230" src="http://www.maths-informatique-jeux.com/blog/all-blogs/public/mathml/acid2gecko.png" width="516" /></p>
<p>And here is the score of the MathML Acid 3 test with the stable Gecko
release. The failure of test 18 was not supposed to happen but I discovered it
when I wrote the test. That will be fixed by James Kitchener's refactoring in
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=827713">bug 827713</a>.
Obviously, reaching the score of 100/100 will be much more difficult to achieve
by our volunteer developers, but the current score is not too bad compared to
other rendering engines...</p>
<p><img alt="MathML Acid 3 ; Gecko" height="289" src="http://www.maths-informatique-jeux.com/blog/all-blogs/public/mathml/acid3gecko.png" width="582" /></p>fredwhttp://www.maths-informatique-jeux.com/blog/frederic/Blog de Frédéric - Tag - webkitFrédéric Wang's Blog, about mathematics and computer science / Blog de Frédéric Wang, sur les mathématiques et l'informatique.urn:md5:856637f86f94ed5243b6f6f713360bdaMathML in Chrome, a couple of demos and some perspectives...urn:md5:977dfac5123f66f6e4614088a0c507cb2013-01-11T13:53:10+00:00<p>For those who missed the news, Google Chrome 24 has recently been
released with native MathML support. I'd like to thank
<a href="http://www.mathscribe.com/">Dave Barton</a> again for his
efforts during the past year, that have allowed to make this happen.
Obviously, some people may ironize on how long it took for Google to
make this happen
(Mozilla MathML project started in 1999)
or criticize the bad
rendering quality. However the MathML folks, aware of the history of
the language in browsers, will tend to be more tolerant and
appreciate this important step towards MathML adoption.
After all,
this now means that among the most popular browsers,
Firefox, Safari and Chrome have MathML support and
Opera a basic CSS-based implementation. This also means that about three
people out of four will be able to read pages with MathML without the
need of any third-party rendering engine.
</p>
<p>After some testing,
I think the Webkit MathML support is now good enough to be used on
my Website. There
are a few annoyances with stretchy characters or positioning, but in
general the formulas are readable. Hence in order to encourage the use
of MathML and let people report bugs upstream and hopefully help to fix
them, I decided to
rely on the native MathML support for Webkit-based browsers. I'll still
keep MathJax for Internet Explorer (when MathPlayer is not installed) and
Opera.
</p>
<p>
I had the chance to meet Dave Barton when I was at the Silicon Valley
last October for the GSoC mentor summit. We could
exchange our views on the MathML implementations in browsers and discuss
the perspectives for the future of MathML.
The history of MathML in Webkit is actually
quite similar to Gecko's one: one volunteer Alex Milowski
decided to write the initial implementation. This idea attracted more
volunteers who joined the effort and helped to add new features and
to conduct the project. Dave told me that the initial Webkit
implementation did not pass the Google's security review and that's why
MathML was not
enabled in Chrome. It was actually quite surprising that Apple decided
to enable it in Safari and in particular all Apple's mobile products.
Dave's main achievement has been to fix all these security bugs so that
MathML could finally appear in Chrome.
</p>
<p>One of the idea I share with Dave is how important it is to have native
MathML support in browsers, rather than to delegate the rendering to
Javascript libraries like MathJax or browser plug-in like MathPlayer.
That's always a bit sad to see that third-party tools are necessary to
improve the native browser support of a language that is sometimes
considered a core XML language for the Web together with XHTML and SVG.
Not only native support is faster but also it integrates better in the
browser environment: zooming text, using links, applying CSS style,
mixing with SVG diagrams, doing dynamic updates
with e.g. Javascript etc all of the features Web users are familiar with are immediately available.
In order to illustrate this concretely, here is
a couple of demos. Some of them are inspired from the
<a href="http://www.maths-informatique-jeux.com/blog/frederic/?post/2013/01/11/ https://developer.mozilla.org/en-US/docs/Mozilla_MathML_Project#Sample_MathML_Documents">Mozilla's MathML demo pages</a>, recently
moved to MDN. By the way, the famous
MathML torture page is now
<a href="https://developer.mozilla.org/en-US/docs/Mozilla_MathML_Project/MathML_Torture_Test">here</a>. Also,
try this <a href="https://developer.mozilla.org/en-US/docs/Mozilla_MathML_Project/Fonts/Test">test page to quickly determine whether you need to install
additional fonts</a>.
</p>
<div>
<p style="text-align: center; font-style: italic; font-size: small;">
MathML with CSS <code>text-shadow</code> &amp; <code>transform</code>
properties, <code>href</code> &amp; <code>dir</code> attributes as
well as Javascript events</p>
<p></p>
<p>
<math display="block" style="font-size: 75%;" xmlns="http://www.w3.org/1998/Math/MathML">
<mstyle>
<mi>det</mi>
<mo>⁡</mo>
<mrow>
<mo>(</mo>
<mtable>
<mtr>
<mtd>
<mn>1</mn>
</mtd>
<mtd>
<mn>2</mn>
</mtd>
<mtd>
<mn>3</mn>
</mtd>
</mtr>
<mtr>
<mtd>
<mn>4</mn>
</mtd>
<mtd>
<mn>5</mn>
</mtd>
<mtd>
<mn>6</mn>
</mtd>
</mtr>
<mtr>
<mtd>
<mn>7</mn>
</mtd>
<mtd>
<mn>8</mn>
</mtd>
<mtd>
<mn>9</mn>
</mtd>
</mtr>
</mtable>
<mo>)</mo>
</mrow>
<mo>=</mo>
<mn>45</mn>
<mo>+</mo>
<mn>84</mn>
<mo>+</mo>
<mn>96</mn>
<mo>−</mo>
<mrow>
<mo>(</mo>
<mn>105</mn>
<mo>+</mo>
<mn>48</mn>
<mo>+</mo>
<mn>72</mn>
<mo>)</mo>
</mrow>
<mo>=</mo>
<mn>0</mn>
</mstyle>
<mstyle>
<mi>محدد</mi>
<mo>⁡</mo>
<mrow>
<mo>(</mo>
<mtable>
<mtr>
<mtd>
<mn>١‎</mn>
</mtd>
<mtd>
<mn>٢</mn>
</mtd>
<mtd>
<mn>٣</mn>
</mtd>
</mtr>
<mtr>
<mtd>
<mn>٤</mn>
</mtd>
<mtd>
<mn>٥</mn>
</mtd>
<mtd>
<mn>٦</mn>
</mtd>
</mtr>
<mtr>
<mtd>
<mn>٧‎</mn>
</mtd>
<mtd>
<mn>٨</mn>
</mtd>
<mtd>
<mn>٩</mn>
</mtd>
</mtr>
</mtable>
<mo>)</mo>
</mrow>
<mo>=</mo>
<mn>٤٥</mn>
<mo>+</mo>
<mn>٨٤</mn>
<mo>+</mo>
<mn>٩٦</mn>
<mo>−</mo>
<mrow>
<mo>(</mo>
<mn>١‎٠٥</mn>
<mo>+</mo>
<mn>٤٨</mn>
<mo>+</mo>
<mn>٧‎٢</mn>
<mo>)</mo>
</mrow>
<mo>=</mo>
<mn>٠</mn>
</mstyle>
</math>
</p></div>
<div>
<p style="text-align: center; font-style: italic; font-size: small;">HTML and animated SVG inside MathML tokens</p>
<p>
<math display="block" xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>tr</mi>
<mo>⁡</mo>
<msup>
<mrow>
<mo>(</mo>
<mtable>
<mtr>
<mtd>
<mtext><input size="1" type="text" /></mtext>
</mtd>
<mtd>
<mtext><input size="1" type="text" /></mtext>
</mtd>
</mtr>
<mtr>
<mtd>
<mtext><input size="1" type="text" /></mtext>
</mtd>
<mtd>
<mtext><input size="1" type="text" /></mtext>
</mtd>
</mtr>
</mtable>
<mo>)</mo>
</mrow>
<mi>n</mi>
</msup>
</mrow>
<mo>=</mo>
<msqrt>
<mpadded depth="15px" height="15px" width="30px">
<mtext>
<svg height="30px" width="30px" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient cx="50%" cy="50%" fx="50%" fy="50%" id="radGrad1" r="50%">
<stop offset="0%"></stop>
<stop offset="100%"></stop>
</radialGradient>
</defs>
<g transform="translate(15,15)">
<g>
<animateTransform attributeName="transform" attributeType="XML" dur="15s" from="360" repeatCount="indefinite" to="0" type="rotate"></animateTransform>
<g transform="translate(-15, -15)">
<path d="M 15 0 L 20 10 L 30 15 L 20 20 L 15 30 L 10 20 L 0 15 L 10 10" fill="url(#radGrad1)"></path>
</g>
</g>
</g>
</svg>
</mtext>
</mpadded>
</msqrt>
<mo>=</mo>
<msubsup>
<mo>∫</mo>
<mn>0</mn>
<mfrac>
<mi>π</mi>
<mn>2</mn>
</mfrac>
</msubsup>
<msup>
<mi>θ</mi>
<mtext>
<svg height="15px" width="15px" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient cx="50%" cy="50%" fx="50%" fy="50%" id="radGrad2" r="50%">
<stop offset="0%"></stop>
<stop offset="100%"></stop>
</radialGradient>
</defs>
<g>
<animateMotion begin="0s" dur="0.5s" path="M0,0 L3,0 L2,5 L5,5 L0,4 L5,2 z" repeatCount="indefinite"></animateMotion>
<circle cx="5px" cy="5px" fill="url(#radGrad2)" r="5px"></circle>
</g>
</svg>
</mtext>
</msup>
<mrow>
<mo>ⅆ</mo>
<mi>θ</mi>
</mrow>
</math>
</p></div>
<div>
<p style="text-align: center; font-style: italic; font-size: small;">MathML inside animated SVG (via the <code>&lt;foreignObject&gt;</code> element):</p>
<div style="width: 300px; margin-left: auto; margin-right: auto;">
<svg height="250px" width="350px" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad1" x1="0%" x2="100%" y1="0%" y2="0%">
<stop offset="0%"></stop>
<stop offset="100%"></stop>
</linearGradient>
<radialGradient cx="50%" cy="50%" fx="50%" fy="50%" id="grad3" r="50%">
<stop offset="0%"></stop>
<stop offset="100%"></stop>
</radialGradient>
</defs>
<ellipse cx="175" cy="125" fill="url(#grad1)" rx="175" ry="125"></ellipse>
<g>
<animateMotion begin="0s" dur="20s" path="M 32,69 C 64,121 100,27 152,42 203,56 239,257 275,161 295,109 144,221 88,214 -2,202 11,35 32,69 z" repeatCount="indefinite"></animateMotion>
<animateTransform attributeName="transform" attributeType="XML" dur="20s" keyTimes="0;.25;.75;1" repeatCount="indefinite" type="scale" values="1;2;.5;1"></animateTransform>
<circle fill="url(#grad3)" r="30"></circle>
<g transform="translate(-30,-30)">
<switch>
&lt;foreignObject width="60" height="60"&gt;
<math display="block" xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<munderover>
<mo>∑</mo>
<mrow>
<mi>n</mi>
<mo>=</mo>
<mn>0</mn>
</mrow>
<mrow>
<mo>+</mo>
<mi>∞</mi>
</mrow>
</munderover>
<mfrac>
<msup>
<mi>α</mi>
<mi>n</mi>
</msup>
<mrow>
<mi>n</mi>
<mo>!</mo>
</mrow>
</mfrac>
</mrow>
</math>
&lt;/foreignObject&gt;
<text>exp(α)</text>
</switch>
</g>
</g>
</svg>
</div>
</div>
<p>Note that although Dave was focused on improving MathML, the language
naturally
integrates with the rest of Webkit's technologies and almost all the demos
above work as expected, without any additional efforts. Actually,
Gecko's MathML support relies less on the CSS layout engine than Webkit
does and this has been a recurrent source of bugs. For example in the
first demo, the
<code>text-shadow</code> property is not applied to some operators
(<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=827039">bug
827039</a>) while it is in Webkit.</p>
<p>In my opinion, one of the problem with MathML is
that the browser vendors never really shown a lot of interest in
this language and the standardization and implementation efforts were mainly
lead and funded by organizations from the publishing industry or by volunteer
contributors.
As the MathML WG members keep repeating, they would love to get more
feedback from the browser developers.
This is quite a problem for a language that has among the main goal
the publication of mathematics on the Web.
This leads for example to MathML features
(some of them are now deprecated) duplicating CSS properties or
to the <code>&lt;mstyle&gt;</code> element which has most of its
attributes unused and do similar things as CSS inheritance in an
incompatible way. As a consequence, it was difficult to implement
all MathML features properly in Gecko and this is the source of many bugs like the one
I mention in the previous paragraph.
</p>
<p>Hopefully, the new MathML support in Chrome will bring more
interest to MathML from contributors or Web companies.
Dave told me that Google could
hire a full-time engineer to work on MathML. Apparently, this is
mostly because
of demands from companies working on Webkit-based mobile devices or
involved in EPUB. Although I don't have the same impression
from Mozilla Corporation at the moment, I'm
confident that with the upcoming FirefoxOS release, things might change a
bit.
</p>
<p>
Finally I also expect that we, at MathJax, will continue to accompany the
MathML implementations in browsers. One of the ideas I proposed to the
team was to let MathJax select the output mode according to the
MathML features supported by the browser. Hence the native MathML support
could be used if the page contains only basic mathematics while MathJax's
rendering engine will be used when
more advanced mathematical constructions are involved. Another goal
to achieve will be to make MathJax the default rendering in Wikipedia,
which will be much better than the current raster image approach
and will allow the users to
switch to their browser's MathML support if they wish...
</p>fredwhttp://www.maths-informatique-jeux.com/blog/frederic/Blog de Frédéric - Tag - webkitFrédéric Wang's Blog, about mathematics and computer science / Blog de Frédéric Wang, sur les mathématiques et l'informatique.urn:md5:856637f86f94ed5243b6f6f713360bdaWebKit CSS3 text-decoration properties (preview)http://www.abinader.com.br/?p=732012-08-01T21:58:43+00:00<p style="text-align: justify;">WebKit currently supports CSS Text Level 2.1 version of <code>text-decoration</code> property (<a href="http://www.w3.org/TR/CSS21/text.html#decoration" target="_blank" title="CSS2.1 text-decoration property specification link">link</a>). This version treats only about the decoration line types (<span style="text-decoration: underline;">underline</span>, <span style="text-decoration: overline;">overline</span>, <span style="text-decoration: line-through;">line-through</span> and blink – the latter is not supported on WebKit).</p>
<p style="text-align: justify;">The draft version of CSS Text Level 3 upgrades <code>text-decoration</code> (<a href="http://dev.w3.org/csswg/css3-text/#text-decoration" target="_blank" title="CSS3 text-decoration specification link">link</a>) property as a shorthand to 3 newly added properties, named <code>text-decoration-line</code> (<a href="http://dev.w3.org/csswg/css3-text/#text-decoration-line" target="_blank" title="CSS3 text-decoration-line property specification link">link</a>), <code>text-decoration-style</code> (<a href="http://dev.w3.org/csswg/css3-text/#text-decoration-style" target="_blank" title="CSS3 text-decoration-style specification link">link</a>) and <code>text-decoration-color</code> (<a href="http://dev.w3.org/csswg/css3-text/#text-decoration-color" target="_blank" title="CSS3 text-decoration-color specification link">link</a>), and also adds <code>text-decoration-skip</code> (<a href="http://dev.w3.org/csswg/css3-text/#text-decoration-skip" target="_blank" title="CSS3 text-decoration-skip specification link">link</a>) property.</p>
<p style="text-align: justify;">Among other WebKit stuff I’ve been doing lately, this feature implementation is one of the most cool ones I’m enjoying implementing. I’ve grabbed the task of implementing all of these <em>CSS3</em> text-decoration* properties on WebKit, and results are great so far!<span id="more-73"></span></p>
<p style="text-align: justify;">As you can see below, these are the new text decoration styles (<code>solid</code>, <code>double</code>, <code>dotted</code>, <code>dashed</code> and <code>wavy</code> – the latter still requires platform support) available:</p>
<div class="wp-caption aligncenter" id="attachment_80" style="width: 810px;"><a href="http://www.abinader.com.br/wp-content/uploads/2012/08/text-decoration-style-expected1.png"><img alt="" class="size-full wp-image-80" height="600" src="http://www.abinader.com.br/wp-content/uploads/2012/08/text-decoration-style-expected1.png" title="text-decoration-style-expected" width="800" /></a><p class="wp-caption-text">Text decoration style layout test results on Qt platform</p></div>
<p style="text-align: justify;">And also specific text decoration colors can be set:</p>
<div class="wp-caption aligncenter" id="attachment_75" style="width: 810px;"><a href="http://www.abinader.com.br/wp-content/uploads/2012/08/text-decoration-color-expected.png"><img alt="" class="size-full wp-image-75" height="600" src="http://www.abinader.com.br/wp-content/uploads/2012/08/text-decoration-color-expected.png" title="text-decoration-color-expected" width="800" /></a><p class="wp-caption-text">Text decoration color layout test results on Qt platform</p></div>
<p style="text-align: justify;">These features (with exception to <code>text-decoration-skip</code> property) are already implemented on Firefox, thus it gets easier to compare results with different web engines. It is important to notice since <em>CSS3</em> specification is still in development, all these properties have a <code>-webkit-</code> prefix (ie. <code>-webkit-text-decoration</code>), so <code>text-decoration</code> still maintains <em>CSS2.1</em> specification requirements. The patches are being reviewed and will soon land upstream, let’s hope it will be soon!</p>Bruno Abinaderhttp://www.abinader.com.brBruno Abinader's Blog » webkitTips, guides and tutorials to share knowledge and have fun :)http://www.abinader.com.brA guide for Qt5/WebKit2 development setup for Nokia N9 on Ubuntu Linuxhttp://www.abinader.com.br/?p=132012-04-11T07:18:56+00:00<p>
</p><p style="text-align: justify;">As part of my daily activities at <a href="http://www.basyskom.com/" target="_blank" title="basysKom official website">basysKom</a> on QtWebKit maintenance and development for Nokia devices, it is interesting to keep a track on latest developments circa QtWebKit. There is currently a promising project of a Qt5/WebKit2-based browser called <a href="http://snowshoe.qtlabs.org.br/" target="_blank" title="Snowshoe official website">Snowshoe</a> mainly developed by my fellow friends from <a href="http://www.indt.org/?lang=en" target="_blank" title="INdT official website">INdT</a> which is completely open-source. This browser requires latest Qt5 and QtWebKit binaries and thus requires us to have a functional build system environment. There is a guide available on WebKit’s wiki (<a href="http://trac.webkit.org/wiki/SettingUpDevelopmentEnvironmentForN9" target="_blank" title="WebKit guide on setting up development environment for Nokia N9 device.">link</a>) which is very helpful but lacks some information about compilation issues found when following the setup steps. So I am basing this guide from that wiki page and I hope that it gets updated soon <img alt=":)" class="wp-smiley" src="http://www.abinader.com.br/wp-includes/images/smilies/icon_smile.gif" /> </p>
<p style="text-align: justify;"><span id="more-13"></span></p>
<p>On this guide it is assumed the following:</p>
<ul>
<li>All commands are issued on a Linux console. I am not aware of how this guide would work on other systems.</li>
<li>All commands are supposed to be issued inside base directory, unless expressely said otherwise (ie. cd <em>&lt;QT5_DIR&gt;</em>).</li>
<li>You might want to check if you have <em>git</em> and <em>rsync</em> packages installed in your syste<em>m.</em></li>
</ul>
<h2 style="text-align: justify;">1. Install Qt SDK</h2>
<p style="text-align: justify;">In order to build Qt5 and QtWebKit for Nokia N9, you need to set up a cross-compiler. Thankfully, Qt SDK already comes with a working setup. Please download the <em>online installer</em> from Qt Downloads section (<a href="http://qt.nokia.com/downloads/" target="_blank" title="Qt Downloads website">link</a>).</p>
<blockquote>
<p style="text-align: justify;"><strong>NOTE</strong>: The offline installer comes with an outdated version of the MADDE target, which can be updated by running the script below and chosing “Update components” when asked:</p>
<pre>$ ~/QtSDK/SDKMaintenanceTool</pre>
</blockquote>
<h2 style="text-align: justify;">2. Directory setup</h2>
<p>It is suggested (and actually required by some build scripts) to have a base directory which holds Qt5, Qt Components and WebKit project sources. The suggested base directory can be created by running:</p>
<pre>$ mkdir -p ~/swork</pre>
<blockquote><p><strong>NOTE</strong>: You can actually choose another directory name, but so far it is required by some scripts to have at least a symbolic link pointing to <em>&lt;HOME_DIR&gt;/swork</em>.</p></blockquote>
<h2>3. Download convenience scripts</h2>
<h3>3.1. browser-scripts</h3>
<pre>$ git clone https://github.com/resworb/scripts.git browser-scripts</pre>
<h3>3.2. rsync-scripts</h3>
<pre>$ wget http://trac.webkit.org/attachment/wiki/SettingUpDevelopmentEnvironmentForN9/rsync-scripts.tar.gz?format=raw
$ tar xzf rsync-scripts.tar.gz</pre>
<h2>4. Download required sources</h2>
<h3>4.1. testfonts</h3>
<pre>$ git clone git://gitorious.org/qtwebkit/testfonts.git</pre>
<h3>4.2. Qt5, QtComponents and WebKit</h3>
<p>The script below when successfully run will create <em>~/swork/qt5</em>, <em>~/swork/qtcomponents</em> and <em>~/swork/webkit</em> directories:</p>
<pre>$ browser-scripts/clone-sources.sh --no-ssh</pre>
<blockquote><p><strong>NOTE:</strong> You can also manually download sources, but remember to stick with the directory names described above.</p></blockquote>
<h1>5. Pre-build hacks</h1>
<h3>5.1. Qt5 translations</h3>
<p>Qt5 translations are not being properly handled by cross-platform toolchain. This happens mainly because <em>lrelease</em> application is called to generate Qt message files, but since it is an ARMEL binary your system is probably not capable of running it natively (unless you have a <em>misc_runner</em> kernel module properly set, then you can safely skip this step). In this case, you can use lrelease from your system’s Qt binaries without any worries.</p>
<p>If you have a Scratchbox environment set, it is suggested for you to stop its service first:</p>
<pre>$ sudo service scratchbox-core stop</pre>
<p>Now you can manually generate Qt message files by running this:</p>
<pre>$ cd ~/swork/qt5/qttranslations/translations
$ for file in `ls *ts`; do lrelease $file -qm `echo "$file" | sed 's/ts$/qm/'`; done</pre>
<h3>5.2. Disable jsondb-client tool</h3>
<p><em>QtJsonDB</em> module from Qt5 contains a tool called <em>jsondb-client</em>, which depends on <em>libedit</em> (not available on MADDE target). It is safe to disable its compilation for now:</p>
<pre>$ sed -i 's/jsondb-client//' ~/swork/qt5/qtjsondb/tools/tools.pro</pre>
<h3>5.3. Create missing symbolic links</h3>
<p>Unfortunately Qt5 build system is not robust enough to support our cross-compilation environment, so some symbolic links are required on MADDE to avoid compilation errors (where &lt;USER&gt; is your system user name):</p>
<pre>$ ln -s ~/swork/qt5/qtbase/include ~/QtSDK/Madde/sysroots/harmattan_sysroot_10.2011.34-1_slim/home/&lt;USER&gt;/swork/qt5/qtbase
$ ln -s ~/swork/qt5/qtbase/mkspecs ~/QtSDK/Madde/sysroots/harmattan_sysroot_10.2011.34-1_slim/home/&lt;USER&gt;/swork/qt5/mkspecs</pre>
<h2>6. Build sources</h2>
<p>You can execute the script that will build all sources using cross-compilation setup:</p>
<pre>$ browser-scripts/build-sources.sh --cross-compile</pre>
<p style="text-align: justify;">If everything went well, you now have the most up-to-date binaries for Qt5/WebKit2 development for Nokia N9. Please have a look at <a href="http://trac.webkit.org/wiki/SettingUpDevelopmentEnvironmentForN9" target="_blank">WebKit’s wiki</a> for more information about how to update sources after a previous build and information on how to keep files in sync with device. The guide assumes PR1.1 firmware for N9 device, which is already outdated, so I might come up next with updated instructions on how to safely sync files to your PR1.2-enabled device.</p>
<p>That’s all for now, I appreciate your comments and feedback!</p>Bruno Abinaderhttp://www.abinader.com.brBruno Abinader's Blog » webkitTips, guides and tutorials to share knowledge and have fun :)http://www.abinader.com.brWebKitGTK+ Debian packaging repository changeshttp://blog.kov.eti.br/?p=2732012-03-10T17:32:19+00:00<p>For a while now the git repository used for packaging WebKitGTK+ has been broken. Broken as in nobody was able to clone it. In addition to that, the packaging workflow had been changing over time, from a track-upstream-git/patches applied one to a import-orig-only/patches-not-applied one.</p>
<p>After spending some more time trying to unbreak the repository for the third time I decided it might be a good time for a clean up. I created a <a href="http://anonscm.debian.org/gitweb/?p=pkg-webkit/webkit.git;a=summary">new repository</a>, imported all upstream versions for series 1.2.x (which is in squeeze), 1.6.x (unstable), and 1.7.x (experimental). I also imported packaging-related commis for those versions using git format-patch and black magic.</p>
<p>One of the good things about doing this move, and which should make hacking the WebKitGTK+ debian package more pleasant and accessible can be seen here:</p>
<p><code><br />
kov@goiaba ~/s/debian-webkit&gt; du -sh webkit/.git webkit.old/.git<br />
27M webkit/.git<br />
1.6G webkit.old/.git<br />
</code></p>
<p>If you care about the old repository, it’s on git.debian.org still, named <a href="http://anonscm.debian.org/gitweb/?p=pkg-webkit/old-webkit.git;a=summary">old-webkit.git</a>. Enjoy!</p>kovhttp://blog.kov.eti.brGustavo Noronha (kov) » webkittchuf tchuf; ou seria nheco nheco fum?http://blog.kov.eti.brWebKitGTK+ hackfest \o/http://blog.kov.eti.br/?p=2232011-12-07T23:34:58+00:00<p>It’s been a couple days since I returned from this year’s WebKitGTK+ hackfest in A Coruña, Spain. The weather was very nice, not too cold and not too rainy, we had great food, great drinks and I got to meet new people, and hang out with old friends, which is always great!</p>
<p></p><div class="wp-caption alignleft" style="width: 250px;"><a href="http://www.flickr.com/photos/mariosp/6461611339/sizes/l/in/set-72157628217381055/"><img alt="" height="160" src="http://farm8.staticflickr.com/7173/6461611339_d03659c168_m.jpg" title="Hackfest black board" width="240" /></a><p class="wp-caption-text">Hackfest black board, photo by Mario</p></div>I think this was a very productive hackfest, and as usual a very well organized one! Thanks to the GNOME Foundation for the travel sponsorship, to our friends at Igalia for doing an awesome job at making it happen, and to Collabora for sponsoring it and granting me the time to go there! We got a lot done, and although, as usual, our goals list had many items not crossed, we did cross a few very important ones. I took part in discussions about the new WebKit2 APIs, got to know the new design for GNOME’s Web application, which looks great, discussed about <a href="http://blog.kov.eti.br/?p=214">Accelerated Compositing</a> along with Joone, Alex, Nayan and Martin Robinson, hacked libsoup a bit to port the multipart/x-mixed-replace patch I wrote to the awesome gio-based infrastructure Dan Winship is building, and some random misc.<p></p>
<p>The biggest chunk of time, though, ended up being devoted to a very uninteresting (to outsiders, at least), but very important task: making it possible to more easily reproduce our test results. TL;DR? We made our bots’ and development builds use jhbuild to automatically install dependencies; if you’re using tarballs, don’t worry, your usual autogen/configure/make/make install have not been touched. Now to the more verbose version!</p>
<p><strong>The need</strong></p>
<p></p><div class="wp-caption alignleft" id="attachment_225" style="width: 251px;"><a href="http://blog.kov.eti.br/wp-content/uploads/2011/12/bots.png"><img alt="" class="size-full wp-image-225" height="131" src="http://blog.kov.eti.br/wp-content/uploads/2011/12/bots.png" title="build slaves" width="241" /></a><p class="wp-caption-text">Our three build slaves reporting a few failures</p></div>For a couple years now we have supported an increasingly complex and very demanding automated testing infrastructure. We have three buildbot slaves, one provided by Collabora (which I maintain), and two provided by Igalia (maintained by their WebKitGTK+ folks). Those bots build as many check ins as possible with 3 different configurations: <a href="http://build.webkit.org/waterfall?show=GTK%20Linux%2032-bit%20Release">32 bits release</a>, <a href="http://build.webkit.org/waterfall?show=GTK%20Linux%2064-bit%20Release">64 bits release</a>, and <a href="http://build.webkit.org/waterfall?show=GTK%20Linux%2064-bit%20Debug">64 bits debug</a>.<p></p>
<p>In addition to those, we have another bot called the EWS, or Early Warning System. There are two of those at this moment: one VM provided by Collabora and my desktop, provided by myself. These bots build every patch uploaded to the bugzilla, and report build <a href="https://bugs.webkit.org/show_bug.cgi?id=73960#c9">failures</a> or <a href="https://bugs.webkit.org/show_bug.cgi?id=73319">passes</a> (you can see the green bubbles). They are very important to our development process because if the patch causes a build failure for our port people can often know that before landing, and try fixes by uploading them to bugzilla instead of doing additional commits. And people are usually very receptive to waiting for EWS output and acting on it, except when they take way too long. You can have an idea of what the life of an EWS bot looks like by looking at the <a href="http://webkit-commit-queue.appspot.com/queue-status/gtk-ews">recent status</a> for the WebKitGTK+ bots.</p>
<p><a href="http://blog.kov.eti.br/wp-content/uploads/2011/12/ews.png"><img alt="" class="alignnone size-full wp-image-226" src="http://blog.kov.eti.br/wp-content/uploads/2011/12/ews.png" title="ews" /></a></p>
<p>Maintaining all of those bots is at times a rather daunting task. The tests require a very specific set of packages, fonts, themes and icons to always report the same size for objects in a render. Upgrades, for instance, had to be synchronized, and usually involve generating new baselines for a large number of tests. You can see in <a href="https://trac.webkit.org/wiki/WebKitGtkLayoutTests?version=19">these instructions</a>, for instance, how strict the environment requirements are – yes, we need specific versions of fonts, because they often cause layouts to change in size! At one point we had tests fail after a compiler upgrade, which made rounding act a bit different!</p>
<p>So stability was a very important aspect of maintaining these bots. All of them have the same version of Debian, and most of the packages are pinned to the same version. On the other hand, and in direct contradition to the stability requirement, we often require bleeding edge versions of some libraries we rely on, such as libsoup. Since we started pushing WebKitGTK+ to be libsoup-only, its own progress has been pretty much driven by WebKitGTK+’s requirements, and Dan Winship has made it possible to make our soup backend much, much simpler and way more featureful. That meant, though, requiring very recent versions of soup.</p>
<p>To top it off, for anyone not running Debian testing and tracking the exact same versions of packages as the bots it was virtually impossible to get the tests to pass, which made it very difficult for even ourselves to make sure all patches were still passing before committing something. Wow, what a mess.</p>
<p><strong>The explosion^Wsolution</strong></p>
<p>So a few weeks back Martin Robinson came up with a proposed solution, which, as he says, is the “nuclear bomb” solution. We would have a jhbuild environment which would build and install all of the dependencies necessary for reproducing the test expectations the bots have. So over the first three days of the hackfest Martin and myself hacked away in building scripts, buildmaster integration, a jhbuild configuration, a jhbuild modules file, setting up tarballs, and wiring it all in a way that makes it convenient for the contributors to get along with. You’ll notice that our buildslaves now have a step just before compiling called “updated gtk dependencies” (gtk is the name we use for our port in the context of WebKit), which runs jhbuild to install any new dependencies or version bumps we added. You can also see that those instructions I mentioned above <a href="https://trac.webkit.org/wiki/WebKitGtkLayoutTests">became a tad simpler</a>.</p>
<p>It took us way more time than we thought for the dust to settle, but it eventually began to. The great thing of doing it during the hackfest was that we could find and fix issues with weird configurations on the spot! Oh, you build with AR_FLAGS=cruT and something doesn’t like it? OK, we fix it so that the jhbuild modules are not affected by that variable. Oh, turns out we missed a dependency, no problem, we add it to the modules file or install them on the bots, and then document the dependency. I set up a very clean chroot which we could use for trying out changes so as to not disrupt the tree too much for the other hackfest participants, and I think overall we did good.</p>
<p><strong>The aftermath</strong></p>
<p>By the time we were done our colleagues who ran other distributions such as Fedora were already being able to get a substantial improvements to the number of tests passing, and so did we! Also, the ability to seamlessly upgrade all the bots with a simple commit made it possible for us to very easily land a change that required a very recent (as in unreleased) version of soup which <a href="http://trac.webkit.org/changeset/101917/trunk/Source/WebCore/platform/network/soup/ResourceHandleSoup.cpp">made our networking backend way simpler</a>. All that red looks great, doesn’t it? And we aren’t done yet, we’ll certainly be making more tweaks to this infrastructure to make it more transparent and more helpful to the users (contributors and other people interested in running the tests).</p>
<p>If you’ve been hit by the instability we caused, sorry about that, poke mrobinson or myself in the #webkitgtk+ IRC channel on FreeNode, and we’ll help you out or fix any issues. If you haven’t, we hope you enjoy all the goodness that a reproducible testing suite has to offer! That’s it for now, folks, I’ll have more to report on follow-up work started at the hackfest soon enough, hopefully =).</p>
<p><a href="http://foundation.gnome.org/" style="float: left;"><img src="http://www.gnome.org/wp-content/themes/gnome-grass/images/gnome-logo.png" /></a> <a href="http://www.collabora.com/" style="float: right;"><img src="http://www.collabora.com/logos/collabora-logo.svg" style="width: 220;" width="220" /></a> <a href="http://www.igalia.com/"><img src="http://blogs.gnome.org/xan/files/2011/12/igalia.png" style="width: 150;" width="150" /></a></p>kovhttp://blog.kov.eti.brGustavo Noronha (kov) » webkittchuf tchuf; ou seria nheco nheco fum?http://blog.kov.eti.brAccelerated Compositing in webkit-clutterhttp://blog.kov.eti.br/?p=2142011-11-29T17:55:03+00:00<p>For a while now my fellow Collaboran Joone Hur has been working on implementing the Accelerated Compositing infrastructure available in WebKit in webkit-clutter, so that we can use Clutter’s powers for compositing separate layers and perform animations. This work is being done by Collabora and is sponsored by BOSCH, whom I’d like to thank! What does all this mean, you ask? Let me tell me a bit about it.</p>
<p>The way animations usually work in WebKit is by repainting parts of the page every few milliseconds. What that means in technical terms is that an area of the page gets invalidated, and since the whole page is one big image, all of the pieces that are in that part of the page have to be repainted: the background, any divs, images, text that are at that part of the page.</p>
<p>What the accelerated compositing code paths allow is the creation of separate pieces to represent some of the layers, allowing the composition to happen on the GPU, removing the need to perform lots of cairo paint operations per second in many cases. So if we have a semi-transparent video moving around the page, we can have that video be a separate texture that is layered on top of the page, made transparent and animated by the GPU. In webkit-clutter’s case this is done by having separate actors for each of the layers.</p>
<p>I have been looking at this code on and off, and recently joined Joone in the implementation of some of the pieces. The accelerated compositing infrastructure was originally built by Apple and is, for that reason, works in a way that is very similar to Core Animation. The code is still a bit over the place as we work on figuring out how to best translate the concepts into clutter concepts and there are several bugs, but some cool demos are already possible! Bellow you have one of the CSS3 demos that were made by Apple to demo this new functionality running on our MxLauncher test browser.</p>
<p><video controls="controls" src="http://cafe.minaslivre.org/~kov/webkit/ac.webm" width="640"></video></p>
<p>You can also see that the non-Accelerated version is unable to represent the 3D space correctly. Also, can you guess which of the two MxLauncher instances is spending less CPU? <img alt=";)" class="wp-smiley" src="http://blog.kov.eti.br/wp-includes/images/smilies/icon_wink.gif" /> In this second video I show the debug borders being painted around the actors that were created to represent layers.</p>
<p><video controls="controls" src="http://cafe.minaslivre.org/~kov/webkit/debug-borders.webm" width="640"></video></p>
<p>The code, should you like to peek or test is available in the ac2 branch of our webkit-clutter repository: <a href="http://gitorious.org/webkit-clutter/webkit-clutter/commits/ac2">http://gitorious.org/webkit-clutter/webkit-clutter/commits/ac2</a></p>
<p>We still have plenty of work to do, so expect to hear more about it. During our annual hackfest in A Coruña we plan to discuss how this work could be integrated also in the WebKitGTK+ port, perhaps by taking advantage of clutter-gtk, which would benefit both ports, by sharing code and maintenance, and providing this great functionality to Epiphany users. Stay tuned!</p>kovhttp://blog.kov.eti.brGustavo Noronha (kov) » webkittchuf tchuf; ou seria nheco nheco fum?http://blog.kov.eti.brTests Activetag:blogger.com,1999:blog-3416807.post-84716913325486096632011-10-09T02:43:18+00:00<a href="http://4.bp.blogspot.com/-8i-yTTfHO2A/TpEJO2qR_fI/AAAAAAAAAPw/3ks_GJf8XdQ/s1600/IMG_1436.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5661316357377097202" src="http://4.bp.blogspot.com/-8i-yTTfHO2A/TpEJO2qR_fI/AAAAAAAAAPw/3ks_GJf8XdQ/s320/IMG_1436.JPG" style="float: left; margin: 0 10px 10px 0; cursor: pointer; cursor: hand; width: 320px; height: 239px;" /></a><br />Looking back over this blog, I see that it was around a year ago that I got the initial WinCairo buildbot running. I'm very pleased to announce that I have gotten ahold of a much more powerful machine, and am now able to run a full build and tests in slightly under an hour -- a huge improvement over the old hardware which took over two hours just to build the software!<br /><br />This is a big step, because we can now track regressions and gauge correctness compared to the other platforms. Up to now, testing has largely consisted of periodic manual runs of the test suite, and a separate set of high-level tests run as part of a larger application. This was not ideal, because it was easy for low-level functions in WebKit that I rarely use to be broken and missed.<br /><br />All is not perfect, of course. Although over 12,000 tests now run (successfully) with each build, that is effectively two thirds of the full test suite. Most of the tests I have disabled are due to small differences in the output layout. I'm trying to understand why these differences exist, but I suspect many of them simply reflect small differences in Cairo compared to the CoreGraphics rendering layer.<br /><br />If any of you lurkers are interested in helping out, trying out some of the tests I have disabled and figuring out why they fail would be a <strong>huge</strong> help!Brent Fulghamnoreply@blogger.comhttp://whtconstruct.blogspot.com/We Have The Construction!Rantings and Ravings about WebKit, Graphics, and functional programming.tag:blogger.com,1999:blog-3416807An Unseasonable Snowfalltag:blogger.com,1999:blog-3416807.post-85242689178737272312011-07-14T18:34:23+00:00A year or two ago I ported the Cocoa "CallJS" application to MFC for use with WebKit. The only feedback I ever got on the topic was a complaint that it would not build under the Visual Studio Express software many people used.<br /><br />After seeing another few requests on the <a href="http://lists.webkit.org/mailman/listinfo/webkit-help">webkit-help</a> mailing list for information on calling JavaScript from C++ (and vice-versa), I decided to dust off the old program and convert it to pure WINAPI calls so that VS Express would work with it.<br /><br />Since my beloved <a href="http://whtconstruct.blogspot.com/2011/04/transparent-windows.html">Layered Window</a> patches finally <a href="http://trac.webkit.org/changeset/84990">landed</a> in WebKit, I also incorporated a transparent WebKit view floating over the main application window. Because I suck at art, I <strike>stole</strike> appropriated the <a href="http://girliemac.com/blog/2009/02/18/using-keyframes-webkit-css-animation-examples/">Let It Snow</a> animation example to give the transparent layer something to do.<br /><br />Want to see what it looks like?<br /><a href="http://2.bp.blogspot.com/-rYbvRZ3Uvc8/Tbuz1VlHPDI/AAAAAAAAAM4/m56VO-0lWvY/s1600/Screen%2Bshot%2B2011-04-29%2Bat%2B11.13.04%2BPM.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5601268290472590386" src="http://2.bp.blogspot.com/-rYbvRZ3Uvc8/Tbuz1VlHPDI/AAAAAAAAAM4/m56VO-0lWvY/s320/Screen%2Bshot%2B2011-04-29%2Bat%2B11.13.04%2BPM.png" style="float: left; margin: 0 10px 10px 0; cursor: pointer; cursor: hand; width: 320px; height: 293px;" /></a>Brent Fulghamnoreply@blogger.comhttp://whtconstruct.blogspot.com/We Have The Construction!Rantings and Ravings about WebKit, Graphics, and functional programming.tag:blogger.com,1999:blog-3416807Updated WebKit SDK (@r89864)tag:blogger.com,1999:blog-3416807.post-69436733897093794492011-07-10T04:24:00+00:00I have updated the WebKitSDK to correspond to SVN revision r8984.<br /><br />Major changes in this revision:<br />* JavaScript engine improvements.<br />* Rendering improvements.<br />* New 'Transparent Web View' support.<br />* General performance and memory use improvements.<br /><br />This ZIP file also contains updated versions of Zlib, OpenSSL, cURL, and OpenCFLite.<br /><br />Note that I have stopped statically linking Cairo; I'm starting to integrate some more recent Cairo updates (working towards some new rendering features), and wanted to be able to update it incrementally as changes are made.<br /><br />This package contains the same Cairo library (in DLL form) as used in previous versions.<br /><br />As usual, please let me know if you encounter any problems with this build.<br /><br />[Update] I forgot to include zlib1.dll! Fixed in the revised zip file.Brent Fulghamnoreply@blogger.comhttp://whtconstruct.blogspot.com/We Have The Construction!Rantings and Ravings about WebKit, Graphics, and functional programming.tag:blogger.com,1999:blog-3416807WinCairoRequirements Sources Archivetag:blogger.com,1999:blog-3416807.post-82807036674387378652011-07-05T19:39:32+00:00I've <a href="https://files.me.com/bfulgham/trnbu7">posted</a> the 80 MB source archive of the requirements needed to build the WinCairo port of WebKit.<br /><br />Note that you do NOT need these sources unless you plan on building them yourself or wish to archive the source code for these modules. The binaries are always present in the <a href="https://files.me.com/bfulgham/rtdib3">WinCairoRequirements.zip</a> file, which is downloaded and unzipped to the proper place when you execute the <code>update-webkit --wincairo</code> command.Brent Fulghamnoreply@blogger.comhttp://whtconstruct.blogspot.com/We Have The Construction!Rantings and Ravings about WebKit, Graphics, and functional programming.tag:blogger.com,1999:blog-3416807Towards a Simpler WinCairo Buildtag:blogger.com,1999:blog-3416807.post-23140550805627792552011-06-28T04:42:19+00:00<a href="http://4.bp.blogspot.com/-7LvU2g9SngU/TaUY8UYTrgI/AAAAAAAAAMk/tpLCnB4QS_g/s1600/Screen%2Bshot%2B2011-04-12%2Bat%2B8.29.56%2BPM.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5594905536619589122" src="http://4.bp.blogspot.com/-7LvU2g9SngU/TaUY8UYTrgI/AAAAAAAAAMk/tpLCnB4QS_g/s320/Screen%2Bshot%2B2011-04-12%2Bat%2B8.29.56%2BPM.png" style="float: left; margin: 0 10px 10px 0; cursor: pointer; cursor: hand; width: 320px; height: 163px;" /></a><br />For the past couple of years, anyone interested in trying to build the WinCairo port of <a href="http://webkit.org/">WebKit</a> had to track down a number of support libraries, place them in their development environment's include (and link search) paths, and then cross their fingers and hope everything built.<br /><br />To make things a little easier, I wrapped up the libraries and headers I use for building and posted them as a zip file on my .Mac account. This made things a little easier, but you still had to figure out where to drop the files and figure out if I had secretly updated my 'requirements.zip' file without telling anyone. Not ideal.<br /><br />A couple of days ago, while trolling through the open review queue, I ran across a <a href="https://bugs.webkit.org/show_bug.cgi?id=51790">Bug</a> filed by Carl Lobo, which automated the task of downloading the requirements file when running <strong>build-webkit --wincairo</strong>. This was a huge improvement!<br /><br />Today, I hijacked Carl's changes and railroaded the patch through the review process (making a few modifications along the way):<br /><ul><br /><li>I renamed my requirements file <a href="https://files.me.com/bfulgham/mr8nd0">WinCairoRequirements.zip</a>.</li><br /><li>I added a timestamp file, so that <strong>build-webkit --wincairo</strong> can check to see if the file changed, and download it if necessary.</li><br /><li>I propagated Carl's changes to <strong>update-webkit</strong>, so that now by adding the <strong>--wincairo</strong> argument it will update the WinCairoRequirements file.</li><br /></ul><br />I'm really excited about this update. If you've been wanting to try out the WinCairo port of WebKit, this would be a great time to try it out. I'd love to hear your experiences!Brent Fulghamnoreply@blogger.comhttp://whtconstruct.blogspot.com/We Have The Construction!Rantings and Ravings about WebKit, Graphics, and functional programming.tag:blogger.com,1999:blog-3416807Benchmarking Javascript engines for EFLhttp://www.politreco.com/?p=4962011-06-14T17:25:12+00:00<p>The Enlightenment Foundation Libraries has several bindings for other languages in order to ease the creation of end-user applications, speeding up its development. Among them, there’s a binding for Javascript using the Spidermonkey engine. The questions are: is it fast enough? Does it slowdown your application? Is Spidermonkey the best JS engine to be used?</p>
<p>To answer these questions <a href="http://blog.gustavobarbieri.com.br/">Gustavo Barbieri </a>created some C, JS and Python benchmarks to compare the performance of EFL using each of these languages. The JS benchmarks were using Spidermonkey as the engine since elixir was already done for EFL. I then created new engines (with only the necessary functions) to also compare to other well-known JS engines: V8 from Google and JSC (or nitro) from WebKit.</p>
<h2>Libraries setup</h2>
<p>For all benchmarks EFL revision 58186 was used. Following the setup of each engine:</p>
<ul>
<li>Spidermonkey: I’ve used version 1.8.1-rc1 with the already available bindings on EFL repository, elixir;</li>
<li>V8: version ﻿3.2.5.1, using a simple binding I created for EFL. I named this binding ev8;</li>
<li>JSC: ﻿WebKit’s sources are needed to compile JSC. I’ve used revision 83063. <a href="http://trac.webkit.org/wiki/EFLWebKit">Compiling with CMake</a>, I chose the EFL port and enabled the option SHARED_CORE in order to have a separated library for Javascript;</li>
</ul>
<h2>Benchmarks</h2>
<p><strong>Startup time:</strong> This benchmark measures the startup time by executing a simple application that imports evas, ecore, ecore-evas and edje, bring in some symbols and then iterates the main loop once before exiting. I measured the startup time for both hot and cold cache cases. In the former the application is executed several times in sequence and the latter includes a call to drop all caches so we have to load the library again from disk</p>
<p><strong>Runtime – Stress:</strong> This benchmark executes as many frames per second as possible of a render-intensive operation. The application is not so heavy, but it does some loops, math and interacts with EFL. Usually a common application would do far less operations every frame because many operations are done in EFL itself, in C, such as list scrolling that is done entirely in elm_genlist. This benchmark is made of 4 phases:</p>
<ul>
<li>﻿Phase 0 (P0): Un-scaled blend of the same image 16 times;</li>
<li>Phase 1 (P1): Same as P0, with additional 50% alpha;</li>
<li>Phase 2 (P2): Same as P0, with additional red coloring;</li>
<li>Phase 3 (P3): Same as P0, with additional 50% alpha and red coloring;</li>
</ul>
<p>The <a href="http://trac.enlightenment.org/e/browser/trunk/BINDINGS/javascript/elixir/src/tests/evas-bench.c">C</a> and <a href="http://trac.enlightenment.org/e/browser/trunk/BINDINGS/javascript/elixir/src/tests/evas-bench.js">Elixir’s</a> versions are available at EFL repository.</p>
<p><strong>Runtime – animation: </strong>usually an application doesn’t need “as many FPS as possible”, but instead it would like to limit to a certain amount of frames per second. E.g.: iphone’s browser tries to keep a constant of 60 FPS. This is the value I used on this benchmark. The same application as the previous benchmark is executed, but it tries to keep always the same frame-rate.</p>
<h2>Results</h2>
<p>The first computer I used to test these benchmarks on was my laptop. It’s a Dell Vostro 1320, Intel Core 2 Duo with 4 GB of RAM and a standard 5400 RPM disk. The results are below.</p>
<figure class="wp-caption aligncenter" id="attachment_498" style="width: 563px;"><a href="http://www.politreco.com/wp-content/uploads/2011/06/bench-dell.png"><img alt="" class="size-full wp-image-498" height="478" src="http://www.politreco.com/wp-content/uploads/2011/06/bench-dell.png" title="Benchmarks on Del 1320" width="563" /></a>Benchmarks on Dell 1320 laptop</figure>
<p>First thing to notice is there are no results for “Runtime – animation” benchmark. This is because all the engines kept a constant of 60fps and hence there were no interesting results to show. The first benchmark shows that V8’s startup time is the shortest one when considering we have to load the application and libraries from disk. JSC was the slowest and Spidermonkey was in between.</p>
<p>With hot caches, however, we have another complete different scenario, with JSC being almost as fast as the native C application. Following, V8 with a delay a bit larger and Spidermonkey as the slowest one.</p>
<p>The runtime-stress benchmark shows that all the engines are performing well when there’s some considerable load in the application, i.e. removing P0 from from this scenario. JSC was always at the same speed of native code; Spidermonkey and V8 had an impact only when considering P0 alone.</p>
<p> </p>
<p>Next computer to consider in order to execute these benchmarks was a Pandaboard, so we can see how well the engines are performing in an embedded platform. Pandaboard has an ARM Cortex-A9 processor with 1GB of RAM and the partition containing the benchmarks is in an external flash storage drive. Following the results for each benchmark:</p>
<p style="text-align: center;"> </p>
<figure class="wp-caption aligncenter" id="attachment_499" style="width: 559px;"><a href="http://www.politreco.com/wp-content/uploads/2011/06/bench-panda.png"><img alt="" class="size-full wp-image-499 " height="470" src="http://www.politreco.com/wp-content/uploads/2011/06/bench-panda.png" title="Benchmarks on Pandaboard" width="559" /></a>Benchmarks on Pandaboard</figure>
<p style="text-align: left;">Once again, runtime-animation is not shown since it had the same results for all engines. For the startup tests, now Spidermonkey was much faster than the others, followed by V8 and JSC in both hot and cold caches. In runtime-stress benchmark, all the engines performed well, as in the first computer, but now JSC was the clear winner.</p>
<p style="text-align: left;"> </p>
<p style="text-align: left;">There are several points to be considered when choosing an engine to be use as a binding for a library such as EFL. The raw performance and startup time seems to be very near to the ones achieved with native code. Recently there were <a href="http://www.mail-archive.com/enlightenment-devel@lists.sourceforge.net/msg33016.html">some discussions in EFL mailing list</a> regarding which engine to choose, so I think it would be good to share these numbers above. It’s also important to notice that these bindings have a similar approach of elixir, mapping each function call in Javascript to the correspondent native function. I made this to be fair in the comparison among them, but depending on the use-case it’d be good to have a JS binding similar to what python’s did, embedding the function call in real python objects.</p>Lucas De Marchihttp://www.politreco.comPolitreco » webkitby Lucas De Marchihttp://www.politreco.comCollection of WebKit portstag:blogger.com,1999:blog-13875843.post-46408851816945162172011-04-29T19:20:54+00:00WebKit is a very successfull project. It is that in many ways. The code produced seems to very fast, the code is nice to work on, the people are great, the partys involved collaborate with each other in the interest of the project. The project is also very successfull in the mobile/smartphone space. All the major smartphone platforms but Windows7 are using WebKit. This all looks great, a big success but there is one thing that stands out.<br /><br />From all the smartphone platforms no one has fully upstreamed their port. There might be many reasons for that and I think the most commonly heard reason is the time needed to get it upstreamed. It is specially difficult in a field that is moving as fast as the mobile industry. And then again there is absolutely no legal obligation to work upstream.<br /><br />For most of today I collected the ports I am aware of, put them into one git repository, maybe find the point where they were branched, rebase their changes. The goal is to make it more easy to find interesting things and move them back to upstream. One can find the combined git tree with the tags <a href="https://gitorious.org/webkit-ports/webkit-ports">here</a>. I started with WebOS, moved to iOS, then to Bada and stopped at Android as I would have to pick the sourcecode for each android release for each phone from each vendor. I think I will just be happy with the Android git tree for now. At this point I would like to share some of my observations in the order I did the import.<br /><br /><h2>Palm</h2><br />Palm's release process is manual. In the last two releases they call the file .tgz but forgot to gzip it, in 2.0.0 the tarball name was in camel case. The thing that is very nice about Palm is that they provide their base and their changes (patch) separately. From looking at the 2.1.0 release it looks that for the Desktop version they want to implement Complex Font rendering. Earlier versions (maybe it is still the case) lack the support for animated GIF.<br /><br /><h2>iOS</h2><br />Apple's release process seems to be very structured. The source can be downloaded <a href="http://www.opensource.apple.com/">here</a>. What I think is to note is that the release tarball contains some implementations of WebCore only as .o file and Apple has stopped releasing the WebKit sourcecode beginning with iOS 4.3.0.<br /><br /><h2>Bada</h2><br />This port is probably not known by many. The release process seems to be manual as well, the name of directories changed a lot between the releases, they come with a WML Script engine and they do ship something they should not ship.<br /><br />I really hope that this combined tree is useful for porters that want to see the tricks used in the various ports and don't want to spend the time looking for each port separately.zeckenoreply@blogger.comhttp://zecke.blogspot.com/search/label/WebKitSome BlogSome random thoughts of a hacker.tag:blogger.com,1999:blog-13875843How to make the GNU Smalltalk Interpreter slowertag:blogger.com,1999:blog-13875843.post-49311387844110766752011-02-13T20:56:04+00:00This is another post about a modern Linux based performance measurement utility. It is called <b>perf</b>, it is included in the Linux kernel sources and it entered the kernel in <b>v2.6.31-rc1</b>. In many ways it is obsoleting OProfile, in fact for many architectures oprofile is just a wrapper around the perf support in the kernel. perf comes with a few nice application. <b>perf top</b> provides a statistics about which symbols in user and in kernel space are called, <b>perf record</b> to record an application or to start an application to record it and then <b>perf report</b> to browse this report with a very simple CLI utility. There are tools to bundle the record and the application in an archive, a diff utility.<br /><br />For the last year I was playing a lot with <a href="http://smalltalk.gnu.org">GNU Smalltalk</a> and someone posted the results of a very simplistic VM benchmark ran across many different Smalltalk implementations. In one of the benchmarks GNU Smalltalk is scoring last among the interpreters and I wanted to understand why it is slower. In many cases the JavaScriptCore interpreter is a lot like the GNU Smalltalk one, a simple direct-threaded bytecode interpreter, uses computed goto (even is compiled with -fno-gcse as indicated by the online help, not that it changed something for JSC), heavily inlined many functions.<br /><br />There are also some differences, the GNU Smalltalk implementation is a lot older and in C. The first notable is that it is a Stack Machine and not register based, there are global pointers for the SP and the IP. Some magic to make sure that in the hot loop the IP/SP is 'local' in a register, depending on the available registers also keep the current argument in one, the interpreter definition is in a special file format but mostly similar to how Interepreter::privateExecute is looking like. The global state mostly comes from the fact that it needs to support switching processes and there might be some event during the run that requires access to the IP to store it to resume the old process. But in general the implementation is already optimized and there is little low hanging fruits and most experiments result in a slow down.<br /><br />The two important things are again: Having a stable benchmark, having a tool to help to know where to look for things. In my case the important tools are <b>perf stat</b>, <b>perf record</b>, <b>perf report</b> and <b>perf annotate</b>. I have put a copy of the output to the end of this blog post. The stat utility provides one with number of instructions executed, branches, branch misses (e.g. badly predicted), L1/L2 cache hits and cache misses.<br /><br />The stable benchmark helps me to judge if a change is good, bad or neutral for performance within the margin of error of the test. E.g. if I attempt to reduce the code size the instructions executed should decrease, if I start putting __builtin_expect.. into my code the number of branch misses should go down as well. The other useful utility is to the perf report that allows one to browse the recorded data, this can help to identify the methods one wants to start to optimize, it allows to annotate these functions inside the simple TUI interface, but does not support searching in it.<br /><br />Because the codebase is already highly optimized any of my attempts should either decrease the code size (and the pressure on the i-cache), the data size (d-cache), remove stores or loads from memory (e.g. reorder instructions), fix branch predictions. The sad truth is that most of my changes were either slow downs or neutral to the performance and it is really important to undo these changes and not have false pride (unless it was also a code cleanup or such).<br /><br />So after about 14 hours of toying with it the speed ups I have managed to make come from inlining a method to unwind a context (callframe), reordering some compares on the GC path and disabling the __builtin_expect branch hints as they were mostly wrong (something the kernel people found to be true in 2010 as well). I will just try harder, or try to work on the optimizer or attempt something more radical...<br /><br /><br /><span><br />$ perf stat gst -f Bench.st <br />219037433 bytecodes/sec; 6025895 sends/sec<br /><br /> Performance counter stats for 'gst -f Bench.st':<br /><br /> 17280.101683 task-clock-msecs # 0.969 CPUs <br /> 2076 context-switches # 0.000 M/sec<br /> 123 CPU-migrations # 0.000 M/sec<br /> 3925 page-faults # 0.000 M/sec<br /> 22215005506 cycles # 1285.583 M/sec (scaled from 70.02%)<br /> 40593277297 instructions # 1.827 IPC (scaled from 80.00%)<br /> 5063469832 branches # 293.023 M/sec (scaled from 79.98%)<br /> 70691940 branch-misses # 1.396 % (scaled from 79.98%)<br /> 27844326 cache-references # 1.611 M/sec (scaled from 20.02%)<br /> 134229 cache-misses # 0.008 M/sec (scaled from 20.03%)<br /><br /> 17.838888599 seconds time elapsed<br /></span><br /><br />PS: The perf support probably works best on Intel based platforms and the biggest other problem is that perf annotate has some issues when the code is included from other c files.zeckenoreply@blogger.comhttp://zecke.blogspot.com/search/label/WebKitSome BlogSome random thoughts of a hacker.tag:blogger.com,1999:blog-13875843Using systemtap userspace tracing...tag:blogger.com,1999:blog-13875843.post-4032839830565484572011-01-17T12:41:11+00:00At the 27C3 we were running a GSM network and during the preparation I noticed a strange performance problem coming from the database library we are using running. I filled our database with some dummy data and created a file with the queries we normally run and executed <code>time cat queries | sqlite3 file</code> as a mini benchmark. I also hacked this code into our main routine and ran it with time as well. For some reason the code running through the database library was five times slower.<br /><br />I was a bit puzzled and I decided to use systemtap to explore this to build a hypothesis and to also have the tools to answer the hypothesis. I wanted to find out if if it is slow because our database library is doing some heavy work in the implementation, or because we execute a lot more queries behind the back. I was creating the below probe:<br /><br /><code><br />probe process("/usr/lib/libsqlite3.so.0.8.6").function("sqlite3_get_table")<br />{<br /> a = user_string($zSql);<br /> printf("sqlite3_get_table called '%s'\n", a);<br />}<br /></code><br /><br />This probe will be executed whenever the sqlite3_get_table function of the mentioned library will be called. The $zSql is a variable passed to the sqlite3_get_table function and contains the query to be executed. I am converting the pointer to a local variable and then can print it. Using this simple probe helped me to see which queries were executed by the database library and helped me to do an easy optimisation.<br /><br />In general it could be very useful to build a set of probes (I think one calls set a tapset) that check for API misusage, e.g. calling functions with certain parameters where something else might be better. E.g. in Glib use truncate instead of assigning "" to the GString, or check for calls to QString::fromUtf16 coming from Qt code itself. On second thought this might be better as a GCC plugin, or both.zeckenoreply@blogger.comhttp://zecke.blogspot.com/search/label/WebKitSome BlogSome random thoughts of a hacker.tag:blogger.com,1999:blog-13875843In the name of performancetag:blogger.com,1999:blog-13875843.post-74552589457521329042010-12-17T13:48:48+00:00I tend to see people doing weird things and then claim that the change is improving performance. This can be re-ordering instructions to help the compiler, attempting to use multiple cores of your system, writing a memfill in assembly. On the one hand people can be right and the change is making things faster, on the other hand they could use assembly to make things look very complicated, justify their pay, and you might feel awkward to question if it is making any sense.<br /><br />In the last couple of weeks I have stumbled on some of those things. For some reason I found <a href="https://bugzilla.redhat.com/show_bug.cgi?id=638477#c46">this</a> bug report about GLIBC changing the memcpy routine for SSE and breaking the flash plugin (because it uses memcpy in the wrong way). The breakage is justified that the new memcpy was optimized and is faster. As Linus points out with his benchmark the performance improvement is mostly just wishful thinking.<br /><br />Another case was someone <a href="http://lists.cairographics.org/archives/cairo/2010-December/021304.html">providing MIPS optimized pixman code</a> to speed-up all drawing which turned out to be wishful thinking as well...<br /><br />The conclusion is. If someone claims that things are faster with his patch. Do not simply trust him, make sure he refers to his benchmark, is providing numbers of before and after and maybe even try to run it yourself. If he can not provide this, you should wonder how he measured the speed-up! There should be no place for wishful thinking in benchmarking. This is one of the areas where Apple's WebKit team is constantly impressing me.zeckenoreply@blogger.comhttp://zecke.blogspot.com/search/label/WebKitSome BlogSome random thoughts of a hacker.tag:blogger.com,1999:blog-13875843Benchmarking QtWebKit-V8 on Linuxhttp://browser.sed.hu/feed/54 at http://browser.sed.hu2010-12-16T13:04:44+00:00<p>For some time it has been possible to build and run QtWebKit on Linux using Google's V8 JavaScript engine instead of the default JavaScriptCore. I thought it would be good to see some numbers comparing the runtime performance of the two engines in the same environment and also measuring the performance of the browser bindings.</p>
<p><a href="http://browser.sed.hu/blog/20101216/benchmarking-qtwebkit-v8-linux" target="_blank">read more</a></p>andras.becsihttp://browser.sed.hu/feed/webkitUniversity of Szegedhttp://browser.sed.hu/feed/webkitEasily embedding WebKit into your EFL applicationhttp://www.politreco.com/?p=3102010-10-23T21:53:16+00:00<p>This is the first of a series of posts that I’m planning to do using basic examples in EFL, the <a href="http://enlightenment.org/" target="_blank" title="EFL">Enlightenment Foundation Libraries</a>. You may have heard that EFL is reaching its 1.0 release. Instead of starting from the very beginning with the basic functions of these libraries, I decided to go the opposite way, showing the fun stuff that is possible to do. Since I’m also an WebKit developer, let’s put the best of both softwares together and have a basic window rendering a webpage.</p>
<p>Before starting off, just some remarks:</p>
<ol>
<li>I’m using here the basic EFL + WebKit-EFL (sometimes called ewebkit). Developing an EFL application can be much simpler, particularly if you use an additional library with pre-made widgets like <strong>Elementary</strong>. However, it’s good to know how the underlying stuff works, so I’m providing this example.</li>
<li>This could have been the last post in a series when talking about EFL since it uses at least 3 libraries. Don’t be afraid if you don’t understand what a certain function is for or if you can’t get all EFL and WebKit running right now. Use the comment section below and I’ll make my best to help you.</li>
</ol>
<h3>Getting EFL and WebKit</h3>
<p>In order to able to compile the example here, you will need to compile two libraries from source: EFL and WebKit. For both libraries, you can either get the last version from svn or use the last snapshots provided.</p>
<ul>
<li><strong>EFL:</strong></li>
</ul>
<p>Grab a snapshot from the <a href="http://enlightenment.org/p.php?p=download&amp;l=en" target="_blank" title="download EFL">download page</a>. How to checkout the latest version from svn is detailed <a href="http://svn.enlightenment.org/" target="_blank" title="EFL svn">here</a>, as well as some instructions on how to compile</p>
<ul>
<li><strong>WebKit-EFL:</strong></li>
</ul>
<p>A very detailed explanation on how to get WebKit-EFL up and running is available on <a href="http://trac.webkit.org/wiki/EFLWebKit" target="_blank">trac</a>. Recently, though, WebKit-EFL started to be released too. It’s not detailed in the wiki yet, but <strong>you can grab a </strong><a href="http://packages.profusion.mobi/webkit-efl/webkit-efl-LATEST.tar.bz2" target="_blank"><strong>snapshot</strong></a> instead of checking out from svn.</p>
<h3>hellobrowser!</h3>
<p>In the spirit of “hello world” examples, our goal here is to make a window showing a webpage rendered by WebKit. For the sake of simplicity, we will use a default start page and put a WebKit-EFL “widget” to cover the entire window. See below a screenshot:</p>
<figure class="wp-caption aligncenter" id="attachment_324" style="width: 490px;"><a href="http://www.politreco.com/wp-content/uploads/2010/10/hellobrowser.png"><img alt="" class="size-full wp-image-324 " height="385" src="http://www.politreco.com/wp-content/uploads/2010/10/hellobrowser.png" title="hellobrowser" width="490" /></a>hellobrowser - WebKit + EFL</figure>
<p>The code for this example is available <a href="http://www.politreco.com/files/hellobrowser.c">here</a>. Pay attention to a comment in the beginning of this file that explains how to compile it:</p>
<div class="wp_syntax"><table><tbody><tr><td class="code"><pre class="bash" style="font-family: monospace;"><span style="color: #c20cb9; font-weight: bold;">gcc</span> <span style="color: #660033;">-o</span> hellobrowser hellobrowser.c \
-DEWK_DATADIR=<span style="color: #ff0000;">"<span style="color: #000099; font-weight: bold;">\"</span><span style="color: #007800;">$(pkg-config --variable=datadir ewebkit)</span><span style="color: #000099; font-weight: bold;">\"</span>"</span> \
$<span style="color: #7a0874; font-weight: bold;">(</span>pkg-config <span style="color: #660033;">--cflags</span> <span style="color: #660033;">--libs</span> ecore ecore-evas evas ewebkit<span style="color: #7a0874; font-weight: bold;">)</span></pre></td></tr></tbody></table></div>
<p>The things worth noting here are the dependencies and a variable. We directly depend on ecore and evas from EFL and on WebKit. We define a variable, EWK_DATADIR, using pkg-config so our browser can use the default theme for web widgets defined in WebKit. Ecore handles events like mouse and keyboard inputs, timers etc whilst evas is the library responsible for drawing. In a later post I’ll detail them a bit more. For now, you can read more about them on <a href="http://enlightenment.org/p.php?p=about&amp;l=en" target="_blank">their official site</a>.</p>
<p>The main function is really simple. Let’s divide it by pieces:</p>
<div class="wp_syntax"><table><tbody><tr><td class="code"><pre class="c" style="font-family: monospace;"> <span style="color: #666666; font-style: italic;">// Init all EFL stuff we use</span>
evas_init<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
ecore_init<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
ecore_evas_init<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
ewk_init<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span></pre></td></tr></tbody></table></div>
<p>Before you use a library from EFL, remember to initialize it. All of them use their own namespace, so it’s easy to know which library you have to initialize: for example, if you call a function starting by “ecore_”, you know you first have to call “ecore_init()”. The last initialization function is WebKit’s, which uses the “ewk_” namespace.</p>
<div class="wp_syntax"><table><tbody><tr><td class="code"><pre class="c" style="font-family: monospace;"> window <span style="color: #339933;">=</span> ecore_evas_new<span style="color: #009900;">(</span>NULL<span style="color: #339933;">,</span> <span style="color: #0000dd;">0</span><span style="color: #339933;">,</span> <span style="color: #0000dd;">0</span><span style="color: #339933;">,</span> <span style="color: #0000dd;">800</span><span style="color: #339933;">,</span> <span style="color: #0000dd;">600</span><span style="color: #339933;">,</span> NULL<span style="color: #009900;">)</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">if</span> <span style="color: #009900;">(</span><span style="color: #339933;">!</span>window<span style="color: #009900;">)</span> <span style="color: #009900;">{</span>
<span style="color: #000066;">fprintf</span><span style="color: #009900;">(</span>stderr<span style="color: #339933;">,</span> <span style="color: #ff0000;">"something went wrong... :(<span style="color: #000099; font-weight: bold;">\n</span>"</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">return</span> <span style="color: #0000dd;">1</span><span style="color: #339933;">;</span>
<span style="color: #009900;">}</span></pre></td></tr></tbody></table></div>
<p>Ecore-evas then is used to create a new window with size 800×600. The other options are not relevant for an introduction to the libraries and you can find its complete documentation <a href="http://docs.enlightenment.org/auto/ecore/Ecore__Evas_8h.html#ac7f2cdbcb79635c34317c1183dd04cb0" target="_blank">here</a>.</p>
<div class="wp_syntax"><table><tbody><tr><td class="code"><pre class="c" style="font-family: monospace;"> <span style="color: #666666; font-style: italic;">// Get the canvas off just-created window</span>
evas <span style="color: #339933;">=</span> ecore_evas_get<span style="color: #009900;">(</span>window<span style="color: #009900;">)</span><span style="color: #339933;">;</span></pre></td></tr></tbody></table></div>
<p>From the Ecore_Evas object we just created, we grab a pointer to the evas, which is the space in which we can draw, adding Evas_Objects. Basically an Evas_Object is an object that you draw somewhere, i.e. in the evas. We want to add only one object to our window, that is where WebKit you render the webpages. Then, we have to ask WebKit to create this object:</p>
<div class="wp_syntax"><table><tbody><tr><td class="code"><pre class="c" style="font-family: monospace;"> <span style="color: #666666; font-style: italic;">// Add a View object into this canvas. A View object is where WebKit will</span>
<span style="color: #666666; font-style: italic;">// render stuff.</span>
browser <span style="color: #339933;">=</span> ewk_view_single_add<span style="color: #009900;">(</span>evas<span style="color: #009900;">)</span><span style="color: #339933;">;</span></pre></td></tr></tbody></table></div>
<p>Below I demonstrate a few Evas’ functions that you use to manipulate any Evas_Object. Here we are manipulating the just create WebKit object, moving to the desired position, resizing to 780x580px and then telling Evas to show this object. Finally, we tell Evas to show the window we created too. This way we have a window with an WebKit object inside with a little border.</p>
<div class="wp_syntax"><table><tbody><tr><td class="code"><pre class="c" style="font-family: monospace;"> <span style="color: #666666; font-style: italic;">// Make a 10px border, resize and show</span>
evas_object_move<span style="color: #009900;">(</span>browser<span style="color: #339933;">,</span> <span style="color: #0000dd;">10</span><span style="color: #339933;">,</span> <span style="color: #0000dd;">10</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
evas_object_resize<span style="color: #009900;">(</span>browser<span style="color: #339933;">,</span> <span style="color: #0000dd;">780</span><span style="color: #339933;">,</span> <span style="color: #0000dd;">580</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
evas_object_show<span style="color: #009900;">(</span>browser<span style="color: #009900;">)</span><span style="color: #339933;">;</span>
ecore_evas_show<span style="color: #009900;">(</span>window<span style="color: #009900;">)</span><span style="color: #339933;">;</span></pre></td></tr></tbody></table></div>
<p>We need to setup a bit more things before having a working application. The first one is to give focus to the Evas_Object we are interested on in order to receive keyboard events when opened. Then we connect a function that will be called when the window is closed, so we can properly exit our application.</p>
<div class="wp_syntax"><table><tbody><tr><td class="code"><pre class="c" style="font-family: monospace;"> <span style="color: #666666; font-style: italic;">// Focus it so it will receive pressed keys</span>
evas_object_focus_set<span style="color: #009900;">(</span>browser<span style="color: #339933;">,</span> <span style="color: #0000dd;">1</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
<span style="color: #666666; font-style: italic;">// Add a callback so clicks on "X" on top of window will call</span>
<span style="color: #666666; font-style: italic;">// main_signal_exit() function</span>
ecore_event_handler_add<span style="color: #009900;">(</span>ECORE_EVENT_SIGNAL_EXIT<span style="color: #339933;">,</span> main_signal_exit<span style="color: #339933;">,</span> window<span style="color: #009900;">)</span><span style="color: #339933;">;</span></pre></td></tr></tbody></table></div>
<p>After this, we are ready to show our application, so we start the mainloop. This function will only return when the application is closed:</p>
<div class="wp_syntax"><table><tbody><tr><td class="code"><pre class="c" style="font-family: monospace;"> ecore_main_loop_begin<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span></pre></td></tr></tbody></table></div>
<p>The function called when the application is close, just tell Ecore to exit the mainloop, so the function above returns and the application can shutdown. See its implementation below:</p>
<div class="wp_syntax"><table><tbody><tr><td class="code"><pre class="c" style="font-family: monospace;"><span style="color: #993333;">static</span> Eina_Bool
main_signal_exit<span style="color: #009900;">(</span><span style="color: #993333;">void</span> <span style="color: #339933;">*</span>data<span style="color: #339933;">,</span> <span style="color: #993333;">int</span> ev_type<span style="color: #339933;">,</span> <span style="color: #993333;">void</span> <span style="color: #339933;">*</span>ev<span style="color: #009900;">)</span>
<span style="color: #009900;">{</span>
ecore_evas_free<span style="color: #009900;">(</span>data<span style="color: #009900;">)</span><span style="color: #339933;">;</span>
ecore_main_loop_quit<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">return</span> EINA_TRUE<span style="color: #339933;">;</span>
<span style="color: #009900;">}</span></pre></td></tr></tbody></table></div>
<p>Before the application exits, we shutdown all the libraries that were initialized, in the opposite order:</p>
<div class="wp_syntax"><table><tbody><tr><td class="code"><pre class="c" style="font-family: monospace;"> <span style="color: #666666; font-style: italic;">// Destroy all the stuff we have used</span>
ewk_shutdown<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
ecore_evas_shutdown<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
ecore_shutdown<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
evas_shutdown<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span></pre></td></tr></tbody></table></div>
<p>This is a basic working browser, with which you can navigate through pages, but you don’t have an entry to set the current URL, nor “go back” and “go forward” buttons etc. All you have to do is start adding more Evas_Objects to your Evas and connect them to the object we just created. For a still basic example, but with more stuff implemented, refer to the EWebLauncher that we ship with the WebKit source code. You can see it in the “WebKitTools/EWebLauncher/” folder or online at <a href="http://trac.webkit.org/browser/trunk/WebKitTools/EWebLauncher" target="_blank">webkit’s trac</a>. <strong>Eve</strong> is another browser with a lot more features that uses Elementary in addition to EFL, WebKit. See a <a href="http://labs.hardinfo.org/mindcrisis/2010/08/12/eve-efl-web-browser/" target="_blank">blog post</a> about it with some nice pictures.</p>
<p>Now, let’s do something funny with our browser. With a bit more lines of code you can turn your browser upside down. Not really useful, but it’s funny. All you have to do is to rotate the Evas_Object WebKit is rendering on. This is implemented by the following function:</p>
<div class="wp_syntax"><table><tbody><tr><td class="code"><pre class="c" style="font-family: monospace;"><span style="color: #666666; font-style: italic;">// Rotate an evas object by 180 degrees</span>
<span style="color: #993333;">static</span> <span style="color: #993333;">void</span>
_rotate_obj<span style="color: #009900;">(</span>Evas_Object <span style="color: #339933;">*</span>obj<span style="color: #009900;">)</span>
<span style="color: #009900;">{</span>
Evas_Map <span style="color: #339933;">*</span>map <span style="color: #339933;">=</span> evas_map_new<span style="color: #009900;">(</span><span style="color: #0000dd;">4</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
evas_map_util_points_populate_from_object<span style="color: #009900;">(</span>map<span style="color: #339933;">,</span> obj<span style="color: #009900;">)</span><span style="color: #339933;">;</span>
evas_map_util_rotate<span style="color: #009900;">(</span>map<span style="color: #339933;">,</span> <span style="color: #800080;">180.0</span><span style="color: #339933;">,</span> <span style="color: #0000dd;">400</span><span style="color: #339933;">,</span> <span style="color: #0000dd;">300</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
evas_map_alpha_set<span style="color: #009900;">(</span>map<span style="color: #339933;">,</span> <span style="color: #0000dd;">0</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
evas_map_smooth_set<span style="color: #009900;">(</span>map<span style="color: #339933;">,</span> <span style="color: #0000dd;">1</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
evas_object_map_set<span style="color: #009900;">(</span>obj<span style="color: #339933;">,</span> map<span style="color: #009900;">)</span><span style="color: #339933;">;</span>
evas_object_map_enable_set<span style="color: #009900;">(</span>obj<span style="color: #339933;">,</span> <span style="color: #0000dd;">1</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
evas_map_free<span style="color: #009900;">(</span>map<span style="color: #009900;">)</span><span style="color: #339933;">;</span>
<span style="color: #009900;">}</span></pre></td></tr></tbody></table></div>
<p>See this screenshot below and get the <a href="http://www.politreco.com/files/hellobrowser2.c" target="_blank">complete source code</a>.</p>
<figure class="wp-caption aligncenter" id="attachment_335" style="width: 490px;"><a href="http://www.politreco.com/wp-content/uploads/2010/10/hellobrowser2.png"><img alt="" class="size-full wp-image-335 " height="385" src="http://www.politreco.com/wp-content/uploads/2010/10/hellobrowser2.png" title="hellobrowser2" width="490" /></a>EFL + WebKit doing Politreco upside down</figure>Lucas De Marchihttp://www.politreco.comPolitreco » webkitby Lucas De Marchihttp://www.politreco.comDeploying WebKit, common issuestag:blogger.com,1999:blog-13875843.post-41750540824873586462010-10-02T06:12:20+00:00<div>From my exposure to people deploying QtWebKit or WebKit/GTK+ there are some things that re-appear and I would like to discuss these here.</div><div><br /></div><div><ul></ul></div><div><li><b>Weird compile error in JavaScript?</b><br /></li></div><div>It is failing in JavaScriptCore as it is the first that is built. It is most likely that the person that provided you with the toolchain has placed a config.h into it. There are some resolutions to it. One would be to remove the config.h from the toolchain (many things will break), or use <b>-isystem</b> instead of <b>-I</b> for system includes.</div><div>The best way to find out if you suffer from this problem is to use <b>-E</b> instead of <b>-c</b> to only pre-process the code and see where the various includes are coming from. It is a strategy that is known to work very well.</div><div></div><div><br /></div><div><li><b>No pages are loaded.</b></li></div><div>Most likely you do not have a DNS Server set, or no networking, or the system your board is connected to is not forwarding the data. Make sure you can ping a website that is supposed to work, e.g. <b>ping www.yahoo.com</b>, the next thing would be to use <b>nc</b> to execute a simple HTTP 1.1 get on the site and see if it is working. In most cases you simply lack networking connectivity.</div><div></div><div><br /></div><div><li><b>HTTPS does not work</b></li></div><div>It might be either an issue with Qt or an issue with your system time. SSL Certificates at least have two dates (Expiration and Creation) and if your system time is after the Expiration or before the Creation you will have issues. The easiest thing is to add ntpd to your root filesystem to make sure to have the right time.</div><div><br /></div><div>The possible issue with Qt is a bit more complex. You can build Qt without OpenSSL support, you can make it link to OpenSSL or you can make it to dlopen OpenSSL at runtime. If SSL does not work it is most likely that you have either build it without SSL support, or with runtime support but have failed to install the OpenSSL library.</div><div><br /></div><div>Depending on your skills it might be best to go back to <b>./configure</b> and make Qt link to OpenSSL to avoid the runtime issue. <b>strings</b> is a very good tool to find out if your libQtNetwork.so contains SSL support, together with using <b>objdump -x</b> and search for _NEEDED you will find out which config you have.</div><div></div><div><br /></div><div><li><b>Local pages are not loaded</b></li></div><div>This is a pretty common issue for WebKit/GTK+. In WebKit/GTK+ we are using GIO for local files and to determine the filetype it is using the freedesktop.org shared-mime-info. Make sure you have that installed.</div><div></div><div><br /></div><div><li><b>The page only displays blank</b></li></div><div>This is another issue that comes back from time to time. It only appears on WebKit/GTK+ with the DirectFB backend but sadly people never report back if and how they have solved it. You could make a difference and contribute back to the WebKit project.</div><div></div><div></div><div><br /></div><div><br /></div><div>In general most of these issues can be avoided by using a pre-packaged Embedded Linux Distribution like <a href="http://www.angstrom-distribution.org/">Ångström</a> (or even Debian). The biggest benefit of that approach is that someone else made sure that when you install WebKit, all dependencies will be installed as well and it will just work for your ARM/MIPS/PPC system. It will save you a lot of time.</div>zeckenoreply@blogger.comhttp://zecke.blogspot.com/search/label/WebKitSome BlogSome random thoughts of a hacker.tag:blogger.com,1999:blog-13875843WebKithttp://www.politreco.com/?p=2932010-08-28T03:15:30+00:00<p>After some time working with the EFL port of WebKit, I’ve been nominated as an official webkit developer. Now I have super powers in the official repository :-), but I swear I intend to use it with caution and responsibility. I’ll not forget Uncle Ben’s advice: ﻿﻿”with great power comes great responsibility”.</p>
<p>I’m preparing a post to talk about WebKit, EFL, eve (a new web browser based on WebKit + EFL) and how to easily embed a browser in your application. Stay tuned.</p>Lucas De Marchihttp://www.politreco.comPolitreco » webkitby Lucas De Marchihttp://www.politreco.comCoscup2010/GNOME.Asia with strong web focustag:blogger.com,1999:blog-13875843.post-20914682463962948412010-08-10T16:32:07+00:00On the following weekend the <a href="http://coscup.org/">Coscup 2010/GNOME.Asia</a> is taking place in Taipei. The organizers have decided to have a strong focus on the Web as can be seen in the <a href="http://coscup.org/2010/en/program">program</a>.<div><br /></div><div>On saturday there are is a keynote and various talks about HTML5, node.js. The Sunday will see three talks touching WebKit/GTK+. There is one about building a tablet OS with WebKit/GTK+, one by Xan Lopez on how to build hybrid applications (a topic I have devoted <a href="http://moiji-mobile.com">moiji-mobile.com</a> to) and a talk by me using gdb to explain how WebKit/GTK+ is working and how the porting layer interacts with the rest of the code.</div><div><br /></div><div>I hope the audience will enjoy the presentations and I am looking forward to attend the conference, there is also a strong presence of the ex-Openmoko Taiwan Engineering team. See you on Saturday/Sunday and drop me an email if you want to talk about WebKit or GSM...</div>zeckenoreply@blogger.comhttp://zecke.blogspot.com/search/label/WebKitSome BlogSome random thoughts of a hacker.tag:blogger.com,1999:blog-13875843Cross-compiling QtWebKit for Windows on Linux using MinGWhttp://browser.sed.hu/feed/51 at http://browser.sed.hu2010-07-16T09:31:44+00:00<p>In this post I'll show you how to configure and compile a MinGW toolchain for cross-compilation on Linux, then how to build Qt using this toolchain and finally compile the Qt port of WebKit from trunk.</p>
<p><a href="http://browser.sed.hu/blog/20100716/cross-compiling-qtwebkit-windows-linux-using-mingw" target="_blank">read more</a></p>andras.becsihttp://browser.sed.hu/feed/webkitUniversity of Szegedhttp://browser.sed.hu/feed/webkitSkia graphics library in Chrome: First impressionshttp://www.atoker.com/blog/?p=1172008-09-06T00:11:52+00:00<p>With the release of the WebKit-based <a href="http://code.google.com/chromium/">Chrome browser</a>, Google also introduced a handful of new backends for the browser engine including a new HTTP stack and the <a href="http://src.chromium.org/viewvc/chrome/trunk/src/skia/">Skia graphics library</a>. Google’s <a href="http://code.google.com/p/android/downloads/list">Android WebKit code drops</a> have previously featured Skia for rendering, though this is the first time the sources have been made freely available. The code is apparently derived from Google’s <a href="http://www.dmwmedia.com/news/2007/01/04/google-owns-small-firm-in-north-carolina-could-expand-in-region">2005 acquisition</a> of North Carolina-based software firm Skia and is now provided under the Open Source <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a>.</p>
<p>Weighing in at some 80,000 lines of code (to Cairo’s 90,000 as a ballpark reference) and written in C++, some of the differentiating features include:</p>
<ul>
<li>Optimised software-based rasteriser (module <a href="http://src.chromium.org/viewvc/chrome/trunk/src/skia/sgl/">sgl/</a>)</li>
<li>Optional GL-based acceleration of certain graphics operations including shader support and textures (module <a href="http://src.chromium.org/viewvc/chrome/trunk/src/skia/gl/">gl/</a>)</li>
<li>Animation capabilities (module <a href="http://src.chromium.org/viewvc/chrome/trunk/src/skia/animator/">animator/</a>)</li>
<li>Some built-in SVG support (module (<a href="http://src.chromium.org/viewvc/chrome/trunk/src/skia/svg/">svg/</a>)</li>
<li>Built-in image decoders: PNG, JPEG, GIF, BMP, WBMP, ICO (modules <a href="http://src.chromium.org/viewvc/chrome/trunk/src/skia/images/">images/</a>)</li>
<li>Text capabilities (no built-in support for complex scripts)</li>
<li>Some awareness of higher-level UI toolkit constructs (platform windows, platform events): Mac, Unix (sic. X11, incomplete), Windows, wxwidgets</li>
<li>Performace features
<ul>
<li>Copy-on-write for images and certain other data types</li>
<li>Extensive use of the stack, both internally and for <a href="http://src.chromium.org/viewvc/chrome/trunk/src/skia/include/">API</a> consumers to avoid needless allocations and memory fragmentation</li>
<li>Thread-safety to enable parallelisation</li>
</ul>
</li>
</ul>
<p>The library is portable and has (optional) <a href="http://src.chromium.org/viewvc/chrome/trunk/src/skia/ports/">platform-specific backends</a>:</p>
<ul>
<li>Fonts: Android / <a href="http://openhandsetmagazine.com/2007/11/android-got-new-fonts-from-ascender/">Ascender</a>, FreeType, Windows (GDI)</li>
<li>Threading: pthread, Windows</li>
<li>XML: expat, tinyxml</li>
<li>Android shared memory (ashmem) for inter-process image data references</li>
</ul>
<h3>Skia Hello World</h3>
<p>In this simple example we draw a few rectangles to a memory-based image buffer. This also demonstrates how one might integrate with the platform graphics system to get something on screen, though in this case we’re using Cairo to save the resulting image to disk:</p>
<div class="wp_syntax"><table><tbody><tr><td class="code"><pre class="cpp" style="font-family: monospace;"><span style="color: #339900;">#include "SkBitmap.h"</span>
<span style="color: #339900;">#include "SkDevice.h"</span>
<span style="color: #339900;">#include "SkPaint.h"</span>
<span style="color: #339900;">#include "SkRect.h"</span>
<span style="color: #339900;">#include &lt;cairo.h&gt;</span>
<span style="color: #0000ff;">int</span> main<span style="color: #008000;">(</span><span style="color: #008000;">)</span>
<span style="color: #008000;">{</span>
SkBitmap bitmap<span style="color: #008080;">;</span>
bitmap.<span style="color: #007788;">setConfig</span><span style="color: #008000;">(</span>SkBitmap<span style="color: #008080;">::</span><span style="color: #007788;">kARGB_8888_Config</span>, <span style="color: #0000dd;">100</span>, <span style="color: #0000dd;">100</span><span style="color: #008000;">)</span><span style="color: #008080;">;</span>
bitmap.<span style="color: #007788;">allocPixels</span><span style="color: #008000;">(</span><span style="color: #008000;">)</span><span style="color: #008080;">;</span>
SkDevice device<span style="color: #008000;">(</span>bitmap<span style="color: #008000;">)</span><span style="color: #008080;">;</span>
SkCanvas canvas<span style="color: #008000;">(</span><span style="color: #000040;">&amp;</span>device<span style="color: #008000;">)</span><span style="color: #008080;">;</span>
SkPaint paint<span style="color: #008080;">;</span>
SkRect r<span style="color: #008080;">;</span>
paint.<span style="color: #007788;">setARGB</span><span style="color: #008000;">(</span><span style="color: #0000dd;">255</span>, <span style="color: #0000dd;">255</span>, <span style="color: #0000dd;">255</span>, <span style="color: #0000dd;">255</span><span style="color: #008000;">)</span><span style="color: #008080;">;</span>
r.<span style="color: #007788;">set</span><span style="color: #008000;">(</span><span style="color: #0000dd;">10</span>, <span style="color: #0000dd;">10</span>, <span style="color: #0000dd;">20</span>, <span style="color: #0000dd;">20</span><span style="color: #008000;">)</span><span style="color: #008080;">;</span>
canvas.<span style="color: #007788;">drawRect</span><span style="color: #008000;">(</span>r, paint<span style="color: #008000;">)</span><span style="color: #008080;">;</span>
paint.<span style="color: #007788;">setARGB</span><span style="color: #008000;">(</span><span style="color: #0000dd;">255</span>, <span style="color: #0000dd;">255</span>, <span style="color: #0000dd;">0</span>, <span style="color: #0000dd;">0</span><span style="color: #008000;">)</span><span style="color: #008080;">;</span>
r.<span style="color: #007788;">offset</span><span style="color: #008000;">(</span><span style="color: #0000dd;">5</span>, <span style="color: #0000dd;">5</span><span style="color: #008000;">)</span><span style="color: #008080;">;</span>
canvas.<span style="color: #007788;">drawRect</span><span style="color: #008000;">(</span>r, paint<span style="color: #008000;">)</span><span style="color: #008080;">;</span>
paint.<span style="color: #007788;">setARGB</span><span style="color: #008000;">(</span><span style="color: #0000dd;">255</span>, <span style="color: #0000dd;">0</span>, <span style="color: #0000dd;">0</span>, <span style="color: #0000dd;">255</span><span style="color: #008000;">)</span><span style="color: #008080;">;</span>
r.<span style="color: #007788;">offset</span><span style="color: #008000;">(</span><span style="color: #0000dd;">5</span>, <span style="color: #0000dd;">5</span><span style="color: #008000;">)</span><span style="color: #008080;">;</span>
canvas.<span style="color: #007788;">drawRect</span><span style="color: #008000;">(</span>r, paint<span style="color: #008000;">)</span><span style="color: #008080;">;</span>
<span style="color: #008000;">{</span>
SkAutoLockPixels image_lock<span style="color: #008000;">(</span>bitmap<span style="color: #008000;">)</span><span style="color: #008080;">;</span>
cairo_surface_t<span style="color: #000040;">*</span> surface <span style="color: #000080;">=</span> cairo_image_surface_create_for_data<span style="color: #008000;">(</span>
<span style="color: #008000;">(</span><span style="color: #0000ff;">unsigned</span> <span style="color: #0000ff;">char</span><span style="color: #000040;">*</span><span style="color: #008000;">)</span>bitmap.<span style="color: #007788;">getPixels</span><span style="color: #008000;">(</span><span style="color: #008000;">)</span>, CAIRO_FORMAT_ARGB32,
bitmap.<span style="color: #007788;">width</span><span style="color: #008000;">(</span><span style="color: #008000;">)</span>, bitmap.<span style="color: #007788;">height</span><span style="color: #008000;">(</span><span style="color: #008000;">)</span>, bitmap.<span style="color: #007788;">rowBytes</span><span style="color: #008000;">(</span><span style="color: #008000;">)</span><span style="color: #008000;">)</span><span style="color: #008080;">;</span>
cairo_surface_write_to_png<span style="color: #008000;">(</span>surface, <span style="color: #FF0000;">"snapshot.png"</span><span style="color: #008000;">)</span><span style="color: #008080;">;</span>
cairo_surface_destroy<span style="color: #008000;">(</span>surface<span style="color: #008000;">)</span><span style="color: #008080;">;</span>
<span style="color: #008000;">}</span>
<span style="color: #0000ff;">return</span> <span style="color: #0000dd;">0</span><span style="color: #008080;">;</span>
<span style="color: #008000;">}</span></pre></td></tr></tbody></table></div>
<p>You can build this example for yourself linking statically to the libskia.a object file generated during the Chrome build process on Linux.</p>
<h3>Not just for Google Chrome</h3>
<p>The <a href="http://src.chromium.org/viewvc/chrome/trunk/src/webkit/port/platform/graphics/">Skia backend in WebKit</a>, the first parts of which are already hitting SVN (<a href="http://trac.webkit.org/changeset/35852">r35852</a>, <a href="http://trac.webkit.org/changeset/36074">r36074</a>) isn’t limited to use in the Chrome/Windows configuration and some work has already been done to get it up and running on Linux/GTK+ as part of the ongoing porting effort.</p>
<p>The post <a href="http://www.atoker.com/blog/2008/09/06/skia-graphics-library-in-chrome-first-impressions/" rel="nofollow">Skia graphics library in Chrome: First impressions</a> appeared first on <a href="http://www.atoker.com" rel="nofollow">Alp Toker</a>.</p>alphttp://www.atoker.comAlp Toker » WebKithttp://www.atoker.comWebKit Meta: A new standard for in-game web contenthttp://www.atoker.com/blog/?p=1112008-06-12T09:35:20+00:00<p style="text-align: center;"><a href="http://meta.nuanti.com"><img alt="" border="0" class="alignnone size-full wp-image-113" height="42" src="http://www.atoker.com/blog/wp-content/uploads/2008/06/meta.png" title="meta" width="150" /></a></p>
<p>Over the last few months, our browser team at <a href="http://www.nuanti.com/">Nuanti Ltd.</a> has been developing <em>Meta</em>, a brand new <a href="http://webkit.org/">WebKit</a> port suited to embedding in OpenGL and 3D applications. The work is being driven by <a href="http://lindenlab.com/">Linden Lab</a>, who are eagerly investigating WebKit for use in <a href="http://secondlife.com/">Second Life</a>.</p>
<p>While producing <em>Meta</em> we’ve paid great attention to resolving the technical and practical limitations encountered with other web content engines.</p>
<p style="text-align: center;"><img alt="" class="alignnone size-full wp-image-116" height="304" src="http://www.atoker.com/blog/wp-content/uploads/2008/06/ubrowser-webkit.jpg" title="ubrowser-webkit" width="450" /><br />
<small><a href="http://ubrowser.com/">uBrowser</a> running with the WebKit <em>Meta</em> engine</small></p>
<h3>High performance, low resource usage</h3>
<p><img alt="" class="size-full wp-image-114 alignright" height="68" src="http://www.atoker.com/blog/wp-content/uploads/2008/06/squirrelfish.png" style="float: right;" title="squirrelfish" width="108" /><em>Meta</em> is built around WebKit, the same engine used in web browsers like <a href="http://www.apple.com/safari/">Safari</a> and <a href="http://live.gnome.org/Epiphany/WebKit">Epiphany</a>, and features some of the fastest content rendering around as well as nippy JavaScript execution with the state of the art <a href="http://webkit.org/blog/189/announcing-squirrelfish/">SquirrelFish VM</a>. The JavaScript SDK is available independently of the web renderer for sandboxed client-side game scripting and automation.</p>
<p>It’s also highly scalable. Some applications may need only a single browser context but virtual worlds often need to support hundreds of web views or more, each with active content. To optimize for this use case, we’ve cut down resource usage to an absolute minimum and tuned performance across the board.</p>
<h3>Stable, easy to use cross-platform SDK</h3>
<p><em>Meta</em> features a single, rock-solid API that works identically on all supported platforms including Windows, OS X and Linux. The SDK is tailored specifically to embedding and allows tight integration (shared main loop or operation in a separate rendering thread, for example) and hooks to permit seamless visual integration and extension. There is no global setup or initialization and the number of views can be adjusted dynamically to meet resource constraints.</p>
<h3>Minimal dependencies</h3>
<p><em>Meta</em> doesn’t need to use a conventional UI toolkit and doesn’t need any access to the underlying windowing system or the user’s filesystem to do its job, so we’ve done away with these concepts almost entirely. It adds only a few megabytes to the overall redistributable application’s installed footprint and won’t interfere with any pre-installed web browsers on the user’s machine.</p>
<h3><span style="font-size: 13px; font-weight: normal;">Nuanti will be offering commercial and community support and is anticipating involvement from the gaming industry and homebrew programmers.</span></h3>
<p>In the mid term, we aim to submit components of <em>Meta</em> to the WebKit Open Source project, where our developers are already actively involved in maintaining various subsystems.</p>
<h3>Find out more</h3>
<p>Today we’re launching <a href="http://meta.nuanti.com">meta.nuanti.com</a> and two mailing lists to get developers talking. We’re looking to make this site a focal point for embedders, choc-full of technical details, code samples and other resources.</p>
<p>The post <a href="http://www.atoker.com/blog/2008/06/12/webkit-meta-a-new-standard-for-in-game-web-content/" rel="nofollow">WebKit Meta: A new standard for in-game web content</a> appeared first on <a href="http://www.atoker.com" rel="nofollow">Alp Toker</a>.</p>alphttp://www.atoker.comAlp Toker » WebKithttp://www.atoker.comAcid3 final toucheshttp://www.atoker.com/blog/?p=1092008-04-21T02:38:37+00:00<p>Recently we’ve been working to finish off and land the <a href="http://www.atoker.com/blog/2008/03/27/webkit-gets-100-on-acid3/">last couple of fixes</a> to get a perfect pixel-for-pixel match against the reference <a href="http://acid3.acidtests.org/">Acid3</a> rendering in <a href="http://live.gnome.org/WebKitGtk">WebKit/GTK+</a>. I believe we’re the first project to achieve this on Linux — congratulations to everyone on the team!</p>
<p><a href="http://www.atoker.com/blog/wp-content/uploads/2008/04/acid3-shadow.png"><img alt="" border="0" class="alignnone size-medium wp-image-110" height="266" src="http://www.atoker.com/blog/wp-content/uploads/2008/04/acid3-shadow-300x266.png" title="acid3-shadow" width="300" /><br />
Epiphany using WebKit r32284</a></p>
<p>We also recently announced <a href="http://mail.gnome.org/archives/desktop-devel-list/2008-April/msg00134.html">our plans</a> to align more closely with the <a href="http://www.gnome.org/">GNOME desktop</a> and <a href="http://www.gnome.org/mobile/">mobile platform</a>. To this end we’re making a few technology and organisational changes that I hope to discuss in an upcoming post.</p>
<p>The post <a href="http://www.atoker.com/blog/2008/04/21/acid3-final-touches/" rel="nofollow">Acid3 final touches</a> appeared first on <a href="http://www.atoker.com" rel="nofollow">Alp Toker</a>.</p>alphttp://www.atoker.comAlp Toker » WebKithttp://www.atoker.comWebKit Summer of Code Projectshttp://www.atoker.com/blog/2008/04/06/summer-of-code-projects-for-browser-hackers/2008-04-06T20:40:39+00:00<p>With the revised deadline for <a href="http://code.google.com/soc/2008/">Google Summer of Code ’08</a> student applications looming, we’ve been getting a lot of interest in browser-related student projects. I’ve put together a list of some of my favourite ideas.</p>
<ul>
<li><a href="http://live.gnome.org/SummerOfCode2008/Ideas">GNOME ideas</a>
<ul>
<li>Epiphany
<ul>
<li>Desktop integration</li>
<li><a href="http://live.gnome.org/SummerOfCode2008/Ideas/CompleteBookmarkHistoryIntegration">Bookmark and history integration</a></li>
<li>JavaScript debugger based on Drosera / Web Inspector</li>
</ul>
</li>
<li>Evolution
<ul>
<li>Bug tracking aid</li>
</ul>
</li>
<li><a href="http://live.gnome.org/Empathy/SoC2008">Empathy</a>
<ul>
<li>WebKit Adium theme support</li>
</ul>
</li>
<li>Desktop widgets</li>
<li>Integrated web app launcher</li>
</ul>
</li>
<li><a href="http://trac.webkit.org/projects/webkit/wiki/Google%20Summer%20of%20Code%202008">WebKit ideas</a>
<ul>
<li>Cairo SVG backend completion</li>
<li>GTK+ port test suite completion</li>
</ul>
</li>
<li><a href="http://www.mono-project.com/StudentProjects">Mono ideas</a>
<ul>
<li>WebKit-based HTML editor</li>
</ul>
</li>
</ul>
<p>If in doubt, <em>now’s the time</em> to submit proposals. Already-listed ideas are the most likely to get mentored but students are free to propose their own ideas as well. Proposals for incremental improvements will tend to be favoured over ideas for completely new applications, but a proof of concept and/or roadmap can help when submitting plans for larger projects.</p>
<p><strong>Update:</strong> There’s no need to keep asking about the status of an application on IRC/private mail etc. It’s a busy time for the upstream developers but they’ll get back in touch as soon as possible.</p>
<p>The post <a href="http://www.atoker.com/blog/2008/04/06/summer-of-code-projects-for-browser-hackers/" rel="nofollow">WebKit Summer of Code Projects</a> appeared first on <a href="http://www.atoker.com" rel="nofollow">Alp Toker</a>.</p>alphttp://www.atoker.comAlp Toker » WebKithttp://www.atoker.comWebKit gets 100% on Acid3http://www.atoker.com/blog/2008/03/27/webkit-gets-100-on-acid3/2008-03-27T21:06:56+00:00<p>Today we reached a milestone with <a href="http://live.gnome.org/WebKitGtk">WebKit/GTK+</a> as it became the first browser engine on Linux/X11 to get a full score on <a href="http://www.webstandards.org/action/acid3/">Acid3</a>, shortly after the <a href="http://webkit.org/blog/173/webkit-achieves-acid3-100100-in-public-build/">Acid3 pass by WebKit for Safari/Mac</a>.</p>
<p><a href="http://www.atoker.com/blog/wp-content/uploads/2008/03/webkitacid3shad.png" title="WebKit Acid3"><img alt="Acid3" border="0" src="http://www.atoker.com/blog/wp-content/uploads/2008/03/webkitacid3shadsmall.png" /></a><br />
<strong>Epiphany using WebKit r31371</strong></p>
<p>There is actually still a little work to be done before we can claim a flawless Acid3 pass. Two of the most visible remaining issues in the GTK+ port are <tt>:visited</tt> (causing the “LINKTEST FAILED” notice in the screenshot) and the lack of CSS text shadow support in the Cairo/text backend which is needed to match the reference rendering.</p>
<p>It’s amazing to see how far we’ve come in the last few months, and great to see the WebKit GTK+ team now playing an active role in the direction of WebCore as WebKit continues to build momentum amongst developers.</p>
<p><strong>Update:</strong> We now also <a href="http://www.atoker.com/blog/2008/04/21/acid3-final-touches/">match the reference rendering</a>.</p>
<p>The post <a href="http://www.atoker.com/blog/2008/03/27/webkit-gets-100-on-acid3/" rel="nofollow">WebKit gets 100% on Acid3</a> appeared first on <a href="http://www.atoker.com" rel="nofollow">Alp Toker</a>.</p>alphttp://www.atoker.comAlp Toker » WebKithttp://www.atoker.comBossa Conf ’08http://www.atoker.com/blog/2008/03/15/bossa-conf-08/2008-03-15T03:29:08+00:00<p>Am here in the <a href="http://www.heathrowairport.com/">LHR</a> lounge. In a couple of hours, we take off for the <a href="http://www.bossaconference.indt.org/">INdT Bossa Conference</a>, Pernambuco, Brazil via Lisbon. Bumped in to <a href="http://pippin.gimp.org/">Pippin</a> who will be presenting <a href="http://clutter-project.org/">Clutter</a>. Also looking forward to <a href="http://0pointer.de/lennart/">Lennart</a>‘s PulseAudio talk amongst others.</p>
<p>If you happen to be going, drop by on my <em>WebKit Mobile</em> presentation, 14:00 Room 01 this Monday. We have a small surprise waiting for Maemo developers.</p>
<p><img alt="WebKit Mobile" src="http://www.atoker.com/blog/wp-content/uploads/2008/03/webkitmobile.png" /></p>
<p>The post <a href="http://www.atoker.com/blog/2008/03/15/bossa-conf-08/" rel="nofollow">Bossa Conf ’08</a> appeared first on <a href="http://www.atoker.com" rel="nofollow">Alp Toker</a>.</p>alphttp://www.atoker.comAlp Toker » WebKithttp://www.atoker.com