Web Standards Support in WebKit
Upcoming SlideShare
Loading in...5

Web Standards Support in WebKit



Presented at HTML5 KIG 7th Meeting

Presented at HTML5 KIG 7th Meeting



Total Views
Views on SlideShare
Embed Views



2 Embeds 2

http://www.linkedin.com 1
http://www.slashdocs.com 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Web Standards Support in WebKit Web Standards Support in WebKit Presentation Transcript

  • Web Standards Support in WebKit 허 준 회 (Joone Hur) Collabora
  • About me• WebKit Committer• Working for Collabora (http://collabora.com)• Working on WebKitGtk+, WebKit-Clutter• Blog: http://opensoftware.kr• Email: joone.hur@collabora.com
  • Contents• Custom scheme and content handlers• AddSearchProvider• Navigation Timing• Device API o Battery Status Event o Contacts API o HTML Media Capture API• Unified Storage Quota API• Shadow DOM API• WebKit News o WebCL & WebKit2 based Browser
  • Custom scheme and content handlers• 웹 사 이 트 에 서 Protocol 이 나 mimetype 을 임 의 로 등 록 하 여 특 정 URL 에 서 처 리 하 도 록 함• Interface o window.navigator.registerProtocalHandler(scheme, url, title) o window.navigator.registerContentHandler(mineType, url, title)• References o http://dev.w3.org/html5/spec/Overview.html#dom-navigator- registerprotocolhandler o http://trac.webkit.org/changeset/50477 o https://developer.mozilla.org/En/DOM:window.navigator.register ContentHandler o https://developer.mozilla.org/en/DOM/window.navigator.registerP rotocolHandler• Firefox, Chromium 지 원
  • Example<head>    <script type="text/javascript">        function RegisterHandler () {            navigator.registerProtocolHandler ("mailto","http://help.dottoro.com/protocolHandler.php?uri=%s", "Dottoro mailtoprotocol handler");    }    </script></head><body>    <button onclick="RegisterHandler ();">Register a handler for the mailtoprotocol!</button></body>
  • AddSearchProvider• Search Box 에 검 색 엔 진 을 등 록 하 는 기 능  • 지 원 하 는 interface o window.external.AddSearchProvider() o window.external.IsSearchProviderInstalled()• Firefox, IE, Chromium 에 서 지 원
  • Navigation Timing• This specification defines an interface for web applications to access timing information related to navigation and elements.• The API will allow web application to gather performance metrics about various factors such as page redirect, DNS lookup, connection & secure connection statistics, request/response time, various events, etc• Chromium, Firefox Support• Reference o http://www.w3.org/TR/navigation-timing/
  • Performance Timing, Performance Navigation
  • Examplevar start = new Date().getTime();function onLoad() {  var now = new Date().getTime();  var latency = now - start;  alert("page loading time: " + latency);}function onLoad() {  var now = new Date().getTime();  var page_load_time = now - performance.timing.navigationStart;  alert("User-perceived page loading time: " + page_load_time);}
  • Demo Page for Navigation Timinghttp://webtimingdemo.appspot.com/
  • Device API• Battery Status Event Specification o http://www.w3.org/TR/battery-status/ o https://bugs.webkit.org/show_bug.cgi?id=62698• Contacts API o http://www.w3.org/TR/2011/WD-contacts-api-20110616/ o https://bugs.webkit.org/show_bug.cgi?id=63223• HTML Media Capture
  • HTML Media Capture<input type="file" accept="image/*" capture="camera"id="capture"> • HTML Media Capture is the HTML Form Based specification that allows the user to take a picture, record a sound file, or record a video like the file picker interface.• The "capture" attribute can have the following values: o camera. microphone, camcorder, filesystem• References o http://www.w3.org/TR/html-media-capture/ o https://bugs.webkit.org/show_bug.cgi?id=63062
  • Unified Storage Quota API• The feature/API is to allow webapps to request or query per- origin storage quota across multiple storage types (e.g. IndexedDB, SQL DB and FileSystemAPI)• References o http://lists.w3.org/Archives/Public/public- webapps/2011JanMar/0346.html o https://bugs.webkit.org/show_bug.cgi?id=60355
  • Examplefunction errorCallback(error){    testFailed("Error occurred: " + error);    finishJSTest();}var grantedQuota;function quotaCallback(newQuota){    grantedQuota = newQuota;    // We must be given 0 quota, the same amount as we requested.    shouldBe("grantedQuota", "0");    finishJSTest();}if (window.webkitStorageInfo) {    window.jsTestIsAsync = true;    // Requesting 0 quota for testing     // (this request must be almost always granted     // without showing any platform specific notification UI).    webkitStorageInfo.requestQuota(webkitStorageInfo.TEMPORARY, 0, quotaCallback, errorCallback);} else      debug("This test requires window.webkitStorageInfo.");
  • Shadow DOM API• Expose the minimum subset of the larger Web Component Model• Shadow DOM refers to the ability of the browser to include a subtree of DOM elements into the rendering of a document, but not into the main document DOM tree• API o Element.webkitShadow o Element.webkitPseudo o document.webkitCreateShadow() o window.WebKitShadowRootConstructor o window.WebKitTreeScopeConstructor• References o http://lists.w3.org/Archives/Public/public-webapps/2011AprJun/1345.html
  • Example<!DOCTYPE HTML> <html> <body> The objects downloading progress:<progress id="foo" value="33" max="100"></progress> </body> </html>var download_progress = document.getElementsById("foo");console.log(download_progress.firstChild); // returns nullroot = download_progress.shadowRoot;
  • Example#if defined(ENABLE_PROGRESS_TAG) && ENABLE_PROGRESS_TAG/* progress */progress {    -webkit-appearance: progress-bar;    -webkit-box-sizing: border-box;    display: inline-block; <progress>    height: 1em;    width: 10em; ┗ <div> ::-webkit-progress-bar    vertical-align: -0.2em;} ┗ <div>::-webkit-progress-valueprogress::-webkit-progress-bar {    background-color: gray;    height: 100%;    width: 100%;    -webkit-box-sizing: border-box;}progress::-webkit-progress-value {    background-color: green;    height: 100%;    width: 50%; /* should be removed later */    -webkit-box-sizing: border-box;}#endif
  • WebCLSamsung has added WebCL JS API to WebKitWebCL is a new activity in Khronos that is defining JavaScriptbindings to OpenCLhttp://code.google.com/p/webcl/
  • WebKit2 on Nokia N9• Provides QtWebKit2 based browser• Reference o http://conversations.nokia.com/2011/06/28/nokia-n9- opening-the-browser/
  • 고 맙 습 니 다 !