webkit_webkit内核 - CSDN
精华内容
参与话题
  • webkit介绍

    2017-09-30 11:25:47
    现在基于WebKit的浏览器已经无处不在了,恐怕除了微软的IE以及Mozilla的Firefox,其他浏览器已经全被WebKit给占据了。 那WebKit到底是什么呢?要回答这个问题,首先让我们来看一下什么是浏览器是: · 浏览器是一...
    

    现在基于WebKit的浏览器已经无处不在了,恐怕除了微软的IE以及Mozilla的Firefox,其他浏览器已经全被WebKit给占据了。

    那WebKit到底是什么呢?要回答这个问题,首先让我们来看一下什么是浏览器是:

    ·      浏览器是一多媒体程序,它能够查看视频、图片以及播放音乐,所以它需要支持各种视频、图片和音频的解码。

    ·      浏览器是一个图形程序,它需要对字体和图形进行渲染。

    ·      浏览器是一个网络程序,它需要支持HTTP,FTP等各种网络协议。

    ·      浏览器是一个翻译程序,它需要把HTML,CSS,Javascript等翻译成形象的可互动的网页。

    ·      浏览器是一个关键程序,所以它需要各种硬件加速。

    浏览器是一个多面手,他需要平台提供各种各样的服务如多媒体解码、渲染、网络支持、硬件加速等等。

    下面看看WebKit的结构:


    可以看到WebKit好像一个三明治:

    ·      上层,WekKitEmbedding API,给图形界面提供服务的接口。

    ·      中间层,WebCore实现了对HTML和CSS的解析,相应DOM的生成,以及网页元素在屏幕上的布局。JSCore顾名思义是一个Javascript的解析器。

    ·      下层,PlatformAPI,告诉底层平台WebKit需要什么样的服务。

    其实,上面的这个图中,除了WebCore其他都是可以替换的;)

    可以看出来,光有WebKit是完成不了一个浏览器的,还需要图形界面和底层平台。此外还有一个概念叫WebKitPort。就像药品里面有中成药一样,WebKit浏览器也有中成品,即WebKitPort。所谓WebKit

     Port就是WebKit加上已经实现了的一套完整或者不完整的图形界面和底层平台套装。拿Chromium来说,它本身一个完整的浏览器,而360浏览器是基于Chromium这个WebKit Port实现的浏览器。




    复杂一点的应用程序,通常由多个页面组成,页面与页面之间的衔接,称为工作流程。应用程序的更新,不仅涉及每个页面的内容的更改,而且也涉及工作流程的变更。

    WebKit 这样的Rendering Engine,不仅提供了单个页面的渲染,而且也提供了历史页面的缓存,支持后退(Back),前进(Forward)以及历史(History)等等功能。同时,WebKit能够记忆用户对于每个页面做过哪些修改,甚至提供恢复(Undo)功能。

    
    展开全文
  • WebKit介绍 开发 及 总结

    千次阅读 2015-01-23 09:28:41
    一 . WebKit 简介  Webkit 是一个开放源代码的浏览器...苹果公司在 Webkit 的基础上做了大量优化改进工作 ,此时的 Apple Webkit 已经和 Webkit 有了不少差别,最后开发出了著名的 Safari ,可以说 Safari 是一

     . WebKit 简介

         Webkit 是一个开放源代码的浏览器引擎 (web browser engine) ,最初的代码来自 KDE 的 KHTML 和 KJS( 均开放源代码 ) 。苹果公司在 Webkit 的基础上做了大量优化改进工作 ,此时的 Apple Webkit 已经和 Webkit 有了不少差别,最后开发出了著名的 Safari ,可以说 Safari 是一个相当成功的产品,但是 Safari 却不是开放源代码的。

    基于 WebKit 的浏览器产品有:苹果的 Safari 和 iPhone , Google 的 Chrome 和 Android , Nokia 的 S60 ,傲游 3(Maxthon3) ;

    WebKit 目前支持 HTML4/5  CSS1/2  DOM1/2  HTTP/FILE , GIF/JPEG/PNG , XML SVG  RSS2.0 等;

    同类的浏览器引擎有: Trident ( IE 内核), Gechko ( Netscape, Mozilla 和 Firefox 内核), Presto ( Opera 内核,不免费), Tasman ( IE for MAC 内核),等等,而 WebKit 因为其功能强大、速度快而且免费备受欢迎。

     用到的库: 
      
    除了平台相关的库, WebKit 需要用到的一些主要的后台库有:

    • ICU : International Components for Unicode , 一个成熟,广泛使用的一套为 C / C + + 和Java 库提供 Unicode 的 全球化支持软件;

    • XSLT : eXtensible Stylesheet Language Transformation, W3C 定义的用于 XML 文档转换的规范;

    • Curl : 一个利用 URL 语法的命令行数据传输工具,基于 libcurl 。

    • Sqlite : SQLite 是实现了 SQL92 标准的 SQL 数据库引擎,它能在一个库里组合数据库引擎和接口 , 将所有数据存储于单个文件 ;

    • Gperf :一个很完美的哈希函数生成器;

    • Flex : Fast Lex, 快速词法分析生成器;

    • Bison :语法分析生成器,可以将一段带注释的上下文无关语法转化成 LALR 或 GLR 语法;

    • Enchant :一个拼写检查库,提供单词的拼写检查、纠错等功能;

     代码目录结构

    • WebKitTools
      一些测试 WebKit 实现功能的程序;

    • WebKitLibraries
      WebKit 用到的库以及系统调用接口定义;

    • WebKitExamplePlugins
      一些来自 Netscape 的插件,比如输入法、动画和 Cocoa 环境等;

    • WebKitSite: 保存了 www.webkit.org 网站的

    • WebKit
      此目录位于 WebKit 的最上层,定义了与应用相关的一些接口,因此它是平台相关的,每个子目录都是对应平台的完整实现:

    • cf : Core Foundation, MAC OS X 上的系统级 C 语言 API 接口;

    • win : Windows ;

    • mac : MAC OS X ;

    • qt : Q Toolkit ,其公司已被 Nokia 收购;

    • gtk : Gimp Toolkit ;

    • scripts :一些脚本,目前只有一个关于 WebKit 版本的脚本程序;

    • chromium : Google Chrome 开发平台;

    • wx : wxWindows ,一种可移植的 C++ 和 Python GUI 工具箱, by Julian Smart ;

    • haiku :一种开源 OS ,从 BeOS 而来, 2001 开始, 2009 发布首版;

    • efl: Enlightenment Foundation Libraries, Enlightenment 平台;
      WebCore 
      WebKit 的核心部分,定义了浏览相关的数据 IO 、页面加载、脚本分析、 UI 组织、事件处理、网络分析、平台相关的具体实现等内容。

    • xml :提供 xml 相关的内容;
    • html :提供 html 相关的内容;其下的 Canvas 目录定义了 3D 画布以及 WebGL 库相关的内容;
    • wml: Wireless Markup Language ;
    • css :提供 css 相关的内容;
    • dom :提供 dom 相关的内容;
    • editing :编辑相关的功能;
    • page :浏览相关内容,并非是我们看到的一个页面,在一次浏览会话中,它只有一个实例;
    • rendering :页面渲染相关的内容,在对页面脚本进行 DOM 树分析之后,需要对这些元素进行渲染和显示;
    • notification :内部模块间的事件通信;
    • history :页面浏览历史记录相关的内容;
    • svg :矢量图形功能,有选项, --svg ;
    • mathml : W3C 为网页中的数学表达式制定的规范;有编译选项, --mathml ;
    • loader : 加载资源及 Cache ;
    • workers :“ Web Workers  WEB 前端网页上的脚本提供了一种能在后台进程中运行的方法。一旦它被创建, Web Workers 就可以通过 postMessage() 向任务池发送任务请求,执行完之后再通过 postMessage() 返回消息给创建者指定的事件处理 程序 ( 通过 onmessage 进行捕获 ) 
      Web Workers
       进程能够在不影响用户界面的情况下处理任务,并且,它还可以使用XMLHttpRequest 来处理 I/O ,无论 responseXML 和 channel 属性是否为 null 。”
    • storage : Web Storage 相关的内容,保存页面的数据,可以看成是 Cookie 的升级;
    • websockets :与网络连接相关的内容;
    • bridge: 主要包含 NPPlugin(Netscape Plugin) 方面的接口访问等内容;
    • binding : Dom 与 JavaScriptCore 绑定的功能;
    • accessibility :提供控件的可用性相关的内容, accessibility 常用来形容对一些特殊人群的功能支持,比如残障者、老人等;
    • icu :里面放了专门为 Mac OS X 10.4 编译的 icu 相关头文件 ;
    • platform :提供了平台相关的具体实现,如事件响应、本地化、网络连接等;
    • plugins :插件相关内容;
    • ForwardingHeaders :头文件;
    • inspector : Inspector 是 WebKit 提供的查看网页源代码, DOM 树,以及调试脚本的工具,本目录包含了实现此功能的内容;
    • Configurations : X Code 环境相关的配置文件;
    • English.lproj :本地化文件;
    • manual-tests :测试用的 html 文件;
    • Resources :资源,图标;
    • WebCore.gyp :工程文件。 GYP ( Generate Youre Project )是 google 自己开发了一个脚本工具,这个工具也 是采用 python 编写的。它采用了自定义的一套规则,用于生成各种工程文件;
    • WebCore.vcproj : VC 工程文件;
    • WebCore.xcodeproj : X Code 工程文件;
    • WTF : Apple 的 C++ 库,可以看作精简的 STL ; SunSpider
    • 一个 JavaScript 的检测程序,它不检测 DOM 或者浏览器其他的 API ,只用来检测 Javascript 。
    • JavaScriptGlue

    • JavaScriptCore :有关 JavaScript 的相关内容,包括了脚本解释器、分析器以及执行程序;

    • PlanetWebkit: 一个比较灵活的 RSS 阅读器; Webkit 网站上的 Planet :一站式的 Webkit 开发与动态信息;

     体系结构

    WebKit 主要包括三部分: WebKit , WebCore ,以及 JavaScriptCore ,加上所使用的库,依托的平台,其基本的体系结构 (Architecture) 如下所示:




    注意有的模块相对于下面的模块有突出,这是因为此模块与下面几个模块直接相关,比如 WebCore 模块就与JavaScriptCore 、 Libraries 和 Platforms 模块直接相关。




     调用过程

    知道了 WebKit 的大体结构,我们就可以深究下去,看看这个浏览器引擎具体是怎么工作的。首先介绍几个基本且重要的类:

    1. Page :打开 page.h 头文件,我们似乎看不到我们概念中的“页面”相关的东西,没错,这里的 Page 并非就是我们印象中的简单网页,在头文件中我们发现很多关于 history 的东西, goBack(),goForward(), 等等,关于主题的设定,关于Frame 的描述等等,因此,这里的 Page 更像是我们见到的浏览器,抽象起来,应该算是我们访问网站的一次浏览会话;
      在 page.cpp 文件里,还有个重要的全局指针变量: static HashSet<Page*>* allPages; 这个变量包含了所有的page 实例,没错!就像 FireFox 一样,我们可以启动几个浏览器,而且就是在一个进程里;
      allPages 在 Page 的构造函数里将每次新产生的 Page 对象加入;每次启动新的 window ,才会新建一个 Page 对象,并触发 PageGroup::addPage() ;

    2. Frame :与 Page 相比, Frame 更像我们印象中的一个网页,它关注的是页面的显示 (FrameView) 、页面数据的加载(FrameLoader) 、页面内的各种控制器 (Editor, EventHandler, ScriptController, etc.) 等等,可以说,这个结构表示浏览器开始从外部控制转向关注一个页面的具体描述了;

    3. Document :这个类的爷爷类是 Node ,它是 DOM 树各元素的基类; Document 有个子类是 HTMLDocument ,它是整个文档 DOM 树的根结点,这样就明白了:原来 Document 就是描述具体文档的代码,看一下它的头文件,就更明白了,它的属性与方法就是围绕着各种各样的结点: Text , Comment , CDATASection , Element……
      当然, Document 不止描述了 HTML 相关的结点,还有 XHTML 、 SVG 、 WML 等等其他类型的页面;
      另外, Node 的父类之一是 EventTarget ,也就是所有元素都有事件响应的能力,由于 Document 类作为 DOM 根结点的位置,因此在窗口事件发生时,它第一个接收到事件,并寻找到事件发生的目标元素,然后从目标元素开始以树的路径向上依次处理事件。

    4. RenderObject :在形成 DOM 树结点的时候, Node 会根据需要调用 RenderObject 的方法,生成 Render 结点并最终形成 Render 树,因此此类是 Render 树各种结点类的基类,它的一个孙子类—— RenderView ,就是整个 Render 树的根结点。

    对于调用过程,这里有一段话,我认为比较明确地描述了一个场景:
    “ 浏览器的一个经典应用场景是用户给出一个 URL (直接输入或者点击链接或者 JavaScript 解析等方式)。然后浏览器外壳调用 FrameLoader 来装载页面。 FrameLoader 首先检查一些条件 (policyCheck()) ,如 URL 是否非空、 URL 是否可达,用户是否取消等等。然后通过 DocumentLoader 启动一个 MainResourceLoader 来装载页面。MainResourceLoader 调用 network 模块中的接口来下载页面内容( ResourceHandle ),实际上这里的Resourcehandle 已 经是平台相关的内容了,比如在 Qt 里面,会有 ResourceHandleQt 来控制,然后调用QtNetworkReplyHandler 来处理 HTTP 请求( GET , POST 等)。接收到数据以后,会有回调函数,告诉MainResourceLoader 数据已经接收到了。然后一路返回到 FrameLoader 开始调用 HTMLTokenizer 解析 HTML 文本。解析过程中,如果遇到 Javascript 脚本的话,也会调用 Javascript 引擎( Webkit 中的 JavascriptCore , chrome 中的 V8 )来解析。数据被解析完了以后,成了一个一个的 node ,生成 DOM 树和 Render 树,然后通过 FrameLoaderClient 调用外部的壳把内容显示出来。”
    下面我们以 Qt 平台为例,看看这个场景下的具体函数调用关系:

    首先是 整理并向服务器发送客户请求 :

    WebCore:: FrameLoader::load()

    → WebCore:: FrameLoader::loadWithDocumentLoader() →WebCore::FrameLoader::continueLoadAfterNavigationPolicy() →WebCore::FrameLoader::continueLoadAfterWillSubmitForm() →WebCore::DocumentLoader::startLoadingMainResource()

    → WebCore:: MainResourceLoader::load()

    → WebCore:: MainResourceLoader::loadNow()

    这里,注意到本函数在调用 ResourceHandle::create() 时, MainResourceLoader 把自己作为 create() 的第二个参数传入,这个参数是 MainResourceLoader 的祖父类 ResourceHandleClient ,这样便于下面当调用祖父类的虚函数 didReceiveData() 时,实际调用的是 MainResourceLoader 的 didReceiveData() 方法。

    继续:

    → WebCore:: ResourceHandle::create()

    → WebCore:: ResourceHandleQt::start()

    → WebCore:: QnetworkReplyHandler::start()

    截至本函数,用户请求才会被最终发送出去 ,然后用 connect() 方法挂载了几个信号回调函数,比如针对 finished() 信号的 finish() 函数,针对 readyRead() 信号的 forwardData() 函数,针对 processQueuedItems() 信号的sendQueuedItems() 函数,其中最重要的就是 forwardData() 函数,此函数就是 对服务器返回数据的接收与处理 。

    让我们来看看 返回数据的处理过程 :

    WebCore:: QnetworkReplyHandler::forwardData()

    → WebCore:: (QNetworkReply)QIODevice::read(),ResourceHandleClient:: didReceiveData()

    可见,首先 forwardData() 函数会利用 QIODevice 的 read() 方法从网络数据缓冲区中读取接收数据,然后调用didReceiveData() 方法,在类 ResourceHandleClient 中,这个方法实际上是个虚函数,因此实际调用的是其子类ResourceLoader 的同名函数:

    → WebCore:: ResourceLoader::didReceiveData(ResourceHandle*, const char* data, int length, int lengthReceived)

    → WebCore:: MainResourceLoader::didReceiveData()

    → WebCore:: ResourceLoader::didReceiveData(const char* data, int length, long long lengthReceived, bool allAtOnce)

    在这个函数中,有个直接调用 addData(data, length, allAtOnce); 虽然这个语句在 ResourceLoader 中,但是实际上调用的并非 ResourceLoader::addData(), 而是 MainResourceLoader::addData() ,又一个虚函数覆盖的例子:

    → WebCore:: MainResourceLoader::addData()

    → WebCore:: ResourceLoader::addData(), FrameLoader::receivedData() →WebCore::DocumentLoader::receivedData()

    → WebCore:: DocumentLoader::commitLoad()

    → WebCore:: FrameLoader::committedLoad()

    → WebCore:: FrameLoaderClient::committedLoad()

    → WebCore:: FrameLoaderClientQt::committedLoad()

    → WebCore:: FrameLoader::addData()

    → WebCore:: DocumentWriter::addData()

    至此,一次 URL 请求就完成了初始化设置,请求发送,以及数据接收,接下来就是 HTML / JS分析 。

    → WebCore:: Tokenizer::write()

    → WebCore:: HTMLTokenizer::write()

    在此函数中有个循环,针对每个 Tag 进行分析,下面是对某个 Tag 的分析过程:

    → WebCore:: HTMLTokenizer::advance()

    → WebCore:: HTMLTokenizer::parseTag(),HTMLTokenizer::processToken()

    → WebCore:: HTMLParser::parseToken()

    → WebCore:: HTMLParser::insertNodeAfterLimitDepth()

    → WebCore:: HTMLParser::insertNode()

    → WebCore:: Element::attach()

    当分析了一个 Tag ,如果不是 HTML 的 Tag ,则调用相关的 parse 函数解析(如 parseNonHTMLText );如果它是HTML 的 Tag ,就将其加入 Dom 树的一个节点,接下来根据这个节点 生成 Render 树节点 :

    → WebCore:: Node::createRendererIfNeeded()

    → WebCore::Text::createRenderer()

    → WebCore::RenderText::RenderText()

    另外,在 HTMLTokenizer::parseTag() 中,也会调用 HTMLTokenizer::parseNonHtmlText, 之后调用:

    → WebCore::HTMLTokenizer::scriptHandler()

    → WebCore::HTMLTokenizer::scriptExecution()

    → WebCore::ScriptController::executeScript()

    → WebCore::ScriptController::evaluate()

    → WebCore::ScriptController::evaluateInWorld()

    → WebCore::JSMainThreadExecState::evaluate()

    → JSC::evaluate()

    → JSC::Interpreter::execute()

    → JSC::JITCode::execute()

    → JSC::JITThunks::tryCacheGetByID()

    → cti_op_put_by_id()

    → JSC::JSValue::put()

    → WebCore::JSHTMLInputElement::put()

    → JSC::lookupPut<WebCore::JSHTMLInputElement, WebCore::JSHTMLElement> ()

    → JSC::lookupPut<WebCore::JSHTMLInputElement>()

    → WebCore::setJSHTMLInputElementSelectionStart()

    → WebCore::JSHTMLInputElement::setSelectionStart()

    → WebCore::HTMLTextFormControlElement::setSelectionStart()

    → WebCore::HTMLTextFormControlElement::textRendererAfterUpdateLayout()

    → WebCore::Document::updateLayoutIgnorePendingStylesheets()

    → WebCore::Document::updateLayout()

    → WebCore::FrameView::layout ()

    之后有可能会调用 FrameView::adjustViewSize(), FrameView::setContentsSize(), ScrollView::updateScrollbars(), FrameView::visibleContentsResized(), FrameView::endDeferredRepaints(), FrameView::doDeferredRepaints() 等函数, 然后调用:

    → WebCore::ScrollView::repaintContentRectangle()

    → WebCore::Chrome::invalidateContentsAndWindow()

    在此函数中,有关键的一句: emit m_webPage->repaintRequested(windowRect) ,意思是 将paint 的信号最终发送出去 。

    在 qt 中,函数 QEventLoop::exec() 负责对事件的检测,当检测到事件发生(信号),会调用以下函数进行处理:

    → QeventLoop::processEvents()

    → ?

    → QEventDispatcherGlib::processEvents

    → g_main_context_iteration()

    → ?

    → g_main_context_dispatch()

    → ?

    → QCoreApplication::sendPostedEvents()

    → QCoreApplicationPrivate::sendPostedEvents()

    → QCoreApplication::notifyInternal()

    → QApplication::notify()

    → QApplicationPrivate::notify_helper()

    → QMainWindow::event(QEvent*)

    → QWidget::event(QEvent*)

    → QWidgetPrivate::syncBackingStore()

    → ?

    → QWidgetPrivate::drawWidget()

    → QCoreApplication::notifyInternal()

    → QApplication::notify()

    → QApplicationPrivate::notify_helper()

    → QWebView::event()

    → Qwidget::event()

    以上是 Qt 事件处理的通用过程,从下面的函数开始, Qt 识别出此信号是 paint 信号:

    → QWebView::paintEvent()

    → QWebFrame::render()

    → QWebFramePrivate::renderRelativeCoords()

    → WebCore::FrameView::paintContents()

    → WebCore::RenderLayer::paint()

    → WebCore::RenderLayer::paintLayer()

    → WebCore::RenderLayer::paintList()

    → WebCore::RenderLayer::paintLayer()

    → WebCore::RenderLayer::paintList()

    → WebCore::RenderLayer::paintLayer()

    → WebCore::RenderBlock::paint()

    → WebCore::RenderBlock::paintObject()

    → WebCore::RenderBlock::paintContents()

    → WebCore::RenderBlock::paintChildren()

    → WebCore::RenderBlock::paint()

    → WebCore::RenderBlock::paintObject()

    → WebCore::RenderBlock::paintContents()

    → WebCore::RenderBlock::paintChildren()

    → WebCore::RenderBlock::paint()

    → WebCore::RenderBlock::paintObject()

    → WebCore::RenderBlock::paintContents()

    → WebCore::RenderLineBoxList::paint()

    → WebCore::RootInlineBox::paint()

    → WebCore::InlineFlowBox::paint()

    → WebCore::InlineFlowBox::paint()

    → WebCore::InlineTextBox::paint()

    → paintTextWithShadows()

    → WebCore::GraphicsContext::drawText()

    → WebCore::Font::drawText()

    → WebCore::Font::drawComplexText()

    → QPainter::drawText()

    可以看到,以上有的函数会重复调用,因为现在所展示的只是一个执行流程,于 WebKit 全体只是冰山一角。到此, WebKit最终调用 Qt 的 QPainter 画出文字。

    这样,从最初的数据载入到将一个文字最终画出,基本上完成了,其他如图片的过程类似。

    之后,在 resize 、 mouse-click 等事件的驱动下, WebKit 仍然会不停地进行 relayout 和 repaint 




    六 . 编译与调试

     ubuntu-10.04 上编译 Webkit ,所用的版本 r60742 ,基于 Qt 

    1. 安装 sudo apt-get install libxslt-dev gperf bison libsqlite3-dev flex libqt4-dev build-essential subversion libenchant-dev libXt-dev ;如果有其他库没有安装,根据提示,用 apt-get install 安装,如果不知道包的名称,可以用 apt-get search NAME 搜索。
    2. 进到 WebKit 目录下,开始编译: ( 以下默认为此目录 )
      QTDIR=/usr/share/qt4/ ./WebKitTools/Scripts/build-webkit --qt --debug 
      如果你只使用 WebKit 而不管内部结构,可以不用 --debug 选项; 
      如果是第一次编译,而且你用的机器性能又一般,那么时间会长一点; 
      中间可能出现错误,比如文件找不到,那么你要看看是哪个包的文件,要将这个包安装一下,诸如此类。
    3. 编译成功之后,会有提示信息
            ==================================================
                          
      WebKit is now built (1h:04m:28s).
                           
      To run QtLauncher with this newly-built code, use the
                           
      "WebKit/WebKitTools/Scripts/run-launcher" script.
           
      ==================================================
      然后可用脚本 run-launcher 运行。
    4. 调试来查看 WebKit 的工作过程: 
      脚本 run-launcher 实际的运行程序为: ./WebKitBuild/Debug/bin/QtTestBrowser  
      程序源代码在: ./WebKitTools/QtTestBrowser/ 
    5.  www.baidu.com 为例,查看调试过程:
       WebCore 内部的断点设置,需要在程序运行过程中设定,因为 so 库的符号表是运行时加载的(不然就不叫“动态链接”了),比如先用 break main  main 程序停住,然后设置WebCore::FrameLoader::load(...) ,可以设置的标志是:当你输入部分断点函数名,连续按 2 Tab 键,会有提示; 
      在某个断点停住之后,可以用 bt 查看此函数之前的调用关系,比如调用过程中的函数。
    6. 另外,如果编译 GTK 版本的 WebKit, 首先确保 Gtk+-2.0 安装完毕,然后用类似的方法:./WebKitTools/Scripts/build-webkit --qt --debug 即可。

    七 . 主要概念类图

    WebKit 中的类有几千个之多,这里只是将 WebKit 特别是 WebCore 中主要的一些类及其关系勾画出来,希望能给大家以借鉴。

    webkit class diagram

     

     

    八 . 参考文献及资源链接

     webKit 探讨比较全面和深入的,首推侯炯的《 WebKit 研究报告》,分 I  II 两部分,在网上可以轻易搜到;

    另外, Jelly's Blog 中也对 WebKit 有比较好的探讨,包括基础介绍、架构以及几个重要的专题,地址是: http://www.jjos.org/tag/webkit 

    还有一些正宗的文章,来自 WebKit 官方网站, www.webkit.org  Surfin 博客:(英文,另外注意发布时间)

    • WebKit 页面缓存 I: http://webkit.org/blog/427/webkit-page-cache-i-the-basics/

    • 样式滚动条: http://webkit.org/blog/363/styling-scrollbars/

    • 3D 变换 : http://webkit.org/blog/386/3d-transforms/

    • CSS 单元:http://webkit.org/blog/57/css-units/

    • CSS 动画I :http://webkit.org/blog/138/css-animation/

    • CSS 动画II:http://webkit.org/blog/324/css-animation-2

    • CSS 变换:http://webkit.org/blog/130/css-transforms/

    • CSS 反射:http://webkit.org/blog/182/css-reflections/

    • CSS Mask  http://webkit.org/blog/181/css-masks/

    • CSS 画布: http://webkit.org/blog/176/css-canvas-drawing/

    • CSS 梯度: http://webkit.org/blog/175/introducing-css-gradients/

    • CSS 背景裁剪: http://webkit.org/blog/164/background-clip-text/

    • Inspector 介绍: http://webkit.org/blog/41/introducing-the-web-inspector/

    • Inspector 重新设计: http://webkit.org/blog/197/web-inspector-redesign/

    • 完全通过 Acid3 测试: http://webkit.org/blog/280/full-pass-of-acid-3/

    • 介绍新的 JavaScript 引擎—— SquirrelFish  
      http://webkit.org/blog/189/announcing-squirrelfish/

    • 再次探讨 SquirrelFish  http://webkit.org/blog/214/introducing-squirrelfish-extreme/

    • Windows 系统的 GDI 文字: http://webkit.org/blog/168/gdi-text-on-windows/

    • RefPtr  PassRefPtr 基础: http://webkit.org/coding/RefPtr.html

    • webkit 页面加载过程 http://webkit.org/blog/1188/how-webkit-loads-a-web-page/

    • 客户端数据存储: http://webkit.org/blog/126/webkit-does-html5-client-side-database-storage/

    • Rendering  http://webkit.org/blog/page/19/

    • 背景音乐: http://webkit.org/blog/96/background-music/

    • Text Stroke  http://webkit.org/blog/85/introducing-text-stroke/

    • 理解 html,xml,xhtml:http://webkit.org/blog/68/understanding-html-xml-and-xhtml/

    • Strange Medium ,关于 Text  http://webkit.org/blog/67/strange-medium/

    •  DPI1  http://webkit.org/blog/55/high-dpi-web-sites/

    •  DPI2  http://webkit.org/blog/56/high-dpi-part-2/

    • Webcore 目录结构: http://webkit.org/blog/42/webcore-directory-structure/

    • 按钮: http://webkit.org/blog/28/buttons/

    • Javascript  DOM 的兼容: http://webkit.org/blog/27/javascript-and-dom-compatibility/

    • Webkit 代码风格: http://webkit.org/blog/25/webkit-coding-style-guidelines/

    • Safari 内存泄漏的改进: http://webkit.org/blog/24/update-on-memory-leaks/

    • Safari 内存泄漏的检查: http://webkit.org/blog/20/were-hunting-memory-leaks/

    • 哈希表 1  http://webkit.org/blog/6/hashtables-part-1/

    • 哈希表 2: http://webkit.org/blog/8/hashtables-part-2/



    展开全文
  • WebKit.NET-0.5.rar

    2020-07-30 23:32:04
    由于Google Chrome采用了WebKit内核,由此使得WebKit内核浏览器的人气迅速攀升。对于庞大的webkit开源程序,普通程序员一般无需接触。通过WebKit.NET,我们也可以开发一些简单的浏览器。WebKit.NET 是一个 C# 的组件...
  • -webkit-内核兼容处理

    千次阅读 2018-10-22 12:29:45
    幸好,webkit内核的浏览器能帮助我们完成这一切。接触 webkit webApp的开发已经有一段时间了,现把一些技巧分享给大家 : 1. viewport: 也就是可视区域。对于桌面浏览器,我们都很清楚viewport是什么,就是出去了...

    如果你是一名前端er,又想在移动设备上开发出自己的应用,那怎么实现呢?幸好,webkit内核的浏览器能帮助我们完成这一切。接触 webkit webApp的开发已经有一段时间了,现把一些技巧分享给大家 :

    1. viewport:
    也就是可视区域。对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域,
    这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport;

    实际上我们可以操作的属性有4 个:

    width -             //  viewport 的宽度 (范围从200 到10,000,默认为980 像素)

    height -            //  viewport 的高度 (范围从223 到10,000)
    initial-scale -     //  初始的缩放比例 (范围从>0 到10) 
    minimum-scale -    //   允许用户缩放到的最小比例
    maximum-scale -    //   允许用户缩放到的最大比例
    user-scalable -    //   用户是否可以手动缩 (no,yes)

    那么到底这些设置如何让Safari 知道?其实很简单,就一个meta,形如:

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    //编码
    <meta id="viewport" name="viewport" content="width=320; initial-scale=1.0;maximum-scale=1.0; user-scalable=no;"/>
    <meta name=”apple-mobile-web-app-capable” content=”yes” />  // 离线应用的另一个技巧     
    <meta name=”apple-mobile-web-app-status-bar-style” content=black” />  // 隐藏状态栏        
    <meta content="black" name="apple-mobile-web-app-status-bar-style" /> //指定的iphone中safari顶端的状态条的样式       
    <meta content="telephone=no" name="format-detection" />  //告诉设备忽略将页面中的数字识别为电话号码     
    <meta name="Author" contect="Mr.He"/>  

    在设置了initial-scale=1 之后,我们终于可以以1:1 的比例进行页面设计了。关于viewport,还有一个很重要的概念是:iphone 的safari 浏览器完全没有滚动条,而且不是简单的“隐藏滚动条”,是根本没有这个功能。iphone 的safari 浏览器实际上从一开始就完整显示了这个网页,然后用viewport 查看其中的一部分。当你用手指拖动时,其实拖的不是页面,而是viewport。浏览器行为的改变不止是滚动条,交互事件也跟普通桌面不一样。(请参考:指尖的下JS 系列文章)

    2. link:

    <link rel=”apple-touch-startup-image” href=”startup.png” /> // 设置开始页面图片
    <link rel=”apple-touch-icon” href=”iphon_tetris_icon.png”/> // 在设置书签的时候可以显示好看的图标
    <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">   //肖像模式样式       
    <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"   // 风景模式样式
     
    //竖屏时使用的样式<style media="all and (orientation:portrait)" type="text/css">
    #landscape { display: none; }
    </style>
     
    //横屏时使用的样式
    <style media="all and (orientation:landscape)" type="text/css">
    #portrait { display: none; }
    </style> 

    3. 事件 : (请参考:指尖的下JS 系列文章)

    // 手势事件
    touchstart           
    //当手指接触屏幕时触发
    touchmove          
    //当已经接触屏幕的手指开始移动后触发
    touchend            
    //当手指离开屏幕时触发
    touchcancel
     
    // 触摸事件
    gesturestart         
    //当两个手指接触屏幕时触发
    gesturechange     
    //当两个手指接触屏幕后开始移动时触发
    gestureend
     
    // 屏幕旋转事件   
    onorientationchange    
     
    // 检测触摸屏幕的手指何时改变方向       
    orientationchange      
     
    // touch事件支持的相关属性
    touches        
    targetTouches      
    changedTouches             
    clientX      // X coordinate of touch relative to the viewport (excludes scroll offset)       
    clientY        // Y coordinate of touch relative to the viewport (excludes scroll offset)       
    screenX     // Relative to the screen        
    screenY       // Relative to the screen       
    pageX    // Relative to the full page (includes scrolling)     
    pageY    // Relative to the full page (includes scrolling)     
    target     // Node the touch event originated from      
    identifier      // An identifying number, unique to each touch event

    4. 屏幕旋转事件:onorientationchange
    添加屏幕旋转事件侦听,可随时发现屏幕旋转状态(左旋、右旋还是没旋)。例子:

    // 判断屏幕是否旋转
    function orientationChange()
     { 
        switch(window.orientation) { 
          case 0:          alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height); 
                break;
          case -90:       alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height); 
                break;
          case 90:         alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height); 
                break;
          case 180:       alert("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height); 
             break;
        };<br>};
    // 添加事件监听 
    addEventListener('load',
    function(){
        orientationChange();
        window.onorientationchange = orientationChange; 
    });

    5. 隐藏地址栏 & 处理事件的时候,防止滚动条出现:

    // 隐藏地址栏  & 处理事件的时候 ,防止滚动条出现

    addEventListener('load', function(){

            setTimeout(function(){ window.scrollTo(0, 1); }, 100);

    });

    6. 双手指滑动事件:

    // 双手指滑动事件
    addEventListener('load',  function(){
     window.onmousewheel = twoFingerScroll;}, 
         false              // 兼容各浏览器,表示在冒泡阶段调用事件处理程序 (true 捕获阶段)
    );
    function twoFingerScroll(ev)
     { 
        var delta =ev.wheelDelta/120;              //对 delta 值进行判断(比如正负) ,而后执行相应操作 
        return true;
    };

    7. 判断是否为iPhone:

    // 判断是否为 iPhone : 
    function isAppleMobile()
     { 
        return (navigator.platform.indexOf('iPad') != -1); 
    };

    8. localStorage:
     例子 :(注意数据名称  n  要用引号引起来)

    var v = localStorage.getItem('n') ? localStorage.getItem('n') : "";  
    // 如果名称是  n 的数据存在 ,则将其读出 ,赋予变量  v  。 
    localStorage.setItem('n', v);                                           // 写入名称为 n、值为  v  的数据 
    localStorage.removeItem('n');                                          
    // 删除名称为  n  的数据    

    9. 使用特殊链接:
     如果你关闭自动识别后 ,又希望某些电话号码能够链接到 iPhone 的拨号功能 ,那么可以通过这样来声明电话链接 ,

    <a href="tel:12345654321">打电话给我</a>
    <a href="sms:12345654321">发短信</a>
    或用于单元格:
    <td οnclick="location.href='tel:122'">

    10. 自动大写与自动修正
    要关闭这两项功能,可以通过autocapitalize 与autocorrect 这两个选项:

    <input type="text" autocapitalize="off" autocorrect="off" />

    11. WebKit CSS:
    ①“盒模型”的具体描述性质的包围盒块内容,包括边界,填充等等。

    -webkit-border-bottom-left-radius: radius;
    -webkit-border-top-left-radius: horizontal_radius vertical_radius;
    -webkit-border-radius: radius;      //容器圆角
    -webkit-box-sizing: sizing_model; 边框常量值:border-box/content-box
    -webkit-box-shadow: hoff voff blur color; //容器阴影(参数分别为:水平X 方向偏移量;垂直Y 方向偏移量;高斯模糊半径值;阴影颜色值)
    -webkit-margin-bottom-collapse: collapse_behavior; 常量值:collapse/discard/separate
    -webkit-margin-start: width;
    -webkit-padding-start: width;
    -webkit-border-image: url(borderimg.gif) 25 25 25 25 round/stretch round/stretch;
    -webkit-appearance: push-button;   //内置的CSS 表现,暂时只支持push-button

    ②“视觉格式化模型”描述性质,确定了位置和大小的块元素。

    direction: rtl
    unicode-bidi: bidi-override; 常量:bidi-override/embed/normal

    ③“视觉效果”描述属性,调整的视觉效果块内容,包括溢出行为,调整行为,能见度,动画,变换,和过渡。

    clip: rect(10px, 5px, 10px, 5px)
    resize: auto; 常量:auto/both/horizontal/none/vertical
    visibility: visible; 常量: collapse/hidden/visible
    -webkit-transition: opacity 1s linear; 动画效果 ease/linear/ease-in/ease-out/ease-in-out
    -webkit-backface-visibility: visibler; 常量:visible(默认值)/hidden
    -webkit-box-reflect: right 1px; 镜向反转
    -webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom,
    from(transparent), color-stop(0.5, transparent), to(white));
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));;   //CSS 遮罩/蒙板效果
    -webkit-mask-attachment: fixed; 常量:fixed/scroll
    -webkit-perspective: value; 常量:none(默认)
    -webkit-perspective-origin: left top;
    -webkit-transform: rotate(5deg);
    -webkit-transform-style: preserve-3d; 常量:flat/preserve-3d; (2D 与3D)

    ④“生成的内容,自动编号,并列出”描述属性,允许您更改内容的一个组成部分,创建自动编号的章节和标题,和操纵的风格清单的内容。

    content: “Item” counter(section) ” “;
    This resets the counter.
    First section
    >two section
    three section
    counter-increment: section 1;
    counter-reset: section;

    ⑤“分页媒体”描述性能与外观的属性,控制印刷版本的网页,如分页符的行为。

    page-break-after: auto; 常量:always/auto/avoid/left/right
    page-break-before: auto; 常量:always/auto/avoid/left/right
    page-break-inside: auto; 常量:auto/avoid

    ⑥“颜色和背景”描述属性控制背景下的块级元素和颜色的文本内容的组成部分。

    -webkit-background-clip: content; 常量:border/content/padding/text
    -webkit-background-origin: padding; 常量:border/content/padding/text
    -webkit-background-size: 55px; 常量:length/length_x/length_y

    ⑦ “字型”的具体描述性质的文字字体的选择范围内的一个因素。报告还描述属性用于下载字体定义。

    unicode-range:
     U+00-FF, U+980-9FF;

    ⑧“文本”描述属性的特定文字样式,间距和自动滚屏。

    text-shadow: #00FFFC 10px 10px 5px;
    text-transform: capitalize; 常量:capitalize/lowercase/none/uppercase
    word-wrap: break-word; 常量:break-word/normal
    -webkit-marquee: right large infinite normal 10s; 常量:direction(方向) increment(迭代次数) repetition(重复) style(样式) speed(速度);
    -webkit-marquee-direction: ahead/auto/backwards/down/forwards/left/reverse/right/up
    -webkit-marquee-incrementt: 1-n/infinite(无穷次)
    -webkit-marquee-speed: fast/normal/slow
    -webkit-marquee-style: alternate/none/scroll/slide
    -webkit-text-fill-color: #ff6600; 常量:capitalize, lowercase, none, uppercase
    -webkit-text-security: circle; 常量:circle/disc/none/square
    -webkit-text-size-adjust: none; 常量:auto/none;
    -webkit-text-stroke: 15px #fff;
    -webkit-line-break: after-white-space; 常量:normal/after-white-space
    -webkit-appearance: caps-lock-indicator;
    -webkit-nbsp-mode: space; 常量: normal/space
    -webkit-rtl-ordering: logical; 常量:visual/logical
    -webkit-user-drag: element; 常量:element/auto/none
    -webkit-user-modify: read- only; 常量:read-write-plaintext-only/read-write/read-only
    -webkit-user-select: text; 常量:text/auto/none

    ⑨“表格”描述的布局和设计性能表的具体内容。

    -webkit-border-horizontal-spacing: 2px;
    -webkit-border-vertical-spacing: 2px;
    -webkit-column-break-after: right; 常量:always/auto/avoid/left/right
    -webkit-column-break-before: right; 常量:always/auto/avoid/left/right
    –webkit-column-break-inside: logical; 常量:avoid/auto
    -webkit-column-count: 3; //分栏
    -webkit-column-rule: 1px solid #fff;

    style:dashed,dotted,double,groove,hidden,inset,none,outset,ridge,solid

    ⑩“用户界面”描述属性,涉及到用户界面元素在浏览器中,如滚动文字区,滚动条,等等。报告还描述属性,范围以外的网页内容,如光标的标注样式和显示当您按住触摸触摸
    目标,如在iPhone上的链接。

    -webkit-box-align:baseline,center,end,start,stretch 常量:baseline/center/end/start/stretch
    -webkit-box-direction:normal;常量:normal/reverse
    -webkit-box-flex: flex_valuet
    -webkit-box-flex-group: group_number
    -webkit-box-lines: multiple; 常量:multiple/single
    -webkit-box-ordinal-group: group_number
    -webkit-box-orient: block-axis; 常量:block-axis/horizontal/inline-axis/vertical/orientation
    –webkit-box-pack: alignment; 常量:center/end/justify/start

    12. 动画过渡
    这是 Webkit 中最具创新力的特性:使用过渡函数定义动画。

    -webkit-animation: title infinite ease-in-out 3s;
    animation 有这几个属性:
    -webkit-animation-name: //属性名,就是我们定义的keyframes
    -webkit-animation-duration:3s //持续时间
    -webkit-animation-timing-function: //过渡类型:ease/ linear(线性) /ease-in(慢到快)/ease-out(快到慢) /ease-in-out(慢到快再到慢) /cubic-bezier
    -webkit-animation-delay:10ms //动画延迟(默认0)
    -webkit-animation-iteration-count: //循环次数(默认1),infinite 为无限
    -webkit-animation-direction: //动画方式:normal(默认 正向播放); alternate(交替方向,第偶数次正向播放,第奇数次反向播放)

    这些同样是可以简写的。但真正让我觉的很爽的是keyframes,它能定义一个动画的转变过程供调用,过程为0%到100%或from(0%)到to(100%)。简单点说,只要你有想法,你想让元素在这个过程中以什么样的方式改变都是很简单的。

    -webkit-transform: 类型(缩放scale/旋转rotate/倾斜skew/位移translate)
    scale(num,num) 放大倍率。scaleX 和 scaleY(3),可以简写为:scale(* , *)
    rotate(*deg) 转动角度。rotateX 和 rotateY,可以简写为:rotate(* , *)
    Skew(*deg) 倾斜角度。skewX 和skewY,可简写为:skew(* , *)
    translate(*,*) 坐标移动。translateX 和translateY,可简写为:translate(* , *)。

    实现模拟弹出消息框(Alert)的例子:
    ①定义过渡(在<style type="text/css">段中描述keyframes):

    @-webkit-keyframes DivZoom
    {
    0% { -webkit-transform: scale(0.01) }
    60% { -webkit-transform: scale(1.05) }
    80% { -webkit-transform: scale(0.95) }
    100% { -webkit-transform: scale(1.00) }
    }
    .sZoom { -webkit-animation: DivZoom 0.5s ease-in-out }

    (很容易看懂,将元素从缩小的0.01 倍--很小但不能为0 倍,放大到1.05 倍,再缩小到0.95倍,最后到1 倍即正常大小。整个过渡过程事件为0.5 秒,动画方式为ease-in-out,即慢到快再到慢,默认只进行1 次过渡。这正是大家经常看到的 iPhone 弹出的提示信息的动画效果!)
    ②定义元素(在<body>段中):

    <div id="layerH" style="-webkit-border-radius:12px; border:2px solid #FFF;-webkit-box-shadow: 0px 2px 4px #888;position: absolute; left: 24px; top: 106px;<br>width: 256px; height: 268px; padding-left: 8px; padding-right: 8px;color: #FFFFFF; text-shadow: 1px 1px 1px #000; text-align: center;background-color: RGBA(32,48,96,0.9);
    background-image:url('BG-Msg.png'); background-repeat:no-repeat;
    z-index: 1; visibility: hidden; ">
    <p><span style="font-size: 16pt; font-weight: bold">使用说明</span></p>
    <hr noshadesize="1">
    <div id="HelpText" style="height: 120px">说明文字</div>
    <hr noshadesize="1">
    <form name="formV" method="POST">
    <input type="button" value="确认" name="B1" style="width: 100%; height: 40px; font-size: 14pt; ont-weight: bold;color: #FFFFFF; text-shadow: 0px -1px 1px #000;"οnclick=" layerH.style.visibility='hidden'">
    </form>
    </div>

    ③启动动画(在 javascript 定义的函数中)

    function pHelp()
    {
    layerH.style.visibility = 'visible'
    layerH.style.cssText = "-webkit-animation-delay: " + Math.random() + "ms"
    layerH.className = 'sZoom'
    }

    (这个启动函数就很好理解了。但是为什么要使用-webkit-animation-delay 这句呢?因为当一个元素过渡显示完成后,若其样式没有变化,下一次将无法进行过渡动画显示。我们巧妙的利用其动画延迟时间定义,使其有所变化,就避免了上述问题。其中使用随机数函数Math.random(),产生一个大于0 小于1 的随机数。当然,延迟零点几毫秒,用户是不会察觉的。)

    补充:
    1. 锁定 viewport

    ontouchmove="event.preventDefault()" //锁定viewport,任何屏幕操作不移动用户界面(弹出键盘除外)。

    2. 被点击元素的外观变化,可以使用样式来设定:

    -webkit-tap-highlight-color:

    颜色
    3. 侦测iPhone/iPod
    开发特定设备的移动网站,首先要做的就是设备侦测了。下面是使用Javascript侦测iPhone/iPod的UA,然后转向到专属的URL。

    if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
      if (document.cookie.indexOf("iphone_redirect=false") == -1) {
        window.location = "http://m.example.com";
      }
    }

    虽然Javascript是可以在水果设备上运行的,但是用户还是可以禁用。它也会造成客户端刷新和额外的数据传输,所以下面是服务器端侦测和转向:?

    if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod'))
     {
      header('Location:http://yoursite.com/iphone');
      exit();
    }

    4. 阻止旋转屏幕时自动调整字体大小

    html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

    5. iPhone才识别的CSS
    如果不想设备侦测,可以用CSS媒体查询来专为iPhone/iPad定义样式。

    @media screen and (max-device-width: 480px) {}

    6. 缩小图片
    网站的大图通常宽度都超过480像素,如果用前面的代码限制了缩放,这些图片在iPhone版显示显然会超过屏幕。好在iPhone机能还够,我们可以用CSS让iPhone自动将大图片缩小显示。

    @media screen and (max-device-width:480px){
      img{max-width:100%;height:auto;}
    }

    7. 模拟:hover伪类
    因为iPhone并没有鼠标指针,所以没有hover事件。那么CSS :hover伪类就没用了。但是iPhone有Touch事件,onTouchStart 类似 onMouseOver,onTouchEnd 类似 onMouseOut。所以我们可以用它来模拟hover。使用Javascript:

    var myLinks = document.getElementsByTagName('a');
    for(var i = 0; i < myLinks.length; i++){
      myLinks[i].addEventListener(’touchstart’,
    function(){this.className = “hover”;}, false);
      myLinks[i].addEventListener(’touchend’,
    function(){this.className = “”;}, false);
    }

    然后用CSS增加hover效果:

    a:hover, a.hover { /*
     你的hover效果 */ }

    这样设计一个链接,感觉可以更像按钮。并且,这个模拟可以用在任何元素上。

    展开全文
  • WebKit的默认样式

    千次阅读 2018-08-22 18:18:01
    来源:https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css 1 /* 2 * The default style sheet used to render HTML. 3 * 4 * Copyright (C) 2000 Lars Knoll (knoll@kde.org) 5 * Copyr...

    来源:https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

    /*
        * The default style sheet used to render HTML.
        *
        * Copyright (C) 2000 Lars Knoll (knoll@kde.org)
        * Copyright (C) 2003-2011, 2014 Apple Inc. All rights reserved.
        *
        * This library is free software; you can redistribute it and/or
        * modify it under the terms of the GNU Library General Public
        * License as published by the Free Software Foundation; either
        * version 2 of the License, or (at your option) any later version.
        *
         * This library is distributed in the hope that it will be useful,
         * but WITHOUT ANY WARRANTY; without even the implied warranty of
         * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
         * Library General Public License for more details.
         *
         * You should have received a copy of the GNU Library General Public License
         * along with this library; see the file COPYING.LIB.  If not, write to
         * the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
         * Boston, MA 02110-1301, USA.
         *
         */
    
        @namespace "http://www.w3.org/1999/xhtml";
    
        html {
            display: block;
        }
    
        /* children of the <head> element all have display:none */
        head, link, meta, script, style, title {
            display: none;
        }
    
        /* generic block-level elements */
    
        body {
            display: block;
            margin: 8px;
        }
    
        p {
            display: block;
            -webkit-margin-before: 1__qem;
            -webkit-margin-after: 1__qem;
            -webkit-margin-start: 0;
            -webkit-margin-end: 0;
        }
    
        address, article, aside, div, footer, header, hgroup, layer, main, nav, section {
            display: block;
        }
    
        marquee {
            display: inline-block;
        }
    
        blockquote {
            display: block;
            -webkit-margin-before: 1__qem;
            -webkit-margin-after: 1em;
            -webkit-margin-start: 40px;
            -webkit-margin-end: 40px;
        }
    
        figcaption {
            display: block;
        }
    
        figure {
            display: block;
            -webkit-margin-before: 1em;
            -webkit-margin-after: 1em;
            -webkit-margin-start: 40px;
            -webkit-margin-end: 40px;
        }
    
        q {
            display: inline;
        }
    
        q::before {
            content: open-quote;
        }
    
        q::after {
            content: close-quote;
        }
    
        center {
            display: block;
            /* special centering to be able to emulate the html4/netscape behaviour */
            text-align: -webkit-center;
        }
    
        hr {
            display: block;
            -webkit-margin-before: 0.5em;
            -webkit-margin-after: 0.5em;
            -webkit-margin-start: auto;
            -webkit-margin-end: auto;
            border-style: inset;
            border-width: 1px;
        }
    
        video {
            object-fit: contain;
        #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
            -webkit-tap-highlight-color: transparent;
        #endif
        }
    
        /* heading elements */
    
        h1 {
            display: block;
            font-size: 2em;
            -webkit-margin-before: 0.67__qem;
            -webkit-margin-after: 0.67em;
            -webkit-margin-start: 0;
            -webkit-margin-end: 0;
            font-weight: bold;
        }
    
        :matches(article, aside, nav, section) h1 {
            font-size: 1.5em;
            -webkit-margin-before: 0.83__qem;
            -webkit-margin-after: 0.83em;
        }
    
        :matches(article, aside, nav, section) :matches(article, aside, nav, section) h1 {
            font-size: 1.17em;
            -webkit-margin-before: 1__qem;
            -webkit-margin-after: 1em;
        }
    
        :matches(article, aside, nav, section) :matches(article, aside, nav, section) :matches(article, aside, nav, section) h1 {
            font-size: 1.00em;
            -webkit-margin-before: 1.33__qem;
            -webkit-margin-after: 1.33em;
        }
    
        :matches(article, aside, nav, section) :matches(article, aside, nav, section) :matches(article, aside, nav, section) :matches(article, aside, nav, section) h1 {
            font-size: .83em;
            -webkit-margin-before: 1.67__qem;
            -webkit-margin-after: 1.67em;
        }
    
        :matches(article, aside, nav, section) :matches(article, aside, nav, section) :matches(article, aside, nav, section) :matches(article, aside, nav, section) :matches(article, aside, nav, section) h1 {
            font-size: .67em;
            -webkit-margin-before: 2.33__qem;
            -webkit-margin-after: 2.33em;
        }
    
        h2 {
            display: block;
            font-size: 1.5em;
            -webkit-margin-before: 0.83__qem;
            -webkit-margin-after: 0.83em;
            -webkit-margin-start: 0;
            -webkit-margin-end: 0;
            font-weight: bold;
        }
    
        h3 {
            display: block;
            font-size: 1.17em;
            -webkit-margin-before: 1__qem;
            -webkit-margin-after: 1em;
            -webkit-margin-start: 0;
            -webkit-margin-end: 0;
            font-weight: bold;
        }
    
        h4 {
            display: block;
            -webkit-margin-before: 1.33__qem;
            -webkit-margin-after: 1.33em;
            -webkit-margin-start: 0;
            -webkit-margin-end: 0;
            font-weight: bold;
        }
    
        h5 {
            display: block;
            font-size: .83em;
            -webkit-margin-before: 1.67__qem;
            -webkit-margin-after: 1.67em;
            -webkit-margin-start: 0;
            -webkit-margin-end: 0;
            font-weight: bold;
        }
    
        h6 {
            display: block;
            font-size: .67em;
            -webkit-margin-before: 2.33__qem;
            -webkit-margin-after: 2.33em;
            -webkit-margin-start: 0;
            -webkit-margin-end: 0;
            font-weight: bold;
        }
    
        /* tables */
    
        table {
            display: table;
            border-collapse: separate;
            border-spacing: 2px;
            border-color: gray;
        }
    
        thead {
            display: table-header-group;
            vertical-align: middle;
            border-color: inherit;
        }
    
        tbody {
            display: table-row-group;
            vertical-align: middle;
            border-color: inherit;
        }
    
        tfoot {
            display: table-footer-group;
            vertical-align: middle;
            border-color: inherit;
        }
    
        /* for tables without table section elements (can happen with XHTML or dynamically created tables) */
        table > tr {
            vertical-align: middle;
        }
    
        col {
            display: table-column;
        }
    
        colgroup {
            display: table-column-group;
        }
    
        tr {
            display: table-row;
            vertical-align: inherit;
            border-color: inherit;
        }
    
        td, th {
            display: table-cell;
            vertical-align: inherit;
        }
    
        th {
            font-weight: bold;
        }
    
        caption {
            display: table-caption;
            text-align: -webkit-center;
        }
    
        /* lists */
    
        ul, menu, dir {
            display: block;
            list-style-type: disc;
            -webkit-margin-before: 1__qem;
            -webkit-margin-after: 1em;
            -webkit-margin-start: 0;
            -webkit-margin-end: 0;
            -webkit-padding-start: 40px;
        }
    
        ol {
            display: block;
            list-style-type: decimal;
            -webkit-margin-before: 1__qem;
            -webkit-margin-after: 1em;
            -webkit-margin-start: 0;
            -webkit-margin-end: 0;
            -webkit-padding-start: 40px;
        }
    
        li {
            display: list-item;
            text-align: -webkit-match-parent;
        }
    
        ul ul, ol ul {
            list-style-type: circle;
        }
    
        ol ol ul, ol ul ul, ul ol ul, ul ul ul {
            list-style-type: square;
        }
    
        dd {
            display: block;
            -webkit-margin-start: 40px;
        }
    
        dl {
            display: block;
            -webkit-margin-before: 1__qem;
            -webkit-margin-after: 1em;
            -webkit-margin-start: 0;
            -webkit-margin-end: 0;
        }
    
        dt {
            display: block;
        }
    
        ol ul, ul ol, ul ul, ol ol {
            -webkit-margin-before: 0;
            -webkit-margin-after: 0;
        }
    
        /* form elements */
    
        form {
            display: block;
            margin-top: 0__qem;
        }
    
        label {
            cursor: default;
        }
    
        legend {
            display: block;
            -webkit-padding-start: 2px;
            -webkit-padding-end: 2px;
            border: none;
        }
    
        fieldset {
            display: block;
            -webkit-margin-start: 2px;
            -webkit-margin-end: 2px;
            -webkit-padding-before: 0.35em;
            -webkit-padding-start: 0.75em;
            -webkit-padding-end: 0.75em;
            -webkit-padding-after: 0.625em;
            border: 2px groove ThreeDFace;
            min-width: min-content;
        }
    
        button {
            -webkit-appearance: button;
        }
    
        /* Form controls don't go vertical. */
        input, textarea, keygen, select, button, meter, progress {
            -webkit-writing-mode: horizontal-tb !important;
        }
    
        input, textarea, keygen, select, button {
            margin: 0__qem;
        #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
            font: -webkit-small-control;
        #endif
            color: initial;
            letter-spacing: normal;
            word-spacing: normal;
            line-height: normal;
            text-transform: none;
            text-indent: 0;
            text-shadow: none;
            display: inline-block;
            text-align: start;
        }
    
        input[type="hidden"] {
            display: none;
        }
    
        #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
        textarea,
        input[type="range"],
        #endif
        input,
        input:matches([type="password"], [type="search"]) {
            -webkit-appearance: textfield;
        #if defined(WTF_PLATFORM_MAC) && WTF_PLATFORM_MAC
            color: text;
            background-color: -apple-system-control-background;
        #else
            background-color: white;
        #endif
        #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
            border-radius: 5px;
            font: 11px Helvetica, -webkit-pictograph;
            border: 1px solid #4c4c4c;
            padding: 0.2em 0.5em 0.3em 0.5em;
        #else
            border: 2px inset;
            padding: 1px;
        #endif
            -webkit-rtl-ordering: logical;
            -webkit-user-select: text;
            cursor: auto;
        }
    
        #if defined(WTF_PLATFORM_MAC) && WTF_PLATFORM_MAC
        @media (prefers-dark-interface) {
            input,
            input:matches([type="password"], [type="search"]) {
                background-color: transparent;
            }
        }
        #endif
    
        input[type="search"] {
            -webkit-appearance: searchfield;
            box-sizing: border-box;
        }
    
        input::-webkit-textfield-decoration-container {
            display: flex;
            align-items: center;
            content: none !important;
        }
    
        input::-webkit-clear-button {
            -webkit-appearance: searchfield-cancel-button;
            display: inline-block;
            flex: none;
            margin-left: 2px;
        }
    
        input[type="search"]::-webkit-search-cancel-button {
            -webkit-appearance: searchfield-cancel-button;
            display: block;
            flex: none;
            align-self: flex-start;
            margin: auto 0;
        }
    
        input[type="search"]::-webkit-search-decoration {
            -webkit-appearance: searchfield-decoration;
            display: block;
            flex: none;
            align-self: flex-start;
            margin: auto 0;
        }
    
        input[type="search"]::-webkit-search-results-decoration {
            -webkit-appearance: searchfield-results-decoration;
            display: block;
            flex: none;
            align-self: flex-start;
            margin: auto 0;
        }
    
        input[type="search"]::-webkit-search-results-button {
            -webkit-appearance: searchfield-results-button;
            display: block;
            flex: none;
        }
    
        #if defined(ENABLE_DATALIST_ELEMENT) && ENABLE_DATALIST_ELEMENT
        datalist {
            display: none;
        }
        #endif
    
        #if defined(ENABLE_INPUT_TYPE_DATE) && ENABLE_INPUT_TYPE_DATE
        input[type="date"] {
            align-items: center;
            -webkit-appearance: menulist-button;
            display: -webkit-inline-flex;
            overflow: hidden;
        #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
            width: 10em;
        #endif
        }
        #endif
        #if defined(ENABLE_INPUT_TYPE_DATETIME_INCOMPLETE) && ENABLE_INPUT_TYPE_DATETIME_INCOMPLETE
        input[type="datetime"] {
            align-items: center;
            -webkit-appearance: menulist-button;
            display: -webkit-inline-flex;
            overflow: hidden;
        #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
            width: 10em;
        #endif
        }
        #endif
        #if defined(ENABLE_INPUT_TYPE_DATETIMELOCAL) && ENABLE_INPUT_TYPE_DATETIMELOCAL
        input[type="datetime-local"] {
            align-items: center;
            -webkit-appearance: menulist-button;
            display: -webkit-inline-flex;
            overflow: hidden;
        #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
            width: 10em;
        #endif
        }
        #endif
        #if defined(ENABLE_INPUT_TYPE_MONTH) && ENABLE_INPUT_TYPE_MONTH
        input[type="month"] {
            align-items: center;
            -webkit-appearance: menulist-button;
            display: -webkit-inline-flex;
            overflow: hidden;
        #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
            width: 10em;
        #endif
        }
        #endif
        #if defined(ENABLE_INPUT_TYPE_TIME) && ENABLE_INPUT_TYPE_TIME
        input[type="time"] {
            align-items: center;
            -webkit-appearance: menulist-button;
            display: -webkit-inline-flex;
            overflow: hidden;
        #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
            width: 10em;
        #endif
        }
        #endif
        #if defined(ENABLE_INPUT_TYPE_WEEK) && ENABLE_INPUT_TYPE_WEEK
        #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
        input[type="week"] {
            align-items: center;
            -webkit-appearance: menulist-button;
            display: -webkit-inline-flex;
            overflow: hidden;
            width: 10em;
        }
        #endif
        #endif
    
        input::-webkit-date-and-time-value {
        #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
            margin-right: 18px;
        #else
            margin: 1px 24px 1px 4px;
            white-space: pre;
        #endif
        }
    
        input::-webkit-inner-spin-button {
            -webkit-appearance: inner-spin-button;
            display: block;
            position: relative;
            cursor: default;
            /* This height property is ignored for input type "number" and others which
             * use RenderTextControlSingleLine as renderer which sets height of spin
             * button in layout(). */
            height: 1.5em;
            flex: none;
            -webkit-user-select: none;
        }
    
        input::-webkit-strong-password-auto-fill-button {
            flex-shrink: 1 !important;
            font-family: -apple-system !important;
            -webkit-text-security: none !important;
            -webkit-user-select: none !important;
            pointer-events: none !important;
            text-align: right !important;
            color: rgba(0, 0, 0, 0.8) !important;
            padding-left: 6px !important;
            white-space: nowrap !important;
        }
    
        input::-webkit-credentials-auto-fill-button {
            -webkit-mask-image: -webkit-image-set(url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAMCAYAAAC9QufkAAAAAXNSR0IB2cksfwAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAAsTAAALEwEAmpwYAAADyWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDx4bXA6TW9kaWZ5RGF0ZT4yMDE1LTA0LTAzVDE2OjA2OjI1PC94bXA6TW9kaWZ5RGF0ZT4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5BZG9iZSBQaG90b3Nob3AgQ0MgMjAxNCAoTWFjaW50b3NoKTwveG1wOkNyZWF0b3JUb29sPgogICAgICAgICA8eG1wOkNyZWF0ZURhdGU+MjAxNS0wNC0wM1QxNjowMzoxNjwveG1wOkNyZWF0ZURhdGU+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjcyPC90aWZmOllSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpSZXNvbHV0aW9uVW5pdD4yPC90aWZmOlJlc29sdXRpb25Vbml0PgogICAgICAgICA8dGlmZjpYUmVzb2x1dGlvbj43MjwvdGlmZjpYUmVzb2x1dGlvbj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWERpbWVuc2lvbj4xNTwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4xMjwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgoz37ZdAAAA5ElEQVQoFY2RsQ5BQRBFd9EgEYXv8QlaEqVGpfUPao3oKXyEQiJI1ERESaGmwnPu2k2QJ2uS82Z2du7s7jyTJInBWnCABeygoXwM6kwN1GELFo7wgOo/4gmFEovzWzyMiTMUlyFYJQT4wlucGko8T90xZv0j/5EusVpCuLr8FPK6NraHPmT8Oks8gI2bKEEOZhAauEJf3PX5Eb4ImpEG2gni0NWJvwdFYRvuoIHeoOUa++56+wpSxb6myf4J6qG5VWCt1ckPvHsksf531HSiDJ1VV9n15eJfJ+YkvWcMF+jFZa+KJ554xIc+jempAAAAAElFTkSuQmCC") 1x, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAYCAYAAADtaU2/AAAAAXNSR0IB2cksfwAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAAsTAAALEwEAmpwYAAADyWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDx4bXA6TW9kaWZ5RGF0ZT4yMDE1LTA0LTAzVDE2OjA2OjIxPC94bXA6TW9kaWZ5RGF0ZT4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5BZG9iZSBQaG90b3Nob3AgQ0MgMjAxNCAoTWFjaW50b3NoKTwveG1wOkNyZWF0b3JUb29sPgogICAgICAgICA8eG1wOkNyZWF0ZURhdGU+MjAxNS0wNC0wM1QxNjowMzoyNTwveG1wOkNyZWF0ZURhdGU+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjcyPC90aWZmOllSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpSZXNvbHV0aW9uVW5pdD4yPC90aWZmOlJlc29sdXRpb25Vbml0PgogICAgICAgICA8dGlmZjpYUmVzb2x1dGlvbj43MjwvdGlmZjpYUmVzb2x1dGlvbj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWERpbWVuc2lvbj4zMDwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4yNDwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgpGMDB3AAAB8UlEQVRIDbVWO07DQBS0QSJUNJQcAloOQMEZ6InSUMEBkFJEQihQkQKJklQUlFBQQoH4SHAKJDokAgIz4+wLs5u15RjypOF9dvaN197dkCS/NodwC7gG3hxuXI1jUcuyLKkDa7aE4B7IHM7hCcs5Rs6Y1RHlHBpXo6JXeXX45xLOxB8QN2QsD+sKz2B2E1iRhqnEsxIvI96U/M8hv6mtyjxXehGpk+tZ3RVzdQOgcPN4KkPuvNbse2mtSsxXPYl9TkIu41L4rowQjD0Fee2UwqcTzA65/TRNB0CzSg/ygHegT34D4FGxjVXkHx0XbmQfiIzfKtto4LWEy3m58XLQs2zNzPPByAltGwXj0EfFUecbUd4O8pFxZ98CSrC4bNfvypxvxBu6cubAl3DaRSfBxNRjXtxckw5GjU+RXJweUNGOPRTqnrWRWQP1HkkTaRSK98CLioYr5vV4BqigxarlxSbsmu0XzO8qLxRmw/WCiRyLmjYEgTfhEWAPTM88VV4ozDP9HEyyBijHLdKQ4l2AR+YAGBMNhcFJVgETU8+xqIXCVXNtxm9cdJyU58VVhUKe/khwB+55XaeYqDC/zdoUtbzWFDPj7fQCLFjB+Vf4xaA2SvkK65iumLvwJNLkOFL79xJXfQhwlQTjsnu61r+2fEs/b4ZbzrEPMzEAAAAASUVORK5CYII=") 2x);
            -webkit-mask-size: 15px 12px;
            width: 15px;
            height: 12px;
            margin-left: 3px;
            margin-right: 2px;
            background-color: black;
            flex: none;
            -webkit-user-select: none;
        }
    
        input::-webkit-credentials-auto-fill-button:hover {
            background-color: rgb(0, 122, 255);
        }
    
        input::-webkit-credentials-auto-fill-button:active {
            background-color: rgb(0, 60, 219);
        }
    
        input::-webkit-contacts-auto-fill-button {
            -webkit-mask-image: -webkit-image-set(url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAMCAYAAABm+UGAAAAAXNSR0IArs4c6QAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAAsTAAALEwEAmpwYAAADzWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDx4bXA6TW9kaWZ5RGF0ZT4yMDE2LTAzLTE2VDE0OjM4OjM5PC94bXA6TW9kaWZ5RGF0ZT4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5BZG9iZSBQaG90b3Nob3AgQ0MgMjAxNSAoTWFjaW50b3NoKTwveG1wOkNyZWF0b3JUb29sPgogICAgICAgICA8eG1wOkNyZWF0ZURhdGU+MjAxNS0wNC0wM1QxNjowMzoxNjwveG1wOkNyZWF0ZURhdGU+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjcyPC90aWZmOllSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpSZXNvbHV0aW9uVW5pdD4yPC90aWZmOlJlc29sdXRpb25Vbml0PgogICAgICAgICA8dGlmZjpYUmVzb2x1dGlvbj43MjwvdGlmZjpYUmVzb2x1dGlvbj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT42NTUzNTwvZXhpZjpDb2xvclNwYWNlPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MjI8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+MTI8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KDsFf/AAAALpJREFUOMtjYMAEjECcAcTXgPgBEPcBMQ8DHvD//38MjA0UgtSi4UpqGDwdi8GTqGFwEz1dPJkaBttjMdgah5l3gHgKEDNBDWMG4plAfB2XI14hGfoEj2PLoWqWATE3EK8G4n9AnIdLwyQkg7sY8ANQ0vwLxK+B+A8QJ+MKCnUgPoZk8D4gFiVgeDQQPwficPQwFoCmhudYwheGQeHZAFVLVORpAPFLPAai4xdQXxE0eDYJhsLwNEIGAwBaGtf92KSJygAAAABJRU5ErkJggg==") 1x, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAYCAYAAACBbx+6AAAAAXNSR0IArs4c6QAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAAsTAAALEwEAmpwYAAADzWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDx4bXA6TW9kaWZ5RGF0ZT4yMDE2LTAzLTE2VDE0OjM4OjQ5PC94bXA6TW9kaWZ5RGF0ZT4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5BZG9iZSBQaG90b3Nob3AgQ0MgMjAxNSAoTWFjaW50b3NoKTwveG1wOkNyZWF0b3JUb29sPgogICAgICAgICA8eG1wOkNyZWF0ZURhdGU+MjAxNS0wNC0wM1QxNjowMzoyNTwveG1wOkNyZWF0ZURhdGU+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjcyPC90aWZmOllSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpSZXNvbHV0aW9uVW5pdD4yPC90aWZmOlJlc29sdXRpb25Vbml0PgogICAgICAgICA8dGlmZjpYUmVzb2x1dGlvbj43MjwvdGlmZjpYUmVzb2x1dGlvbj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT42NTUzNTwvZXhpZjpDb2xvclNwYWNlPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+NDQ8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+MjQ8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KZQbeMQAAAZxJREFUWMPNlrFKA0EQhhMUBVErCy0ECxFUECzEWt9ALNMbDkv1AQSLgEhEEG0sBAsbEYKFj6AIVtoJQTClBALRmBjXf2AP1mNvM3vZizvwwR3szX0sszObyfBjFhyBV1AFJbAGBrkJhBB/npPAiT4QgBb9R8MbmPFJ+DhGVOXKF+F+UGcI130RHmbIhoz4UhJNhmxL1roXwmWG8IsvJTEEnhnCj77s8LRFDU9aCF+CL5BnSuZBQ35njCyoMGQrci1XWD0XQQfZQFnb5JTeBUP43LKGtyPfB4adVdftcP5D7erDIPsJRm0PHWJXyfEDchHZHGgra/a4XYLiwSB8l/QugSgoedqhtEa2YNPWKA4MwvvdXH400qdxsjbCEzFlUQNj3d7WDBtSTDI4KAbAtyZhg9MdGMKU4ySSm96zSYXnDSUx5eI+LKWLsnUd6mQ7CdPkWgAb4MkgfA/Wwfh/TbplOVFqFlNOvcyfgaVeCM+B6wSScdyAxbSEN+VsF46hg7rlWnhVThqREpR7xaXwbYqyISWXwtUeCL+7Ev4FRky1YsGhhMUAAAAASUVORK5CYII=") 2x);
            -webkit-mask-size: 22px 12px;
            width: 22px;
            height: 12px;
            margin-left: 3px;
            margin-right: 2px;
            background-color: black;
            flex: none;
            -webkit-user-select: none;
        }
    
        input::-webkit-contacts-auto-fill-button:hover {
            background-color: rgb(0, 122, 255);
        }
    
        input::-webkit-contacts-auto-fill-button:active {
            background-color: rgb(0, 60, 219);
        }
    
        input::-webkit-caps-lock-indicator {
            -webkit-appearance: caps-lock-indicator;
            content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17"><path fill="black" fill-opacity="0.4" d="M12.5 0.5A 4 4 0 0 1 16.5 4.5L 16.5 12.5A 4 4 0 0 1 12.5 16.5L 4.5 16.5A 4 4 0 0 1 0.5 12.5L 0.5 4.5A 4 4 0 0 1 4.5 0.5L 12.5 0.5M 8.5 2L 4 7L 6.25 7L 6.25 10.25L 10.75 10.25L 10.75 7L 13 7L 8.5 2M 10.75 12L 6.25 12L 6.25 14.25L 10.75 14.25L 10.75 12"/></svg>');
            align-self: stretch;
            flex: none;
            -webkit-user-select: none;
        }
    
        #if defined(ENABLE_DATALIST_ELEMENT) && ENABLE_DATALIST_ELEMENT
        input::-webkit-list-button {
            -webkit-appearance: list-button;
            display: block;
            position: relative;
            cursor: default;
            align-self: stretch;
            flex: none;
            -webkit-user-select: none;
            width: 16px;
            height: 100%;
        }
        #endif
    
        keygen, select {
            border-radius: 5px;
        }
    
        keygen::-webkit-keygen-select {
            margin: 0px;
        }
    
        textarea {
            -webkit-appearance: textarea;
        #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
        #if defined(WTF_PLATFORM_MAC) && WTF_PLATFORM_MAC
            color: text;
            background-color: -apple-system-control-background;
        #else
            background-color: white;
        #endif
            border: 1px solid;
            -webkit-rtl-ordering: logical;
            -webkit-user-select: text;
        #else
            -webkit-nbsp-mode: space;
            -webkit-line-break: after-white-space;
        #endif
            flex-direction: column;
            resize: auto;
            cursor: auto;
            padding: 2px;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
    
        ::placeholder {
            -webkit-text-security: none;
            color: darkGray;
            pointer-events: none !important;
        }
    
        input::placeholder {
            white-space: pre;
            word-wrap: normal;
            overflow: hidden;
        }
    
        input[type="password"] {
            -webkit-text-security: disc !important;
        }
    
        input:matches([type="hidden"], [type="image"], [type="file"]) {
            -webkit-appearance: initial;
            padding: initial;
            background-color: initial;
            border: initial;
        }
    
        input[type="file"] {
            align-items: baseline;
            color: inherit;
            text-align: start !important;
        }
    
        input:-webkit-autofill-strong-password {
            -webkit-text-security: none !important;
            -webkit-user-select: none !important;
            cursor: default !important;
            font-family: monospace;
        }
    
        input:-webkit-autofill, input:-webkit-autofill-strong-password {
            background-color: #FAFFBD !important;
            background-image: none !important;
            color: #000000 !important;
        }
    
        input:matches([type="radio"], [type="checkbox"]) {
            margin: 3px 2px;
        #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
            border: 1px solid #4c4c4c;
            box-sizing: border-box;
        #else
            padding: initial;
            background-color: initial;
            border: initial;
        #endif
        }
    
        input:matches([type="button"], [type="submit"], [type="reset"]) {
            -webkit-appearance: push-button;
            white-space: pre;
        }
    
        input[type="file"]::-webkit-file-upload-button {
            -webkit-appearance: push-button;
            white-space: nowrap;
            margin: 0;
            font-size: inherit;
        }
    
        input:matches([type="button"], [type="submit"], [type="reset"]), input[type="file"]::-webkit-file-upload-button, button {
            align-items: flex-start;
            text-align: center;
            cursor: default;
            color: ButtonText;
        #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
            padding: 2px 6px 3px 6px;
            border: 2px outset ButtonFace;
            background-color: ButtonFace;
        #else
            padding: 0 1.0em;
            border: 1px solid #4c4c4c;
            /* We want to be as close to background-color:transparent as possible without actually being transparent. */
            background-color: rgba(255, 255, 255, 0.01);
            font: 11px Helvetica;
        #endif
            box-sizing: border-box;
        }
    
        input:matches([type="button"], [type="submit"], [type="reset"]):active, input[type="file"]::-webkit-file-upload-button:active, button:active {
            color: ActiveButtonText;
        }
    
        input[type="range"] {
            -webkit-appearance: slider-horizontal;
            padding: initial;
            border: initial;
            margin: 2px;
            color: #909090;
        }
    
        input[type="range"]::-webkit-slider-container, input[type="range"]::-webkit-media-slider-container {
            flex: 1;
            box-sizing: border-box;
            display: flex;
            align-contents: center;
        }
    
        input[type="range"]::-webkit-slider-runnable-track {
            flex: 1;
            align-self: center;
    
            box-sizing: border-box;
            display: block;
        }
    
        input[type="range"]::-webkit-slider-thumb, input[type="range"]::-webkit-media-slider-thumb {
            -webkit-appearance: sliderthumb-horizontal;
            box-sizing: border-box;
            display: block;
        #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
            background-color: white;
            border: 1px solid rgb(66, 66, 66);
            padding: 0px;
        #endif
        }
    
        #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
        input[type="range"]::-webkit-slider-thumb:active {
            background-color: black;
        }
    
        input:disabled, textarea:disabled {
            opacity: 0.4;
        }
    
        input[readonly], textarea[readonly] {
            border-color: rgb(188, 188, 188);
        }
    
        textarea::placeholder {
            text-indent: 2px;
        }
        #endif
    
        input:matches([type="button"], [type="submit"], [type="reset"]):disabled,
        input[type="file"]:disabled::-webkit-file-upload-button, button:disabled,
        select:disabled, keygen:disabled, optgroup:disabled, option:disabled,
        select[disabled]>option {
            color: GrayText;
        }
    
        #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
        input:matches([type="button"], [type="submit"], [type="reset"]):active, input[type="file"]:active::-webkit-file-upload-button, button:active {
            border-style: inset;
        }
    
        input:matches([type="button"], [type="submit"], [type="reset"]):active:disabled,
        input[type="file"]:active:disabled::-webkit-file-upload-button, button:active:disabled {
            border-style: outset;
        }
        #endif
    
        area, param {
            display: none;
        }
    
        input[type="checkbox"] {
            -webkit-appearance: checkbox;
        #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
            box-sizing: border-box;
        #else
            border-radius: 5px;
            width: 16px;
            height: 16px;
            padding: 0px;
            /* We want to be as close to background:transparent as possible without actually being transparent */
            background-color: rgba(255, 255, 255, 0.01);
        #endif
        }
    
        #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
        input[type="radio"] {
            -webkit-appearance: radio;
            border-radius: 50%;
            width: 16px;
            height: 16px;
            padding: 0px;
            /* We want to be as close to background:transparent as possible without actually being transparent */
            background-color: rgba(255, 255, 255, 0.01);
        }
    
        input[type="checkbox"]:indeterminate {
            background: rgba(0, 0, 0, 0.8);
        }
    
        input[type="checkbox"]:indeterminate:disabled {
            opacity: 0.4;
            background: rgba(0, 0, 0, 0.8);
        }
    
        input:matches([type="checkbox"], [type="radio"]):checked {
            background: rgba(0, 0, 0, 0.8);
            border-color: rgba(255, 255, 255, 0.0);
        }
    
        input:matches([type="checkbox"], [type="radio"]):checked:disabled {
            opacity: 0.4;
            background: rgba(0, 0, 0, 0.8);
        }
        #endif
    
        #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
        input[type="radio"] {
            -webkit-appearance: radio;
            box-sizing: border-box;
        }
        #endif
    
        #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
        select:focus {
            border-color: rgb(17, 46, 135);
        }
        #endif
    
        #if defined(ENABLE_INPUT_TYPE_COLOR) && ENABLE_INPUT_TYPE_COLOR
    
        input[type="color"] {
        #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
            -webkit-appearance: color-well;
        #endif
            width: 44px;
            height: 23px;
            outline: none;
        }
    
        input[type="color"]::-webkit-color-swatch-wrapper {
            display: flex;
            padding: 4px 2px;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
        }
    
        input[type="color"]::-webkit-color-swatch {
            background-color: #000000;
            border: 1px solid #8A8A8A;
            flex: 1;
        }
    
        #endif // defined(ENABLE_INPUT_TYPE_COLOR) && ENABLE_INPUT_TYPE_COLOR
    
        select {
            box-sizing: border-box;
        #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
            -webkit-appearance: menulist-button;
            letter-spacing: normal;
            word-spacing: normal;
            line-height: normal;
            border: 1px solid #4c4c4c;
            /* We want to be as close to background:transparent as possible without actually being transparent */
            background-color: rgba(255, 255, 255, 0.01);
            font: 11px Helvetica;
            padding: 0 0.4em 0 0.4em;
        #else
            -webkit-appearance: menulist;
            border: 1px solid;
        #if defined(WTF_PLATFORM_MAC) && WTF_PLATFORM_MAC
            color: text;
            background-color: -apple-system-control-background;
        #else
            color: black;
            background-color: white;
        #endif
        #endif
            align-items: center;
            white-space: pre;
            -webkit-rtl-ordering: logical;
            cursor: default;
        }
    
        #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
        select:matches([size], [multiple], [size][multiple]) {
            -webkit-appearance: listbox;
            align-items: flex-start;
            border: 1px inset gray;
            border-radius: initial;
            white-space: initial;
        }
    
        select:matches([size="0"], [size="1"]) {
            -webkit-appearance: menulist;
            align-items: center;
            border: 1px solid;
            border-radius: 5px;
            white-space: pre;
        }
        #endif
    
        optgroup {
            font-weight: bolder;
        }
    
        option {
            font-weight: normal;
        }
    
        output {
            display: inline;
        }
    
        /* form validation message bubble */
    
        ::-webkit-validation-bubble {
            display: inline-block;
            z-index: 2147483647;
            position: absolute;
            opacity: 0.95;
            line-height: 0;
            margin: 0;
            -webkit-text-security: none;
            transition: opacity 05.5s ease;
        }
    
        ::-webkit-validation-bubble-message {
            display: flex;
            position: relative;
            top: -4px;
            font: message-box;
            color: black;
            min-width: 50px;
            max-width: 200px;
            border: solid 2px #400;
            background: -webkit-gradient(linear, left top, left bottom, from(#f8ecec), to(#e8cccc));
            padding: 8px;
            border-radius: 8px;
            -webkit-box-shadow: 4px 4px 4px rgba(100,100,100,0.6),
                inset -2px -2px 1px #d0c4c4,
                inset 2px 2px 1px white;
            line-height: normal;
            white-space: normal;
            z-index: 2147483644;
        }
    
        ::-webkit-validation-bubble-text-block {
            flex: 1;
        }
    
        ::-webkit-validation-bubble-heading {
            font-weight: bold;
        }
    
        ::-webkit-validation-bubble-arrow {
            display: inline-block;
            position: relative;
            left: 32px;
            width: 16px;
            height: 16px;
            background-color: #f8ecec;
            border-width: 2px 0 0 2px;
            border-style: solid;
            border-color: #400;
            box-shadow: inset 2px 2px 1px white;
            -webkit-transform-origin: 0 0;
            transform: rotate(45deg);
            z-index: 2147483645;
        }
    
        ::-webkit-validation-bubble-arrow-clipper {
            display: block;
            overflow: hidden;
            height: 16px;
        }
    
        #if defined(ENABLE_METER_ELEMENT) && ENABLE_METER_ELEMENT
        /* meter */
    
        meter {
            -webkit-appearance: meter;
            box-sizing: border-box;
            display: inline-block;
            height: 1em;
            width: 5em;
            vertical-align: -0.2em;
        }
    
        #endif
    
        /* progress */
    
        progress {
            -webkit-appearance: progress-bar;
            box-sizing: border-box;
            display: inline-block;
            height: 1em;
            width: 1em;
            vertical-align: -.2em;
        }
    
        progress::-webkit-progress-inner-element {
            -webkit-appearance: inherit;
            box-sizing: inherit;
            height: 100%;
            width: 100%;
        }
    
        progress::-webkit-progress-bar {
            background-color: gray;
            height: 100%;
            width: 100%;
            box-sizing: border-box;
        }
    
        progress::-webkit-progress-value {
            background-color: green;
            height: 100%;
            width: 50%; /* should be removed later */
            box-sizing: border-box;
        }
    
        /* inline elements */
    
        u, ins {
            text-decoration: underline;
        }
    
        strong, b {
            font-weight: bold;
        }
    
        i, cite, em, var, address, dfn {
            font-style: italic;
        }
    
        tt, code, kbd, samp {
            font-family: monospace;
        }
    
        pre, xmp, plaintext, listing {
            display: block;
            font-family: monospace;
            white-space: pre;
            margin: 1__qem 0;
        }
    
        mark {
            background-color: yellow;
            color: black;
        }
    
        big {
            font-size: larger;
        }
    
        small {
            font-size: smaller;
        }
    
        s, strike, del {
            text-decoration: line-through;
        }
    
        sub {
            vertical-align: sub;
            font-size: smaller;
        }
    
        sup {
            vertical-align: super;
            font-size: smaller;
        }
    
        nobr {
            white-space: nowrap;
        }
    
        /* states */
    
        :focus {
            outline: auto 5px -webkit-focus-ring-color;
        }
    
        /* Read-only text fields do not show a focus ring but do still receive focus */
        html:focus, body:focus, input[readonly]:focus, applet:focus, embed:focus, iframe:focus, object:focus {
            outline: none;
        }
    
        input:focus, textarea:focus, keygen:focus, select:focus {
            outline-offset: -2px;
        }
    
        input:matches([type="button"], [type="checkbox"], [type="file"], [type="hidden"], [type="image"], [type="radio"], [type="reset"], [type="search"], [type="submit"]):focus,
        input[type="file"]:focus::-webkit-file-upload-button {
            outline-offset: 0;
        }
    
        a:any-link {
            color: -webkit-link;
            text-decoration: underline;
            cursor: auto;
        }
    
        a:any-link:active {
            color: -webkit-activelink;
        }
    
        /* HTML5 ruby elements */
    
        ruby, rt {
            text-indent: 0; /* blocks used for ruby rendering should not trigger this */
        }
    
        rt {
            line-height: normal;
            -webkit-text-emphasis: none;
        }
    
        ruby > rt {
            display: block;
            font-size: -webkit-ruby-text;
            text-align: start;
        }
    
        ruby > rp {
            display: none;
        }
    
        /* other elements */
    
        noframes {
            display: none;
        }
    
        frameset, frame {
            display: block;
        }
    
        frameset {
            border-color: inherit;
        }
    
        iframe {
            border: 2px inset;
        }
    
        details {
            display: block;
        }
    
        summary {
            display: block;
        }
    
        summary::-webkit-details-marker {
            display: inline-block;
            width: 0.66em;
            height: 0.66em;
            margin-right: 0.4em;
        }
    
        template {
            display: none;
        }
    
        bdi, output {
            unicode-bidi: isolate;
        }
    
        bdo {
            unicode-bidi: bidi-override;
        }
    
        slot {
            display: contents;
        }
    
        #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
        applet, embed, object, img {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
        :any-link img {
            -webkit-tap-highlight-color: inherit;
        }
        #endif
    
        #if defined(ENABLE_ATTACHMENT_ELEMENT) && ENABLE_ATTACHMENT_ELEMENT
        attachment {
            -webkit-appearance: attachment;
        #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
            color: -apple-system-blue;
        #endif
        }
        #endif
    
        /* page */
    
        @page {
            /* FIXME: Define the right default values for page properties. */
            size: auto;
            margin: auto;
            padding: 0px;
            border-width: 0px;
        }
    
        /* noscript is handled internally, as it depends on settings. */
    
        /* Default support for "Smart Invert" where all content color except media is inverted. */ 
        @media (inverted-colors) {
        img:not(picture>img), picture, video { filter: invert(100%); } /* Images and videos double-inverted. */
    }
    
    展开全文
  • 关于-webkit-的一些用法

    万次阅读 2017-03-03 14:10:58
    (一)-webkit-tap-highlight-color  这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。要重设这个表现,你可以设置-webkit-tap-...
  • WebKit

    万次阅读 2018-06-16 21:20:13
    https://blog.csdn.net/horkychen/article/details/8629976
  • 理解WebKit和Chromium: WebKit渲染基础

    万次阅读 热门讨论 2013-01-07 12:54:04
    # WebKit渲染基础 ## 概述 WebKit是一个渲染引擎,而不是一个浏览器,它专注于网页内容展示,其中渲染是其中核心的部分之一。本章着重于对渲染部分的基础进行一定程度的了解和认识,主要理解基于DOM树来介绍Render...
  • WebKit简介

    千次阅读 2011-03-15 11:36:00
    一、WebKit简介WebKit是一个开源的浏览器网页排版引擎,包含WebCore排版引擎和JSCore引擎。WebCore和JSCore引擎来自于KDE项目的KHTML和KJS开源项目。Android平台的Web引擎框架采用了WebKit项目中的WebCore和JSCore...
  • 理解WebKit和Chromium: WebKit的CSS实现

    千次阅读 2013-06-15 17:21:55
    # CSS在WebKit和Chromium中的实现 ## 概述 前面章节介绍了CSS的三种基本要素,大概可以分成选择器,各种基本样式和CSS3引入的变形、变换和动画等。本章在此基础上,着重介绍CSS是如何在WebKit和Chromium得到支持的...
  • -webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。 限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性...
  • a:-webkit-any-link是什么意思

    万次阅读 2016-10-24 13:19:12
    any-link指的是超链接,前边的-webkit-是谷歌浏览器的前缀 css3中-moz、-ms、-webkit各什么意思 -moz:匹配Firefox浏览器 -webkit:匹配Webkit枘核浏览器,如chrome and safari -moz代表firefox浏览器...
  • 这个问题,安卓6.0以上,大部分手机都不会产生额,主要是针对IOS 加上上述属性就可以了
  • 下载Webkit

    千次阅读 2019-06-30 17:58:00
    下载Webkit http://webkit.org/building/checkout.html 1.获得Webkit http://nightly.webkit.org/ 2.在线浏览代码 http://trac.webkit.org/browser 3.check out源码 装SVN客户端,check out 4....
  • 登录百度账号提示浏览器版本太低,如图: 点击下载webkit内核,然后重启软件即可:
  • webkit-transform 的含义

    万次阅读 2018-06-20 23:20:28
    webkit-transform 的含义 -webkit 是表示针对 safari 浏览器支持,-ms表示针对 IE 浏览器支持。 如下表示的是在 X 轴向右移动 50px, Y 轴向下移动 100px。 div { -ms-transform: translate(50px, 100px); -...
  • 理解WebKit和Chromium: 前言

    万次阅读 热门讨论 2014-09-14 18:07:26
    转载请注明原文地址:...另一个感觉是文档真的很少,特别是WebKit(chromium有不少设计文档,但是还不够详细,不够系统)。这让我觉得非常痛苦,常常摸不着头绪。鉴于自己的经历,觉得很
  • -webkit-box 与 -webkit-flex 的差异

    万次阅读 2015-11-30 11:39:14
    -webkit-box 应该是 -webkit-flex 的旧写法 使用-webkit-box 的时候 -webkit-flex-wrap 属性不生效,必须使用-webkit-flex 正确的css覆盖 顺序是 display: -webkit-box; display: -webkit-flex; display:...
  • 理解WebKit和Chromium: WebKit和Blink

    万次阅读 2013-06-23 21:09:08
    关注Web和HTML5领域的人最近应该都有了解WebKit项目的重磅消息,那就是Google退出WebKit项目,创建...其实,之前关于WebKit2,双方的争论就非常的大。Apple希望它可以随便加入和删除代码而无需担心它会破坏其它Ports
  • 一、首先是h5页面与android交互:这里,我交互的android用的是WebViewJavascriptBridge: ####android调用h5方法并传递消息: 注意:在vue与android交互的时候,android的方法里this指向无效,需要赋值that;...
1 2 3 4 5 ... 20
收藏数 247,569
精华内容 99,027
关键字:

webkit