mirror of
https://github.com/servo/servo.git
synced 2025-09-11 23:48:21 +01:00
tests: Vendor blink perf tests (#38654)
Vendors the [blink perf tests](https://chromium.googlesource.com/chromium/src/+/HEAD/third_party/blink/perf_tests/). These perf tests are useful to evaluate the performance of servo. The license that governs the perf tests is included in the folder. Running benchmark cases automatically is left to future work. The update.py script is taken from mozjs and slightly adapted, so we can easily filter (and patch if this should be necessary in the future. Testing: This PR just adds the perf_tests, but does not use or modify them in any way. --------- Signed-off-by: Jonathan Schwender <schwenderjonathan@gmail.com>
This commit is contained in:
Jonathan Schwender
GitHub
parent
7621332824
commit
ee781b71b4
648 changed files with 359694 additions and 0 deletions
File diff suppressed because one or more lines are too long
94
tests/blink_perf_tests/perf_tests/layout/CJK-article.html
Normal file
94
tests/blink_perf_tests/perf_tests/layout/CJK-article.html
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Meiryo', 'MS Gothic', 'Hiragino Kaku Gothic ProN', sans-serif;
|
||||
}
|
||||
|
||||
#main_content_wrapper {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<!--
|
||||
Testing CJK layout with modern Chinese and Japanese, which can mix up with western characters.
|
||||
-->
|
||||
<body onload="setupAndMeasure()" >
|
||||
<div id="main_content_wrapper">
|
||||
<div lang="zh-Hans">
|
||||
<div>
|
||||
汉字和非Western text常同时出现，例如本文。
|
||||
很多terminology不经过翻译而直接使用原文。
|
||||
考虑到视觉设计，许多文章被要求在汉字与非汉字之间插入空格。但如果想在输入的时候插入非全角空格，就需要切换IME的mode。
|
||||
因此，我们想要layout engine自动分离这两种字符。
|
||||
在此之后的都是自动生成的无意义乱码。
|
||||
</div>
|
||||
<div>
|
||||
辞叠言记巢俗不文ertilnitg。有通复。碍本喻惊hhixspbal家在得得以察所考长ihdpaobnk柔锋。衣作的薄义nthsat-tt慎趋何清高小正又清tuDhhlaii过达为怀以侯昭进容nttoaaenh有的后言记论，后房oaitilhnw李之又强见膻则改年tsaibageo·配怪别游。。查挺kesidesfe‘贤怪箠则小谤：吃sphetoest定既鹰头的来尹爱着tttfepioo都足古花辛莽者传宽lintmaats坚比云难胤曰鼓。会etwsrtiht生天分捷燕束身头好oriaetdme邪对殷喻展广狐人井yyleteIto。的痛於尊。子自于insliilge。他别天村齐经或乌ie-mpeTwt，若时付外怕身极契oxsoiteew不比人大其事烈见观inalrriii，思，见蔽绯此嫌庭sueiitaee。宋象和。临作俏。ottitstst逐神信，玉重耻地不itdasltee一一制或躬少长一喻sriooeteh获言原挤天喻虎痕点isDepstit之不出等郄亦拨或技tihtipspo？言形从记言之，戈thhtnsett续、治载物三死所。heepntell两、门龙，瓜门戴鸾ibenhditw传意为言负可转旋答tieineEie投光矜下人恋无远而ptErt-yio尘该而，时严时作，hixhiaeeo吾转策昂不留屈战不hwhroeepy。势题缝见标饰凫世dttetetnk，：·教曾沙乐子实Dwrtneeth物。的难。。人风不ipstdeese怀，孤样家犹的蒂信wtoealst-合倒引水比容，倨困thimmhbtl经恻采天人上顺丁出iesthmopi险如临样。发世之了nlleushmE变安舒贾柳轻也柔，feyopsyrt国。。。定一惧各事oeeabestf人超展晚的画而不容doatistae明容。够贪一箭无弓rcdoeyiot风喻凤。蚀目明笑势ebeplpoia亡见，又沽快无过牵gaxdotpiz奇人或辆钓花所欲称epetiedie叠，前：实揖东蝉比wntrtneoi可。尔鬼疑丽以。传setthibpo众而垂点的齿吞谓晋tailittne？。日天棘石。走’iagebtrDy。气粗兢原事搜奕事sstipensn言任卖浅而残谓拔巫aktlelrtt而婢造神不艳比所影fniaiybbi染之。氏梧如尖根，tdhtdidhs削更作有。品，人片nheeiebsw眼混望曰。。避哺，aeldmoeii。过不容教的离务，ioxeihrx-博一：逛不醒齐刮南sekptelbt形用卷上纳相对昏夺isonoaDta俱。炊复辗魏深亮不itilhat-d的秋上人。容恐出暴tnsinteth再不不容秋民也团花rgdgpipii禄而。篇…于闹平可syhagtbga群’思旦穷是灯臣鸟tgoeetela。喻。做乱朴代违师oosdoarbi之迅摘的皆。、：所nytltaatn嘴小争象忍要主萧业teelhoetg黄列雄处化矣点画去llttststi繁。无兴煽乏喻则大oswaeittd子得醖留语冯无还大smthbxtte诡故自表入手不后恐nronttnnn削也人同物人见精下umueleddn前诗瑞亮轻立其还，hmonsteel伏来谓辨也挠晒口色snoTphtoc苟构功委语官应矣狂inntimioo屈兵辉敢冠本踬鸡众bdgnedniy’登畋，语佛贯民信astletwps作子生间迷荒。虽号bvbteeine重於盛彩叠完於贱鞭esaeienIr国匈法的来较运死全dteanndot磨虎七俏：男。出喝rnitdntih。壮要小落显语门立oehealneo不文同下在加。其宠ltwoshtrt景如苦一各明饱作次eesihiios时也亦临望精头鳞兄iiseadeie仙念知仪罔域容容玄pmdxtihsh子刻相定多超见：如ieottoeti吉鼓，：佛女拾鲸心snifuxonl程高情人、云通合有oetresldt法亲·先筑灶容同，iniiDtnrt指纱接得大威是一力nknyplssd鼠。职风同谓不因有potiiiieI一、的仪鸦逐决心火tIptetise世量念峦江丝笑此孜etibeeint绿人话俭改尚从传紫ninnldtsh七哑汲。盐塞毫才：tsitoeved题程己的意，响寒何estnnpspe子传喻不鱼面古坚蒿nthdnoepl声其四亡瓘的以把。nntioiisp，出，复德馀。知用tnmdtrfs
|
||||
</div>
|
||||
<div>
|
||||
燕父；开右蹑计肉，ectIirmdi富，喻来到苦备节不phsaoetai犯者或自壮行马存帝yytfiects蚌操祝户断净天衰抗Tssoeote-，焉零后形生铁子谓mnnotteha：青部。而蟠惊又龄dihtsttal多文弼里贤想意：难ottsaemke于用应谈·，或泛后k-eoetaiv帝的龙兵形活。以二eltsoitxd喻时。世鸣才的曲知talyroiem有喻军虽争李径八楞ltoeehaik熙体。形为：疾学别otaeniest远法时用拔没之，形esoiktnsb自抱于无宠绣薄当过dmnd-hnr-后摇锥至其任折七见eeealotlt能南所作蹶以谓妾喻na-ttinIi指：片益本穷虔连布wetnodeta：心误以钱吹负勃君tteatfiet顾孟子见风。难谓貂dfsniopsm比。春惊立如。英聚teeelbrun形喻：容象。达见闻fIIwuotef姿而性用叔之空鱼绘lhtittaDe互一鹯，语谓践努态pIanEhfel’典秀。。地好犹上uteenlfae欲不’。尽元走作属behvhhtbh能落斗说前在生民蔓otneIiric仆众成如神比谓。带postangts耳绕待顺国目消而，onktnpstr卷心阔啼容扬玄劲斗dleoiernn传民处经襛始舟逢又tetxEeoem语，三姬求棋，为或eygnecohy什悬：趋外示语川作hietftatz事集沫之供宋食以式mpgyotnop。其的高工门关文；nraewgeyf泛於体喻求新荀五贯elninitba尊则马东化行被知猛anohoieeh共孝昔。谓意变。螳ptyneustn赃面瑟百年谓毛资正utdeeneps为松荡人据已字道刻vtttetgos清俗古记意复谧非沽nrotkntir殚犹原也六时惩贵心rtbdmadee益懽家，水：是谓些antnnnsot负休可害因耳龙，指leesevefy冲不成民出树月茅以ohnialiet朝一子奔信伐过又心neTiiilxe着言蕴谓武食。发福eieitephw鸣，骖形安，兄孙出cktthDxir。金，一二种志心终iieroiisa五空言气者面，饕若ieleorsot不言一如径滋楼花环oTshosboe空，师豁经断喻一求eetnoexee祸。史促相默外王矣ouitiinas锵家绸以使：为出步altosrtna成贯手的足魄志年的idtetlslg定触者换人。匐行密esnpaoips若。双穷世形力马喻eotrtrtsb牧也帅非一可溃诚排ainsuetba锻全恬即清石原同说tnEEkohea也赵，欲计距卫以六pniotdaon：踪不后如发底策步odegDwltt犬。、恶大业醨上东teatsaboe有苦七形难为。之三sntnlTtnD忘，芳往言成各。马Isttmdede唐言气金表而丘左形sezntopes常椟自脣孤敌付有甚rhtacinso学、。锥。手息坊正giieshini无鬻贵意。少用卑众eelopnooi旦珠受。电寻饭移事etghiplht犹牙天借比藤，主聚aondstsgt谓，短祖腹灾称，，ena-psrss而多。比力雨定亮。isnetnios笔端脟亦亨和暇被百atxepissu察河圣，，灯出欲生topototiu观云以话说西置征曰sseietmsh，相虑者识沽经。公ypsnthede士话说，车勒气志事hpxttbash巨德往，因男荆后士khmodnryr，纸的为背相为。陈tpeentedn气靡刿尝不，崩指柱leachkeew不语高永白孝声，：dsiEdrtee。高道归。谓的镜亲eareToroh味辱园章。。一誉指speloeneo而谓异学长恼公，来pnntoohlp。兵早隐百公毫见翁tedsrriee卒鬼的至谓。之喻以eEnizobae疑蜃合下举的比而掉ndneaeeio常：世楚。比渔振附nvltintox法难而古今是容弥传selttftin谓改合百丁规。定。ipnorerit。的见。暗盛不从不itbneubui内生荒兴。名。谁远oiitttted的馀人军有燕出。因niozsteiy丢斗‘，同胆见事切ntdtTptip外则，一，雍家。生elsspdoei最之肉剑见物饮鸷后sxleIefhh言机大常战件得气容hhoyhtrti类行嘲事，，。夜、reatpeadf客。言久谓故门思匿rytilhhis乱次呴地女内裘传形hesbtshht睁移。宠没亦。如上mopitrsip
|
||||
</div>
|
||||
<div>
|
||||
指行饮昂当等蜜。出tmstnmhti言衣管为能如记过喻siwotfgow上高法贯束按夫：律eetoontsh、容糊置，里，事诈ehIhnnrIi无土事时灵谓飘乱。opedosuoh此私闻景磨序都灵覆oxfeitota凶开短作。蹙：娇赭ntnkstuth要。刘二人，形任形mntfpetur未语。撰鬓风，外辰psengltdt示炉作千榫。顺学防dindbaTii彻仆同受兴川。人之riahatplt遗上所西掀士形罪上eoldenktv木。被谓承扬假其承txoitntnn可而篇求喻，就角又peuttgntn鼓肃无皆高泣不喻抬nltzrleld天，作把喻道悠。后odhaedeit烦抵，犹手能。以服itesul-ai生样与深翟晚。禁又hnloeieli行；缚的容、不的气enooztteT行运据也防离政何门teodnaxtt绝鬼同。二轻揖导鼻sloTtsiil，到精悼。·获惊女-ttoeoiyn之骇倒世雕赢误歧匿Dtnzeiret壮席打迫。子与乡转exeskeidt己成官仅隅风穿无事epnehhfin帘三粟贤勉马并后和inihsolnD毫树裁馀面论个生乐entnhetpd越始敬从色良起，做etoptetme价曲’如容受目位矣pcoosisik的浊旧唐：神多成于IttrkthsD中燕灵仇渐劣临啧容nessttdao：轩养又情五脸三石siantoioi赖踩不草研打叔卫穷hprheeulo·口：之汉胆歌才多ieoonorEs周·。下时麦史雨坤athepswxo书哲复准或墨俗迎齐rniidpzlt。道注不内排纷事小ttinliiln红不绝熟韩语情相直otlseetpi比躬盲解为君：作不ntinssael宝的。论其用姿后娥tsnmieshe朴者正同言容谓的不thosedtda不生劣互嵩作交他埋hzIriaipi通入鼻羁时然举殷心ptioedgbi命寝全品通难个嵇鹭uisoITnto泣窃同难能正及自遣ntfthtlus犹变一心自。真容曰hstietm-g经事典排为：指矩，eIpgctttt安音怀回男没装集不rteosddif时中衣消，马僻念青etodrhert将，销脂弱死马上清ednihrede骞推有南川吴喻目接zei-desox华。肝杂精乖阳。。fssnnstao大一象司德日不计一hstnewtoe喻形鼠人，牙切策以otttisteh谢招强、巢风同变。ziivsDetk远上看指三长售贴昧akzieanlr器一尚众敖大人说与hshdciiea能箫后律之形的木。olrinenet。移及。强去麟，视htucoitoo道食时和能淮行；誉sazogrinr深心制行声风成，。lntdhoidt人诵前饵难。锷至。tnehrines破濡兴解人喻气舞读aontsaett东悱行作。水说称出ibtlothol老作计君解语躁分胝oaiilbeht方众不浪湖形集。。oiagyltoi作。不过称读虫作山edtetdtto於木互上重。无家戌aIedeuths化请少也思带不兆快siloneins不予很。容在遇一后enoopseta建众底。战丑钻崩识eihdlsatr白：枕新）来门时。cgpnatith心的以注长。点柔砖sttmattne在痛别。说依饰，容lpetelmae易国所而·摴而颖腾eiohltiti的眼景门翻不读官。ocgIrigst类时懋礼。。拦传明nttoeedit穿，。共敢。，受理esltertnl王三意陋纵顺毫易夫nitotslel河威待法轮扬，之真itsDikipi记为轻厄文不。闻而ddotierho祖方势：的为何玉以tshbdoohh的无愈断叹不又。富splaeuein后朝饮得前：持不大dedghtnlg。偃语大金见裁缚负l-tsstaor兴：九更为谓食夺芳iwynntosp兮豁阐夸生兵听见赤nolwiEenx则。犹。风容保训衔wiuorssti吉上迫开识见疑喻水wkeTunapo超’手气流者路联，hatmpshit老要於白：兔赞法同nbittueDr骥智度人，男书狼不nghfsootl很封迹、形酒就内女eotttpltb断后邪祭声国学集饿owuertdps女。短家出自东知功peitoasnd馀不像仁本阮乱惟国hnmthetng。钟或没犹次不丘后eahtlnlas，诗箪博彼钝晏喻好tiltIipei出虎喻远君，字：。hliysIaee礼而偷虽之。形少韬inohontdm
|
||||
</div>
|
||||
</div>
|
||||
<div lang="ja">
|
||||
<div>
|
||||
欧文混植する例は多い。
|
||||
terminologyを翻訳せず、そのまま使用する。
|
||||
以下，意味不明な内容が自動的に生成されます。
|
||||
</div>
|
||||
<div>
|
||||
のこし文てあを大的ml-otsTri組面の有I，学をいiimoiolnnもっよ化。のの温のseteetttlるし見大宮のと0縦bitpsdttrとは「史ーす本な気xenbEeilt宇るは又をのっ親。edeoinoee見ジ数上都えに測末lteyonstp0たに本をし。のたelrrtkendよ制籍目年字目2高Idtleshsn5症，1」4尾でたetxeppiko用字発大2ペでは方npefmebin継れ性配に端と感トkrsuwnsse字地比ての対2面のmttbeetda適き向、位大たが長hpd-tpwiiま1文との，地だいahhurseti化い比親点制きみ組fimedeeiiちきくビい増暑た増ei-sceconき字、一7化延磨大hlomoiihg）く多2端ブ「学のhlssigiehの5なすだ栃数測すnipolnasl識字字化には，議人tpnslipsnの基の学ら尾議後方eidntgnns8，しげ版すさは、tsrhpeereし県ででととただ1ssDeaIs-r価とのい公話引観岡edetIoeth研じ場さ想さ降末5bnhiellnp終な版重4いも長、httsnhm-gの上たはいジ者栃内xteleirhi宮親字回校教か4的ndisotdgi案前長列が等」症ばiTaeeiseiり当識ノ段症日頭組beheitsteりたる1名い2びしtel-ibtpeいり卓、いはの版えgtgtitthk率が4文字し尾1）koniotldsりいををととが本5eieurleadい症版よきえイ月たeniithtieの訳1柱、が1宇がDtoinuttnとら大援文大し。け-dwrrehio東部組は暑，5た防laniteineの上続ルな柱化4るepiseoieeう文説月本続込か文iiopyiteo測ス字の規て選で人isrghoiee尽で見本の者のも0stswwhaeo省速県尾のにをかはensrnirfoの組5文し端もが疑osisilxnlル、しる学とるてでpsttieiesん宇うか対すけの。ustsiditt訳ま度で年ル、で査enrbkol-s識すにし右をりい暑lEetlstprの帯又だ字をせの年niepna-nmまンの，はの体去っolanhnaih磨字と裁岡なは及字oittspdis宇た卓ル字きのたもnnieidaii「暑配で宇感8べ字oefhveotoえを11年，候にはgesasEita国の感さ1て日見等ade-pnuinり患通やはを県の症ptbitpnleとは語文ら文2列中iblneitehをに字地小、たで本pneeiinliのれ対者左に症症、sIhletnat文えを定選が軽るばstihleeoiれ応るビ文きたってsielonIse文1組」ルの．になttioTlxta配はこ京の化ろたしeioineasgで書た人ででの横たtywnoiirh，強さっ、人都すをIiribknln大よ栃でた文量のでtoestiiaeか組も，岡定字重ペdbneshoeiかしになこ欲は5るttpdaodkt永気対大都ス画や感fkesferaaな版字配りJが4究tetilepitみかか変い案角はキerexheeniに発に都所者又の組m-sharlee字長出な選症者0さyhdeitttiの救1き別間にの改itltivtl-文き文説計せ覆暑読ieafrnews左端人るけSと」搬sDntbsith上変本 縦長日基1etaeepeti量認字も同後てに数eneEetgeoイ置、ブ5縦縦式親hnphetbbi推な消組量て終書のoitlxzwsnに想と親増各字わかettokiebh野指熱9内雑ものプewxgsshri5多十数文に一県けnnpeegahiに宇な、の史にすのslnrhtetiさ初対以ビあ全か中sdntitoheはのら，てるにド革Eitbseeheれ化比しす台とがでsneotphat行ん見の「に終審てshptedlst読れ光，も前の定会ttnpfoteo台いのイるかっ空とtporssehx2暖ののペ右に1字pihtivoyoえす長を磨，みず猛shnpfnvlp県は。文た大し回学elebatiio2」、一大野ん縦現elTaoeeys画増のらの防右面日anTmnsEiiし。す親京1ど山右rtiedepoa者野よた聞そ定置をpiuetrekrたな大科ーらメブ後rtaEeeehi人者湿過わ面の配のrfIltcsdt
|
||||
</div>
|
||||
<div>
|
||||
が回，京り。増けスidthoatsx，天選の認の。月学iiTesrtsoかがば年長れ配目るepgirnedsコ高加れ県東人4しehdztennsは大会台次，はけもtiathtrhiたとで的症の、、4ootrshiknで対、ー暑、9柱りntrsaeoeTわ字化量，増選で，atnktekntすて要地5を変文面nniniwonnのすのし選す症字横ieoitepahとまた数しく8し岡sehoeetei4，5す応分ろっサiehhndori測革の目え発，右てgpsleetolかをのの化大強変よiaptossftもな文もきの象よ終ninosiItk比都度年8ては，継neaegltdT組プ、気県暑るあ最tsahmtazo大識多な必よイ、配htzsiTeii栃文の大議のわ1同aeeeotitfその左版るて審はなophottblc大量識要通に校9とtxheiosrrスなて面，置会寄規ehentoptn，こ熱ので向岡長がtaratewss昇猛。た大のー尾せltteessht山以長のの数感率「iennineih学6いりそ訳た大込peyihwsenか雑はSえまを会，oeghsnnei本者方本等長き条ルhehiigaxaり，ら高数人都にとpIenlttilそ書審ス見大延見5iwhniatieま各」、多，ルにとlhahaDtdlがへに列り史報校のtiiropnyoバ間ので話て、でりatsteeiuh気保どまだのト校熱tttseoodi、軽大7るび4的のesneedtsn空山字長は又奨間又yeieuesllででっ乗い「じんっsIoaysghoと、がれ性る募，ルhiaathnEnう、が大最正と東症lrnidbtxiで同公のし東5会，eoohsndot山列会ン月を方こ基tokbexipi応I温見そ識い縦0ifktpss-o磨子と症大末終と0todbtteihだし字るつ思右既れetlnibrosド版ペ英ノは1アもhotloaecn急た研暑に尾」の字ethiattns横ーと京力い，温をnlmhiindeたは上れ0て課変のirimadeilスキに場配急ン強すhsslisipd改るい取た3内．改etneineli人字対。の子右、角Eapisheom長ブは東案め書佐はe-tplpimpを部3基組年計ま条siszeddae多7．さ変会じ0相sptiteals0，は。ー公のま文lmaoitoeo通気字は，にの向とttzsiohitか定のる的す5読のehteintxt け既重置述字向キtcmrwsinl量だれ者「象しの選clatmtanaのるのたも議宇人7stiwgseteンアまの変たく今宮lddiiieriし会か京組，いてたsIwlnitatがすし年ま組人北猛ateaeesel7も象位に大しらとpntnnhioe対空提規た継の指ーtTdshnsam線上れら面通なに内aeant-imyた最かも4た又あのtiIeootih頭」字組点1ろ観なttthtstsp長まくいをす、の日dtiufnnie2全す北後の上。こeianthhxa候のは東重ル字中。tatmofareけ空字日の後版ば文tlnoohteoてとにののスこしがwlhifeeaf組末しの年に温ンかterenanaoが階く等り猛にのいihertdopf8はに場3ルのさもstlrstkIe因一な，や置、はへsmdnsttigにリだ熱県，は、いfeiesanebと想以る述ブ，でろsesyaelnt議の数列天．等た組tsotxstri 列要すをま見宇コpgaoii-eo大とのい者りな際でtreIwsattいを字がとて症数年tpltrowho9た内で月寄さた合wrsottdslそ年う症話よ引と年ehssbists7が4列り月人、たtohsnnotpびと9月，た大ときrseIpgtapさを伺予文にる数なemsntpeif気、まは、組過てらheehibompがの、日。，寄覆部xanotanit新気4てす暑の摘てtstnefohmト字ル書防の横る患tlteddtih月い、び。は左としstatitsne会科革宮ド象同県」genuletIeっは年に者縦っ版象nliilefiaけ点後と位め栄はこtpteolxeiた縦向人4が学し字hTnaewestとで議長見面左文、henhsioooあ議面有ペ搬け長識ieesofiee名暑置と月と寄増もsoiIatdiw
|
||||
</div>
|
||||
<div>
|
||||
月置募組急縦て2のrnlstieee観たは9とではに4tboyrriotトり条字じず配栃みeentatheo延2東史ま計ー学後hsalthiotまる「し3つと置トitnEetatiたがに象のとい大はnDlatortdけ者．多配な縦すだaiiietmsbも増でりで正な読感mptsitnbt日。5測しばは日支eitteoeid宇い見想字タ込るにthwtToiolル頭1者日一尽内十ifabtsedl1にあ査じき感左続s-eeihTtiにり温面組列患と末ttinetTIoのほく裁、ルーのすooglltzsgうるのっ暑継必いっtilrhetri．角込体東予ド取選rDrueIsahるプ方ら湿さ，会面ortooifidと宮だの中の織末しdetaithtxてた宮い、端宇究課saporaise岡めきりがの本度増onsatelInな日角まルを東が年Ttyeohoth組「見字用てばるにeapsEgthz2の前規。感た防者euexatigeをて頭と内対でき熱tfeerltts者しのにルえ親対はphhutEtirて。はかビ列「2佐tsaooitot長りたのと組ジ対及toaewt-biのメなるな字まだはaelrpciey者方9対、2患の続IinlTthth過にらが組欲、重いhtagnttnwにてくびけくた5気gebasnume．でノの東読りましlpthixpsw，栃え症たしを字4itlihhion右日っ当想意れ大とtgbrenoan分上降方前終と送と-thraallt観線多が人6れとるttTineedtをた先一多に字究はhtiyetliaには版末おっ間者対iiltamhnlのた気文既ややさでkehswdete県こ変」ら「日を画iuermyenk学なビ番る宮8日今toantpaoiにがてば栃，いいにoosnaomiy基日でのビ増数、中eskipfodr公プをれ多0頭当向batsaayieび化さ的内有ちた2entnsntixを度野縦し子に地てDptmipteeを増症台大できにっersinxesn4、合う者るのI、ardehteip版，者親急東7け続nekpnlpshどを合「ほ対。ブもaizneenne亡2を値上め分2患thotietEeき。大とい 見ト書nonnsbiIoく人をった猛柱0ジetsiinnetえ組で．強て又きりmohintnrh配っかで応のルで提blttaeeea列日線左ると科の識soeuluutnいず本2かた字す2tgnnlyaro症社はりス猛、か3phhottses疑配い究の究しれ者obthhisnt配は述測先ン。最上diipdtahi高県ののえのまいいltatssIet識のとンさみ大日階ityipriieで籍にだのけか内特igoshehee人字たを。う方んズwihctpgwi率援も述選月延意がybiterddt既，組県見面台，かtlthsteeeは評字5は1柱か，mtnzsoasw既史れと量新基文版sieIaaesw間全字推の日ピさ尾wothiseii「多なもてす文縦組ndtbtpesn，とが十日。症は栄ltoeiohgpの全日あもす「体すueoosteti文を推字と高さた重flooetete究Jでなかる発文大lbdieeiegすり大尾読基くなうih-ahntak象圧案栃は見大た0ashiiopnd症革制覆大感0のつedegrt-tpめ年，字籍制初トノe-isetcokみ文あ感ま正方14tEitlelsnはの後か6のなれ山tiolibptaも指化親面7し。左hlnnItdeE，え症熱史には年学retasnsll」段いは山のりな文fignxstt-もい8たるらて体のtyetnssrg子た説史き県社るたssegptslg教末をすすなで7象hetnerlnn省り。量んは及1症hhtneeoto猛と帯強力7ラれがganeruednン文、えま防の組去rtnsylith4又のかに行小引あitoszaats0象列のよは長上京wxxstetep「熱ケの延。ベにとnootEnlai大れの文日対面末置nTheepzetはて人り頭し．多がetsrnstte組と文会縦ら制認対eeoedeags角気き文でのな東をlbodiegorの．にに」重目しのnieftogoi版に多天東」基か内ieeoytptoくばそ（小中す字なtfsyeolds募ン急象ーとをとをrhemflaee
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const target = document.querySelector("#main_content_wrapper");
|
||||
|
||||
// Make the content longer by duplicating, so that a run takes more than 100ms,
|
||||
// to reduce noises.
|
||||
const children = Array.from(target.childNodes);
|
||||
for (let i = 0; i < 20; ++i) {
|
||||
for (const child of children) {
|
||||
target.appendChild(child.cloneNode(true));
|
||||
}
|
||||
}
|
||||
|
||||
function setupAndMeasure() {
|
||||
// Unblock onload event by scheduling with zero delay,
|
||||
// in order to avoid perf bot flakiness where the bot checks
|
||||
// for timeouts reaching onload event, see crbug.com/457194
|
||||
window.setTimeout(() => {
|
||||
PerfTestRunner.measureTime({
|
||||
description: "Measures performance of processing CJK text with Western text",
|
||||
run: runTest
|
||||
});
|
||||
}, 0);
|
||||
}
|
||||
|
||||
let fontSize = 8;
|
||||
|
||||
function runTest() {
|
||||
// Change the font slightly between runs to force a re-layout and minimize the
|
||||
// the effect of caching.
|
||||
target.style.fontSize = fontSize + 'px';
|
||||
fontSize += 0.25;
|
||||
|
||||
target.style.display = 'block';
|
||||
target.style.width = '800px';
|
||||
PerfTestRunner.forceLayout();
|
||||
target.style.display = 'none';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<body>
|
||||
<script src="../../resources/runner.js"></script>
|
||||
<script>
|
||||
var test800 = PerfTestRunner.loadFile("./resources/MultipleShapesWidth800.html");
|
||||
var test600 = PerfTestRunner.loadFile("./resources/MultipleShapesWidth600.html");
|
||||
var test400 = PerfTestRunner.loadFile("./resources/MultipleShapesWidth400.html");
|
||||
|
||||
PerfTestRunner.measureTime({run: function() {
|
||||
var iframe = document.createElement("iframe");
|
||||
|
||||
iframe.style.height = '600px';
|
||||
document.body.appendChild(iframe);
|
||||
iframe.contentDocument.open();
|
||||
iframe.contentDocument.write(test800);
|
||||
iframe.contentDocument.close();
|
||||
iframe.style.width = '800px';
|
||||
PerfTestRunner.forceLayout();
|
||||
document.body.removeChild(iframe);
|
||||
|
||||
var iframe2 = iframe.cloneNode();
|
||||
iframe2.style.height = '600px';
|
||||
document.body.appendChild(iframe2);
|
||||
iframe2.contentDocument.open();
|
||||
iframe2.contentDocument.write(test600);
|
||||
iframe2.contentDocument.close();
|
||||
iframe2.style.width = '600px';
|
||||
PerfTestRunner.forceLayout();
|
||||
document.body.removeChild(iframe2);
|
||||
|
||||
var iframe3 = iframe.cloneNode();
|
||||
iframe3.style.height = '600px';
|
||||
document.body.appendChild(iframe3);
|
||||
iframe3.contentDocument.open();
|
||||
iframe3.contentDocument.write(test400);
|
||||
iframe3.contentDocument.close();
|
||||
iframe3.style.width = '400px';
|
||||
PerfTestRunner.forceLayout();
|
||||
document.body.removeChild(iframe3);
|
||||
|
||||
}});
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
html, body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: justify;
|
||||
font-family: Palatino, Georgia, serif;
|
||||
font-size: 10px;
|
||||
-webkit-hyphens: auto;
|
||||
text-align: justify;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
.shape {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#circleShape {
|
||||
float: left;
|
||||
shape-outside: circle(closest-side at center);
|
||||
margin: 2px;
|
||||
-webkit-clip-path: circle(closest-side at center);
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
#imageShape {
|
||||
float: left;
|
||||
background: url("shape.gif") no-repeat;
|
||||
shape-outside: url("shape.gif");
|
||||
shape-margin: 2px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
#insetShape {
|
||||
float: right;
|
||||
shape-outside: inset(5px);
|
||||
-webkit-clip-path: inset(5px);
|
||||
shape-margin: 4px;
|
||||
background-color: red;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#roundedInsetShape {
|
||||
float: right;
|
||||
shape-outside: inset(5px round 64px 32px 16px 36px);
|
||||
-webkit-clip-path: inset(5px round 64px 32px 16px 36px);
|
||||
shape-margin: 4px;
|
||||
background-color: lightblue;
|
||||
opacity: 0.4;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#triangleLeft {
|
||||
float: left;
|
||||
shape-outside: polygon(0 0, 100% 50%, 0 100%);
|
||||
-webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
|
||||
shape-margin: 4px;
|
||||
background-color: yellow;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
#triangleRight {
|
||||
float: right;
|
||||
shape-outside: polygon(100% 0, 0 50%, 100% 100%);
|
||||
-webkit-clip-path: polygon(100% 0, 0 50%, 100% 100%);
|
||||
shape-margin: 4px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
#selfIntersectingStar {
|
||||
float: left;
|
||||
shape-outside: polygon(50% 0, 100% 100%, 0 34%, 100% 34%, 0 100%);
|
||||
-webkit-clip-path: polygon(50% 0, 100% 100%, 0 34%, 100% 34%, 0 100%);
|
||||
shape-margin: 4px;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
#region1 { width: 40%; }
|
||||
#region2 { width: 22%; }
|
||||
#region3 { width: 22%; }
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="resources/MultipleShapes.css">
|
||||
<style>
|
||||
body { width: 400px; }
|
||||
|
||||
#imageShape {
|
||||
background: url("./resources/shape.gif") no-repeat;
|
||||
shape-outside: url("./resources/shape.gif");
|
||||
}
|
||||
|
||||
.regionColumns {
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.columnLeftBorder {
|
||||
border-left: 1px solid lightgray;
|
||||
padding-left: 3%;
|
||||
margin-left: 3%;
|
||||
}
|
||||
|
||||
.region {
|
||||
clear: both;
|
||||
padding-top: 20px;
|
||||
margin-right: 2%;
|
||||
}
|
||||
|
||||
#region1 { width: 100%; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="region1" class="regionColumns">
|
||||
<p><div id="circleShape" class="shape"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec enim faucibus, laoreet mauris quis, sollicitudin nisl. Curabitur feugiat blandit gravida. Duis feugiat sapien sem, quis tincidunt nisl gravida a. Suspendisse dignissim ullamcorper mauris in fringilla. Suspendisse dapibus metus vitae lorem tristique, nec laoreet diam venenatis. Proin eget rhoncus diam. Ut a aliquet eros. Duis vitae vestibulum erat. Cras pretium auctor sem ac tristique. Nam dictum enim ac urna ullamcorper tempus. Aenean felis elit, dictum vel fringilla sed, imperdiet a purus.</p>
|
||||
|
||||
<p><div id="imageShape" class="shape"></div>Suspendisse augue lacus, facilisis vitae orci sit amet, elementum pharetra lacus. Mauris ac sem est. Nulla ac erat tincidunt, porta ante sit amet, pretium nulla. Donec accumsan, turpis id sollicitudin vehicula, lorem mauris laoreet tellus, quis mattis nisi nisi vulputate diam. Nullam tincidunt sapien lorem, eget facilisis lorem blandit in. Phasellus velit orci, lobortis at felis sed, consectetur vehicula mauris. Etiam fermentum pretium pharetra. Sed aliquet lacus imperdiet vestibulum suscipit.</p>
|
||||
|
||||
<p>Aenean in ipsum venenatis, interdum tellus vel, semper magna. Fusce faucibus nisl ac sem ultrices,<div id="insetShape" class="shape"></div> in convallis elit mollis. Nulla et libero sem. Duis sollicitudin dui orci, at ornare ante imperdiet a. Donec aliquam nisi id quam interdum aliquam. Etiam mollis consequat magna, ut iaculis dolor imperdiet eu. Aenean vehicula sapien sit amet neque mollis, porta tin
|
||||
|
||||
cidunt augue posuere. Donec vitae lorem sed lectus hendrerit pellentesque vel scelerisque erat. Maecenas fringilla magna neque, ac mollis nisl pharetra sit amet. Nam tempus justo justo, eget sollicitudin libero varius vitae. Maecenas rutrum neque sed pretium ornare. Pellentesque odio metus, convallis eget euismod id, pulvinar vitae nibh. Suspendisse potenti. Integer nec turpis in justo porttitor hendrerit. Pellentesque commodo laoreet dolor vitae eleifend.</p>
|
||||
|
||||
<p>Vestibulum elementum nunc eu tempus rhoncus. <div id="roundedInsetShape" class="shape"></div>Donec sed nunc a ligula cursus sagittis. Etiam lacinia aliquet est, at sagittis eros bibendum ac. In vulputate mauris eget tincidunt varius. Phasellus quis
|
||||
|
||||
rutrum orci, eget porttitor lectus. Etiam lacus metus, egestas eget justo in, laoreet lobortis purus. Nunc luctus, sapien vestibulum viverra consectetur, dolor metus eleifend elit, ac placerat sem lacus a lacus. Aliquam volutpat neque a odio aliquam, id imperdiet tellus varius. Duis at nisi vitae nisi imperdiet mollis. Sed congue justo eget justo interdum porta. Aenean vel tincidunt metus, et commodo enim. Class aptent taciti sociosqu ad litora torquent per
|
||||
conubia nostra, per inceptos himenaeos. Aliquam congue aliquet turpis sit amet bibendum.</p>
|
||||
|
||||
<p><div id="triangleLeft" class="shape"></div>Sed velit dui, egestas vitae mi ac, semper dapibus est. <div id="triangleRight" class="shape"></div>In rhoncus tellus id libero convallis ultrices. Ut velit augue, ornare eu eros a, feugiat tincidunt magna. Morbi ut ullamcorper nunc. Nam auctor nisi in erat varius placerat. Mauris rhoncus ac lectus vitae rutrum. Nullam et risus magna. Cras egestas aliquam tristique. Cras imperdiet euismod nisl vitae ullamcorper. Nullam ut quam vel dolor mollis malesuada id et sem. Pellentesque nec quam nec est consectetur aliquam in eu enim. Mauris tempor nisl ac nisl sollicitudin, a bibendum velit elementum. Duis ornare metus elementum nulla interdum, sed pellentesque purus ultrices. Donec varius, risus nec laoreet rhoncus, enim est fringilla risus, sed bibendum augue arcu ac mi. Cras et placerat ipsum, in scelerisque mi.</p>
|
||||
|
||||
<p><div id="circleShape" class="shape"></div>Donec sodales
|
||||
|
||||
commodo magna. Praesent a sapien eget arcu scelerisque pellentesque. Cur
|
||||
abitur lorem nisi, rhoncus sed laoreet sit amet, mattis non metus.
|
||||
Quisque dictum eget massa ut cursus. Fusce eget tristique massa. Cras eu massa augue. Curabitur dictum pellentesque venenatis.
|
||||
Curabitur sit amet neque eget urna convallis vehicula sit amet pellentesque libero. Suspendisse non tincidunt elit.
|
||||
<div id="triangleLeft" class="shape"></div>Ut iaculis est odio, a aliquam odio auctor a. Sed varius dolor ac mattis rhoncus. Aenean tellus elit, feugiat sit amet pretium lacinia, viverra hendrerit nunc. Vestibulum rutrum vel orci eget aliquam. Etiam congue justo eu massa semper ornare. Curabitur at nunc vitae tellus malesuada euismod nec nec est.</p>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis metus arcu, euismod a ipsum gravida, commodo sagittis lectus. Maecenas nisl sem, pretium vitae neque et, sollicitudin scelerisque sapien. Vivamus scelerisque dolor hendrerit magna ullamcorper tincidunt. Phasellus non purus ultrices, tincidunt dui interdum, pellentesque massa. Duis a orci massa. Quisque non orci in massa hendrerit auctor vel eu mi. Aliquam sit amet rutrum tellus.</p>
|
||||
|
||||
<p>Donec in libero id erat hendrerit hendrerit. In nulla augue, tristique mattis pharetra vel, <div id="selfIntersectingStar"></div>sodales vel libero. Mauris consectetur nibh eu odio gravida, non venenatis nibh tincidunt. Praesent nec magna orci. Vestibulum porta, risus eget cursus ullamcorper, sem ante blandit leo, sit amet tristique
|
||||
|
||||
mauris vitae, gravida tortor. Suspendisse sed erat adipiscing, hendrerit massa quis, tincidunt nulla. Praesent tristique, ante non posuere placerat, massa augue ultrices arcu, ut faucibus nunc eros sed nulla. Duis dolor dui, dapibus eget aliquam posuere, faucibus vel neque. Donec dictum urna nisi, vitae elementum magna bibendum at. Integer porta porttitor bibendum. Praesent rutrum libero sed pharetra varius. Nulla lectus turpis, cursus a fermentum vel, dictum in elit. Etiam vel pharetra lectus, vitae fermentum justo. Quisque eu lacus non odio dignissim luctus eu ac massa.</p>
|
||||
|
||||
<p>Curabitur rutrum ornare mi at accumsan. Vivamus sagittis magna eros, sed blandit metus placerat ut. Proin blandit, elit ut porta tristique, nisi augue suscipit augue, at dictum ipsum libero sit amet orci. Vivamus nec dui id ipsum pharetra volutpat. Donec et tellus in risus condimentum tristique nec sed eros. Maecenas nec nibh sit amet augue tristique sollicitudin. Sed sit amet interdum justo. Cras at dui ante. Morbi consequat neque nulla, porttitor consectetur justo convallis id. Nunc tincidunt aliquam rutrum.</p>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<p><div id="circleShape" class="shape"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec enim faucibus, laoreet mauris quis, sollicitudin nisl. Curabitur feugiat blandit gravida. Duis feugiat sapien sem, quis tincidunt nisl gravida a. Suspendisse dignissim ullamcorper mauris in fringilla. Suspendisse dapibus metus vitae lorem tristique, nec laoreet diam venenatis. Proin eget rhoncus diam. Ut a aliquet eros. Duis vitae vestibulum erat. Cras pretium auctor sem ac tristique. Nam dictum enim ac urna ullamcorper tempus. Aenean felis elit, dictum vel fringilla sed, imperdiet a purus.</p>
|
||||
|
||||
<p><div id="imageShape" class="shape"></div>Suspendisse augue lacus, facilisis vitae orci sit amet, elementum pharetra lacus. Mauris ac sem est. Nulla ac erat tincidunt, porta ante sit amet, pretium nulla. Donec accumsan, turpis id sollicitudin vehicula, lorem mauris laoreet tellus, quis mattis nisi nisi vulputate diam. Nullam tincidunt sapien lorem, eget facilisis lorem blandit in. Phasellus velit orci, lobortis at felis sed, consectetur vehicula mauris. Etiam fermentum pretium pharetra. Sed aliquet lacus imperdiet vestibulum suscipit.</p>
|
||||
|
||||
<p>>Aenean in ipsum venenatis, interdum tellus vel, semper magna. Fusce faucibus nisl ac sem ultrices,<div id="insetShape" class="shape"></div> in convallis elit mollis. Nulla et libero sem. Duis sollicitudin dui orci, at ornare ante imperdiet a. Donec aliquam nisi id quam interdum aliquam. Etiam mollis consequat magna, ut iaculis dolor imperdiet eu. Aenean vehicula sapien sit amet neque mollis, porta tincidunt augue posuere. Donec vitae lorem sed lectus hendrerit pellentesque vel scelerisque erat. Maecenas fringilla magna neque, ac mollis nisl pharetra sit amet. Nam tempus justo justo, eget sollicitudin libero varius vitae. Maecenas rutrum neque sed pretium ornare. Pellentesque odio metus, convallis eget euismod id, pulvinar vitae nibh. Suspendisse potenti. Integer nec turpis in justo porttitor hendrerit. Pellentesque commodo laoreet dolor vitae eleifend.</p>
|
||||
|
||||
<p>Vestibulum elementum nunc eu tempus rhoncus. <div id="roundedInsetShape" class="shape"></div>Donec sed nunc a ligula cursus sagittis. Etiam lacinia aliquet est, at sagittis eros bibendum ac. In vulputate mauris eget tincidunt varius. Phasellus quis rutrum orci, eget porttitor lectus. Etiam lacus metus, egestas eget justo in, laoreet lobortis purus. Nunc luctus, sapien vestibulum viverra consectetur, dolor metus eleifend elit, ac placerat sem lacus a lacus. Aliquam volutpat neque a odio aliquam, id imperdiet tellus varius. Duis at nisi vitae nisi imperdiet mollis. Sed congue justo eget justo interdum porta. Aenean vel tincidunt metus, et commodo enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam congue aliquet turpis sit amet bibendum.</p>
|
||||
|
||||
<p><div id="triangleLeft" class="shape"></div>Sed velit dui, egestas vitae mi ac, semper dapibus est. <div id="triangleRight" class="shape"></div>In rhoncus tellus id libero convallis ultrices. Ut velit augue, ornare eu eros a, feugiat tincidunt magna. Morbi ut ullamcorper nunc. Nam auctor nisi in erat varius placerat. Mauris rhoncus ac lectus vitae rutrum. Nullam et risus magna. Cras egestas aliquam tristique. Cras imperdiet euismod nisl vitae ullamcorper. Nullam ut quam vel dolor mollis malesuada id et sem. Pellentesque nec quam nec est consectetur aliquam in eu enim. Mauris tempor nisl ac nisl sollicitudin, a bibendum velit elementum. Duis ornare metus elementum nulla interdum, sed pellentesque purus ultrices. Donec varius, risus nec laoreet rhoncus, enim est fringilla risus, sed bibendum augue arcu ac mi. Cras et placerat ipsum, in scelerisque mi.</p>
|
||||
|
||||
<p><div id="circleShape" class="shape"></div>Donec sodales commodo magna. Praesent a sapien eget arcu scelerisque pellentesque. Curabitur lorem nisi, rhoncus sed laoreet sit amet, mattis non metus.
|
||||
Quisque dictum eget massa ut cursus. Fusce eget tristique massa. Cras eu massa augue. Curabitur dictum pellentesque venenatis.
|
||||
Curabitur sit amet neque eget urna convallis vehicula sit amet pellentesque libero. Suspendisse non tincidunt elit.
|
||||
<div id="triangleLeft" class="shape"></div>Ut iaculis est odio, a aliquam odio auctor a. Sed varius dolor ac mattis rhoncus. Aenean tellus elit, feugiat sit amet pretium lacinia, viverra hendrerit nunc. Vestibulum rutrum vel orci eget aliquam. Etiam congue justo eu massa semper ornare. Curabitur at nunc vitae tellus malesuada euismod nec nec est.</p>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis metus arcu, euismod a ipsum gravida, commodo sagittis lectus. Maecenas nisl sem, pretium vitae neque et, sollicitudin scelerisque sapien. Vivamus scelerisque dolor hendrerit magna ullamcorper tincidunt. Phasellus non purus ultrices, tincidunt dui interdum, pellentesque massa. Duis a orci massa. Quisque non orci in massa hendrerit auctor vel eu mi. Aliquam sit amet rutrum tellus.</p>
|
||||
|
||||
<p>Donec in libero id erat hendrerit hendrerit. In nulla augue, tristique mattis pharetra vel, <div id="selfIntersectingStar"></div>sodales vel libero. Mauris consectetur nibh eu odio gravida, non venenatis nibh tincidunt. Praesent nec magna orci. Vestibulum porta, risus eget cursus ullamcorper, sem ante blandit leo, sit amet tristique mauris magna eu enim. Praesent vel nisl sodales, fringilla mauris vitae, gravida tortor. Suspendisse sed erat adipiscing, hendrerit massa quis, tincidunt nulla. Praesent tristique, ante non posuere placerat, massa augue ultrices arcu, ut faucibus nunc eros sed nulla. Duis dolor dui, dapibus eget aliquam posuere, faucibus vel neque. Donec dictum urna nisi, vitae elementum magna bibendum at. Integer porta porttitor bibendum. Praesent rutrum libero sed pharetra varius. Nulla lectus turpis, cursus a fermentum vel, dictum in elit. Etiam vel pharetra lectus, vitae fermentum justo. Quisque eu lacus non odio dignissim luctus eu ac massa.</p>
|
||||
|
||||
<p>Curabitur rutrum ornare mi at accumsan. Vivamus sagittis magna eros, sed blandit metus placerat ut. Proin blandit, elit ut porta tristique, nisi augue suscipit augue, at dictum ipsum libero sit amet orci. Vivamus nec dui id ipsum pharetra volutpat. Donec et tellus in risus condimentum tristique nec sed eros. Maecenas nec nibh sit amet augue tristique sollicitudin. Sed sit amet interdum justo. Cras at dui ante. Morbi consequat neque nulla, porttitor consectetur justo convallis id. Nunc tincidunt aliquam rutrum.</p>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<p><div id="circleShape" class="shape"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec enim faucibus, laoreet mauris quis, sollicitudin nisl. Curabitur feugiat blandit gravida. Duis feugiat sapien sem, quis tincidunt nisl gravida a. Suspendisse dignissim ullamcorper mauris in fringilla. Suspendisse dapibus metus vitae lorem tristique, nec laoreet diam venenatis. Proin eget rhoncus diam. Ut a aliquet eros. Duis vitae vestibulum erat. Cras pretium auctor sem ac tristique. Nam dictum enim ac urna ullamcorper tempus. Aenean felis elit, dictum vel fringilla sed, imperdiet a purus.</p>
|
||||
|
||||
<p><div id="imageShape" class="shape"></div>Suspendisse augue lacus, facilisis vitae orci sit amet, elementum pharetra lacus. Mauris ac sem est. Nulla ac erat tincidunt, porta ante sit amet, pretium nulla. Donec accumsan, turpis id sollicitudin vehicula, lorem mauris laoreet tellus, quis mattis nisi nisi vulputate diam. Nullam tincidunt sapien lorem, eget facilisis lorem blandit in. Phasellus velit orci, lobortis at felis sed, consectetur vehicula mauris. Etiam fermentum pretium pharetra. Sed aliquet lacus imperdiet vestibulum suscipit.</p>
|
||||
|
||||
<p>>Aenean in ipsum venenatis, interdum tellus vel, semper magna. Fusce faucibus nisl ac sem ultrices,<div id="insetShape" class="shape"></div> in convallis elit mollis. Nulla et libero sem. Duis sollicitudin dui orci, at ornare ante imperdiet a. Donec aliquam nisi id quam interdum aliquam. Etiam mollis consequat magna, ut iaculis dolor imperdiet eu. Aenean vehicula sapien sit amet neque mollis, porta tincidunt augue posuere. Donec vitae lorem sed lectus hendrerit pellentesque vel scelerisque erat. Maecenas fringilla magna neque, ac mollis nisl pharetra sit amet. Nam tempus justo justo, eget sollicitudin libero varius vitae. Maecenas rutrum neque sed pretium ornare. Pellentesque odio metus, convallis eget euismod id, pulvinar vitae nibh. Suspendisse potenti. Integer nec turpis in justo porttitor hendrerit. Pellentesque commodo laoreet dolor vitae eleifend.</p>
|
||||
|
||||
<p>Vestibulum elementum nunc eu tempus rhoncus. <div id="roundedInsetShape" class="shape"></div>Donec sed nunc a ligula cursus sagittis. Etiam lacinia aliquet est, at sagittis eros bibendum ac. In vulputate mauris eget tincidunt varius. Phasellus quis rutrum orci, eget porttitor lectus. Etiam lacus metus, egestas eget justo in, laoreet lobortis purus. Nunc luctus, sapien vestibulum viverra consectetur, dolor metus eleifend elit, ac placerat sem lacus a lacus. Aliquam volutpat neque a odio aliquam, id imperdiet tellus varius. Duis at nisi vitae nisi imperdiet mollis. Sed congue justo eget justo interdum porta. Aenean vel tincidunt metus, et commodo enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam congue aliquet turpis sit amet bibendum.</p>
|
||||
|
||||
<p><div id="triangleLeft" class="shape"></div>Sed velit dui, egestas vitae mi ac, semper dapibus est. <div id="triangleRight" class="shape"></div>In rhoncus tellus id libero convallis ultrices. Ut velit augue, ornare eu eros a, feugiat tincidunt magna. Morbi ut ullamcorper nunc. Nam auctor nisi in erat varius placerat. Mauris rhoncus ac lectus vitae rutrum. Nullam et risus magna. Cras egestas aliquam tristique. Cras imperdiet euismod nisl vitae ullamcorper. Nullam ut quam vel dolor mollis malesuada id et sem. Pellentesque nec quam nec est consectetur aliquam in eu enim. Mauris tempor nisl ac nisl sollicitudin, a bibendum velit elementum. Duis ornare metus elementum nulla interdum, sed pellentesque purus ultrices. Donec varius, risus nec laoreet rhoncus, enim est fringilla risus, sed bibendum augue arcu ac mi. Cras et placerat ipsum, in scelerisque mi.</p>
|
||||
|
||||
<p><div id="circleShape" class="shape"></div>Donec sodales commodo magna. Praesent a sapien eget arcu scelerisque pellentesque. Curabitur lorem nisi, rhoncus sed laoreet sit amet, mattis non metus.
|
||||
Quisque dictum eget massa ut cursus. Fusce eget tristique massa. Cras eu massa augue. Curabitur dictum pellentesque venenatis.
|
||||
Curabitur sit amet neque eget urna convallis vehicula sit amet pellentesque libero. Suspendisse non tincidunt elit.
|
||||
<div id="triangleLeft" class="shape"></div>Ut iaculis est odio, a aliquam odio auctor a. Sed varius dolor ac mattis rhoncus. Aenean tellus elit, feugiat sit amet pretium lacinia, viverra hendrerit nunc. Vestibulum rutrum vel orci eget aliquam. Etiam congue justo eu massa semper ornare. Curabitur at nunc vitae tellus malesuada euismod nec nec est.</p>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis metus arcu, euismod a ipsum gravida, commodo sagittis lectus. Maecenas nisl sem, pretium vitae neque et, sollicitudin scelerisque sapien. Vivamus scelerisque dolor hendrerit magna ullamcorper tincidunt. Phasellus non purus ultrices, tincidunt dui interdum, pellentesque massa. Duis a orci massa. Quisque non orci in massa hendrerit auctor vel eu mi. Aliquam sit amet rutrum tellus.</p>
|
||||
|
||||
<p>Donec in libero id erat hendrerit hendrerit. In nulla augue, tristique mattis pharetra vel, <div id="selfIntersectingStar"></div>sodales vel libero. Mauris consectetur nibh eu odio gravida, non venenatis nibh tincidunt. Praesent nec magna orci. Vestibulum porta, risus eget cursus ullamcorper, sem ante blandit leo, sit amet tristique mauris magna eu enim. Praesent vel nisl sodales, fringilla mauris vitae, gravida tortor. Suspendisse sed erat adipiscing, hendrerit massa quis, tincidunt nulla. Praesent tristique, ante non posuere placerat, massa augue ultrices arcu, ut faucibus nunc eros sed nulla. Duis dolor dui, dapibus eget aliquam posuere, faucibus vel neque. Donec dictum urna nisi, vitae elementum magna bibendum at. Integer porta porttitor bibendum. Praesent rutrum libero sed pharetra varius. Nulla lectus turpis, cursus a fermentum vel, dictum in elit. Etiam vel pharetra lectus, vitae fermentum justo. Quisque eu lacus non odio dignissim luctus eu ac massa.</p>
|
||||
|
||||
<p>Curabitur rutrum ornare mi at accumsan. Vivamus sagittis magna eros, sed blandit metus placerat ut. Proin blandit, elit ut porta tristique, nisi augue suscipit augue, at dictum ipsum libero sit amet orci. Vivamus nec dui id ipsum pharetra volutpat. Donec et tellus in risus condimentum tristique nec sed eros. Maecenas nec nibh sit amet augue tristique sollicitudin. Sed sit amet interdum justo. Cras at dui ante. Morbi consequat neque nulla, porttitor consectetur justo convallis id. Nunc tincidunt aliquam rutrum.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="resources/MultipleShapes.css">
|
||||
<style>
|
||||
body { width: 600px; }
|
||||
|
||||
#imageShape {
|
||||
background: url("./resources/shape.gif") no-repeat;
|
||||
shape-outside: url("./resources/shape.gif");
|
||||
}
|
||||
|
||||
.regionColumns {
|
||||
float: left;
|
||||
height: 600px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.columnLeftBorder {
|
||||
border-left: 1px solid lightgray;
|
||||
padding-left: 3%;
|
||||
margin-left: 3%;
|
||||
}
|
||||
|
||||
.region {
|
||||
clear: both;
|
||||
padding-top: 20px;
|
||||
margin-right: 2%;
|
||||
}
|
||||
#region1, #region2 { width: 46%; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="page">
|
||||
<div id="region1" class="regionColumns">
|
||||
<p><div id="circleShape" class="shape"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec enim faucibus, laoreet mauris quis, sollicitudin nisl. Curabitur feugiat blandit gravida. Duis feugiat sapien sem, quis tincidunt nisl gravida a. Suspendisse dignissim ullamcorper mauris in fringilla. Suspendisse dapibus metus vitae lorem tristique, nec laoreet diam venenatis. Proin eget rhoncus diam. Ut a aliquet eros. Duis vitae vestibulum erat. Cras pretium auctor sem ac tristique. Nam dictum enim ac urna ullamcorper tempus. Aenean felis elit, dictum vel fringilla sed, imperdiet a purus.</p>
|
||||
|
||||
<p><div id="imageShape" class="shape"></div>Suspendisse augue lacus, facilisis vitae orci sit amet, elementum pharetra lacus. Mauris ac sem est. Nulla ac erat tincidunt, porta ante sit amet, pretium nulla. Donec accumsan, turpis id sollicitudin vehicula, lorem mauris laoreet tellus, quis mattis nisi nisi vulputate diam. Nullam tincidunt sapien lorem, eget facilisis lorem blandit in. Phasellus velit orci, lobortis at felis sed, consectetur vehicula mauris. Etiam fermentum pretium pharetra. Sed aliquet lacus imperdiet vestibulum suscipit.</p>
|
||||
|
||||
<p>Aenean in ipsum venenatis, interdum tellus vel, semper magna. Fusce faucibus nisl ac sem ultrices,<div id="insetShape" class="shape"></div> in convallis elit mollis. Nulla et libero sem. Duis sollicitudin dui orci, at ornare ante imperdiet a. Donec aliquam nisi id quam interdum aliquam. Etiam mollis consequat magna, ut iaculis dolor imperdiet eu. Aenean vehicula sapien sit amet neque mollis, porta tin
|
||||
cidunt augue posuere. Donec vitae lorem sed lectus hendrerit pellentesque vel scelerisque erat. Maecenas fringilla magna neque, ac mollis nisl pharetra sit amet. Nam tempus justo justo, eget sollicitudin libero varius vitae. Maecenas rutrum neque sed pretium ornare. Pellentesque odio metus, convallis eget euismod id, pulvinar vitae nibh. Suspendisse potenti. Integer nec turpis in
|
||||
|
||||
</div>
|
||||
<div id="region2" class="regionColumns columnLeftBorder">
|
||||
justo porttitor hendrerit. Pellentesque commodo laoreet dolor vitae eleifend.</p>
|
||||
|
||||
<p>Vestibulum elementum nunc eu tempus rhoncus. <div id="roundedInsetShape" class="shape"></div>Donec sed nunc a ligula cursus sagittis. Etiam lacinia aliquet est, at sagittis eros bibendum ac. In vulputate mauris eget tincidunt varius. Phasellus quis
|
||||
|
||||
rutrum orci, eget porttitor lectus. Etiam lacus metus, egestas eget justo in, laoreet lobortis purus. Nunc luctus, sapien vestibulum viverra consectetur, dolor metus eleifend elit, ac placerat sem lacus a lacus. Aliquam volutpat neque a odio aliquam, id imperdiet tellus varius. Duis at nisi vitae nisi imperdiet mollis. Sed congue justo eget justo interdum porta. Aenean vel tincidunt metus, et commodo enim. Class aptent taciti sociosqu ad litora torquent per
|
||||
conubia nostra, per inceptos himenaeos. Aliquam congue aliquet turpis sit amet bibendum.</p>
|
||||
|
||||
<p><div id="triangleLeft" class="shape"></div>Sed velit dui, egestas vitae mi ac, semper dapibus est. <div id="triangleRight" class="shape"></div>In rhoncus tellus id libero convallis ultrices. Ut velit augue, ornare eu eros a, feugiat tincidunt magna. Morbi ut ullamcorper nunc. Nam auctor nisi in erat varius placerat. Mauris rhoncus ac lectus vitae rutrum. Nullam et risus magna. Cras egestas aliquam tristique. Cras imperdiet euismod nisl vitae ullamcorper. Nullam ut quam vel dolor mollis malesuada id et sem. Pellentesque nec quam nec est consectetur aliquam in eu enim. Mauris tempor nisl ac nisl sollicitudin, a bibendum velit elementum. Duis ornare metus elementum nulla interdum, sed pellentesque purus ultrices. Donec varius, risus nec laoreet rhoncus, enim est fringilla risus, sed bibendum augue arcu ac mi. Cras et placerat ipsum, in scelerisque mi.</p>
|
||||
|
||||
<p><div id="circleShape" class="shape"></div>Donec sodales commodo magna. Praesent a sapien eget arcu scelerisque pellentesque. Cur abitur lorem nisi, rhoncus sed laoreet sit amet, mattis non metus.
|
||||
Quisque dictum eget massa ut cursus. Fusce eget tristique massa. Cras eu massa augue. Curabitur dictum pellentesque venenatis.
|
||||
Curabitur sit amet neque eget urna convallis vehicula sit amet pellentesque libero. Suspendisse non tincidunt elit. Ut iaculis
|
||||
</div>
|
||||
<div class="region">
|
||||
<div id="triangleLeft" class="shape"></div>est odio, a aliquam odio auctor a. Sed varius dolor ac mattis rhoncus. Aenean tellus elit, feugiat sit amet pretium lacinia, viverra hendrerit nunc. Vestibulum rutrum vel orci eget aliquam. Etiam congue justo eu massa semper ornare. Curabitur at nunc vitae tellus malesuada euismod nec nec est.</p>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis metus arcu, euismod a ipsum gravida, commodo sagittis lectus. Maecenas nisl sem, pretium vitae neque et, sollicitudin scelerisque sapien. Vivamus scelerisque dolor hendrerit magna ullamcorper tincidunt. Phasellus non purus ultrices, tincidunt dui interdum, pellentesque massa. Duis a orci massa. Quisque non orci in massa hendrerit auctor vel eu mi. Aliquam sit amet rutrum tellus.</p>
|
||||
|
||||
<p>Donec in libero id erat hendrerit hendrerit. In nulla augue, tristique mattis pharetra vel, <div id="selfIntersectingStar"></div>sodales vel libero. Mauris consectetur nibh eu odio gravida, non venenatis nibh tincidunt. Praesent nec magna orci. Vestibulum porta, risus eget cursus ullamcorper, sem ante blandit leo, sit amet tristique
|
||||
|
||||
mauris vitae, gravida tortor. Suspendisse sed erat adipiscing, hendrerit massa quis, tincidunt nulla. Praesent tristique, ante non posuere placerat, massa augue ultrices arcu, ut faucibus nunc eros sed nulla. Duis dolor dui, dapibus eget aliquam posuere, faucibus vel neque. Donec dictum urna nisi, vitae elementum magna bibendum at. Integer porta porttitor bibendum. Praesent rutrum libero sed pharetra varius. Nulla lectus turpis, cursus a fermentum vel, dictum in elit. Etiam vel pharetra lectus, vitae fermentum justo. Quisque eu lacus non odio dignissim luctus eu ac massa.</p>
|
||||
|
||||
<p>Curabitur rutrum ornare mi at accumsan. Vivamus sagittis magna eros, sed blandit metus placerat ut. Proin blandit, elit ut porta tristique, nisi augue suscipit augue, at dictum ipsum libero sit amet orci. Vivamus nec dui id ipsum pharetra volutpat. Donec et tellus in risus condimentum tristique nec sed eros. Maecenas nec nibh sit amet augue tristique sollicitudin. Sed sit amet interdum justo. Cras at dui ante. Morbi consequat neque nulla, porttitor consectetur justo convallis id. Nunc tincidunt aliquam rutrum.</p>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<p><div id="circleShape" class="shape"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec enim faucibus, laoreet mauris quis, sollicitudin nisl. Curabitur feugiat blandit gravida. Duis feugiat sapien sem, quis tincidunt nisl gravida a. Suspendisse dignissim ullamcorper mauris in fringilla. Suspendisse dapibus metus vitae lorem tristique, nec laoreet diam venenatis. Proin eget rhoncus diam. Ut a aliquet eros. Duis vitae vestibulum erat. Cras pretium auctor sem ac tristique. Nam dictum enim ac urna ullamcorper tempus. Aenean felis elit, dictum vel fringilla sed, imperdiet a purus.</p>
|
||||
|
||||
<p><div id="imageShape" class="shape"></div>Suspendisse augue lacus, facilisis vitae orci sit amet, elementum pharetra lacus. Mauris ac sem est. Nulla ac erat tincidunt, porta ante sit amet, pretium nulla. Donec accumsan, turpis id sollicitudin vehicula, lorem mauris laoreet tellus, quis mattis nisi nisi vulputate diam. Nullam tincidunt sapien lorem, eget facilisis lorem blandit in. Phasellus velit orci, lobortis at felis sed, consectetur vehicula mauris. Etiam fermentum pretium pharetra. Sed aliquet lacus imperdiet vestibulum suscipit.</p>
|
||||
|
||||
<p>>Aenean in ipsum venenatis, interdum tellus vel, semper magna. Fusce faucibus nisl ac sem ultrices,<div id="insetShape" class="shape"></div> in convallis elit mollis. Nulla et libero sem. Duis sollicitudin dui orci, at ornare ante imperdiet a. Donec aliquam nisi id quam interdum aliquam. Etiam mollis consequat magna, ut iaculis dolor imperdiet eu. Aenean vehicula sapien sit amet neque mollis, porta tincidunt augue posuere. Donec vitae lorem sed lectus hendrerit pellentesque vel scelerisque erat. Maecenas fringilla magna neque, ac mollis nisl pharetra sit amet. Nam tempus justo justo, eget sollicitudin libero varius vitae. Maecenas rutrum neque sed pretium ornare. Pellentesque odio metus, convallis eget euismod id, pulvinar vitae nibh. Suspendisse potenti. Integer nec turpis in justo porttitor hendrerit. Pellentesque commodo laoreet dolor vitae eleifend.</p>
|
||||
|
||||
<p>Vestibulum elementum nunc eu tempus rhoncus. <div id="roundedInsetShape" class="shape"></div>Donec sed nunc a ligula cursus sagittis. Etiam lacinia aliquet est, at sagittis eros bibendum ac. In vulputate mauris eget tincidunt varius. Phasellus quis rutrum orci, eget porttitor lectus. Etiam lacus metus, egestas eget justo in, laoreet lobortis purus. Nunc luctus, sapien vestibulum viverra consectetur, dolor metus eleifend elit, ac placerat sem lacus a lacus. Aliquam volutpat neque a odio aliquam, id imperdiet tellus varius. Duis at nisi vitae nisi imperdiet mollis. Sed congue justo eget justo interdum porta. Aenean vel tincidunt metus, et commodo enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam congue aliquet turpis sit amet bibendum.</p>
|
||||
|
||||
<p><div id="triangleLeft" class="shape"></div>Sed velit dui, egestas vitae mi ac, semper dapibus est. <div id="triangleRight" class="shape"></div>In rhoncus tellus id libero convallis ultrices. Ut velit augue, ornare eu eros a, feugiat tincidunt magna. Morbi ut ullamcorper nunc. Nam auctor nisi in erat varius placerat. Mauris rhoncus ac lectus vitae rutrum. Nullam et risus magna. Cras egestas aliquam tristique. Cras imperdiet euismod nisl vitae ullamcorper. Nullam ut quam vel dolor mollis malesuada id et sem. Pellentesque nec quam nec est consectetur aliquam in eu enim. Mauris tempor nisl ac nisl sollicitudin, a bibendum velit elementum. Duis ornare metus elementum nulla interdum, sed pellentesque purus ultrices. Donec varius, risus nec laoreet rhoncus, enim est fringilla risus, sed bibendum augue arcu ac mi. Cras et placerat ipsum, in scelerisque mi.</p>
|
||||
|
||||
<p><div id="circleShape" class="shape"></div>Donec sodales commodo magna. Praesent a sapien eget arcu scelerisque pellentesque. Curabitur lorem nisi, rhoncus sed laoreet sit amet, mattis non metus.
|
||||
Quisque dictum eget massa ut cursus. Fusce eget tristique massa. Cras eu massa augue. Curabitur dictum pellentesque venenatis.
|
||||
Curabitur sit amet neque eget urna convallis vehicula sit amet pellentesque libero. Suspendisse non tincidunt elit.
|
||||
<div id="triangleLeft" class="shape"></div>Ut iaculis est odio, a aliquam odio auctor a. Sed varius dolor ac mattis rhoncus. Aenean tellus elit, feugiat sit amet pretium lacinia, viverra hendrerit nunc. Vestibulum rutrum vel orci eget aliquam. Etiam congue justo eu massa semper ornare. Curabitur at nunc vitae tellus malesuada euismod nec nec est.</p>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis metus arcu, euismod a ipsum gravida, commodo sagittis lectus. Maecenas nisl sem, pretium vitae neque et, sollicitudin scelerisque sapien. Vivamus scelerisque dolor hendrerit magna ullamcorper tincidunt. Phasellus non purus ultrices, tincidunt dui interdum, pellentesque massa. Duis a orci massa. Quisque non orci in massa hendrerit auctor vel eu mi. Aliquam sit amet rutrum tellus.</p>
|
||||
|
||||
<p>Donec in libero id erat hendrerit hendrerit. In nulla augue, tristique mattis pharetra vel, <div id="selfIntersectingStar"></div>sodales vel libero. Mauris consectetur nibh eu odio gravida, non venenatis nibh tincidunt. Praesent nec magna orci. Vestibulum porta, risus eget cursus ullamcorper, sem ante blandit leo, sit amet tristique mauris magna eu enim. Praesent vel nisl sodales, fringilla mauris vitae, gravida tortor. Suspendisse sed erat adipiscing, hendrerit massa quis, tincidunt nulla. Praesent tristique, ante non posuere placerat, massa augue ultrices arcu, ut faucibus nunc eros sed nulla. Duis dolor dui, dapibus eget aliquam posuere, faucibus vel neque. Donec dictum urna nisi, vitae elementum magna bibendum at. Integer porta porttitor bibendum. Praesent rutrum libero sed pharetra varius. Nulla lectus turpis, cursus a fermentum vel, dictum in elit. Etiam vel pharetra lectus, vitae fermentum justo. Quisque eu lacus non odio dignissim luctus eu ac massa.</p>
|
||||
|
||||
<p>Curabitur rutrum ornare mi at accumsan. Vivamus sagittis magna eros, sed blandit metus placerat ut. Proin blandit, elit ut porta tristique, nisi augue suscipit augue, at dictum ipsum libero sit amet orci. Vivamus nec dui id ipsum pharetra volutpat. Donec et tellus in risus condimentum tristique nec sed eros. Maecenas nec nibh sit amet augue tristique sollicitudin. Sed sit amet interdum justo. Cras at dui ante. Morbi consequat neque nulla, porttitor consectetur justo convallis id. Nunc tincidunt aliquam rutrum.</p>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<p><div id="circleShape" class="shape"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec enim faucibus, laoreet mauris quis, sollicitudin nisl. Curabitur feugiat blandit gravida. Duis feugiat sapien sem, quis tincidunt nisl gravida a. Suspendisse dignissim ullamcorper mauris in fringilla. Suspendisse dapibus metus vitae lorem tristique, nec laoreet diam venenatis. Proin eget rhoncus diam. Ut a aliquet eros. Duis vitae vestibulum erat. Cras pretium auctor sem ac tristique. Nam dictum enim ac urna ullamcorper tempus. Aenean felis elit, dictum vel fringilla sed, imperdiet a purus.</p>
|
||||
|
||||
<p><div id="imageShape" class="shape"></div>Suspendisse augue lacus, facilisis vitae orci sit amet, elementum pharetra lacus. Mauris ac sem est. Nulla ac erat tincidunt, porta ante sit amet, pretium nulla. Donec accumsan, turpis id sollicitudin vehicula, lorem mauris laoreet tellus, quis mattis nisi nisi vulputate diam. Nullam tincidunt sapien lorem, eget facilisis lorem blandit in. Phasellus velit orci, lobortis at felis sed, consectetur vehicula mauris. Etiam fermentum pretium pharetra. Sed aliquet lacus imperdiet vestibulum suscipit.</p>
|
||||
|
||||
<p>>Aenean in ipsum venenatis, interdum tellus vel, semper magna. Fusce faucibus nisl ac sem ultrices,<div id="insetShape" class="shape"></div> in convallis elit mollis. Nulla et libero sem. Duis sollicitudin dui orci, at ornare ante imperdiet a. Donec aliquam nisi id quam interdum aliquam. Etiam mollis consequat magna, ut iaculis dolor imperdiet eu. Aenean vehicula sapien sit amet neque mollis, porta tincidunt augue posuere. Donec vitae lorem sed lectus hendrerit pellentesque vel scelerisque erat. Maecenas fringilla magna neque, ac mollis nisl pharetra sit amet. Nam tempus justo justo, eget sollicitudin libero varius vitae. Maecenas rutrum neque sed pretium ornare. Pellentesque odio metus, convallis eget euismod id, pulvinar vitae nibh. Suspendisse potenti. Integer nec turpis in justo porttitor hendrerit. Pellentesque commodo laoreet dolor vitae eleifend.</p>
|
||||
|
||||
<p>Vestibulum elementum nunc eu tempus rhoncus. <div id="roundedInsetShape" class="shape"></div>Donec sed nunc a ligula cursus sagittis. Etiam lacinia aliquet est, at sagittis eros bibendum ac. In vulputate mauris eget tincidunt varius. Phasellus quis rutrum orci, eget porttitor lectus. Etiam lacus metus, egestas eget justo in, laoreet lobortis purus. Nunc luctus, sapien vestibulum viverra consectetur, dolor metus eleifend elit, ac placerat sem lacus a lacus. Aliquam volutpat neque a odio aliquam, id imperdiet tellus varius. Duis at nisi vitae nisi imperdiet mollis. Sed congue justo eget justo interdum porta. Aenean vel tincidunt metus, et commodo enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam congue aliquet turpis sit amet bibendum.</p>
|
||||
|
||||
<p><div id="triangleLeft" class="shape"></div>Sed velit dui, egestas vitae mi ac, semper dapibus est. <div id="triangleRight" class="shape"></div>In rhoncus tellus id libero convallis ultrices. Ut velit augue, ornare eu eros a, feugiat tincidunt magna. Morbi ut ullamcorper nunc. Nam auctor nisi in erat varius placerat. Mauris rhoncus ac lectus vitae rutrum. Nullam et risus magna. Cras egestas aliquam tristique. Cras imperdiet euismod nisl vitae ullamcorper. Nullam ut quam vel dolor mollis malesuada id et sem. Pellentesque nec quam nec est consectetur aliquam in eu enim. Mauris tempor nisl ac nisl sollicitudin, a bibendum velit elementum. Duis ornare metus elementum nulla interdum, sed pellentesque purus ultrices. Donec varius, risus nec laoreet rhoncus, enim est fringilla risus, sed bibendum augue arcu ac mi. Cras et placerat ipsum, in scelerisque mi.</p>
|
||||
|
||||
<p><div id="circleShape" class="shape"></div>Donec sodales commodo magna. Praesent a sapien eget arcu scelerisque pellentesque. Curabitur lorem nisi, rhoncus sed laoreet sit amet, mattis non metus.
|
||||
Quisque dictum eget massa ut cursus. Fusce eget tristique massa. Cras eu massa augue. Curabitur dictum pellentesque venenatis.
|
||||
Curabitur sit amet neque eget urna convallis vehicula sit amet pellentesque libero. Suspendisse non tincidunt elit.
|
||||
<div id="triangleLeft" class="shape"></div>Ut iaculis est odio, a aliquam odio auctor a. Sed varius dolor ac mattis rhoncus. Aenean tellus elit, feugiat sit amet pretium lacinia, viverra hendrerit nunc. Vestibulum rutrum vel orci eget aliquam. Etiam congue justo eu massa semper ornare. Curabitur at nunc vitae tellus malesuada euismod nec nec est.</p>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis metus arcu, euismod a ipsum gravida, commodo sagittis lectus. Maecenas nisl sem, pretium vitae neque et, sollicitudin scelerisque sapien. Vivamus scelerisque dolor hendrerit magna ullamcorper tincidunt. Phasellus non purus ultrices, tincidunt dui interdum, pellentesque massa. Duis a orci massa. Quisque non orci in massa hendrerit auctor vel eu mi. Aliquam sit amet rutrum tellus.</p>
|
||||
|
||||
<p>Donec in libero id erat hendrerit hendrerit. In nulla augue, tristique mattis pharetra vel, <div id="selfIntersectingStar"></div>sodales vel libero. Mauris consectetur nibh eu odio gravida, non venenatis nibh tincidunt. Praesent nec magna orci. Vestibulum porta, risus eget cursus ullamcorper, sem ante blandit leo, sit amet tristique mauris magna eu enim. Praesent vel nisl sodales, fringilla mauris vitae, gravida tortor. Suspendisse sed erat adipiscing, hendrerit massa quis, tincidunt nulla. Praesent tristique, ante non posuere placerat, massa augue ultrices arcu, ut faucibus nunc eros sed nulla. Duis dolor dui, dapibus eget aliquam posuere, faucibus vel neque. Donec dictum urna nisi, vitae elementum magna bibendum at. Integer porta porttitor bibendum. Praesent rutrum libero sed pharetra varius. Nulla lectus turpis, cursus a fermentum vel, dictum in elit. Etiam vel pharetra lectus, vitae fermentum justo. Quisque eu lacus non odio dignissim luctus eu ac massa.</p>
|
||||
|
||||
<p>Curabitur rutrum ornare mi at accumsan. Vivamus sagittis magna eros, sed blandit metus placerat ut. Proin blandit, elit ut porta tristique, nisi augue suscipit augue, at dictum ipsum libero sit amet orci. Vivamus nec dui id ipsum pharetra volutpat. Donec et tellus in risus condimentum tristique nec sed eros. Maecenas nec nibh sit amet augue tristique sollicitudin. Sed sit amet interdum justo. Cras at dui ante. Morbi consequat neque nulla, porttitor consectetur justo convallis id. Nunc tincidunt aliquam rutrum.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="resources/MultipleShapes.css">
|
||||
<style>
|
||||
body { width: 800px; }
|
||||
|
||||
#imageShape {
|
||||
background: url("./resources/shape.gif") no-repeat;
|
||||
shape-outside: url("./resources/shape.gif");
|
||||
}
|
||||
|
||||
.regionColumns {
|
||||
float: left;
|
||||
height: 600px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.columnLeftBorder {
|
||||
border-left: 1px solid lightgray;
|
||||
padding-left: 3%;
|
||||
margin-left: 3%;
|
||||
}
|
||||
|
||||
.region {
|
||||
clear: both;
|
||||
padding-top: 20px;
|
||||
margin-right: 2%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="page">
|
||||
<div id="region1" class="regionColumns">
|
||||
<p><div id="circleShape" class="shape"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec enim faucibus, laoreet mauris quis, sollicitudin nisl. Curabitur feugiat blandit gravida. Duis feugiat sapien sem, quis tincidunt nisl gravida a. Suspendisse dignissim ullamcorper mauris in fringilla. Suspendisse dapibus metus vitae lorem tristique, nec laoreet diam venenatis. Proin eget rhoncus diam. Ut a aliquet eros. Duis vitae vestibulum erat. Cras pretium auctor sem ac tristique. Nam dictum enim ac urna ullamcorper tempus. Aenean felis elit, dictum vel fringilla sed, imperdiet a purus.</p>
|
||||
|
||||
<p><div id="imageShape" class="shape"></div>Suspendisse augue lacus, facilisis vitae orci sit amet, elementum pharetra lacus. Mauris ac sem est. Nulla ac erat tincidunt, porta ante sit amet, pretium nulla. Donec accumsan, turpis id sollicitudin vehicula, lorem mauris laoreet tellus, quis mattis nisi nisi vulputate diam. Nullam tincidunt sapien lorem, eget facilisis lorem blandit in. Phasellus velit orci, lobortis at felis sed, consectetur vehicula mauris. Etiam fermentum pretium pharetra. Sed aliquet lacus imperdiet vestibulum suscipit.</p>
|
||||
|
||||
<p>Aenean in ipsum venenatis, interdum tellus vel, semper magna. Fusce faucibus nisl ac sem ultrices,<div id="insetShape" class="shape"></div> in convallis elit mollis. Nulla et libero sem. Duis sollicitudin dui orci, at ornare ante imperdiet a. Donec aliquam nisi id quam interdum aliquam. Etiam mollis consequat magna, ut iaculis dolor imperdiet eu. Aenean vehicula sapien sit amet neque mollis, porta tincidunt augue posuere. Donec vitae lorem sed lectus hendrerit pellentesque vel scelerisque erat. Maecenas fringilla magna neque, ac mollis nisl pharetra sit amet. Nam tempus justo justo, eget sollicitudin libero varius vitae. Maecenas rutrum neque sed pretium ornare. Pellentesque odio metus, convallis eget euismod id, pulvinar vitae nibh. Suspendisse potenti. Integer nec turpis in justo porttitor hendrerit. Pellentesque commodo laoreet dolor vitae eleifend.</p>
|
||||
|
||||
<p>Vestibulum elementum nunc eu tempus rhoncus. <div id="roundedInsetShape" class="shape"></div>Donec sed nunc a ligula cursus sagittis. Etiam lacinia aliquet est, at sagittis eros bibendum ac. In vulputate mauris eget tincidunt varius. Phasellus quis
|
||||
</div>
|
||||
<div id="region2" class="regionColumns columnLeftBorder">
|
||||
rutrum orci, eget porttitor lectus. Etiam lacus metus, egestas eget justo in, laoreet lobortis purus. Nunc luctus, sapien vestibulum viverra consectetur, dolor metus eleifend elit, ac placerat sem lacus a lacus. Aliquam volutpat neque a odio aliquam, id imperdiet tellus varius. Duis at nisi vitae nisi imperdiet mollis. Sed congue justo eget justo interdum porta. Aenean vel tincidunt metus, et commodo enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam congue aliquet turpis sit amet bibendum.</p>
|
||||
|
||||
<p><div id="triangleLeft" class="shape"></div>Sed velit dui, egestas vitae mi ac, semper dapibus est. <div id="triangleRight" class="shape"></div>In rhoncus tellus id libero convallis ultrices. Ut velit augue, ornare eu eros a, feugiat tincidunt magna. Morbi ut ullamcorper nunc. Nam auctor nisi in erat varius placerat. Mauris rhoncus ac lectus vitae rutrum. Nullam et risus magna. Cras egestas aliquam tristique. Cras imperdiet euismod nisl vitae ullamcorper. Nullam ut quam vel dolor mollis malesuada id et sem. Pellentesque nec quam nec est consectetur aliquam in eu enim. Mauris tempor nisl ac nisl sollicitudin, a bibendum velit elementum. Duis ornare metus elementum nulla interdum, sed pellentesque purus ultrices. Donec varius, risus nec laoreet rhoncus, enim est fringilla risus, sed bibendum augue arcu ac mi. Cras et placerat ipsum, in scelerisque mi.</p>
|
||||
|
||||
<p><div id="circleShape" class="shape"></div>Donec sodales commodo magna. Praesent a sapien eget arcu scelerisque pellentesque. Cur
|
||||
</div>
|
||||
<div id="region3" class="regionColumns columnLeftBorder">
|
||||
abitur lorem nisi, rhoncus sed laoreet sit amet, mattis non metus.
|
||||
Quisque dictum eget massa ut cursus. Fusce eget tristique massa. Cras eu massa augue. Curabitur dictum pellentesque venenatis.
|
||||
Curabitur sit amet neque eget urna convallis vehicula sit amet pellentesque libero. Suspendisse non tincidunt elit.
|
||||
<div id="triangleLeft" class="shape"></div>Ut iaculis est odio, a aliquam odio auctor a. Sed varius dolor ac mattis rhoncus. Aenean tellus elit, feugiat sit amet pretium lacinia, viverra hendrerit nunc. Vestibulum rutrum vel orci eget aliquam. Etiam congue justo eu massa semper ornare. Curabitur at nunc vitae tellus malesuada euismod nec nec est.</p>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis metus arcu, euismod a ipsum gravida, commodo sagittis lectus. Maecenas nisl sem, pretium vitae neque et, sollicitudin scelerisque sapien. Vivamus scelerisque dolor hendrerit magna ullamcorper tincidunt. Phasellus non purus ultrices, tincidunt dui interdum, pellentesque massa. Duis a orci massa. Quisque non orci in massa hendrerit auctor vel eu mi. Aliquam sit amet rutrum tellus.</p>
|
||||
|
||||
<p>Donec in libero id erat hendrerit hendrerit. In nulla augue, tristique mattis pharetra vel, <div id="selfIntersectingStar"></div>sodales vel libero. Mauris consectetur nibh eu odio gravida, non venenatis nibh tincidunt. Praesent nec magna orci. Vestibulum porta, risus eget cursus ullamcorper, sem ante blandit leo, sit amet tristique
|
||||
</div>
|
||||
<div class="region">
|
||||
mauris vitae, gravida tortor. Suspendisse sed erat adipiscing, hendrerit massa quis, tincidunt nulla. Praesent tristique, ante non posuere placerat, massa augue ultrices arcu, ut faucibus nunc eros sed nulla. Duis dolor dui, dapibus eget aliquam posuere, faucibus vel neque. Donec dictum urna nisi, vitae elementum magna bibendum at. Integer porta porttitor bibendum. Praesent rutrum libero sed pharetra varius. Nulla lectus turpis, cursus a fermentum vel, dictum in elit. Etiam vel pharetra lectus, vitae fermentum justo. Quisque eu lacus non odio dignissim luctus eu ac massa.</p>
|
||||
<p>Curabitur rutrum ornare mi at accumsan. Vivamus sagittis magna eros, sed blandit metus placerat ut. Proin blandit, elit ut porta tristique, nisi augue suscipit augue, at dictum ipsum libero sit amet orci. Vivamus nec dui id ipsum pharetra volutpat. Donec et tellus in risus condimentum tristique nec sed eros. Maecenas nec nibh sit amet augue tristique sollicitudin. Sed sit amet interdum justo. Cras at dui ante. Morbi consequat neque nulla, porttitor consectetur justo convallis id. Nunc tincidunt aliquam rutrum.</p>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<p><div id="circleShape" class="shape"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec enim faucibus, laoreet mauris quis, sollicitudin nisl. Curabitur feugiat blandit gravida. Duis feugiat sapien sem, quis tincidunt nisl gravida a. Suspendisse dignissim ullamcorper mauris in fringilla. Suspendisse dapibus metus vitae lorem tristique, nec laoreet diam venenatis. Proin eget rhoncus diam. Ut a aliquet eros. Duis vitae vestibulum erat. Cras pretium auctor sem ac tristique. Nam dictum enim ac urna ullamcorper tempus. Aenean felis elit, dictum vel fringilla sed, imperdiet a purus.</p>
|
||||
|
||||
<p><div id="imageShape" class="shape"></div>Suspendisse augue lacus, facilisis vitae orci sit amet, elementum pharetra lacus. Mauris ac sem est. Nulla ac erat tincidunt, porta ante sit amet, pretium nulla. Donec accumsan, turpis id sollicitudin vehicula, lorem mauris laoreet tellus, quis mattis nisi nisi vulputate diam. Nullam tincidunt sapien lorem, eget facilisis lorem blandit in. Phasellus velit orci, lobortis at felis sed, consectetur vehicula mauris. Etiam fermentum pretium pharetra. Sed aliquet lacus imperdiet vestibulum suscipit.</p>
|
||||
|
||||
<p>>Aenean in ipsum venenatis, interdum tellus vel, semper magna. Fusce faucibus nisl ac sem ultrices,<div id="insetShape" class="shape"></div> in convallis elit mollis. Nulla et libero sem. Duis sollicitudin dui orci, at ornare ante imperdiet a. Donec aliquam nisi id quam interdum aliquam. Etiam mollis consequat magna, ut iaculis dolor imperdiet eu. Aenean vehicula sapien sit amet neque mollis, porta tincidunt augue posuere. Donec vitae lorem sed lectus hendrerit pellentesque vel scelerisque erat. Maecenas fringilla magna neque, ac mollis nisl pharetra sit amet. Nam tempus justo justo, eget sollicitudin libero varius vitae. Maecenas rutrum neque sed pretium ornare. Pellentesque odio metus, convallis eget euismod id, pulvinar vitae nibh. Suspendisse potenti. Integer nec turpis in justo porttitor hendrerit. Pellentesque commodo laoreet dolor vitae eleifend.</p>
|
||||
|
||||
<p>Vestibulum elementum nunc eu tempus rhoncus. <div id="roundedInsetShape" class="shape"></div>Donec sed nunc a ligula cursus sagittis. Etiam lacinia aliquet est, at sagittis eros bibendum ac. In vulputate mauris eget tincidunt varius. Phasellus quis rutrum orci, eget porttitor lectus. Etiam lacus metus, egestas eget justo in, laoreet lobortis purus. Nunc luctus, sapien vestibulum viverra consectetur, dolor metus eleifend elit, ac placerat sem lacus a lacus. Aliquam volutpat neque a odio aliquam, id imperdiet tellus varius. Duis at nisi vitae nisi imperdiet mollis. Sed congue justo eget justo interdum porta. Aenean vel tincidunt metus, et commodo enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam congue aliquet turpis sit amet bibendum.</p>
|
||||
|
||||
<p><div id="triangleLeft" class="shape"></div>Sed velit dui, egestas vitae mi ac, semper dapibus est. <div id="triangleRight" class="shape"></div>In rhoncus tellus id libero convallis ultrices. Ut velit augue, ornare eu eros a, feugiat tincidunt magna. Morbi ut ullamcorper nunc. Nam auctor nisi in erat varius placerat. Mauris rhoncus ac lectus vitae rutrum. Nullam et risus magna. Cras egestas aliquam tristique. Cras imperdiet euismod nisl vitae ullamcorper. Nullam ut quam vel dolor mollis malesuada id et sem. Pellentesque nec quam nec est consectetur aliquam in eu enim. Mauris tempor nisl ac nisl sollicitudin, a bibendum velit elementum. Duis ornare metus elementum nulla interdum, sed pellentesque purus ultrices. Donec varius, risus nec laoreet rhoncus, enim est fringilla risus, sed bibendum augue arcu ac mi. Cras et placerat ipsum, in scelerisque mi.</p>
|
||||
|
||||
<p><div id="circleShape" class="shape"></div>Donec sodales commodo magna. Praesent a sapien eget arcu scelerisque pellentesque. Curabitur lorem nisi, rhoncus sed laoreet sit amet, mattis non metus.
|
||||
Quisque dictum eget massa ut cursus. Fusce eget tristique massa. Cras eu massa augue. Curabitur dictum pellentesque venenatis.
|
||||
Curabitur sit amet neque eget urna convallis vehicula sit amet pellentesque libero. Suspendisse non tincidunt elit.
|
||||
<div id="triangleLeft" class="shape"></div>Ut iaculis est odio, a aliquam odio auctor a. Sed varius dolor ac mattis rhoncus. Aenean tellus elit, feugiat sit amet pretium lacinia, viverra hendrerit nunc. Vestibulum rutrum vel orci eget aliquam. Etiam congue justo eu massa semper ornare. Curabitur at nunc vitae tellus malesuada euismod nec nec est.</p>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis metus arcu, euismod a ipsum gravida, commodo sagittis lectus. Maecenas nisl sem, pretium vitae neque et, sollicitudin scelerisque sapien. Vivamus scelerisque dolor hendrerit magna ullamcorper tincidunt. Phasellus non purus ultrices, tincidunt dui interdum, pellentesque massa. Duis a orci massa. Quisque non orci in massa hendrerit auctor vel eu mi. Aliquam sit amet rutrum tellus.</p>
|
||||
|
||||
<p>Donec in libero id erat hendrerit hendrerit. In nulla augue, tristique mattis pharetra vel, <div id="selfIntersectingStar"></div>sodales vel libero. Mauris consectetur nibh eu odio gravida, non venenatis nibh tincidunt. Praesent nec magna orci. Vestibulum porta, risus eget cursus ullamcorper, sem ante blandit leo, sit amet tristique mauris magna eu enim. Praesent vel nisl sodales, fringilla mauris vitae, gravida tortor. Suspendisse sed erat adipiscing, hendrerit massa quis, tincidunt nulla. Praesent tristique, ante non posuere placerat, massa augue ultrices arcu, ut faucibus nunc eros sed nulla. Duis dolor dui, dapibus eget aliquam posuere, faucibus vel neque. Donec dictum urna nisi, vitae elementum magna bibendum at. Integer porta porttitor bibendum. Praesent rutrum libero sed pharetra varius. Nulla lectus turpis, cursus a fermentum vel, dictum in elit. Etiam vel pharetra lectus, vitae fermentum justo. Quisque eu lacus non odio dignissim luctus eu ac massa.</p>
|
||||
|
||||
<p>Curabitur rutrum ornare mi at accumsan. Vivamus sagittis magna eros, sed blandit metus placerat ut. Proin blandit, elit ut porta tristique, nisi augue suscipit augue, at dictum ipsum libero sit amet orci. Vivamus nec dui id ipsum pharetra volutpat. Donec et tellus in risus condimentum tristique nec sed eros. Maecenas nec nibh sit amet augue tristique sollicitudin. Sed sit amet interdum justo. Cras at dui ante. Morbi consequat neque nulla, porttitor consectetur justo convallis id. Nunc tincidunt aliquam rutrum.</p>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<p><div id="circleShape" class="shape"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec enim faucibus, laoreet mauris quis, sollicitudin nisl. Curabitur feugiat blandit gravida. Duis feugiat sapien sem, quis tincidunt nisl gravida a. Suspendisse dignissim ullamcorper mauris in fringilla. Suspendisse dapibus metus vitae lorem tristique, nec laoreet diam venenatis. Proin eget rhoncus diam. Ut a aliquet eros. Duis vitae vestibulum erat. Cras pretium auctor sem ac tristique. Nam dictum enim ac urna ullamcorper tempus. Aenean felis elit, dictum vel fringilla sed, imperdiet a purus.</p>
|
||||
|
||||
<p><div id="imageShape" class="shape"></div>Suspendisse augue lacus, facilisis vitae orci sit amet, elementum pharetra lacus. Mauris ac sem est. Nulla ac erat tincidunt, porta ante sit amet, pretium nulla. Donec accumsan, turpis id sollicitudin vehicula, lorem mauris laoreet tellus, quis mattis nisi nisi vulputate diam. Nullam tincidunt sapien lorem, eget facilisis lorem blandit in. Phasellus velit orci, lobortis at felis sed, consectetur vehicula mauris. Etiam fermentum pretium pharetra. Sed aliquet lacus imperdiet vestibulum suscipit.</p>
|
||||
|
||||
<p>>Aenean in ipsum venenatis, interdum tellus vel, semper magna. Fusce faucibus nisl ac sem ultrices,<div id="insetShape" class="shape"></div> in convallis elit mollis. Nulla et libero sem. Duis sollicitudin dui orci, at ornare ante imperdiet a. Donec aliquam nisi id quam interdum aliquam. Etiam mollis consequat magna, ut iaculis dolor imperdiet eu. Aenean vehicula sapien sit amet neque mollis, porta tincidunt augue posuere. Donec vitae lorem sed lectus hendrerit pellentesque vel scelerisque erat. Maecenas fringilla magna neque, ac mollis nisl pharetra sit amet. Nam tempus justo justo, eget sollicitudin libero varius vitae. Maecenas rutrum neque sed pretium ornare. Pellentesque odio metus, convallis eget euismod id, pulvinar vitae nibh. Suspendisse potenti. Integer nec turpis in justo porttitor hendrerit. Pellentesque commodo laoreet dolor vitae eleifend.</p>
|
||||
|
||||
<p>Vestibulum elementum nunc eu tempus rhoncus. <div id="roundedInsetShape" class="shape"></div>Donec sed nunc a ligula cursus sagittis. Etiam lacinia aliquet est, at sagittis eros bibendum ac. In vulputate mauris eget tincidunt varius. Phasellus quis rutrum orci, eget porttitor lectus. Etiam lacus metus, egestas eget justo in, laoreet lobortis purus. Nunc luctus, sapien vestibulum viverra consectetur, dolor metus eleifend elit, ac placerat sem lacus a lacus. Aliquam volutpat neque a odio aliquam, id imperdiet tellus varius. Duis at nisi vitae nisi imperdiet mollis. Sed congue justo eget justo interdum porta. Aenean vel tincidunt metus, et commodo enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam congue aliquet turpis sit amet bibendum.</p>
|
||||
|
||||
<p><div id="triangleLeft" class="shape"></div>Sed velit dui, egestas vitae mi ac, semper dapibus est. <div id="triangleRight" class="shape"></div>In rhoncus tellus id libero convallis ultrices. Ut velit augue, ornare eu eros a, feugiat tincidunt magna. Morbi ut ullamcorper nunc. Nam auctor nisi in erat varius placerat. Mauris rhoncus ac lectus vitae rutrum. Nullam et risus magna. Cras egestas aliquam tristique. Cras imperdiet euismod nisl vitae ullamcorper. Nullam ut quam vel dolor mollis malesuada id et sem. Pellentesque nec quam nec est consectetur aliquam in eu enim. Mauris tempor nisl ac nisl sollicitudin, a bibendum velit elementum. Duis ornare metus elementum nulla interdum, sed pellentesque purus ultrices. Donec varius, risus nec laoreet rhoncus, enim est fringilla risus, sed bibendum augue arcu ac mi. Cras et placerat ipsum, in scelerisque mi.</p>
|
||||
|
||||
<p><div id="circleShape" class="shape"></div>Donec sodales commodo magna. Praesent a sapien eget arcu scelerisque pellentesque. Curabitur lorem nisi, rhoncus sed laoreet sit amet, mattis non metus.
|
||||
Quisque dictum eget massa ut cursus. Fusce eget tristique massa. Cras eu massa augue. Curabitur dictum pellentesque venenatis.
|
||||
Curabitur sit amet neque eget urna convallis vehicula sit amet pellentesque libero. Suspendisse non tincidunt elit.
|
||||
<div id="triangleLeft" class="shape"></div>Ut iaculis est odio, a aliquam odio auctor a. Sed varius dolor ac mattis rhoncus. Aenean tellus elit, feugiat sit amet pretium lacinia, viverra hendrerit nunc. Vestibulum rutrum vel orci eget aliquam. Etiam congue justo eu massa semper ornare. Curabitur at nunc vitae tellus malesuada euismod nec nec est.</p>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis metus arcu, euismod a ipsum gravida, commodo sagittis lectus. Maecenas nisl sem, pretium vitae neque et, sollicitudin scelerisque sapien. Vivamus scelerisque dolor hendrerit magna ullamcorper tincidunt. Phasellus non purus ultrices, tincidunt dui interdum, pellentesque massa. Duis a orci massa. Quisque non orci in massa hendrerit auctor vel eu mi. Aliquam sit amet rutrum tellus.</p>
|
||||
|
||||
<p>Donec in libero id erat hendrerit hendrerit. In nulla augue, tristique mattis pharetra vel, <div id="selfIntersectingStar"></div>sodales vel libero. Mauris consectetur nibh eu odio gravida, non venenatis nibh tincidunt. Praesent nec magna orci. Vestibulum porta, risus eget cursus ullamcorper, sem ante blandit leo, sit amet tristique mauris magna eu enim. Praesent vel nisl sodales, fringilla mauris vitae, gravida tortor. Suspendisse sed erat adipiscing, hendrerit massa quis, tincidunt nulla. Praesent tristique, ante non posuere placerat, massa augue ultrices arcu, ut faucibus nunc eros sed nulla. Duis dolor dui, dapibus eget aliquam posuere, faucibus vel neque. Donec dictum urna nisi, vitae elementum magna bibendum at. Integer porta porttitor bibendum. Praesent rutrum libero sed pharetra varius. Nulla lectus turpis, cursus a fermentum vel, dictum in elit. Etiam vel pharetra lectus, vitae fermentum justo. Quisque eu lacus non odio dignissim luctus eu ac massa.</p>
|
||||
|
||||
<p>Curabitur rutrum ornare mi at accumsan. Vivamus sagittis magna eros, sed blandit metus placerat ut. Proin blandit, elit ut porta tristique, nisi augue suscipit augue, at dictum ipsum libero sit amet orci. Vivamus nec dui id ipsum pharetra volutpat. Donec et tellus in risus condimentum tristique nec sed eros. Maecenas nec nibh sit amet augue tristique sollicitudin. Sed sit amet interdum justo. Cras at dui ante. Morbi consequat neque nulla, porttitor consectetur justo convallis id. Nunc tincidunt aliquam rutrum.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -0,0 +1,7 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
|
||||
<path fill="#BE5C27" stroke="#000000" stroke-miterlimit="10" d="M177,172H20.5v-25h107l-47-32l114,8.5
|
||||
c-26.808,0-48.5-24.376-48.5-54.5c18.517,0,33.5-6.933,33.5-15.5c-12.713,0-23-7.156-23-16L183,28l-83-15.5l-93-3V196L177,172z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 610 B |
|
|
@ -0,0 +1,7 @@
|
|||
.testBox {
|
||||
width: 800px;
|
||||
}
|
||||
|
||||
.floatingObject {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
(function() {
|
||||
var templateParagraph = null;
|
||||
var templateFloatingNode = null;
|
||||
var DEFAULT_SHAPE_OBJECT_COUNT = 100;
|
||||
|
||||
function createParagraphNode() {
|
||||
if (!templateParagraph) {
|
||||
templateParagraph = document.createElement("p");
|
||||
templateParagraph.innerHTML = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at turpis placerat sapien congue viverra nec sed felis.\
|
||||
Aenean aliquam, justo eu condimentum pharetra, arcu eros blandit metus, nec lacinia nisi orci vitae nunc.\
|
||||
Proin orci libero, accumsan non dignissim at, sodales in sapien. Curabitur dui nibh, venenatis vel tempus vel, accumsan nec velit.\
|
||||
Nam sit amet tempor lacus. Sed mollis dolor nibh, non tempus leo. Donec magna odio, commodo id porta in, aliquam mollis eros.\
|
||||
Pellentesque vulputate gravida ligula in elementum. Fusce lacinia massa justo, at porttitor orci.\
|
||||
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec odio quam, pulvinar ut porttitor ac, tempor vitae ligula.\
|
||||
Cras aliquet sapien id sapien mollis nec pulvinar mauris adipiscing. Praesent porttitor consequat augue, sit amet mollis justo condimentum eu.\
|
||||
Etiam ut erat pellentesque orci congue interdum. Nulla eu eros mi.\
|
||||
Curabitur rutrum, lorem ac malesuada pellentesque, sapien risus consequat massa, eget pellentesque nunc nulla vel sem.";
|
||||
templateParagraph.className = "contentParagraph";
|
||||
}
|
||||
|
||||
var paragraph = templateParagraph.cloneNode(true);
|
||||
return paragraph;
|
||||
}
|
||||
|
||||
function createFloatingNode(properties) {
|
||||
if (!templateFloatingNode) {
|
||||
templateFloatingNode = document.createElement("div");
|
||||
templateFloatingNode.className = "floatingObject";
|
||||
}
|
||||
|
||||
var float = templateFloatingNode.cloneNode(false);
|
||||
for (prop in properties) {
|
||||
float.style[prop] = properties[prop];
|
||||
}
|
||||
return float;
|
||||
}
|
||||
|
||||
function addArticles(floatingObjects, paragraphCount) {
|
||||
for (var i = 0; i < paragraphCount; ++i) {
|
||||
floatingObjects.appendChild(createParagraphNode());
|
||||
}
|
||||
}
|
||||
|
||||
function createFloatingObjects(properties, floatingObjectCount) {
|
||||
var testBox = document.createElement("div");
|
||||
for (var i = 0; i < floatingObjectCount; ++i) {
|
||||
testBox.appendChild(createFloatingNode(properties));
|
||||
testBox.appendChild(createParagraphNode())
|
||||
}
|
||||
testBox.className = "testBox";
|
||||
return testBox;
|
||||
}
|
||||
|
||||
function applyFloating() {
|
||||
var floatingObjects = document.getElementsByClassName('floatingObject');
|
||||
for (i = 0; i < floatingObjects.length; ++i) {
|
||||
floatingObjects[i].style.cssFloat = 'left';
|
||||
}
|
||||
}
|
||||
|
||||
function createShapeOutsideTest(properties, shapeObjectCount) {
|
||||
shapeObjectCount = shapeObjectCount || DEFAULT_SHAPE_OBJECT_COUNT;
|
||||
|
||||
var floatingObjects = createFloatingObjects(properties, shapeObjectCount);
|
||||
document.body.appendChild(floatingObjects);
|
||||
return {
|
||||
description: "Testing shapes with " + properties['webkitShapeOutside'] +" using " + shapeObjectCount + " shapes.",
|
||||
run: function() {
|
||||
applyFloating();
|
||||
PerfTestRunner.forceLayout();
|
||||
},
|
||||
setup: function() {
|
||||
PerfTestRunner.resetRandomSeed();
|
||||
PerfTestRunner.forceLayout();
|
||||
},
|
||||
done: function() {
|
||||
document.body.removeChild(floatingObjects);
|
||||
templateParagraph = null;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
window.createShapeOutsideTest = createShapeOutsideTest;
|
||||
|
||||
})();
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Simple Path performance test</title>
|
||||
<script src="../resources/runner.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<pre id="log"></pre>
|
||||
<div id="target">
|
||||
<p>Lorem ipsum dolor sit amet, vix alii reprimique an, vim cu elit suscipit. Qui in possit accumsan. Ea aperiri pertinax est. Est cu doming sensibus mnesarchum. Ne mea possit pericula tractatos, id nam ponderum legendos periculis.
|
||||
At pri vide vivendo, essent alienum ad est. Id praesent hendrerit eam, id usu quis dicunt, cibo ludus dolorum et eam. Meis complectitur vim ex. Nec te dolorem lobortis. Pri esse quando ullamcorper an, nec rebum aeterno ea. Te quo decore dissentiet, mea an partiendo concludaturque vituperatoribus, nam quot dicam noster ad.
|
||||
Cibo tollit perpetua eos an, eu sale expetendis mea, nam at assum convenire necessitatibus. Est cu posse labores, ad postea alterum mea. Mei te salutatus vulputate, dolore maiestatis id per, sit autem nemore eu. Tempor laoreet suavitate sea at. Soleat intellegebat quo te, pro at nemore efficiantur. Pro omnis latine civibus ei, quo an quem paulo audiam. Ea enim ancillae lucilius cum.Lorem ipsum dolor sit amet, vix alii reprimique an, vim cu elit suscipit. Qui in possit accumsan. Ea aperiri pertinax est. Est cu doming sensibus mnesarchum. Ne mea possit pericula tractatos, id nam ponderum legendos periculis.
|
||||
At pri vide vivendo, essent alienum ad est. Id praesent hendrerit eam, id usu quis dicunt, cibo ludus dolorum et eam. Meis complectitur vim ex. Nec te dolorem lobortis. Pri esse quando ullamcorper an, nec rebum aeterno ea. Te quo decore dissentiet, mea an partiendo concludaturque vituperatoribus, nam quot dicam noster ad.
|
||||
Cibo tollit perpetua eos an, eu sale expetendis mea, nam at assum convenire necessitatibus. Est cu posse labores, ad postea alterum mea. Mei te salutatus vulputate, dolore maiestatis id per, sit autem nemore eu. Tempor laoreet suavitate sea at. Soleat intellegebat quo te, pro at nemore efficiantur. Pro omnis latine civibus ei, quo an quem paulo audiam. Ea enim ancillae lucilius cum.Lorem ipsum dolor sit amet, vix alii reprimique an, vim cu elit suscipit. Qui in possit accumsan. Ea aperiri pertinax est. Est cu doming sensibus mnesarchum. Ne mea possit pericula tractatos, id nam ponderum legendos periculis.
|
||||
At pri vide vivendo, essent alienum ad est. Id praesent hendrerit eam, id usu quis dicunt, cibo ludus dolorum et eam. Meis complectitur vim ex. Nec te dolorem lobortis. Pri esse quando ullamcorper an, nec rebum aeterno ea. Te quo decore dissentiet, mea an partiendo concludaturque vituperatoribus, nam quot dicam noster ad.
|
||||
Cibo tollit perpetua eos an, eu sale expetendis mea, nam at assum convenire necessitatibus. Est cu posse labores, ad postea alterum mea. Mei te salutatus vulputate, dolore maiestatis id per, sit autem nemore eu. Tempor laoreet suavitate sea at. Soleat intellegebat quo te, pro at nemore efficiantur. Pro omnis latine civibus ei, quo an quem paulo audiam. Ea enim ancillae lucilius cum.</p>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, vix alii reprimique an, vim cu elit suscipit. Qui in possit accumsan. Ea aperiri pertinax est. Est cu doming sensibus mnesarchum. Ne mea possit pericula tractatos, id nam ponderum legendos periculis.
|
||||
At pri vide vivendo, essent alienum ad est. Id praesent hendrerit eam, id usu quis dicunt, cibo ludus dolorum et eam. Meis complectitur vim ex. Nec te dolorem lobortis. Pri esse quando ullamcorper an, nec rebum aeterno ea. Te quo decore dissentiet, mea an partiendo concludaturque vituperatoribus, nam quot dicam noster ad.
|
||||
Cibo tollit perpetua eos an, eu sale expetendis mea, nam at assum convenire necessitatibus. Est cu posse labores, ad postea alterum mea. Mei te salutatus vulputate, dolore maiestatis id per, sit autem nemore eu. Tempor laoreet suavitate sea at. Soleat intellegebat quo te, pro at nemore efficiantur. Pro omnis latine civibus ei, quo an quem paulo audiam. Ea enim ancillae lucilius cum.Lorem ipsum dolor sit amet, vix alii reprimique an, vim cu elit suscipit. Qui in possit accumsan. Ea aperiri pertinax est. Est cu doming sensibus mnesarchum. Ne mea possit pericula tractatos, id nam ponderum legendos periculis.
|
||||
At pri vide vivendo, essent alienum ad est. Id praesent hendrerit eam, id usu quis dicunt, cibo ludus dolorum et eam. Meis complectitur vim ex. Nec te dolorem lobortis. Pri esse quando ullamcorper an, nec rebum aeterno ea. Te quo decore dissentiet, mea an partiendo concludaturque vituperatoribus, nam quot dicam noster ad.
|
||||
Cibo tollit perpetua eos an, eu sale expetendis mea, nam at assum convenire necessitatibus. Est cu posse labores, ad postea alterum mea. Mei te salutatus vulputate, dolore maiestatis id per, sit autem nemore eu. Tempor laoreet suavitate sea at. Soleat intellegebat quo te, pro at nemore efficiantur. Pro omnis latine civibus ei, quo an quem paulo audiam. Ea enim ancillae lucilius cum.Lorem ipsum dolor sit amet, vix alii reprimique an, vim cu elit suscipit. Qui in possit accumsan. Ea aperiri pertinax est. Est cu doming sensibus mnesarchum. Ne mea possit pericula tractatos, id nam ponderum legendos periculis.
|
||||
At pri vide vivendo, essent alienum ad est. Id praesent hendrerit eam, id usu quis dicunt, cibo ludus dolorum et eam. Meis complectitur vim ex. Nec te dolorem lobortis. Pri esse quando ullamcorper an, nec rebum aeterno ea. Te quo decore dissentiet, mea an partiendo concludaturque vituperatoribus, nam quot dicam noster ad.
|
||||
Cibo tollit perpetua eos an, eu sale expetendis mea, nam at assum convenire necessitatibus. Est cu posse labores, ad postea alterum mea. Mei te salutatus vulputate, dolore maiestatis id per, sit autem nemore eu. Tempor laoreet suavitate sea at. Soleat intellegebat quo te, pro at nemore efficiantur. Pro omnis latine civibus ei, quo an quem paulo audiam. Ea enim ancillae lucilius cum.</p>
|
||||
</div>
|
||||
<script>
|
||||
var target = document.getElementById("target");
|
||||
var style = target.style;
|
||||
|
||||
function test() {
|
||||
style.display = "block";
|
||||
style.width = "200px";
|
||||
PerfTestRunner.forceLayout();
|
||||
style.width = "201px";
|
||||
PerfTestRunner.forceLayout();
|
||||
style.width = "200px";
|
||||
PerfTestRunner.forceLayout();
|
||||
style.display = "none";
|
||||
}
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Measures performance of layout on simple Latin characters.",
|
||||
run: test
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
76
tests/blink_perf_tests/perf_tests/layout/abspos.html
Normal file
76
tests/blink_perf_tests/perf_tests/layout/abspos.html
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.row {
|
||||
position: relative;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.cell {
|
||||
position: absolute;
|
||||
height: 10px;
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="wrapper">
|
||||
</div>
|
||||
|
||||
<pre id="log" style="position: absolute; left: 300px;"></pre>
|
||||
|
||||
<template id="row-template">
|
||||
<div class="row">
|
||||
<div class="row-id cell" style="left: 0;">
|
||||
</div>
|
||||
<div class="row-title cell" style="left: 50px;">
|
||||
</div>
|
||||
<div class="row-text cell" style="left: 100px; width: 200px;">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
||||
var index = 0;
|
||||
PerfTestRunner.measureTime({
|
||||
description: "Measures layout performance of a page with lots of absolute positioned elements.",
|
||||
setup: function() {
|
||||
document.body.style.display = "none";
|
||||
PerfTestRunner.forceLayout();
|
||||
},
|
||||
run: function() {
|
||||
document.body.style.display = "block";
|
||||
PerfTestRunner.forceLayout();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const TOTAL_ROWS = 10000;
|
||||
const ROW_HEIGHT = 10;
|
||||
|
||||
let wrapper = document.getElementById("wrapper");
|
||||
let template = document.getElementById("row-template");
|
||||
|
||||
for (let i = 0; i < TOTAL_ROWS; i++) {
|
||||
let clone = template.content.cloneNode(true);
|
||||
|
||||
let row = clone.querySelector(".row");
|
||||
row.style.top = (i * ROW_HEIGHT) + "px";
|
||||
|
||||
let color = "#"+ ((1<<24)*Math.random()|0).toString(16);
|
||||
|
||||
let rowId = clone.querySelector(".row-id");
|
||||
rowId.innerHTML = "<div style='width: 10px; height: 10px; background: " + color + ";'></div>";
|
||||
|
||||
let rowTitle = clone.querySelector(".row-title");
|
||||
rowTitle.innerHTML = "<div style='width: 25px; height: 5px; background: " + color + ";'></div>";
|
||||
|
||||
let rowText = clone.querySelector(".row-text");
|
||||
rowText.innerHTML = "<div style='width: 50px; height: 5px; background: " + color + ";'></div>";
|
||||
|
||||
wrapper.appendChild(clone);
|
||||
}
|
||||
|
||||
runTest();
|
||||
</script>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
#test-container span {
|
||||
float: left; /* This is the root cause */
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
</style>
|
||||
<div id="test-container"></div>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script>
|
||||
var count = 3000;
|
||||
|
||||
function addFloats() {
|
||||
var container = document.getElementById("test-container");
|
||||
var newDiv = document.createElement("div");
|
||||
for (var i = 0; i < count; i++) {
|
||||
var span = document.createElement("span");
|
||||
newDiv.appendChild(span);
|
||||
}
|
||||
container.appendChild(newDiv);
|
||||
};
|
||||
|
||||
function removeFloats() {
|
||||
var container = document.getElementById("test-container");
|
||||
if (container.lastChild) container.removeChild(container.lastChild);
|
||||
}
|
||||
|
||||
function test() {
|
||||
addFloats();
|
||||
PerfTestRunner.forceLayout();
|
||||
removeFloats();
|
||||
}
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Measures performance of removing floats in a block with a lot of inline children.",
|
||||
run: test
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
58
tests/blink_perf_tests/perf_tests/layout/anchor-scope.html
Normal file
58
tests/blink_perf_tests/perf_tests/layout/anchor-scope.html
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Performance Test: anchor-scope</title>
|
||||
<style>
|
||||
#main {
|
||||
background-color: lightgrey;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 600px;
|
||||
}
|
||||
.cell {
|
||||
border: 1px solid tomato;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
anchor-name: --a;
|
||||
anchor-scope: --a;
|
||||
}
|
||||
.abs {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: steelblue;
|
||||
position: absolute;
|
||||
position-anchor: --a;
|
||||
position-area: center;
|
||||
}
|
||||
.selected {
|
||||
background-color: lightcoral;
|
||||
}
|
||||
</style>
|
||||
<div id=main>
|
||||
</div>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script>
|
||||
// Insert many cells, each containing an abs pos
|
||||
// anchored to it.
|
||||
let cells = [];
|
||||
for (let i = 0; i < 1000; i++) {
|
||||
let cell = document.createElement('div');
|
||||
cell.classList.add('cell');
|
||||
let abs = document.createElement('div');
|
||||
abs.className = 'abs';
|
||||
cell.append(abs);
|
||||
cells.push(cell);
|
||||
}
|
||||
main.append(...cells);
|
||||
|
||||
function startTest() {
|
||||
let round = 0;
|
||||
PerfTestRunner.measureFrameTime({
|
||||
description: 'Many scoped in-flow anchors with the same name',
|
||||
run: () => {
|
||||
cells[round % cells.length].classList.toggle('selected');
|
||||
PerfTestRunner.forceLayout();
|
||||
round++;
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<body onload="startTest()"></body>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<style>
|
||||
#abs {
|
||||
position: absolute;
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
window.requestAnimationFrame(function () {
|
||||
setupTest();
|
||||
PerfTestRunner.measureTime({
|
||||
description: "Measures performance of animating a deep absolute positioned object with siblings.",
|
||||
run: runTest
|
||||
});
|
||||
});
|
||||
|
||||
let abspos;
|
||||
|
||||
function setupTest() {
|
||||
let container = document.body;
|
||||
abspos = buildTree(container, 30);
|
||||
appendSiblings(container, 50);
|
||||
}
|
||||
|
||||
function runTest() {
|
||||
for (let x = 0; x < 1000; x++) {
|
||||
abspos.style.left = `${x}px`;
|
||||
document.body.offsetTop;
|
||||
}
|
||||
}
|
||||
|
||||
// Create #abs element at the specified depth.
|
||||
// <div>
|
||||
// <div>
|
||||
// ...
|
||||
// <div class=container>
|
||||
// <div id=abs></div>
|
||||
// </div>
|
||||
// ...
|
||||
// </div>
|
||||
// </div>
|
||||
function buildTree(parent, depth) {
|
||||
if (depth > 0) {
|
||||
let child = document.createElement('div');
|
||||
parent.appendChild(child);
|
||||
return buildTree(child, depth - 1);
|
||||
}
|
||||
|
||||
parent.classList.add('container');
|
||||
let abspos = document.createElement('div');
|
||||
abspos.id = 'abs';
|
||||
abspos.appendChild(document.createTextNode('abs'));
|
||||
parent.appendChild(abspos);
|
||||
return abspos;
|
||||
}
|
||||
|
||||
function appendSiblings(parent, siblings) {
|
||||
for (let i = 0; i < siblings; i++) {
|
||||
let child = document.createElement('div');
|
||||
child.appendChild(document.createTextNode(`sibling${i}`));
|
||||
parent.appendChild(child);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<div>
|
||||
<span id="span"></span>
|
||||
</div>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script>
|
||||
var span = document.getElementById("span");
|
||||
|
||||
function test() {
|
||||
PerfTestRunner.forceLayout();
|
||||
for (var i = 0; i < 10; ++i)
|
||||
span.appendChild(document.createElement("span")).textContent = "span";
|
||||
PerfTestRunner.forceLayout();
|
||||
span.innerHTML = '';
|
||||
}
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Measures performance of attaching a large number of inlines to an attached inline.",
|
||||
run: test
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
28
tests/blink_perf_tests/perf_tests/layout/attach-inlines.html
Normal file
28
tests/blink_perf_tests/perf_tests/layout/attach-inlines.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<div id="div" style="display: none;">
|
||||
<span id="span"></span>
|
||||
</div>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script>
|
||||
var div = document.getElementById("div");
|
||||
var style = div.style;
|
||||
|
||||
function test() {
|
||||
style.display = "block";
|
||||
PerfTestRunner.forceLayout();
|
||||
|
||||
for (var i = 0; i < 1000; ++i)
|
||||
span.appendChild(document.createElement("span")).textContent = "span";
|
||||
PerfTestRunner.forceLayout();
|
||||
|
||||
style.display = "none";
|
||||
span.innerHTML = '';
|
||||
PerfTestRunner.forceLayout();
|
||||
}
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Measures performance of attaching a large number of inlines to an inline.",
|
||||
run: test
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
2040
tests/blink_perf_tests/perf_tests/layout/auto-grid-lots-of-data.html
Normal file
2040
tests/blink_perf_tests/perf_tests/layout/auto-grid-lots-of-data.html
Normal file
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Chapter reflow performance test: random text</title>
|
||||
<script src="../resources/runner.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<pre id="log"></pre>
|
||||
<div id="target" style="width: 300px; display: none;">
|
||||
|
||||
</div>
|
||||
<script>
|
||||
var RandomTextGenerator = function() {
|
||||
this.letters = [
|
||||
String.fromCharCode(RandomTextGenerator.firstCharCode),
|
||||
String.fromCharCode(RandomTextGenerator.firstCharCode),
|
||||
String.fromCharCode(RandomTextGenerator.firstCharCode),
|
||||
String.fromCharCode(RandomTextGenerator.firstCharCode),
|
||||
String.fromCharCode(RandomTextGenerator.firstCharCode),
|
||||
String.fromCharCode(RandomTextGenerator.firstCharCode),
|
||||
String.fromCharCode(RandomTextGenerator.firstCharCode),
|
||||
String.fromCharCode(RandomTextGenerator.firstCharCode),
|
||||
String.fromCharCode(RandomTextGenerator.firstCharCode),
|
||||
String.fromCharCode(RandomTextGenerator.firstCharCode)
|
||||
]
|
||||
}
|
||||
|
||||
RandomTextGenerator.firstCharCode = 65; // 'A'
|
||||
|
||||
RandomTextGenerator.lastCharCode = 123; // 'z'
|
||||
|
||||
RandomTextGenerator.prototype.advance = function(index) {
|
||||
var charCode = this.letters[index].charCodeAt(0);
|
||||
var newCharCode = charCode + 1;
|
||||
if (newCharCode > RandomTextGenerator.lastCharCode)
|
||||
newCharCode = RandomTextGenerator.firstCharCode;
|
||||
this.letters[index] = String.fromCharCode(newCharCode);
|
||||
return charCode;
|
||||
}
|
||||
|
||||
RandomTextGenerator.prototype.generate = function() {
|
||||
var result = this.letters.join("");
|
||||
|
||||
var index = 0;
|
||||
while (1) {
|
||||
var charCode = this.advance(index);
|
||||
if (charCode != RandomTextGenerator.lastCharCode)
|
||||
break;
|
||||
++index;
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
var target = document.getElementById("target");
|
||||
var style = target.style;
|
||||
var randomTextGenerator = new RandomTextGenerator;
|
||||
|
||||
function test() {
|
||||
var target = document.getElementById("target");
|
||||
var style = target.style;
|
||||
|
||||
var innerHTML = "<p>";
|
||||
for (var i = 0; i < 5000; ++i)
|
||||
innerHTML += randomTextGenerator.generate() + " ";
|
||||
innerHTML += "</p>";
|
||||
target.innerHTML = innerHTML;
|
||||
|
||||
style.display = "block";
|
||||
style.width = "280px";
|
||||
PerfTestRunner.forceLayout();
|
||||
style.display = "none";
|
||||
}
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Measures performance of 3 layouts (using 2 different font-sizes) on a page containing random text.",
|
||||
run: test
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!--
|
||||
http://www.gutenberg.org/ebooks/41252
|
||||
|
||||
"This eBook is for the use of anyone anywhere at no cost and with almost no restrictions whatsoever. You may copy it, give it away or re-use it under the terms of the Project Gutenberg License included with this eBook or online at www.gutenberg.org."
|
||||
-->
|
||||
<title>Chapter reflow performance test: English prose once</title>
|
||||
<script src="../resources/runner.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<pre id="log"></pre>
|
||||
<div id="target" style="width: 300px; display: none;">
|
||||
<p><span>Germany's war Juggernaut by the morning of Monday, August 3, was in full, but incredibly noiseless, motion. I always knew it was a magnificently well greased machine, geared for the maximum of silence, but I felt sure it could not swing into action without some reverberating creaks. Yet Berlin externally had been far more feverishly agitated on Spring Parade days at recurring ends of May than it was now, with "enemies all around" and that "war on two fronts," which most Germans used to talk about as something,</span> <em class="italics">Gott sei Dank</em><span>, they would never live to see. One's male friends of military age--it was now the second day of mobilization--kept on melting away from hour to hour, but amid a complete lack of fuss and bustle. It almost seemed as if the army had orders to rush to the fighting-line in gum-shoes and that everything on wheels had rubber tires. As the Fatherland for years had armed in silence, so she was going to battle. We saw no seventeen-inch guns rumbling to the front. Those were Germany's best-concealed weapons. A military attaché of one of the chief belligerents, who lived in Berlin for four years preceding the war, has since confessed that he never even knew of the "Big Berthas'" existence!</span></p>
|
||||
|
||||
<p><span>Germany girding for Armageddon was distinctly a disappointment. I entirely agreed with a portly dowager from the Middle West, who, between frettings about when she could get a train to the Dutch frontier, continually expressed her chagrin at such "a poor show." She imagined, like a good many of the rest of us, that mobilization in Germany would at the very least see the Supreme War Lord bolting madly up and down</span> <em class="italics">Unter den Linden</em><span>, plunging silver spurs into a foaming white charger and brandishing a glistening sword in martial gestures as Caruso does when he plays Radames in the finale of the second act of Aida. Verdi's Egyptian epic is the Kaiser's favorite opera, and he ought to have remembered, we thought, how a conquering hero should demean himself at such a blood-stirring hour. At least Berlin, we hoped, would rise to the occasion, and thunder and rock with the pomp and circumstance of war's alarums.</span></p>
|
||||
|
||||
<p><span>There was amazingly little of anything of that sort. The Kaiser instead automobiled around town in a prosaic six-cylinder Mercedes, as he long was wont to do, just keeping some rather important professional engagements with the Chief of the General Staff, the Imperial Chancellor and the Secretary of the Navy. As he flitted by, the huge crowds lined up on the curbstone stiffened into attitudes, clicked heels, doffed hats and "</span><em class="italics">hoched</em><span>." The atmosphere was</span> <em class="italics">stimmungsvoller</em> <span>than usual, for German phlegm had vanished along with high prices on the Bourse, but the paroxysm of electric excitement which I always fancied would usher in a German war was unaccountably missing. When you mentioned that phenomenon to German friends, their bosoms swelled with visible pride. They were immeasurably flattered by your indirect compliment that the Kaiser's war establishment was so perfect a mechanism that it could clear for action almost imperceptibly.</span></p>
|
||||
|
||||
<p><span>I had now deserted my home in suburban Wilmersdorf, which I nicknamed the "District of Columbia," for in and all around it Berlin's American colony was domiciled, and taken a room for the opening scenes of the war drama in the Hotel Adlon. With its broad fronts on the Linden and Pariser Platz, and the French, British and Russian Embassies within a stone's throw to the right and left, the Adlon was an ideal vantage point. If there were to be "demonstrations," I could feel sure, at so strategic a point, of being in the thick of them. Events of the succeeding thirty-six hours were to show that I did not reckon without my host on that score.</span></p>
|
||||
|
||||
<p><span>From window and balcony overlooking the Linden I could now see or hear at intervals detachments of Berlin regiments, Uhlans or Infantry of the Guard, or a battery of light artillery, swinging along to railway stations to entrain for the front. Occasionally battalions of provincial regiments, distinguishable because the men did not tower into space like Berlin's guardsmen, crossed town en route from one train to another. The men seemed happier than I had ever before seen German soldiers. That was the only difference, or at least the principal one. The prospect of soon becoming cannon-fodder was evidently far from depressing. Most of them carried flowers entwined round the rifle barrel or protruding from its mouth. Here and there a bouquet dangled rakishly from a helmet. Now and then a flaxen-haired Prussian girl would step into the street and press a posey into some trooper's grimy hand. Yet, except for the fact that the soldiers were all in field gray, (I wonder when the Kaiser's military tailors began making those millions of gray uniforms!) with even their familiar spiked headpiece masked in canvas of the same hue, the Kaiser's fighting men marching off to battle might have been carrying out a workaday route-march. Then, suddenly, a company or a whole battalion would break into song, and the crowd, trailing alongside the bass-drum of the band, just as in peace times, would take up the refrain, and presently half-a-mile of</span> <em class="italics">Unter den Linden</em> <span>was echoing with</span> <em class="italics">Deutschland, Deutschland über Alles</em><span>, and I knew that the Fatherland was at war.</span></p>
|
||||
|
||||
<p><span>At the railway stations of Berlin and countless other German towns and cities at that hour heart-rending little tragedies were being enacted, as fathers, mothers, wives, sisters and sweethearts bade a long farewell to the beloved in gray. Only rarely did some man in uniform himself surrender to the emotions of the moment. These swarthy young Germans, with fifty or sixty pounds of impedimenta strapped round them, were endowed with Spartan stolidity now, and smilingly buoyed up the drooping spirits of the kith and kin they were leaving behind. "</span><em class="italics">Es wird schon gut, Mütterchen! Es wird schon gut!</em><span>" (It will be all right, mother dear! It will be all right!) Thus they returned comfort for tears.</span> <em class="italics">"Nicht unterliegen! Besser nicht zurückkehren!</em><span>" (Don't be beaten! Better not come back at all!) was the good-by greeting blown with the final kisses as many a trainload of embryonic heroes faded slowly from sight beneath the station's gaping archway. Germany was now indubitably convinced that its war was war in a holy cause. The time had come for the Fatherland to rise to the majesty of a great hour. "</span><em class="italics">Auf wiedersehen!</em><span>" sang the country to the army. But if there was to be no reunion, the army must go down fighting to the last gasp for</span> <em class="italics">unsere gerechte Sache</em><span>, manfully, tirelessly, ruthlessly, till victory was enforced. Such were the inspiring thoughts amid which the boys in field gray trooped off to die for Kaiser and Empire.</span></p>
|
||||
|
||||
<p><span>The outstanding event of August 3 was the publication of the German Government's famous apologia for the war, the so-called "White Paper" officially described as "Memorandum and Documents in Relation to the Outbreak of the War." Early in the afternoon a telephone message arrived for me at the Adlon to the effect that if I would call at the Press Bureau of the Foreign Office at five o'clock,</span> <em class="italics">Legationsrat</em> <span>Heilbron, one of Hammann's lieutenants whom I had known for many years, would be glad to deliver me an advance copy for special transmission to London and New York. I lay great stress on the fact that up to sun-down of August 3, 1914, I continued to be</span> <em class="italics">persona gratissima</em> <span>with the Imperial German Government. It was true that one of the young Foreign Office cubs told off to censor press cablegrams at the Main Telegraph Office had, during the preceding three days, expressed annoyance with what he considered my eagerness to "go into details," but</span> <em class="italics">Legationsrat</em><span>Heilbron's invitation to fetch the "White Paper" was gratifying evidence that my relations with the powers-that-be were still "correct," even if not cordial. I was glad of that, because there was constantly in my mind the desire to remain in Germany, whatever happened, with a front-row seat for the big show. At the appointed hour I presented myself in Herr Heilbron's room on the ground floor of the Wilhelmstrasse front of the Foreign Office. He greeted me with old-time courtesy, though I found his demeanor perceptibly depressed. He handed me a copy of the</span> <em class="italics">Denkschrift</em><span>, and, when I begged him for a second one, he complied with a gracious</span> <em class="italics">bitte sehr</em><span>.</span></p>
|
||||
|
||||
<p><span>A London colleague had already intimated to me that the Imperial Chancellor, desiring to place the German case promptly and fully before the British and American publics, would "do his best" with the military authorities who were now in supreme control of the postal telegraph and cable lines to induce them to allow London and New York correspondents to file exhaustive "stories" on the White Paper. As I was sure, however, that Reuter's Agency for England and the Associated Press for America would be handling the affair at great length, my treatment of it was confined, as was usual under such circumstances, to telegraphing a brief introductory summary.</span></p>
|
||||
|
||||
<p><span>What struck me instantly as the hall-marks of the German publication were its treatment of the war as an exclusively Russian-provoked Russo-German affair and its brazenly</span> <em class="italics">ex-parté</em> <span>character--how</span> <em class="italics">ex-parté</em> <span>I did not fully realize till I read England's White Paper a week later. Sir Edward Grey laid his cards on the table, without marginal notes or comment of any kind, and asked the world to pass judgment. Doctor von Bethmann Hollweg's White Paper began with a lengthy plea of justification and ended with quotation of such communications between the Kaiser's Government and its ambassadors and between the German Emperor and the Czar as would most plausibly support the Fatherland's case for war. It was manifestly a biased and incomplete record. It was in fact a doctored record, and suggested that its authors had Bismarck's mutilation of the Ems telegram in mind as a precedent, in emulation of which no German Government could possibly go wrong.</span></p>
|
||||
|
||||
<p><span>Although compiled to include events up to August 1, the German White Paper was silent as the grave in regard to Belgium and the negotiations with the Government of Great Britain. Issued on the night of August 3, when hundreds of thousands of German troops were waiting at Aix-la-Chapelle for the great assault on Liége--if, indeed, at that hour they were not already across the Belgian frontier--this sacred brief designed to establish the Fatherland's case at the bar of world opinion had no single word to say on what was destined to be almost the supreme issue of the war. It was the last word in Imperial German deception. If the German public had known that Sir Edward Grey on July 30 had already "warned Prince Lichnowsky that Germany must not count upon our standing aside in all circumstances," I imagine its bitterness a few nights later, when the fable of England's "treacherous intervention" was sprung upon the deluded Fatherland, might have been less barbaric in its intensity.</span></p>
|
||||
|
||||
<p><span>Next to the omission of all reference to what Sir Edward Grey called Germany's "infamous proposal" for the purchase of British neutrality--a pledge not to despoil France of European territory if England would stand with folded arms while Germany violated Belgium and ravished the French Colonial Empire--the striking feature of the Berlin White Paper was the admission of German-Austrian complicity in the humiliation of Serbia. The Foreign Office, as I have previously explained, had zealously affirmed Germany's entire detachment from Austria's programme for avenging Serajevo. What did the White Paper now tell us? That</span></p>
|
||||
<div class="vspace c1"/>
|
||||
<p class="pfirst"><span>"Austria had to admit that it would not be consistent either with the dignity or the self-preservation of the Monarchy to look on longer at the operations on the other side of the border without taking action....</span> <em class="italics">We were able to assure our ally most heartily of our agreement with her view of the situation, and to assure her that any action she might consider it necessary to take in order to put an end to the movement in Servia directed against the existence of the Austro-Hungarian Monarchy would receive our approval</em><span>. We were fully aware, in this connection, that warlike moves on the part of Austria-Hungary against Servia would bring Russia into the question, and might draw us into a war in accordance with our duties as an ally."</span></p>
|
||||
<div class="vspace c1"/>
|
||||
<p class="pfirst"><span>The historic and ineffaceable fact is that Austria--wabbly, invertebrate Austria, which would even to-day, but for Germany, lay prostrate and vanquished--never made a solitary move in the whole plot to coerce Serbia without the full concurrence of the big brother at Berlin. It would be an insult to the intelligence of German diplomacy, stupid as it is, to imagine that the Kaiser's Government sat mute, unconsulted and nonchalant, while Austria worked out a scheme certain, as the Germans themselves admit in their White Paper, to plunge Europe into war.</span></p>
|
||||
|
||||
<p><span>It was my privilege on arriving in the United States on August 22, to furnish the</span> <em class="italics">New York Times</em> <span>with the first copy of the German White Paper to reach the American public. In preparing a prefatory note to accompany the verbatim translation published in next day's paper, I selected the paragraph above quoted as</span> <em class="italics">primâ-facie</em> <span>evidence that the German claim of non-collusion with Austria is subterfuge--to give it the longer and less unparliamentary term.</span></p>
|
||||
|
||||
<p><span>The German White Paper was prepared formally for the information of the Reichstag, which was summoned to meet on Tuesday, August 4 of imperishable memory, for the purpose of voting $325,000,000 of initial war credits. Paris was not won in the expected six weeks, and the Reichstag has voted $7,500,000,000 of war credits up to this writing (September 1, 1915), with melancholy promise of still more to come. The twenty-four hours preceding the war sitting had not been eventless. Monsieur Sverbieff and the staff of the Russian Embassy were the victims of gross insults from the mob in</span> <em class="italics">Unter den Linden</em><span>, as they left their headquarters in automobiles for the railway station. Mounted police were present to "keep order," but their "vigilance" did not deter German men and youths from spitting in the faces of the Czar's representatives, belaboring them with walking-sticks and umbrellas, and offering rowdy indignities to the women of the ambassadorial party. In front of the French Embassy menacing crowds stood throughout the day and night, waiting for a chance to exhibit German patriotism at Monsieur Cambon's expense. When Señor Polê de Bernábe, the Spanish Ambassador, who was calling to arrange to take over the representation of France during the war, made his appearance, the mob mistook him for Cambon and was just prevented in the nick of time from assaulting the Spaniard. How the French Embassy finally got away from Germany, under circumstances which would have shamed a Fiji Island government, was later related for the benefit of posterity in the French</span> <em class="italics">Yellow Book</em><span>. When I read it months later, I remembered my first German teacher in Berlin, a noblewoman, once telling me, when I asked her how to say "gentleman" in German: "There is no such thing as a 'gentleman' in the German language." That was paraphrased to me by another German on a later occasion, when, discussing the ability of German science, so well demonstrated during this war, to devise a substitute for almost anything, he remarked: "The only thing we can't make is a gentleman, because we never had a proper analysis of the necessary ingredients." The Germans, in their communicative moments, always used to acknowledge that Bismarck was right when he called them "a nation of house-servants." It is impressively exemplified on their stage, which boasts the finest character actors imaginable; but when a German player essays to portray the gentleman, he is grotesque. He gropes helplessly in a strange and unexplored realm.</span></p>
|
||||
|
||||
<p><span>On the day before the war session of the Reichstag, the Kaiser, more conscious than ever now of his partnership with Deity, ordained Wednesday, August 5, as a day of universal prayer for the success of German arms. Soon after its proclamation, William II, thunderously acclaimed, appeared in</span> <em class="italics">Unter den Linden</em><span>intermittently, en route to conference with high officers of state. He was clad, like every German soldier one now saw, in field-gray, and ready, one heard, to leave for the front at a moment's notice, to take up his post, assigned him by Hohenzollern warrior traditions, on the battlefield in the midst of his loyal legions. Mobilization was now in full swing, and more and more troops were in evidence, crossing town to railway stations from which they were to be transported east or west, as the Staff's emergencies required. A week before, all these soldiers were in Prussian blue. They were gray now, from head to foot, millions of them. Obviously the clothing department of the army had not been taken by "surprise" by the cruel war "forced" on pacific Germany. Three million uniforms can not be turned out in a whole summer--even in Germany. I thought of this, as gray streams, far into the evening, kept pouring through Berlin, and I thought what a marvelously happy selection that peculiar shade of drab-gray, of almost dust-like invisibility from afar, was for field purposes. To shoot at lines no more colorful than that, it seemed to me, would be like banging away at the horizon itself....</span></p>
|
||||
|
||||
<p><span>History, I suppose, will date Armageddon from August 1, when the German army and navy were mobilized, or perhaps from August 2, when Germany claims that Russia and France fired the first miscreant shots. But the red-letter day of the World Massacre's opening week was beyond all question Tuesday, August 4, which began with the war sitting of the Reichstag and ended with England's declaration of war on Germany. It was destined to be especially big with import for me--of vital import, as events hanging over my unsuspecting head were speedily to reveal.</span></p>
|
||||
|
||||
<p><span>At midday, two hours before the session of the Reichstag in its own chamber, Parliament was "opened" by the Kaiser personally in the celebrated White Hall of the Royal Castle. I had applied for admission after the few available press tickets were already exhausted, but it was not difficult for me to visualize the scene. I had been in the White Hall on several memorable occasions in the past--during the visit of King Edward VII in February, 1909, at a brilliant State banquet and at the ball which followed; at the wedding of the Emperor's daughter, "the sunshine of my House," Princess Victoria Luise, and Duke Ernest August of Brunswick, in May, 1913; and a month later during the Silver Jubilee celebration of the Kaiser's reign, when our own Mr. Carnegie showered plaudits on the Prince of the world's peace. Tower, of</span> <em class="italics">The World</em> <span>and</span> <em class="italics">Daily News</em><span>, was lucky enough to secure a ticket to the Castle ceremonial, and he was bubbling over with excitement at having been privileged to participate in so memorable a function. My old friend, Günther Thomas, late of the</span> <em class="italics">Newyorker-Staatszeitung</em><span>, now joyous in the prospect of joining the German Press Bureau's war staff, came back from the Castle almost pitying me for not having been there. "Wile, I tell you," I can hear him saying now, "it was beautiful, simply beautiful! You missed it! It was enough to make one cry!" Thomas lived in New York seventeen years, but he returned to Germany a more devout Prussian than ever, as a man ought to be whose father fell gloriously at Königgrätz.</span></p>
|
||||
|
||||
<p><span>The description furnished by my English and Prussian colleagues evidently did not exaggerate the splendor and impressiveness of the scene at the White Hall. The Kaiser, in field-general's gray, entered, escorting the Empress. He was solemn, but not anxious-looking. Around the marble-pillared chamber, where only fifteen months before I had seen the Czar and George V of England tripping the minuet with German princesses as the Kaiser's honored guests, were grouped the first men of the Empire. In the places of distinction, closest to the canopied throne, each according to his Court rank, stood the Imperial Chancellor, General von Moltke, Grand-Admiral von Tirpitz and a score of other eminent officers of the civil, naval and military governments. Among the foreign ambassadors only the representatives of Russia and France were missing from their old-time places. Mr. Gerard, modest and retiring as always, amid the glitter of gold lace and brass buttons flashing on all sides, cut a more than ever self-effacing figure in his diplomatic uniform--the plain evening dress of an American gentleman.</span></p>
|
||||
|
||||
<p><span>The Kaiser read his War Speech, which he held in his right hand, while the left firmly gripped his sword-hilt. Beginning in a quiet tone, His Majesty's voice appreciably rose in intensity and volume as he approached the kernel of his message which told how "with a heavy heart I have been compelled to mobilize my army against a neighbor with whom it has fought side by side on so many fields of battle." The Imperial Russian Government, William II went on to say, "yielding to the pressure of an insatiable nationalism, has taken sides with a State which by encouraging criminal attacks has brought on the evil of war." That France, also, the Kaiser continued, "placed herself on the side of our enemies could not surprise us. Too often have our efforts to arrive at friendlier relations with the French Republic come in collision with old hopes and ancient malice." And when the Kaiser had ended, with an invitation to "the leaders of the different parties of the Reichstag" (there were no Socialists present) "to come forward and lay their hands in mine as a pledge," the White Hall reverberated with applause which must have seemed almost indecorous in so august an apartment, but which, no doubt, rang true. It was then, I suppose, that Thomas felt like weeping, and so should I, perhaps, had I been there. The Kaiser, his handshaking-bee over, strode from the scene amid an awesome silence, and the statesmen, the generals and the admirals went their respective ways. All was now in readiness for the real Reichstag session, in which words of deathless significance were to fall from the Chancellor's lips.</span></p>
|
||||
|
||||
<p><span>We were accustomed to sardine-box conditions in the always overcrowded press gallery of the Reichstag on "great days," but to-day we were piled on top of one another in closer formation even than a Prussian infantry platoon in the charge. Familiar faces were missing. Comert, of</span> <em class="italics">Le Temps</em><span>, Caro, of</span> <em class="italics">Le Matin</em><span>, and Bonnefon, of</span> <em class="italics">Le Figaro</em><span>, were not there. They had escaped, we were glad to hear, by one of the very last trains across the French frontier. Löwenton (a brother of Madame Nazimoff), Grossmann, Markoff and Melnikoff, our long-time Russian colleagues, were absent, too. Had they gained Wirballen in time, we wondered, or were they languishing in Spandau?</span></p>
|
||||
|
||||
<p><span>Doctor Paul Goldmann,</span> <em class="italics">doyén</em> <span>of our Berlin corps, was in his accustomed seat, beaming consciously, as became, at such an hour, the correspondent-in-chief of the great allied Vienna</span> <em class="italics">Neue Freie Presse</em><span>. The British and American contingents were on hand in force. Never had we waited for a</span> <em class="italics">Kanzlerrede</em> <span>in such electric expectancy. "Copy" in plenty, such as none of us had ever telegraphed before, was about to be made. Goldmann, a Foreign Office favorite, as well as the all-around most popular foreign journalist in Berlin, may have had an advance hint what was coming, as he frequently did, but to the vast majority of us--British, American, Swedish, Dutch, Italian, Swiss, Spanish and Danish, sandwiched there in the</span> <em class="italics">Pressloge</em> <span>so closely that we could hear, but not move--I am certain that the momentous words and extraordinary scenes about to ensue came as a staggering revelation.</span></p>
|
||||
|
||||
<p><span>Doctor von Bethmann Hollweg, who is flattered when told that he looks like Abraham Lincoln--the resemblance ends there--began speaking at three-fifteen o'clock. Gaunt and fatigued, he tugged nervously at the portfolio of documents on the desk in front of him during the brief introductory remarks of the President of the House, the patriarchal, white-bearded Doctor Kaempf. The Chancellor's manner gave no indication that before he resumed his seat he would rise to heights of oratorical fire of which no one ever thought that "incarnation of passionate doctrinarianism" capable. What he said is known to all the world now; how, in Bismarckian accents, he thundered that "we are in a state of self-defense and necessity knows no law!" How he confessed that "our troops, which have already occupied Luxemburg, may perhaps already have set foot on Belgian territory." How he acknowledged, in a succeeding phrase, to Germany's eternal guilt, that "that violates international law." How he proclaimed the amazing doctrine that, confronted by such emergencies as Germany now was, she had but one duty--"to hack her way through, even though--I say it quite frankly--we are doing wrong!" Our heads, I think, fairly swam as the terrible portent of these words sank into our consciousness. "Our troops may perhaps already have set foot on Belgian soil." That meant one thing, with absolute certainty. It denoted war with England. Trifles have a habit at such moments of lodging themselves firmly in one's mind; and I remember distinctly how, when I heard Bethmann Hollweg fling that challenge forth, I leaned over impulsively to my Swedish friend, Siosteen, of the</span> <em class="italics">Goteborg Tidningen</em><span>, and whispered: "That settles it. England's in it now, too." Siosteen nods an excited assent. It is in the midst of one of the frequent intervals in which the House, floor and galleries alike, is now venting its impassioned approval of the Chancellor's words. I had heard Bülow and Bebel and Bethmann Hollweg himself, times innumerable, set the Reichstag rocking with fervid demonstrations of approval or hostility, but never has it throbbed with such life as to-day. It is the incarnation of the inflamed war spirit of the land. The more defiant the Chancellor's diction, the more fervid the applause it evokes. "</span><em class="italics">Sehr richtig! Sehr richtig!</em><span>" the House shrieks back at him in chorus as he details, step by step, how Germany has been "forced" to draw her terrible sword to beat back the "Russian mobilization menace," how she has tried and failed to bargain with England and Belgium, how she has kept the dogs of war chained to the last, and only released them now when destruction, imminent and certain, is upon her.</span></p>
|
||||
|
||||
<p><span>All eyes in the Press Gallery are riveted on the broad left arc of the floor usurped by the one hundred and eleven Social Democratic deputies of the House of three hundred and ninety-seven members. For the first time in German history their cheers are mingling with those of other parties in support of a Government policy. That, after the Belgian revelation, is beyond all question the dominating feature of a scene tremendous with meaning in countless respects. There is nothing perfunctory about the "Reds'" enthusiasm; that is plain. It is real, spontaneous, universal. No man of them keeps his seat. All are on their feet, succumbing to the engulfing magnitude of the moment. That, it instantly occurs to us, means much to Germany at such an hour. It means that the hope which more than one of the Fatherland's prospective foes in years gone by has fondly cherished, of Socialist revolt in the hour of Germany's peril, was illusory hope. The Chancellor knows what it means. "Our army is in the field!" he declares, trembling with emotion. "Our fleet is ready for battle! The whole German nation stands behind them!" As one man, the entire Reichstag now rises, shouting its approval of these historic words in tones of frenzied exaltation. For two full minutes pandemonium reigns unchecked. Bethmann Hollweg is turning to the Social Democrats. His fist is clenched and he brandishes it in their direction--not in anger this time, but in triumph--and, as if he were proclaiming the proud sentiment for all the world to hear, he exclaims, at the top of his voice, "Yea, the whole nation!" Thus was Armageddon born. Germany, all present knew, would be at war before another sun had gone down, not only with Russia and France, but with England, and, of course, with Belgium, too.</span></p>
|
||||
|
||||
<p><span>"Supposing the Belgians resist?" I asked Schmidt, of the</span> <em class="italics">B. Z. am Mittag</em><span>, a German colleague whom I once christened Berlin's "star" reporter, as we wandered, thinking hard, back to</span> <em class="italics">Unter den Linden</em><span>.</span></p>
|
||||
|
||||
<p><span>"Resist?" he replied, half pitying the feeble-mindedness which prompted such a question. "We shall simply spill them into the ocean."</span></p>
|
||||
</div>
|
||||
<script>
|
||||
var target = document.getElementById("target");
|
||||
var style = target.style;
|
||||
|
||||
function test() {
|
||||
style.display = "block";
|
||||
|
||||
style.fontSize = "10px";
|
||||
style.width = "280px";
|
||||
PerfTestRunner.forceLayout();
|
||||
|
||||
style.fontSize = "12px";
|
||||
style.width = "300px";
|
||||
PerfTestRunner.forceLayout();
|
||||
|
||||
style.display = "none";
|
||||
}
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Measures performance of layout (using 2 different font-sizes) on a page containing English text.",
|
||||
run: test
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!--
|
||||
http://www.gutenberg.org/ebooks/41252
|
||||
|
||||
"This eBook is for the use of anyone anywhere at no cost and with almost no restrictions whatsoever. You may copy it, give it away or re-use it under the terms of the Project Gutenberg License included with this eBook or online at www.gutenberg.org."
|
||||
-->
|
||||
<title>Chapter reflow performance test: English prose thrice</title>
|
||||
<script src="../resources/runner.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<pre id="log"></pre>
|
||||
<div id="target" style="width: 300px; display: none;">
|
||||
<p><span>Germany's war Juggernaut by the morning of Monday, August 3, was in full, but incredibly noiseless, motion. I always knew it was a magnificently well greased machine, geared for the maximum of silence, but I felt sure it could not swing into action without some reverberating creaks. Yet Berlin externally had been far more feverishly agitated on Spring Parade days at recurring ends of May than it was now, with "enemies all around" and that "war on two fronts," which most Germans used to talk about as something,</span> <em class="italics">Gott sei Dank</em><span>, they would never live to see. One's male friends of military age--it was now the second day of mobilization--kept on melting away from hour to hour, but amid a complete lack of fuss and bustle. It almost seemed as if the army had orders to rush to the fighting-line in gum-shoes and that everything on wheels had rubber tires. As the Fatherland for years had armed in silence, so she was going to battle. We saw no seventeen-inch guns rumbling to the front. Those were Germany's best-concealed weapons. A military attaché of one of the chief belligerents, who lived in Berlin for four years preceding the war, has since confessed that he never even knew of the "Big Berthas'" existence!</span></p>
|
||||
|
||||
<p><span>Germany girding for Armageddon was distinctly a disappointment. I entirely agreed with a portly dowager from the Middle West, who, between frettings about when she could get a train to the Dutch frontier, continually expressed her chagrin at such "a poor show." She imagined, like a good many of the rest of us, that mobilization in Germany would at the very least see the Supreme War Lord bolting madly up and down</span> <em class="italics">Unter den Linden</em><span>, plunging silver spurs into a foaming white charger and brandishing a glistening sword in martial gestures as Caruso does when he plays Radames in the finale of the second act of Aida. Verdi's Egyptian epic is the Kaiser's favorite opera, and he ought to have remembered, we thought, how a conquering hero should demean himself at such a blood-stirring hour. At least Berlin, we hoped, would rise to the occasion, and thunder and rock with the pomp and circumstance of war's alarums.</span></p>
|
||||
|
||||
<p><span>There was amazingly little of anything of that sort. The Kaiser instead automobiled around town in a prosaic six-cylinder Mercedes, as he long was wont to do, just keeping some rather important professional engagements with the Chief of the General Staff, the Imperial Chancellor and the Secretary of the Navy. As he flitted by, the huge crowds lined up on the curbstone stiffened into attitudes, clicked heels, doffed hats and "</span><em class="italics">hoched</em><span>." The atmosphere was</span> <em class="italics">stimmungsvoller</em> <span>than usual, for German phlegm had vanished along with high prices on the Bourse, but the paroxysm of electric excitement which I always fancied would usher in a German war was unaccountably missing. When you mentioned that phenomenon to German friends, their bosoms swelled with visible pride. They were immeasurably flattered by your indirect compliment that the Kaiser's war establishment was so perfect a mechanism that it could clear for action almost imperceptibly.</span></p>
|
||||
|
||||
<p><span>I had now deserted my home in suburban Wilmersdorf, which I nicknamed the "District of Columbia," for in and all around it Berlin's American colony was domiciled, and taken a room for the opening scenes of the war drama in the Hotel Adlon. With its broad fronts on the Linden and Pariser Platz, and the French, British and Russian Embassies within a stone's throw to the right and left, the Adlon was an ideal vantage point. If there were to be "demonstrations," I could feel sure, at so strategic a point, of being in the thick of them. Events of the succeeding thirty-six hours were to show that I did not reckon without my host on that score.</span></p>
|
||||
|
||||
<p><span>From window and balcony overlooking the Linden I could now see or hear at intervals detachments of Berlin regiments, Uhlans or Infantry of the Guard, or a battery of light artillery, swinging along to railway stations to entrain for the front. Occasionally battalions of provincial regiments, distinguishable because the men did not tower into space like Berlin's guardsmen, crossed town en route from one train to another. The men seemed happier than I had ever before seen German soldiers. That was the only difference, or at least the principal one. The prospect of soon becoming cannon-fodder was evidently far from depressing. Most of them carried flowers entwined round the rifle barrel or protruding from its mouth. Here and there a bouquet dangled rakishly from a helmet. Now and then a flaxen-haired Prussian girl would step into the street and press a posey into some trooper's grimy hand. Yet, except for the fact that the soldiers were all in field gray, (I wonder when the Kaiser's military tailors began making those millions of gray uniforms!) with even their familiar spiked headpiece masked in canvas of the same hue, the Kaiser's fighting men marching off to battle might have been carrying out a workaday route-march. Then, suddenly, a company or a whole battalion would break into song, and the crowd, trailing alongside the bass-drum of the band, just as in peace times, would take up the refrain, and presently half-a-mile of</span> <em class="italics">Unter den Linden</em> <span>was echoing with</span> <em class="italics">Deutschland, Deutschland über Alles</em><span>, and I knew that the Fatherland was at war.</span></p>
|
||||
|
||||
<p><span>At the railway stations of Berlin and countless other German towns and cities at that hour heart-rending little tragedies were being enacted, as fathers, mothers, wives, sisters and sweethearts bade a long farewell to the beloved in gray. Only rarely did some man in uniform himself surrender to the emotions of the moment. These swarthy young Germans, with fifty or sixty pounds of impedimenta strapped round them, were endowed with Spartan stolidity now, and smilingly buoyed up the drooping spirits of the kith and kin they were leaving behind. "</span><em class="italics">Es wird schon gut, Mütterchen! Es wird schon gut!</em><span>" (It will be all right, mother dear! It will be all right!) Thus they returned comfort for tears.</span> <em class="italics">"Nicht unterliegen! Besser nicht zurückkehren!</em><span>" (Don't be beaten! Better not come back at all!) was the good-by greeting blown with the final kisses as many a trainload of embryonic heroes faded slowly from sight beneath the station's gaping archway. Germany was now indubitably convinced that its war was war in a holy cause. The time had come for the Fatherland to rise to the majesty of a great hour. "</span><em class="italics">Auf wiedersehen!</em><span>" sang the country to the army. But if there was to be no reunion, the army must go down fighting to the last gasp for</span> <em class="italics">unsere gerechte Sache</em><span>, manfully, tirelessly, ruthlessly, till victory was enforced. Such were the inspiring thoughts amid which the boys in field gray trooped off to die for Kaiser and Empire.</span></p>
|
||||
|
||||
<p><span>The outstanding event of August 3 was the publication of the German Government's famous apologia for the war, the so-called "White Paper" officially described as "Memorandum and Documents in Relation to the Outbreak of the War." Early in the afternoon a telephone message arrived for me at the Adlon to the effect that if I would call at the Press Bureau of the Foreign Office at five o'clock,</span> <em class="italics">Legationsrat</em> <span>Heilbron, one of Hammann's lieutenants whom I had known for many years, would be glad to deliver me an advance copy for special transmission to London and New York. I lay great stress on the fact that up to sun-down of August 3, 1914, I continued to be</span> <em class="italics">persona gratissima</em> <span>with the Imperial German Government. It was true that one of the young Foreign Office cubs told off to censor press cablegrams at the Main Telegraph Office had, during the preceding three days, expressed annoyance with what he considered my eagerness to "go into details," but</span> <em class="italics">Legationsrat</em><span>Heilbron's invitation to fetch the "White Paper" was gratifying evidence that my relations with the powers-that-be were still "correct," even if not cordial. I was glad of that, because there was constantly in my mind the desire to remain in Germany, whatever happened, with a front-row seat for the big show. At the appointed hour I presented myself in Herr Heilbron's room on the ground floor of the Wilhelmstrasse front of the Foreign Office. He greeted me with old-time courtesy, though I found his demeanor perceptibly depressed. He handed me a copy of the</span> <em class="italics">Denkschrift</em><span>, and, when I begged him for a second one, he complied with a gracious</span> <em class="italics">bitte sehr</em><span>.</span></p>
|
||||
|
||||
<p><span>A London colleague had already intimated to me that the Imperial Chancellor, desiring to place the German case promptly and fully before the British and American publics, would "do his best" with the military authorities who were now in supreme control of the postal telegraph and cable lines to induce them to allow London and New York correspondents to file exhaustive "stories" on the White Paper. As I was sure, however, that Reuter's Agency for England and the Associated Press for America would be handling the affair at great length, my treatment of it was confined, as was usual under such circumstances, to telegraphing a brief introductory summary.</span></p>
|
||||
|
||||
<p><span>What struck me instantly as the hall-marks of the German publication were its treatment of the war as an exclusively Russian-provoked Russo-German affair and its brazenly</span> <em class="italics">ex-parté</em> <span>character--how</span> <em class="italics">ex-parté</em> <span>I did not fully realize till I read England's White Paper a week later. Sir Edward Grey laid his cards on the table, without marginal notes or comment of any kind, and asked the world to pass judgment. Doctor von Bethmann Hollweg's White Paper began with a lengthy plea of justification and ended with quotation of such communications between the Kaiser's Government and its ambassadors and between the German Emperor and the Czar as would most plausibly support the Fatherland's case for war. It was manifestly a biased and incomplete record. It was in fact a doctored record, and suggested that its authors had Bismarck's mutilation of the Ems telegram in mind as a precedent, in emulation of which no German Government could possibly go wrong.</span></p>
|
||||
|
||||
<p><span>Although compiled to include events up to August 1, the German White Paper was silent as the grave in regard to Belgium and the negotiations with the Government of Great Britain. Issued on the night of August 3, when hundreds of thousands of German troops were waiting at Aix-la-Chapelle for the great assault on Liége--if, indeed, at that hour they were not already across the Belgian frontier--this sacred brief designed to establish the Fatherland's case at the bar of world opinion had no single word to say on what was destined to be almost the supreme issue of the war. It was the last word in Imperial German deception. If the German public had known that Sir Edward Grey on July 30 had already "warned Prince Lichnowsky that Germany must not count upon our standing aside in all circumstances," I imagine its bitterness a few nights later, when the fable of England's "treacherous intervention" was sprung upon the deluded Fatherland, might have been less barbaric in its intensity.</span></p>
|
||||
|
||||
<p><span>Next to the omission of all reference to what Sir Edward Grey called Germany's "infamous proposal" for the purchase of British neutrality--a pledge not to despoil France of European territory if England would stand with folded arms while Germany violated Belgium and ravished the French Colonial Empire--the striking feature of the Berlin White Paper was the admission of German-Austrian complicity in the humiliation of Serbia. The Foreign Office, as I have previously explained, had zealously affirmed Germany's entire detachment from Austria's programme for avenging Serajevo. What did the White Paper now tell us? That</span></p>
|
||||
<div class="vspace c1"/>
|
||||
<p class="pfirst"><span>"Austria had to admit that it would not be consistent either with the dignity or the self-preservation of the Monarchy to look on longer at the operations on the other side of the border without taking action....</span> <em class="italics">We were able to assure our ally most heartily of our agreement with her view of the situation, and to assure her that any action she might consider it necessary to take in order to put an end to the movement in Servia directed against the existence of the Austro-Hungarian Monarchy would receive our approval</em><span>. We were fully aware, in this connection, that warlike moves on the part of Austria-Hungary against Servia would bring Russia into the question, and might draw us into a war in accordance with our duties as an ally."</span></p>
|
||||
<div class="vspace c1"/>
|
||||
<p class="pfirst"><span>The historic and ineffaceable fact is that Austria--wabbly, invertebrate Austria, which would even to-day, but for Germany, lay prostrate and vanquished--never made a solitary move in the whole plot to coerce Serbia without the full concurrence of the big brother at Berlin. It would be an insult to the intelligence of German diplomacy, stupid as it is, to imagine that the Kaiser's Government sat mute, unconsulted and nonchalant, while Austria worked out a scheme certain, as the Germans themselves admit in their White Paper, to plunge Europe into war.</span></p>
|
||||
|
||||
<p><span>It was my privilege on arriving in the United States on August 22, to furnish the</span> <em class="italics">New York Times</em> <span>with the first copy of the German White Paper to reach the American public. In preparing a prefatory note to accompany the verbatim translation published in next day's paper, I selected the paragraph above quoted as</span> <em class="italics">primâ-facie</em> <span>evidence that the German claim of non-collusion with Austria is subterfuge--to give it the longer and less unparliamentary term.</span></p>
|
||||
|
||||
<p><span>The German White Paper was prepared formally for the information of the Reichstag, which was summoned to meet on Tuesday, August 4 of imperishable memory, for the purpose of voting $325,000,000 of initial war credits. Paris was not won in the expected six weeks, and the Reichstag has voted $7,500,000,000 of war credits up to this writing (September 1, 1915), with melancholy promise of still more to come. The twenty-four hours preceding the war sitting had not been eventless. Monsieur Sverbieff and the staff of the Russian Embassy were the victims of gross insults from the mob in</span> <em class="italics">Unter den Linden</em><span>, as they left their headquarters in automobiles for the railway station. Mounted police were present to "keep order," but their "vigilance" did not deter German men and youths from spitting in the faces of the Czar's representatives, belaboring them with walking-sticks and umbrellas, and offering rowdy indignities to the women of the ambassadorial party. In front of the French Embassy menacing crowds stood throughout the day and night, waiting for a chance to exhibit German patriotism at Monsieur Cambon's expense. When Señor Polê de Bernábe, the Spanish Ambassador, who was calling to arrange to take over the representation of France during the war, made his appearance, the mob mistook him for Cambon and was just prevented in the nick of time from assaulting the Spaniard. How the French Embassy finally got away from Germany, under circumstances which would have shamed a Fiji Island government, was later related for the benefit of posterity in the French</span> <em class="italics">Yellow Book</em><span>. When I read it months later, I remembered my first German teacher in Berlin, a noblewoman, once telling me, when I asked her how to say "gentleman" in German: "There is no such thing as a 'gentleman' in the German language." That was paraphrased to me by another German on a later occasion, when, discussing the ability of German science, so well demonstrated during this war, to devise a substitute for almost anything, he remarked: "The only thing we can't make is a gentleman, because we never had a proper analysis of the necessary ingredients." The Germans, in their communicative moments, always used to acknowledge that Bismarck was right when he called them "a nation of house-servants." It is impressively exemplified on their stage, which boasts the finest character actors imaginable; but when a German player essays to portray the gentleman, he is grotesque. He gropes helplessly in a strange and unexplored realm.</span></p>
|
||||
|
||||
<p><span>On the day before the war session of the Reichstag, the Kaiser, more conscious than ever now of his partnership with Deity, ordained Wednesday, August 5, as a day of universal prayer for the success of German arms. Soon after its proclamation, William II, thunderously acclaimed, appeared in</span> <em class="italics">Unter den Linden</em><span>intermittently, en route to conference with high officers of state. He was clad, like every German soldier one now saw, in field-gray, and ready, one heard, to leave for the front at a moment's notice, to take up his post, assigned him by Hohenzollern warrior traditions, on the battlefield in the midst of his loyal legions. Mobilization was now in full swing, and more and more troops were in evidence, crossing town to railway stations from which they were to be transported east or west, as the Staff's emergencies required. A week before, all these soldiers were in Prussian blue. They were gray now, from head to foot, millions of them. Obviously the clothing department of the army had not been taken by "surprise" by the cruel war "forced" on pacific Germany. Three million uniforms can not be turned out in a whole summer--even in Germany. I thought of this, as gray streams, far into the evening, kept pouring through Berlin, and I thought what a marvelously happy selection that peculiar shade of drab-gray, of almost dust-like invisibility from afar, was for field purposes. To shoot at lines no more colorful than that, it seemed to me, would be like banging away at the horizon itself....</span></p>
|
||||
|
||||
<p><span>History, I suppose, will date Armageddon from August 1, when the German army and navy were mobilized, or perhaps from August 2, when Germany claims that Russia and France fired the first miscreant shots. But the red-letter day of the World Massacre's opening week was beyond all question Tuesday, August 4, which began with the war sitting of the Reichstag and ended with England's declaration of war on Germany. It was destined to be especially big with import for me--of vital import, as events hanging over my unsuspecting head were speedily to reveal.</span></p>
|
||||
|
||||
<p><span>At midday, two hours before the session of the Reichstag in its own chamber, Parliament was "opened" by the Kaiser personally in the celebrated White Hall of the Royal Castle. I had applied for admission after the few available press tickets were already exhausted, but it was not difficult for me to visualize the scene. I had been in the White Hall on several memorable occasions in the past--during the visit of King Edward VII in February, 1909, at a brilliant State banquet and at the ball which followed; at the wedding of the Emperor's daughter, "the sunshine of my House," Princess Victoria Luise, and Duke Ernest August of Brunswick, in May, 1913; and a month later during the Silver Jubilee celebration of the Kaiser's reign, when our own Mr. Carnegie showered plaudits on the Prince of the world's peace. Tower, of</span> <em class="italics">The World</em> <span>and</span> <em class="italics">Daily News</em><span>, was lucky enough to secure a ticket to the Castle ceremonial, and he was bubbling over with excitement at having been privileged to participate in so memorable a function. My old friend, Günther Thomas, late of the</span> <em class="italics">Newyorker-Staatszeitung</em><span>, now joyous in the prospect of joining the German Press Bureau's war staff, came back from the Castle almost pitying me for not having been there. "Wile, I tell you," I can hear him saying now, "it was beautiful, simply beautiful! You missed it! It was enough to make one cry!" Thomas lived in New York seventeen years, but he returned to Germany a more devout Prussian than ever, as a man ought to be whose father fell gloriously at Königgrätz.</span></p>
|
||||
|
||||
<p><span>The description furnished by my English and Prussian colleagues evidently did not exaggerate the splendor and impressiveness of the scene at the White Hall. The Kaiser, in field-general's gray, entered, escorting the Empress. He was solemn, but not anxious-looking. Around the marble-pillared chamber, where only fifteen months before I had seen the Czar and George V of England tripping the minuet with German princesses as the Kaiser's honored guests, were grouped the first men of the Empire. In the places of distinction, closest to the canopied throne, each according to his Court rank, stood the Imperial Chancellor, General von Moltke, Grand-Admiral von Tirpitz and a score of other eminent officers of the civil, naval and military governments. Among the foreign ambassadors only the representatives of Russia and France were missing from their old-time places. Mr. Gerard, modest and retiring as always, amid the glitter of gold lace and brass buttons flashing on all sides, cut a more than ever self-effacing figure in his diplomatic uniform--the plain evening dress of an American gentleman.</span></p>
|
||||
|
||||
<p><span>The Kaiser read his War Speech, which he held in his right hand, while the left firmly gripped his sword-hilt. Beginning in a quiet tone, His Majesty's voice appreciably rose in intensity and volume as he approached the kernel of his message which told how "with a heavy heart I have been compelled to mobilize my army against a neighbor with whom it has fought side by side on so many fields of battle." The Imperial Russian Government, William II went on to say, "yielding to the pressure of an insatiable nationalism, has taken sides with a State which by encouraging criminal attacks has brought on the evil of war." That France, also, the Kaiser continued, "placed herself on the side of our enemies could not surprise us. Too often have our efforts to arrive at friendlier relations with the French Republic come in collision with old hopes and ancient malice." And when the Kaiser had ended, with an invitation to "the leaders of the different parties of the Reichstag" (there were no Socialists present) "to come forward and lay their hands in mine as a pledge," the White Hall reverberated with applause which must have seemed almost indecorous in so august an apartment, but which, no doubt, rang true. It was then, I suppose, that Thomas felt like weeping, and so should I, perhaps, had I been there. The Kaiser, his handshaking-bee over, strode from the scene amid an awesome silence, and the statesmen, the generals and the admirals went their respective ways. All was now in readiness for the real Reichstag session, in which words of deathless significance were to fall from the Chancellor's lips.</span></p>
|
||||
|
||||
<p><span>We were accustomed to sardine-box conditions in the always overcrowded press gallery of the Reichstag on "great days," but to-day we were piled on top of one another in closer formation even than a Prussian infantry platoon in the charge. Familiar faces were missing. Comert, of</span> <em class="italics">Le Temps</em><span>, Caro, of</span> <em class="italics">Le Matin</em><span>, and Bonnefon, of</span> <em class="italics">Le Figaro</em><span>, were not there. They had escaped, we were glad to hear, by one of the very last trains across the French frontier. Löwenton (a brother of Madame Nazimoff), Grossmann, Markoff and Melnikoff, our long-time Russian colleagues, were absent, too. Had they gained Wirballen in time, we wondered, or were they languishing in Spandau?</span></p>
|
||||
|
||||
<p><span>Doctor Paul Goldmann,</span> <em class="italics">doyén</em> <span>of our Berlin corps, was in his accustomed seat, beaming consciously, as became, at such an hour, the correspondent-in-chief of the great allied Vienna</span> <em class="italics">Neue Freie Presse</em><span>. The British and American contingents were on hand in force. Never had we waited for a</span> <em class="italics">Kanzlerrede</em> <span>in such electric expectancy. "Copy" in plenty, such as none of us had ever telegraphed before, was about to be made. Goldmann, a Foreign Office favorite, as well as the all-around most popular foreign journalist in Berlin, may have had an advance hint what was coming, as he frequently did, but to the vast majority of us--British, American, Swedish, Dutch, Italian, Swiss, Spanish and Danish, sandwiched there in the</span> <em class="italics">Pressloge</em> <span>so closely that we could hear, but not move--I am certain that the momentous words and extraordinary scenes about to ensue came as a staggering revelation.</span></p>
|
||||
|
||||
<p><span>Doctor von Bethmann Hollweg, who is flattered when told that he looks like Abraham Lincoln--the resemblance ends there--began speaking at three-fifteen o'clock. Gaunt and fatigued, he tugged nervously at the portfolio of documents on the desk in front of him during the brief introductory remarks of the President of the House, the patriarchal, white-bearded Doctor Kaempf. The Chancellor's manner gave no indication that before he resumed his seat he would rise to heights of oratorical fire of which no one ever thought that "incarnation of passionate doctrinarianism" capable. What he said is known to all the world now; how, in Bismarckian accents, he thundered that "we are in a state of self-defense and necessity knows no law!" How he confessed that "our troops, which have already occupied Luxemburg, may perhaps already have set foot on Belgian territory." How he acknowledged, in a succeeding phrase, to Germany's eternal guilt, that "that violates international law." How he proclaimed the amazing doctrine that, confronted by such emergencies as Germany now was, she had but one duty--"to hack her way through, even though--I say it quite frankly--we are doing wrong!" Our heads, I think, fairly swam as the terrible portent of these words sank into our consciousness. "Our troops may perhaps already have set foot on Belgian soil." That meant one thing, with absolute certainty. It denoted war with England. Trifles have a habit at such moments of lodging themselves firmly in one's mind; and I remember distinctly how, when I heard Bethmann Hollweg fling that challenge forth, I leaned over impulsively to my Swedish friend, Siosteen, of the</span> <em class="italics">Goteborg Tidningen</em><span>, and whispered: "That settles it. England's in it now, too." Siosteen nods an excited assent. It is in the midst of one of the frequent intervals in which the House, floor and galleries alike, is now venting its impassioned approval of the Chancellor's words. I had heard Bülow and Bebel and Bethmann Hollweg himself, times innumerable, set the Reichstag rocking with fervid demonstrations of approval or hostility, but never has it throbbed with such life as to-day. It is the incarnation of the inflamed war spirit of the land. The more defiant the Chancellor's diction, the more fervid the applause it evokes. "</span><em class="italics">Sehr richtig! Sehr richtig!</em><span>" the House shrieks back at him in chorus as he details, step by step, how Germany has been "forced" to draw her terrible sword to beat back the "Russian mobilization menace," how she has tried and failed to bargain with England and Belgium, how she has kept the dogs of war chained to the last, and only released them now when destruction, imminent and certain, is upon her.</span></p>
|
||||
|
||||
<p><span>All eyes in the Press Gallery are riveted on the broad left arc of the floor usurped by the one hundred and eleven Social Democratic deputies of the House of three hundred and ninety-seven members. For the first time in German history their cheers are mingling with those of other parties in support of a Government policy. That, after the Belgian revelation, is beyond all question the dominating feature of a scene tremendous with meaning in countless respects. There is nothing perfunctory about the "Reds'" enthusiasm; that is plain. It is real, spontaneous, universal. No man of them keeps his seat. All are on their feet, succumbing to the engulfing magnitude of the moment. That, it instantly occurs to us, means much to Germany at such an hour. It means that the hope which more than one of the Fatherland's prospective foes in years gone by has fondly cherished, of Socialist revolt in the hour of Germany's peril, was illusory hope. The Chancellor knows what it means. "Our army is in the field!" he declares, trembling with emotion. "Our fleet is ready for battle! The whole German nation stands behind them!" As one man, the entire Reichstag now rises, shouting its approval of these historic words in tones of frenzied exaltation. For two full minutes pandemonium reigns unchecked. Bethmann Hollweg is turning to the Social Democrats. His fist is clenched and he brandishes it in their direction--not in anger this time, but in triumph--and, as if he were proclaiming the proud sentiment for all the world to hear, he exclaims, at the top of his voice, "Yea, the whole nation!" Thus was Armageddon born. Germany, all present knew, would be at war before another sun had gone down, not only with Russia and France, but with England, and, of course, with Belgium, too.</span></p>
|
||||
|
||||
<p><span>"Supposing the Belgians resist?" I asked Schmidt, of the</span> <em class="italics">B. Z. am Mittag</em><span>, a German colleague whom I once christened Berlin's "star" reporter, as we wandered, thinking hard, back to</span> <em class="italics">Unter den Linden</em><span>.</span></p>
|
||||
|
||||
<p><span>"Resist?" he replied, half pitying the feeble-mindedness which prompted such a question. "We shall simply spill them into the ocean."</span></p>
|
||||
</div>
|
||||
<script>
|
||||
var target = document.getElementById("target");
|
||||
var style = target.style;
|
||||
|
||||
function test() {
|
||||
style.display = "block";
|
||||
|
||||
style.fontSize = "10px";
|
||||
style.width = "280px";
|
||||
PerfTestRunner.forceLayout();
|
||||
style.width = "300px";
|
||||
PerfTestRunner.forceLayout();
|
||||
style.width = "290px";
|
||||
PerfTestRunner.forceLayout();
|
||||
|
||||
style.fontSize = "12px";
|
||||
style.width = "280px";
|
||||
PerfTestRunner.forceLayout();
|
||||
style.width = "300px";
|
||||
PerfTestRunner.forceLayout();
|
||||
style.width = "290px";
|
||||
PerfTestRunner.forceLayout();
|
||||
|
||||
style.display = "none";
|
||||
}
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Measures performance of 3 layouts (using 2 different font-sizes) on a page containing English text.",
|
||||
run: test
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!--
|
||||
http://www.gutenberg.org/ebooks/41252
|
||||
|
||||
"This eBook is for the use of anyone anywhere at no cost and with almost no restrictions whatsoever. You may copy it, give it away or re-use it under the terms of the Project Gutenberg License included with this eBook or online at www.gutenberg.org."
|
||||
-->
|
||||
<title>Chapter reflow performance test: English prose twice</title>
|
||||
<script src="../resources/runner.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<pre id="log"></pre>
|
||||
<div id="target" style="width: 300px; display: none;">
|
||||
<p><span>Germany's war Juggernaut by the morning of Monday, August 3, was in full, but incredibly noiseless, motion. I always knew it was a magnificently well greased machine, geared for the maximum of silence, but I felt sure it could not swing into action without some reverberating creaks. Yet Berlin externally had been far more feverishly agitated on Spring Parade days at recurring ends of May than it was now, with "enemies all around" and that "war on two fronts," which most Germans used to talk about as something,</span> <em class="italics">Gott sei Dank</em><span>, they would never live to see. One's male friends of military age--it was now the second day of mobilization--kept on melting away from hour to hour, but amid a complete lack of fuss and bustle. It almost seemed as if the army had orders to rush to the fighting-line in gum-shoes and that everything on wheels had rubber tires. As the Fatherland for years had armed in silence, so she was going to battle. We saw no seventeen-inch guns rumbling to the front. Those were Germany's best-concealed weapons. A military attaché of one of the chief belligerents, who lived in Berlin for four years preceding the war, has since confessed that he never even knew of the "Big Berthas'" existence!</span></p>
|
||||
|
||||
<p><span>Germany girding for Armageddon was distinctly a disappointment. I entirely agreed with a portly dowager from the Middle West, who, between frettings about when she could get a train to the Dutch frontier, continually expressed her chagrin at such "a poor show." She imagined, like a good many of the rest of us, that mobilization in Germany would at the very least see the Supreme War Lord bolting madly up and down</span> <em class="italics">Unter den Linden</em><span>, plunging silver spurs into a foaming white charger and brandishing a glistening sword in martial gestures as Caruso does when he plays Radames in the finale of the second act of Aida. Verdi's Egyptian epic is the Kaiser's favorite opera, and he ought to have remembered, we thought, how a conquering hero should demean himself at such a blood-stirring hour. At least Berlin, we hoped, would rise to the occasion, and thunder and rock with the pomp and circumstance of war's alarums.</span></p>
|
||||
|
||||
<p><span>There was amazingly little of anything of that sort. The Kaiser instead automobiled around town in a prosaic six-cylinder Mercedes, as he long was wont to do, just keeping some rather important professional engagements with the Chief of the General Staff, the Imperial Chancellor and the Secretary of the Navy. As he flitted by, the huge crowds lined up on the curbstone stiffened into attitudes, clicked heels, doffed hats and "</span><em class="italics">hoched</em><span>." The atmosphere was</span> <em class="italics">stimmungsvoller</em> <span>than usual, for German phlegm had vanished along with high prices on the Bourse, but the paroxysm of electric excitement which I always fancied would usher in a German war was unaccountably missing. When you mentioned that phenomenon to German friends, their bosoms swelled with visible pride. They were immeasurably flattered by your indirect compliment that the Kaiser's war establishment was so perfect a mechanism that it could clear for action almost imperceptibly.</span></p>
|
||||
|
||||
<p><span>I had now deserted my home in suburban Wilmersdorf, which I nicknamed the "District of Columbia," for in and all around it Berlin's American colony was domiciled, and taken a room for the opening scenes of the war drama in the Hotel Adlon. With its broad fronts on the Linden and Pariser Platz, and the French, British and Russian Embassies within a stone's throw to the right and left, the Adlon was an ideal vantage point. If there were to be "demonstrations," I could feel sure, at so strategic a point, of being in the thick of them. Events of the succeeding thirty-six hours were to show that I did not reckon without my host on that score.</span></p>
|
||||
|
||||
<p><span>From window and balcony overlooking the Linden I could now see or hear at intervals detachments of Berlin regiments, Uhlans or Infantry of the Guard, or a battery of light artillery, swinging along to railway stations to entrain for the front. Occasionally battalions of provincial regiments, distinguishable because the men did not tower into space like Berlin's guardsmen, crossed town en route from one train to another. The men seemed happier than I had ever before seen German soldiers. That was the only difference, or at least the principal one. The prospect of soon becoming cannon-fodder was evidently far from depressing. Most of them carried flowers entwined round the rifle barrel or protruding from its mouth. Here and there a bouquet dangled rakishly from a helmet. Now and then a flaxen-haired Prussian girl would step into the street and press a posey into some trooper's grimy hand. Yet, except for the fact that the soldiers were all in field gray, (I wonder when the Kaiser's military tailors began making those millions of gray uniforms!) with even their familiar spiked headpiece masked in canvas of the same hue, the Kaiser's fighting men marching off to battle might have been carrying out a workaday route-march. Then, suddenly, a company or a whole battalion would break into song, and the crowd, trailing alongside the bass-drum of the band, just as in peace times, would take up the refrain, and presently half-a-mile of</span> <em class="italics">Unter den Linden</em> <span>was echoing with</span> <em class="italics">Deutschland, Deutschland über Alles</em><span>, and I knew that the Fatherland was at war.</span></p>
|
||||
|
||||
<p><span>At the railway stations of Berlin and countless other German towns and cities at that hour heart-rending little tragedies were being enacted, as fathers, mothers, wives, sisters and sweethearts bade a long farewell to the beloved in gray. Only rarely did some man in uniform himself surrender to the emotions of the moment. These swarthy young Germans, with fifty or sixty pounds of impedimenta strapped round them, were endowed with Spartan stolidity now, and smilingly buoyed up the drooping spirits of the kith and kin they were leaving behind. "</span><em class="italics">Es wird schon gut, Mütterchen! Es wird schon gut!</em><span>" (It will be all right, mother dear! It will be all right!) Thus they returned comfort for tears.</span> <em class="italics">"Nicht unterliegen! Besser nicht zurückkehren!</em><span>" (Don't be beaten! Better not come back at all!) was the good-by greeting blown with the final kisses as many a trainload of embryonic heroes faded slowly from sight beneath the station's gaping archway. Germany was now indubitably convinced that its war was war in a holy cause. The time had come for the Fatherland to rise to the majesty of a great hour. "</span><em class="italics">Auf wiedersehen!</em><span>" sang the country to the army. But if there was to be no reunion, the army must go down fighting to the last gasp for</span> <em class="italics">unsere gerechte Sache</em><span>, manfully, tirelessly, ruthlessly, till victory was enforced. Such were the inspiring thoughts amid which the boys in field gray trooped off to die for Kaiser and Empire.</span></p>
|
||||
|
||||
<p><span>The outstanding event of August 3 was the publication of the German Government's famous apologia for the war, the so-called "White Paper" officially described as "Memorandum and Documents in Relation to the Outbreak of the War." Early in the afternoon a telephone message arrived for me at the Adlon to the effect that if I would call at the Press Bureau of the Foreign Office at five o'clock,</span> <em class="italics">Legationsrat</em> <span>Heilbron, one of Hammann's lieutenants whom I had known for many years, would be glad to deliver me an advance copy for special transmission to London and New York. I lay great stress on the fact that up to sun-down of August 3, 1914, I continued to be</span> <em class="italics">persona gratissima</em> <span>with the Imperial German Government. It was true that one of the young Foreign Office cubs told off to censor press cablegrams at the Main Telegraph Office had, during the preceding three days, expressed annoyance with what he considered my eagerness to "go into details," but</span> <em class="italics">Legationsrat</em><span>Heilbron's invitation to fetch the "White Paper" was gratifying evidence that my relations with the powers-that-be were still "correct," even if not cordial. I was glad of that, because there was constantly in my mind the desire to remain in Germany, whatever happened, with a front-row seat for the big show. At the appointed hour I presented myself in Herr Heilbron's room on the ground floor of the Wilhelmstrasse front of the Foreign Office. He greeted me with old-time courtesy, though I found his demeanor perceptibly depressed. He handed me a copy of the</span> <em class="italics">Denkschrift</em><span>, and, when I begged him for a second one, he complied with a gracious</span> <em class="italics">bitte sehr</em><span>.</span></p>
|
||||
|
||||
<p><span>A London colleague had already intimated to me that the Imperial Chancellor, desiring to place the German case promptly and fully before the British and American publics, would "do his best" with the military authorities who were now in supreme control of the postal telegraph and cable lines to induce them to allow London and New York correspondents to file exhaustive "stories" on the White Paper. As I was sure, however, that Reuter's Agency for England and the Associated Press for America would be handling the affair at great length, my treatment of it was confined, as was usual under such circumstances, to telegraphing a brief introductory summary.</span></p>
|
||||
|
||||
<p><span>What struck me instantly as the hall-marks of the German publication were its treatment of the war as an exclusively Russian-provoked Russo-German affair and its brazenly</span> <em class="italics">ex-parté</em> <span>character--how</span> <em class="italics">ex-parté</em> <span>I did not fully realize till I read England's White Paper a week later. Sir Edward Grey laid his cards on the table, without marginal notes or comment of any kind, and asked the world to pass judgment. Doctor von Bethmann Hollweg's White Paper began with a lengthy plea of justification and ended with quotation of such communications between the Kaiser's Government and its ambassadors and between the German Emperor and the Czar as would most plausibly support the Fatherland's case for war. It was manifestly a biased and incomplete record. It was in fact a doctored record, and suggested that its authors had Bismarck's mutilation of the Ems telegram in mind as a precedent, in emulation of which no German Government could possibly go wrong.</span></p>
|
||||
|
||||
<p><span>Although compiled to include events up to August 1, the German White Paper was silent as the grave in regard to Belgium and the negotiations with the Government of Great Britain. Issued on the night of August 3, when hundreds of thousands of German troops were waiting at Aix-la-Chapelle for the great assault on Liége--if, indeed, at that hour they were not already across the Belgian frontier--this sacred brief designed to establish the Fatherland's case at the bar of world opinion had no single word to say on what was destined to be almost the supreme issue of the war. It was the last word in Imperial German deception. If the German public had known that Sir Edward Grey on July 30 had already "warned Prince Lichnowsky that Germany must not count upon our standing aside in all circumstances," I imagine its bitterness a few nights later, when the fable of England's "treacherous intervention" was sprung upon the deluded Fatherland, might have been less barbaric in its intensity.</span></p>
|
||||
|
||||
<p><span>Next to the omission of all reference to what Sir Edward Grey called Germany's "infamous proposal" for the purchase of British neutrality--a pledge not to despoil France of European territory if England would stand with folded arms while Germany violated Belgium and ravished the French Colonial Empire--the striking feature of the Berlin White Paper was the admission of German-Austrian complicity in the humiliation of Serbia. The Foreign Office, as I have previously explained, had zealously affirmed Germany's entire detachment from Austria's programme for avenging Serajevo. What did the White Paper now tell us? That</span></p>
|
||||
<div class="vspace c1"/>
|
||||
<p class="pfirst"><span>"Austria had to admit that it would not be consistent either with the dignity or the self-preservation of the Monarchy to look on longer at the operations on the other side of the border without taking action....</span> <em class="italics">We were able to assure our ally most heartily of our agreement with her view of the situation, and to assure her that any action she might consider it necessary to take in order to put an end to the movement in Servia directed against the existence of the Austro-Hungarian Monarchy would receive our approval</em><span>. We were fully aware, in this connection, that warlike moves on the part of Austria-Hungary against Servia would bring Russia into the question, and might draw us into a war in accordance with our duties as an ally."</span></p>
|
||||
<div class="vspace c1"/>
|
||||
<p class="pfirst"><span>The historic and ineffaceable fact is that Austria--wabbly, invertebrate Austria, which would even to-day, but for Germany, lay prostrate and vanquished--never made a solitary move in the whole plot to coerce Serbia without the full concurrence of the big brother at Berlin. It would be an insult to the intelligence of German diplomacy, stupid as it is, to imagine that the Kaiser's Government sat mute, unconsulted and nonchalant, while Austria worked out a scheme certain, as the Germans themselves admit in their White Paper, to plunge Europe into war.</span></p>
|
||||
|
||||
<p><span>It was my privilege on arriving in the United States on August 22, to furnish the</span> <em class="italics">New York Times</em> <span>with the first copy of the German White Paper to reach the American public. In preparing a prefatory note to accompany the verbatim translation published in next day's paper, I selected the paragraph above quoted as</span> <em class="italics">primâ-facie</em> <span>evidence that the German claim of non-collusion with Austria is subterfuge--to give it the longer and less unparliamentary term.</span></p>
|
||||
|
||||
<p><span>The German White Paper was prepared formally for the information of the Reichstag, which was summoned to meet on Tuesday, August 4 of imperishable memory, for the purpose of voting $325,000,000 of initial war credits. Paris was not won in the expected six weeks, and the Reichstag has voted $7,500,000,000 of war credits up to this writing (September 1, 1915), with melancholy promise of still more to come. The twenty-four hours preceding the war sitting had not been eventless. Monsieur Sverbieff and the staff of the Russian Embassy were the victims of gross insults from the mob in</span> <em class="italics">Unter den Linden</em><span>, as they left their headquarters in automobiles for the railway station. Mounted police were present to "keep order," but their "vigilance" did not deter German men and youths from spitting in the faces of the Czar's representatives, belaboring them with walking-sticks and umbrellas, and offering rowdy indignities to the women of the ambassadorial party. In front of the French Embassy menacing crowds stood throughout the day and night, waiting for a chance to exhibit German patriotism at Monsieur Cambon's expense. When Señor Polê de Bernábe, the Spanish Ambassador, who was calling to arrange to take over the representation of France during the war, made his appearance, the mob mistook him for Cambon and was just prevented in the nick of time from assaulting the Spaniard. How the French Embassy finally got away from Germany, under circumstances which would have shamed a Fiji Island government, was later related for the benefit of posterity in the French</span> <em class="italics">Yellow Book</em><span>. When I read it months later, I remembered my first German teacher in Berlin, a noblewoman, once telling me, when I asked her how to say "gentleman" in German: "There is no such thing as a 'gentleman' in the German language." That was paraphrased to me by another German on a later occasion, when, discussing the ability of German science, so well demonstrated during this war, to devise a substitute for almost anything, he remarked: "The only thing we can't make is a gentleman, because we never had a proper analysis of the necessary ingredients." The Germans, in their communicative moments, always used to acknowledge that Bismarck was right when he called them "a nation of house-servants." It is impressively exemplified on their stage, which boasts the finest character actors imaginable; but when a German player essays to portray the gentleman, he is grotesque. He gropes helplessly in a strange and unexplored realm.</span></p>
|
||||
|
||||
<p><span>On the day before the war session of the Reichstag, the Kaiser, more conscious than ever now of his partnership with Deity, ordained Wednesday, August 5, as a day of universal prayer for the success of German arms. Soon after its proclamation, William II, thunderously acclaimed, appeared in</span> <em class="italics">Unter den Linden</em><span>intermittently, en route to conference with high officers of state. He was clad, like every German soldier one now saw, in field-gray, and ready, one heard, to leave for the front at a moment's notice, to take up his post, assigned him by Hohenzollern warrior traditions, on the battlefield in the midst of his loyal legions. Mobilization was now in full swing, and more and more troops were in evidence, crossing town to railway stations from which they were to be transported east or west, as the Staff's emergencies required. A week before, all these soldiers were in Prussian blue. They were gray now, from head to foot, millions of them. Obviously the clothing department of the army had not been taken by "surprise" by the cruel war "forced" on pacific Germany. Three million uniforms can not be turned out in a whole summer--even in Germany. I thought of this, as gray streams, far into the evening, kept pouring through Berlin, and I thought what a marvelously happy selection that peculiar shade of drab-gray, of almost dust-like invisibility from afar, was for field purposes. To shoot at lines no more colorful than that, it seemed to me, would be like banging away at the horizon itself....</span></p>
|
||||
|
||||
<p><span>History, I suppose, will date Armageddon from August 1, when the German army and navy were mobilized, or perhaps from August 2, when Germany claims that Russia and France fired the first miscreant shots. But the red-letter day of the World Massacre's opening week was beyond all question Tuesday, August 4, which began with the war sitting of the Reichstag and ended with England's declaration of war on Germany. It was destined to be especially big with import for me--of vital import, as events hanging over my unsuspecting head were speedily to reveal.</span></p>
|
||||
|
||||
<p><span>At midday, two hours before the session of the Reichstag in its own chamber, Parliament was "opened" by the Kaiser personally in the celebrated White Hall of the Royal Castle. I had applied for admission after the few available press tickets were already exhausted, but it was not difficult for me to visualize the scene. I had been in the White Hall on several memorable occasions in the past--during the visit of King Edward VII in February, 1909, at a brilliant State banquet and at the ball which followed; at the wedding of the Emperor's daughter, "the sunshine of my House," Princess Victoria Luise, and Duke Ernest August of Brunswick, in May, 1913; and a month later during the Silver Jubilee celebration of the Kaiser's reign, when our own Mr. Carnegie showered plaudits on the Prince of the world's peace. Tower, of</span> <em class="italics">The World</em> <span>and</span> <em class="italics">Daily News</em><span>, was lucky enough to secure a ticket to the Castle ceremonial, and he was bubbling over with excitement at having been privileged to participate in so memorable a function. My old friend, Günther Thomas, late of the</span> <em class="italics">Newyorker-Staatszeitung</em><span>, now joyous in the prospect of joining the German Press Bureau's war staff, came back from the Castle almost pitying me for not having been there. "Wile, I tell you," I can hear him saying now, "it was beautiful, simply beautiful! You missed it! It was enough to make one cry!" Thomas lived in New York seventeen years, but he returned to Germany a more devout Prussian than ever, as a man ought to be whose father fell gloriously at Königgrätz.</span></p>
|
||||
|
||||
<p><span>The description furnished by my English and Prussian colleagues evidently did not exaggerate the splendor and impressiveness of the scene at the White Hall. The Kaiser, in field-general's gray, entered, escorting the Empress. He was solemn, but not anxious-looking. Around the marble-pillared chamber, where only fifteen months before I had seen the Czar and George V of England tripping the minuet with German princesses as the Kaiser's honored guests, were grouped the first men of the Empire. In the places of distinction, closest to the canopied throne, each according to his Court rank, stood the Imperial Chancellor, General von Moltke, Grand-Admiral von Tirpitz and a score of other eminent officers of the civil, naval and military governments. Among the foreign ambassadors only the representatives of Russia and France were missing from their old-time places. Mr. Gerard, modest and retiring as always, amid the glitter of gold lace and brass buttons flashing on all sides, cut a more than ever self-effacing figure in his diplomatic uniform--the plain evening dress of an American gentleman.</span></p>
|
||||
|
||||
<p><span>The Kaiser read his War Speech, which he held in his right hand, while the left firmly gripped his sword-hilt. Beginning in a quiet tone, His Majesty's voice appreciably rose in intensity and volume as he approached the kernel of his message which told how "with a heavy heart I have been compelled to mobilize my army against a neighbor with whom it has fought side by side on so many fields of battle." The Imperial Russian Government, William II went on to say, "yielding to the pressure of an insatiable nationalism, has taken sides with a State which by encouraging criminal attacks has brought on the evil of war." That France, also, the Kaiser continued, "placed herself on the side of our enemies could not surprise us. Too often have our efforts to arrive at friendlier relations with the French Republic come in collision with old hopes and ancient malice." And when the Kaiser had ended, with an invitation to "the leaders of the different parties of the Reichstag" (there were no Socialists present) "to come forward and lay their hands in mine as a pledge," the White Hall reverberated with applause which must have seemed almost indecorous in so august an apartment, but which, no doubt, rang true. It was then, I suppose, that Thomas felt like weeping, and so should I, perhaps, had I been there. The Kaiser, his handshaking-bee over, strode from the scene amid an awesome silence, and the statesmen, the generals and the admirals went their respective ways. All was now in readiness for the real Reichstag session, in which words of deathless significance were to fall from the Chancellor's lips.</span></p>
|
||||
|
||||
<p><span>We were accustomed to sardine-box conditions in the always overcrowded press gallery of the Reichstag on "great days," but to-day we were piled on top of one another in closer formation even than a Prussian infantry platoon in the charge. Familiar faces were missing. Comert, of</span> <em class="italics">Le Temps</em><span>, Caro, of</span> <em class="italics">Le Matin</em><span>, and Bonnefon, of</span> <em class="italics">Le Figaro</em><span>, were not there. They had escaped, we were glad to hear, by one of the very last trains across the French frontier. Löwenton (a brother of Madame Nazimoff), Grossmann, Markoff and Melnikoff, our long-time Russian colleagues, were absent, too. Had they gained Wirballen in time, we wondered, or were they languishing in Spandau?</span></p>
|
||||
|
||||
<p><span>Doctor Paul Goldmann,</span> <em class="italics">doyén</em> <span>of our Berlin corps, was in his accustomed seat, beaming consciously, as became, at such an hour, the correspondent-in-chief of the great allied Vienna</span> <em class="italics">Neue Freie Presse</em><span>. The British and American contingents were on hand in force. Never had we waited for a</span> <em class="italics">Kanzlerrede</em> <span>in such electric expectancy. "Copy" in plenty, such as none of us had ever telegraphed before, was about to be made. Goldmann, a Foreign Office favorite, as well as the all-around most popular foreign journalist in Berlin, may have had an advance hint what was coming, as he frequently did, but to the vast majority of us--British, American, Swedish, Dutch, Italian, Swiss, Spanish and Danish, sandwiched there in the</span> <em class="italics">Pressloge</em> <span>so closely that we could hear, but not move--I am certain that the momentous words and extraordinary scenes about to ensue came as a staggering revelation.</span></p>
|
||||
|
||||
<p><span>Doctor von Bethmann Hollweg, who is flattered when told that he looks like Abraham Lincoln--the resemblance ends there--began speaking at three-fifteen o'clock. Gaunt and fatigued, he tugged nervously at the portfolio of documents on the desk in front of him during the brief introductory remarks of the President of the House, the patriarchal, white-bearded Doctor Kaempf. The Chancellor's manner gave no indication that before he resumed his seat he would rise to heights of oratorical fire of which no one ever thought that "incarnation of passionate doctrinarianism" capable. What he said is known to all the world now; how, in Bismarckian accents, he thundered that "we are in a state of self-defense and necessity knows no law!" How he confessed that "our troops, which have already occupied Luxemburg, may perhaps already have set foot on Belgian territory." How he acknowledged, in a succeeding phrase, to Germany's eternal guilt, that "that violates international law." How he proclaimed the amazing doctrine that, confronted by such emergencies as Germany now was, she had but one duty--"to hack her way through, even though--I say it quite frankly--we are doing wrong!" Our heads, I think, fairly swam as the terrible portent of these words sank into our consciousness. "Our troops may perhaps already have set foot on Belgian soil." That meant one thing, with absolute certainty. It denoted war with England. Trifles have a habit at such moments of lodging themselves firmly in one's mind; and I remember distinctly how, when I heard Bethmann Hollweg fling that challenge forth, I leaned over impulsively to my Swedish friend, Siosteen, of the</span> <em class="italics">Goteborg Tidningen</em><span>, and whispered: "That settles it. England's in it now, too." Siosteen nods an excited assent. It is in the midst of one of the frequent intervals in which the House, floor and galleries alike, is now venting its impassioned approval of the Chancellor's words. I had heard Bülow and Bebel and Bethmann Hollweg himself, times innumerable, set the Reichstag rocking with fervid demonstrations of approval or hostility, but never has it throbbed with such life as to-day. It is the incarnation of the inflamed war spirit of the land. The more defiant the Chancellor's diction, the more fervid the applause it evokes. "</span><em class="italics">Sehr richtig! Sehr richtig!</em><span>" the House shrieks back at him in chorus as he details, step by step, how Germany has been "forced" to draw her terrible sword to beat back the "Russian mobilization menace," how she has tried and failed to bargain with England and Belgium, how she has kept the dogs of war chained to the last, and only released them now when destruction, imminent and certain, is upon her.</span></p>
|
||||
|
||||
<p><span>All eyes in the Press Gallery are riveted on the broad left arc of the floor usurped by the one hundred and eleven Social Democratic deputies of the House of three hundred and ninety-seven members. For the first time in German history their cheers are mingling with those of other parties in support of a Government policy. That, after the Belgian revelation, is beyond all question the dominating feature of a scene tremendous with meaning in countless respects. There is nothing perfunctory about the "Reds'" enthusiasm; that is plain. It is real, spontaneous, universal. No man of them keeps his seat. All are on their feet, succumbing to the engulfing magnitude of the moment. That, it instantly occurs to us, means much to Germany at such an hour. It means that the hope which more than one of the Fatherland's prospective foes in years gone by has fondly cherished, of Socialist revolt in the hour of Germany's peril, was illusory hope. The Chancellor knows what it means. "Our army is in the field!" he declares, trembling with emotion. "Our fleet is ready for battle! The whole German nation stands behind them!" As one man, the entire Reichstag now rises, shouting its approval of these historic words in tones of frenzied exaltation. For two full minutes pandemonium reigns unchecked. Bethmann Hollweg is turning to the Social Democrats. His fist is clenched and he brandishes it in their direction--not in anger this time, but in triumph--and, as if he were proclaiming the proud sentiment for all the world to hear, he exclaims, at the top of his voice, "Yea, the whole nation!" Thus was Armageddon born. Germany, all present knew, would be at war before another sun had gone down, not only with Russia and France, but with England, and, of course, with Belgium, too.</span></p>
|
||||
|
||||
<p><span>"Supposing the Belgians resist?" I asked Schmidt, of the</span> <em class="italics">B. Z. am Mittag</em><span>, a German colleague whom I once christened Berlin's "star" reporter, as we wandered, thinking hard, back to</span> <em class="italics">Unter den Linden</em><span>.</span></p>
|
||||
|
||||
<p><span>"Resist?" he replied, half pitying the feeble-mindedness which prompted such a question. "We shall simply spill them into the ocean."</span></p>
|
||||
</div>
|
||||
<script>
|
||||
var target = document.getElementById("target");
|
||||
var style = target.style;
|
||||
|
||||
function test() {
|
||||
style.display = "block";
|
||||
|
||||
style.fontSize = "10px";
|
||||
style.width = "280px";
|
||||
PerfTestRunner.forceLayout();
|
||||
style.width = "300px";
|
||||
PerfTestRunner.forceLayout();
|
||||
|
||||
style.fontSize = "12px";
|
||||
style.width = "280px";
|
||||
PerfTestRunner.forceLayout();
|
||||
style.width = "300px";
|
||||
PerfTestRunner.forceLayout();
|
||||
|
||||
style.display = "none";
|
||||
}
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Measures performance of 2 layouts (using 2 different font-sizes) on a page containing English text.",
|
||||
run: test
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
88
tests/blink_perf_tests/perf_tests/layout/chapter-reflow.html
Normal file
88
tests/blink_perf_tests/perf_tests/layout/chapter-reflow.html
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!--
|
||||
http://www.gutenberg.org/ebooks/41252
|
||||
|
||||
"This eBook is for the use of anyone anywhere at no cost and with almost no restrictions whatsoever. You may copy it, give it away or re-use it under the terms of the Project Gutenberg License included with this eBook or online at www.gutenberg.org."
|
||||
-->
|
||||
<title>Chapter reflow performance test: English prose infinite</title>
|
||||
<script src="../resources/runner.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<pre id="log"></pre>
|
||||
<div id="target" style="width: 300px; display: none;">
|
||||
<p><span>Germany's war Juggernaut by the morning of Monday, August 3, was in full, but incredibly noiseless, motion. I always knew it was a magnificently well greased machine, geared for the maximum of silence, but I felt sure it could not swing into action without some reverberating creaks. Yet Berlin externally had been far more feverishly agitated on Spring Parade days at recurring ends of May than it was now, with "enemies all around" and that "war on two fronts," which most Germans used to talk about as something,</span> <em class="italics">Gott sei Dank</em><span>, they would never live to see. One's male friends of military age--it was now the second day of mobilization--kept on melting away from hour to hour, but amid a complete lack of fuss and bustle. It almost seemed as if the army had orders to rush to the fighting-line in gum-shoes and that everything on wheels had rubber tires. As the Fatherland for years had armed in silence, so she was going to battle. We saw no seventeen-inch guns rumbling to the front. Those were Germany's best-concealed weapons. A military attaché of one of the chief belligerents, who lived in Berlin for four years preceding the war, has since confessed that he never even knew of the "Big Berthas'" existence!</span></p>
|
||||
|
||||
<p><span>Germany girding for Armageddon was distinctly a disappointment. I entirely agreed with a portly dowager from the Middle West, who, between frettings about when she could get a train to the Dutch frontier, continually expressed her chagrin at such "a poor show." She imagined, like a good many of the rest of us, that mobilization in Germany would at the very least see the Supreme War Lord bolting madly up and down</span> <em class="italics">Unter den Linden</em><span>, plunging silver spurs into a foaming white charger and brandishing a glistening sword in martial gestures as Caruso does when he plays Radames in the finale of the second act of Aida. Verdi's Egyptian epic is the Kaiser's favorite opera, and he ought to have remembered, we thought, how a conquering hero should demean himself at such a blood-stirring hour. At least Berlin, we hoped, would rise to the occasion, and thunder and rock with the pomp and circumstance of war's alarums.</span></p>
|
||||
|
||||
<p><span>There was amazingly little of anything of that sort. The Kaiser instead automobiled around town in a prosaic six-cylinder Mercedes, as he long was wont to do, just keeping some rather important professional engagements with the Chief of the General Staff, the Imperial Chancellor and the Secretary of the Navy. As he flitted by, the huge crowds lined up on the curbstone stiffened into attitudes, clicked heels, doffed hats and "</span><em class="italics">hoched</em><span>." The atmosphere was</span> <em class="italics">stimmungsvoller</em> <span>than usual, for German phlegm had vanished along with high prices on the Bourse, but the paroxysm of electric excitement which I always fancied would usher in a German war was unaccountably missing. When you mentioned that phenomenon to German friends, their bosoms swelled with visible pride. They were immeasurably flattered by your indirect compliment that the Kaiser's war establishment was so perfect a mechanism that it could clear for action almost imperceptibly.</span></p>
|
||||
|
||||
<p><span>I had now deserted my home in suburban Wilmersdorf, which I nicknamed the "District of Columbia," for in and all around it Berlin's American colony was domiciled, and taken a room for the opening scenes of the war drama in the Hotel Adlon. With its broad fronts on the Linden and Pariser Platz, and the French, British and Russian Embassies within a stone's throw to the right and left, the Adlon was an ideal vantage point. If there were to be "demonstrations," I could feel sure, at so strategic a point, of being in the thick of them. Events of the succeeding thirty-six hours were to show that I did not reckon without my host on that score.</span></p>
|
||||
|
||||
<p><span>From window and balcony overlooking the Linden I could now see or hear at intervals detachments of Berlin regiments, Uhlans or Infantry of the Guard, or a battery of light artillery, swinging along to railway stations to entrain for the front. Occasionally battalions of provincial regiments, distinguishable because the men did not tower into space like Berlin's guardsmen, crossed town en route from one train to another. The men seemed happier than I had ever before seen German soldiers. That was the only difference, or at least the principal one. The prospect of soon becoming cannon-fodder was evidently far from depressing. Most of them carried flowers entwined round the rifle barrel or protruding from its mouth. Here and there a bouquet dangled rakishly from a helmet. Now and then a flaxen-haired Prussian girl would step into the street and press a posey into some trooper's grimy hand. Yet, except for the fact that the soldiers were all in field gray, (I wonder when the Kaiser's military tailors began making those millions of gray uniforms!) with even their familiar spiked headpiece masked in canvas of the same hue, the Kaiser's fighting men marching off to battle might have been carrying out a workaday route-march. Then, suddenly, a company or a whole battalion would break into song, and the crowd, trailing alongside the bass-drum of the band, just as in peace times, would take up the refrain, and presently half-a-mile of</span> <em class="italics">Unter den Linden</em> <span>was echoing with</span> <em class="italics">Deutschland, Deutschland über Alles</em><span>, and I knew that the Fatherland was at war.</span></p>
|
||||
|
||||
<p><span>At the railway stations of Berlin and countless other German towns and cities at that hour heart-rending little tragedies were being enacted, as fathers, mothers, wives, sisters and sweethearts bade a long farewell to the beloved in gray. Only rarely did some man in uniform himself surrender to the emotions of the moment. These swarthy young Germans, with fifty or sixty pounds of impedimenta strapped round them, were endowed with Spartan stolidity now, and smilingly buoyed up the drooping spirits of the kith and kin they were leaving behind. "</span><em class="italics">Es wird schon gut, Mütterchen! Es wird schon gut!</em><span>" (It will be all right, mother dear! It will be all right!) Thus they returned comfort for tears.</span> <em class="italics">"Nicht unterliegen! Besser nicht zurückkehren!</em><span>" (Don't be beaten! Better not come back at all!) was the good-by greeting blown with the final kisses as many a trainload of embryonic heroes faded slowly from sight beneath the station's gaping archway. Germany was now indubitably convinced that its war was war in a holy cause. The time had come for the Fatherland to rise to the majesty of a great hour. "</span><em class="italics">Auf wiedersehen!</em><span>" sang the country to the army. But if there was to be no reunion, the army must go down fighting to the last gasp for</span> <em class="italics">unsere gerechte Sache</em><span>, manfully, tirelessly, ruthlessly, till victory was enforced. Such were the inspiring thoughts amid which the boys in field gray trooped off to die for Kaiser and Empire.</span></p>
|
||||
|
||||
<p><span>The outstanding event of August 3 was the publication of the German Government's famous apologia for the war, the so-called "White Paper" officially described as "Memorandum and Documents in Relation to the Outbreak of the War." Early in the afternoon a telephone message arrived for me at the Adlon to the effect that if I would call at the Press Bureau of the Foreign Office at five o'clock,</span> <em class="italics">Legationsrat</em> <span>Heilbron, one of Hammann's lieutenants whom I had known for many years, would be glad to deliver me an advance copy for special transmission to London and New York. I lay great stress on the fact that up to sun-down of August 3, 1914, I continued to be</span> <em class="italics">persona gratissima</em> <span>with the Imperial German Government. It was true that one of the young Foreign Office cubs told off to censor press cablegrams at the Main Telegraph Office had, during the preceding three days, expressed annoyance with what he considered my eagerness to "go into details," but</span> <em class="italics">Legationsrat</em><span>Heilbron's invitation to fetch the "White Paper" was gratifying evidence that my relations with the powers-that-be were still "correct," even if not cordial. I was glad of that, because there was constantly in my mind the desire to remain in Germany, whatever happened, with a front-row seat for the big show. At the appointed hour I presented myself in Herr Heilbron's room on the ground floor of the Wilhelmstrasse front of the Foreign Office. He greeted me with old-time courtesy, though I found his demeanor perceptibly depressed. He handed me a copy of the</span> <em class="italics">Denkschrift</em><span>, and, when I begged him for a second one, he complied with a gracious</span> <em class="italics">bitte sehr</em><span>.</span></p>
|
||||
|
||||
<p><span>A London colleague had already intimated to me that the Imperial Chancellor, desiring to place the German case promptly and fully before the British and American publics, would "do his best" with the military authorities who were now in supreme control of the postal telegraph and cable lines to induce them to allow London and New York correspondents to file exhaustive "stories" on the White Paper. As I was sure, however, that Reuter's Agency for England and the Associated Press for America would be handling the affair at great length, my treatment of it was confined, as was usual under such circumstances, to telegraphing a brief introductory summary.</span></p>
|
||||
|
||||
<p><span>What struck me instantly as the hall-marks of the German publication were its treatment of the war as an exclusively Russian-provoked Russo-German affair and its brazenly</span> <em class="italics">ex-parté</em> <span>character--how</span> <em class="italics">ex-parté</em> <span>I did not fully realize till I read England's White Paper a week later. Sir Edward Grey laid his cards on the table, without marginal notes or comment of any kind, and asked the world to pass judgment. Doctor von Bethmann Hollweg's White Paper began with a lengthy plea of justification and ended with quotation of such communications between the Kaiser's Government and its ambassadors and between the German Emperor and the Czar as would most plausibly support the Fatherland's case for war. It was manifestly a biased and incomplete record. It was in fact a doctored record, and suggested that its authors had Bismarck's mutilation of the Ems telegram in mind as a precedent, in emulation of which no German Government could possibly go wrong.</span></p>
|
||||
|
||||
<p><span>Although compiled to include events up to August 1, the German White Paper was silent as the grave in regard to Belgium and the negotiations with the Government of Great Britain. Issued on the night of August 3, when hundreds of thousands of German troops were waiting at Aix-la-Chapelle for the great assault on Liége--if, indeed, at that hour they were not already across the Belgian frontier--this sacred brief designed to establish the Fatherland's case at the bar of world opinion had no single word to say on what was destined to be almost the supreme issue of the war. It was the last word in Imperial German deception. If the German public had known that Sir Edward Grey on July 30 had already "warned Prince Lichnowsky that Germany must not count upon our standing aside in all circumstances," I imagine its bitterness a few nights later, when the fable of England's "treacherous intervention" was sprung upon the deluded Fatherland, might have been less barbaric in its intensity.</span></p>
|
||||
|
||||
<p><span>Next to the omission of all reference to what Sir Edward Grey called Germany's "infamous proposal" for the purchase of British neutrality--a pledge not to despoil France of European territory if England would stand with folded arms while Germany violated Belgium and ravished the French Colonial Empire--the striking feature of the Berlin White Paper was the admission of German-Austrian complicity in the humiliation of Serbia. The Foreign Office, as I have previously explained, had zealously affirmed Germany's entire detachment from Austria's programme for avenging Serajevo. What did the White Paper now tell us? That</span></p>
|
||||
<div class="vspace c1"/>
|
||||
<p class="pfirst"><span>"Austria had to admit that it would not be consistent either with the dignity or the self-preservation of the Monarchy to look on longer at the operations on the other side of the border without taking action....</span> <em class="italics">We were able to assure our ally most heartily of our agreement with her view of the situation, and to assure her that any action she might consider it necessary to take in order to put an end to the movement in Servia directed against the existence of the Austro-Hungarian Monarchy would receive our approval</em><span>. We were fully aware, in this connection, that warlike moves on the part of Austria-Hungary against Servia would bring Russia into the question, and might draw us into a war in accordance with our duties as an ally."</span></p>
|
||||
<div class="vspace c1"/>
|
||||
<p class="pfirst"><span>The historic and ineffaceable fact is that Austria--wabbly, invertebrate Austria, which would even to-day, but for Germany, lay prostrate and vanquished--never made a solitary move in the whole plot to coerce Serbia without the full concurrence of the big brother at Berlin. It would be an insult to the intelligence of German diplomacy, stupid as it is, to imagine that the Kaiser's Government sat mute, unconsulted and nonchalant, while Austria worked out a scheme certain, as the Germans themselves admit in their White Paper, to plunge Europe into war.</span></p>
|
||||
|
||||
<p><span>It was my privilege on arriving in the United States on August 22, to furnish the</span> <em class="italics">New York Times</em> <span>with the first copy of the German White Paper to reach the American public. In preparing a prefatory note to accompany the verbatim translation published in next day's paper, I selected the paragraph above quoted as</span> <em class="italics">primâ-facie</em> <span>evidence that the German claim of non-collusion with Austria is subterfuge--to give it the longer and less unparliamentary term.</span></p>
|
||||
|
||||
<p><span>The German White Paper was prepared formally for the information of the Reichstag, which was summoned to meet on Tuesday, August 4 of imperishable memory, for the purpose of voting $325,000,000 of initial war credits. Paris was not won in the expected six weeks, and the Reichstag has voted $7,500,000,000 of war credits up to this writing (September 1, 1915), with melancholy promise of still more to come. The twenty-four hours preceding the war sitting had not been eventless. Monsieur Sverbieff and the staff of the Russian Embassy were the victims of gross insults from the mob in</span> <em class="italics">Unter den Linden</em><span>, as they left their headquarters in automobiles for the railway station. Mounted police were present to "keep order," but their "vigilance" did not deter German men and youths from spitting in the faces of the Czar's representatives, belaboring them with walking-sticks and umbrellas, and offering rowdy indignities to the women of the ambassadorial party. In front of the French Embassy menacing crowds stood throughout the day and night, waiting for a chance to exhibit German patriotism at Monsieur Cambon's expense. When Señor Polê de Bernábe, the Spanish Ambassador, who was calling to arrange to take over the representation of France during the war, made his appearance, the mob mistook him for Cambon and was just prevented in the nick of time from assaulting the Spaniard. How the French Embassy finally got away from Germany, under circumstances which would have shamed a Fiji Island government, was later related for the benefit of posterity in the French</span> <em class="italics">Yellow Book</em><span>. When I read it months later, I remembered my first German teacher in Berlin, a noblewoman, once telling me, when I asked her how to say "gentleman" in German: "There is no such thing as a 'gentleman' in the German language." That was paraphrased to me by another German on a later occasion, when, discussing the ability of German science, so well demonstrated during this war, to devise a substitute for almost anything, he remarked: "The only thing we can't make is a gentleman, because we never had a proper analysis of the necessary ingredients." The Germans, in their communicative moments, always used to acknowledge that Bismarck was right when he called them "a nation of house-servants." It is impressively exemplified on their stage, which boasts the finest character actors imaginable; but when a German player essays to portray the gentleman, he is grotesque. He gropes helplessly in a strange and unexplored realm.</span></p>
|
||||
|
||||
<p><span>On the day before the war session of the Reichstag, the Kaiser, more conscious than ever now of his partnership with Deity, ordained Wednesday, August 5, as a day of universal prayer for the success of German arms. Soon after its proclamation, William II, thunderously acclaimed, appeared in</span> <em class="italics">Unter den Linden</em><span>intermittently, en route to conference with high officers of state. He was clad, like every German soldier one now saw, in field-gray, and ready, one heard, to leave for the front at a moment's notice, to take up his post, assigned him by Hohenzollern warrior traditions, on the battlefield in the midst of his loyal legions. Mobilization was now in full swing, and more and more troops were in evidence, crossing town to railway stations from which they were to be transported east or west, as the Staff's emergencies required. A week before, all these soldiers were in Prussian blue. They were gray now, from head to foot, millions of them. Obviously the clothing department of the army had not been taken by "surprise" by the cruel war "forced" on pacific Germany. Three million uniforms can not be turned out in a whole summer--even in Germany. I thought of this, as gray streams, far into the evening, kept pouring through Berlin, and I thought what a marvelously happy selection that peculiar shade of drab-gray, of almost dust-like invisibility from afar, was for field purposes. To shoot at lines no more colorful than that, it seemed to me, would be like banging away at the horizon itself....</span></p>
|
||||
|
||||
<p><span>History, I suppose, will date Armageddon from August 1, when the German army and navy were mobilized, or perhaps from August 2, when Germany claims that Russia and France fired the first miscreant shots. But the red-letter day of the World Massacre's opening week was beyond all question Tuesday, August 4, which began with the war sitting of the Reichstag and ended with England's declaration of war on Germany. It was destined to be especially big with import for me--of vital import, as events hanging over my unsuspecting head were speedily to reveal.</span></p>
|
||||
|
||||
<p><span>At midday, two hours before the session of the Reichstag in its own chamber, Parliament was "opened" by the Kaiser personally in the celebrated White Hall of the Royal Castle. I had applied for admission after the few available press tickets were already exhausted, but it was not difficult for me to visualize the scene. I had been in the White Hall on several memorable occasions in the past--during the visit of King Edward VII in February, 1909, at a brilliant State banquet and at the ball which followed; at the wedding of the Emperor's daughter, "the sunshine of my House," Princess Victoria Luise, and Duke Ernest August of Brunswick, in May, 1913; and a month later during the Silver Jubilee celebration of the Kaiser's reign, when our own Mr. Carnegie showered plaudits on the Prince of the world's peace. Tower, of</span> <em class="italics">The World</em> <span>and</span> <em class="italics">Daily News</em><span>, was lucky enough to secure a ticket to the Castle ceremonial, and he was bubbling over with excitement at having been privileged to participate in so memorable a function. My old friend, Günther Thomas, late of the</span> <em class="italics">Newyorker-Staatszeitung</em><span>, now joyous in the prospect of joining the German Press Bureau's war staff, came back from the Castle almost pitying me for not having been there. "Wile, I tell you," I can hear him saying now, "it was beautiful, simply beautiful! You missed it! It was enough to make one cry!" Thomas lived in New York seventeen years, but he returned to Germany a more devout Prussian than ever, as a man ought to be whose father fell gloriously at Königgrätz.</span></p>
|
||||
|
||||
<p><span>The description furnished by my English and Prussian colleagues evidently did not exaggerate the splendor and impressiveness of the scene at the White Hall. The Kaiser, in field-general's gray, entered, escorting the Empress. He was solemn, but not anxious-looking. Around the marble-pillared chamber, where only fifteen months before I had seen the Czar and George V of England tripping the minuet with German princesses as the Kaiser's honored guests, were grouped the first men of the Empire. In the places of distinction, closest to the canopied throne, each according to his Court rank, stood the Imperial Chancellor, General von Moltke, Grand-Admiral von Tirpitz and a score of other eminent officers of the civil, naval and military governments. Among the foreign ambassadors only the representatives of Russia and France were missing from their old-time places. Mr. Gerard, modest and retiring as always, amid the glitter of gold lace and brass buttons flashing on all sides, cut a more than ever self-effacing figure in his diplomatic uniform--the plain evening dress of an American gentleman.</span></p>
|
||||
|
||||
<p><span>The Kaiser read his War Speech, which he held in his right hand, while the left firmly gripped his sword-hilt. Beginning in a quiet tone, His Majesty's voice appreciably rose in intensity and volume as he approached the kernel of his message which told how "with a heavy heart I have been compelled to mobilize my army against a neighbor with whom it has fought side by side on so many fields of battle." The Imperial Russian Government, William II went on to say, "yielding to the pressure of an insatiable nationalism, has taken sides with a State which by encouraging criminal attacks has brought on the evil of war." That France, also, the Kaiser continued, "placed herself on the side of our enemies could not surprise us. Too often have our efforts to arrive at friendlier relations with the French Republic come in collision with old hopes and ancient malice." And when the Kaiser had ended, with an invitation to "the leaders of the different parties of the Reichstag" (there were no Socialists present) "to come forward and lay their hands in mine as a pledge," the White Hall reverberated with applause which must have seemed almost indecorous in so august an apartment, but which, no doubt, rang true. It was then, I suppose, that Thomas felt like weeping, and so should I, perhaps, had I been there. The Kaiser, his handshaking-bee over, strode from the scene amid an awesome silence, and the statesmen, the generals and the admirals went their respective ways. All was now in readiness for the real Reichstag session, in which words of deathless significance were to fall from the Chancellor's lips.</span></p>
|
||||
|
||||
<p><span>We were accustomed to sardine-box conditions in the always overcrowded press gallery of the Reichstag on "great days," but to-day we were piled on top of one another in closer formation even than a Prussian infantry platoon in the charge. Familiar faces were missing. Comert, of</span> <em class="italics">Le Temps</em><span>, Caro, of</span> <em class="italics">Le Matin</em><span>, and Bonnefon, of</span> <em class="italics">Le Figaro</em><span>, were not there. They had escaped, we were glad to hear, by one of the very last trains across the French frontier. Löwenton (a brother of Madame Nazimoff), Grossmann, Markoff and Melnikoff, our long-time Russian colleagues, were absent, too. Had they gained Wirballen in time, we wondered, or were they languishing in Spandau?</span></p>
|
||||
|
||||
<p><span>Doctor Paul Goldmann,</span> <em class="italics">doyén</em> <span>of our Berlin corps, was in his accustomed seat, beaming consciously, as became, at such an hour, the correspondent-in-chief of the great allied Vienna</span> <em class="italics">Neue Freie Presse</em><span>. The British and American contingents were on hand in force. Never had we waited for a</span> <em class="italics">Kanzlerrede</em> <span>in such electric expectancy. "Copy" in plenty, such as none of us had ever telegraphed before, was about to be made. Goldmann, a Foreign Office favorite, as well as the all-around most popular foreign journalist in Berlin, may have had an advance hint what was coming, as he frequently did, but to the vast majority of us--British, American, Swedish, Dutch, Italian, Swiss, Spanish and Danish, sandwiched there in the</span> <em class="italics">Pressloge</em> <span>so closely that we could hear, but not move--I am certain that the momentous words and extraordinary scenes about to ensue came as a staggering revelation.</span></p>
|
||||
|
||||
<p><span>Doctor von Bethmann Hollweg, who is flattered when told that he looks like Abraham Lincoln--the resemblance ends there--began speaking at three-fifteen o'clock. Gaunt and fatigued, he tugged nervously at the portfolio of documents on the desk in front of him during the brief introductory remarks of the President of the House, the patriarchal, white-bearded Doctor Kaempf. The Chancellor's manner gave no indication that before he resumed his seat he would rise to heights of oratorical fire of which no one ever thought that "incarnation of passionate doctrinarianism" capable. What he said is known to all the world now; how, in Bismarckian accents, he thundered that "we are in a state of self-defense and necessity knows no law!" How he confessed that "our troops, which have already occupied Luxemburg, may perhaps already have set foot on Belgian territory." How he acknowledged, in a succeeding phrase, to Germany's eternal guilt, that "that violates international law." How he proclaimed the amazing doctrine that, confronted by such emergencies as Germany now was, she had but one duty--"to hack her way through, even though--I say it quite frankly--we are doing wrong!" Our heads, I think, fairly swam as the terrible portent of these words sank into our consciousness. "Our troops may perhaps already have set foot on Belgian soil." That meant one thing, with absolute certainty. It denoted war with England. Trifles have a habit at such moments of lodging themselves firmly in one's mind; and I remember distinctly how, when I heard Bethmann Hollweg fling that challenge forth, I leaned over impulsively to my Swedish friend, Siosteen, of the</span> <em class="italics">Goteborg Tidningen</em><span>, and whispered: "That settles it. England's in it now, too." Siosteen nods an excited assent. It is in the midst of one of the frequent intervals in which the House, floor and galleries alike, is now venting its impassioned approval of the Chancellor's words. I had heard Bülow and Bebel and Bethmann Hollweg himself, times innumerable, set the Reichstag rocking with fervid demonstrations of approval or hostility, but never has it throbbed with such life as to-day. It is the incarnation of the inflamed war spirit of the land. The more defiant the Chancellor's diction, the more fervid the applause it evokes. "</span><em class="italics">Sehr richtig! Sehr richtig!</em><span>" the House shrieks back at him in chorus as he details, step by step, how Germany has been "forced" to draw her terrible sword to beat back the "Russian mobilization menace," how she has tried and failed to bargain with England and Belgium, how she has kept the dogs of war chained to the last, and only released them now when destruction, imminent and certain, is upon her.</span></p>
|
||||
|
||||
<p><span>All eyes in the Press Gallery are riveted on the broad left arc of the floor usurped by the one hundred and eleven Social Democratic deputies of the House of three hundred and ninety-seven members. For the first time in German history their cheers are mingling with those of other parties in support of a Government policy. That, after the Belgian revelation, is beyond all question the dominating feature of a scene tremendous with meaning in countless respects. There is nothing perfunctory about the "Reds'" enthusiasm; that is plain. It is real, spontaneous, universal. No man of them keeps his seat. All are on their feet, succumbing to the engulfing magnitude of the moment. That, it instantly occurs to us, means much to Germany at such an hour. It means that the hope which more than one of the Fatherland's prospective foes in years gone by has fondly cherished, of Socialist revolt in the hour of Germany's peril, was illusory hope. The Chancellor knows what it means. "Our army is in the field!" he declares, trembling with emotion. "Our fleet is ready for battle! The whole German nation stands behind them!" As one man, the entire Reichstag now rises, shouting its approval of these historic words in tones of frenzied exaltation. For two full minutes pandemonium reigns unchecked. Bethmann Hollweg is turning to the Social Democrats. His fist is clenched and he brandishes it in their direction--not in anger this time, but in triumph--and, as if he were proclaiming the proud sentiment for all the world to hear, he exclaims, at the top of his voice, "Yea, the whole nation!" Thus was Armageddon born. Germany, all present knew, would be at war before another sun had gone down, not only with Russia and France, but with England, and, of course, with Belgium, too.</span></p>
|
||||
|
||||
<p><span>"Supposing the Belgians resist?" I asked Schmidt, of the</span> <em class="italics">B. Z. am Mittag</em><span>, a German colleague whom I once christened Berlin's "star" reporter, as we wandered, thinking hard, back to</span> <em class="italics">Unter den Linden</em><span>.</span></p>
|
||||
|
||||
<p><span>"Resist?" he replied, half pitying the feeble-mindedness which prompted such a question. "We shall simply spill them into the ocean."</span></p>
|
||||
</div>
|
||||
<script>
|
||||
var target = document.getElementById("target");
|
||||
var style = target.style;
|
||||
|
||||
function test() {
|
||||
style.display = "block";
|
||||
style.width = "280px";
|
||||
PerfTestRunner.forceLayout();
|
||||
style.width = "300px";
|
||||
PerfTestRunner.forceLayout();
|
||||
style.width = "290px";
|
||||
PerfTestRunner.forceLayout();
|
||||
style.display = "none";
|
||||
}
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Measures performance of 3 layouts on a page containing English text.",
|
||||
run: test
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Character Font Fallback Performance</title>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script src="resources/character_fallback_chars.js"></script>
|
||||
<script src="resources/character_fallback_test.js"></script>
|
||||
</head>
|
||||
<body onload="startTest()">
|
||||
<pre id="log"></pre>
|
||||
<div id="target"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<title>Contain layout performance</title>
|
||||
<style>
|
||||
#listContainer {
|
||||
margin: 0 auto;
|
||||
width: 600px;
|
||||
border: 1px solid blue;
|
||||
contain: content;
|
||||
}
|
||||
.listItem {
|
||||
outline: 2px solid green;
|
||||
padding: .4em;
|
||||
overflow: hidden;
|
||||
contain: content;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="listContainer"></div>
|
||||
<script>
|
||||
const LOREM_IPSUM = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
|
||||
|
||||
let listContainer = null;
|
||||
|
||||
function createListItem() {
|
||||
let item = document.createElement("div");
|
||||
item.classList.add("listItem");
|
||||
item.textContent = LOREM_IPSUM.substr(
|
||||
Math.floor(Math.random()*100), Math.floor(Math.random()*200)+150);
|
||||
listContainer.appendChild(item);
|
||||
}
|
||||
|
||||
var height = 0;
|
||||
function runTest() {
|
||||
height++;
|
||||
listContainer.firstChild.style.height = height + "px";
|
||||
if (height > 50)
|
||||
height = 0;
|
||||
}
|
||||
|
||||
function setupTest() {
|
||||
listContainer = document.getElementById("listContainer");
|
||||
for (let i = 0; i < 5000; ++i) {
|
||||
createListItem();
|
||||
}
|
||||
PerfTestRunner.forceLayout();
|
||||
}
|
||||
|
||||
setupTest();
|
||||
|
||||
PerfTestRunner.measureFrameTime({
|
||||
description: "Measures performance of changing the height of a child of a contain:contents object.",
|
||||
iterationCount: 50,
|
||||
run: runTest
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
height: 3000px;
|
||||
}
|
||||
|
||||
.row {
|
||||
position: absolute;
|
||||
border-top: 1px solid;
|
||||
box-sizing: border-box;
|
||||
width: 120px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.cell {
|
||||
position: absolute;
|
||||
border-left: 1px solid red;
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
box-sizing: border-box;
|
||||
contain: size layout;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.row:nth-child(2n) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.row:nth-child(3n) {
|
||||
text-align: end;
|
||||
}
|
||||
</style>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script>
|
||||
let textNodes = [];
|
||||
let NUM_ROWS = 100;
|
||||
let NUM_COLS = 100;
|
||||
|
||||
function populateData() {
|
||||
let container = document.createElement('div');
|
||||
container.classList.add('container');
|
||||
let top = 0;
|
||||
for (let i = 0; i < NUM_ROWS; i++) {
|
||||
let left = 0;
|
||||
let row = document.createElement('div');
|
||||
row.classList.add('row');
|
||||
row.style.top = top + "px";
|
||||
for (let j = 0; j < NUM_COLS; j++) {
|
||||
let cell = document.createElement('div');
|
||||
cell.classList.add('cell');
|
||||
let textNode = document.createTextNode('' + (100 * Math.random()).toFixed(2));
|
||||
cell.appendChild(textNode);
|
||||
cell.style.left = left + "px";
|
||||
cell.style.top = 0 + "px";
|
||||
row.appendChild(cell);
|
||||
textNodes.push(textNode);
|
||||
left += 60;
|
||||
}
|
||||
top += 30;
|
||||
container.appendChild(row);
|
||||
}
|
||||
document.body.appendChild(container);
|
||||
}
|
||||
|
||||
function startTest() {
|
||||
populateData();
|
||||
|
||||
PerfTestRunner.forceLayout();
|
||||
|
||||
PerfTestRunner.measureTime({
|
||||
description: "Measures performance of changing text nodes content.",
|
||||
run: function() {
|
||||
for (let i = 0; i < textNodes.length; i++) {
|
||||
textNodes[i].data = '' + (100 * Math.random()).toFixed(2);
|
||||
}
|
||||
|
||||
PerfTestRunner.forceLayout();
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<body onload="startTest();">
|
||||
</body>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
height: 3000px;
|
||||
}
|
||||
|
||||
.row {
|
||||
position: relative;
|
||||
border-top: 1px solid;
|
||||
box-sizing: border-box;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.cell {
|
||||
position: absolute;
|
||||
border-left: 1px solid red;
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
box-sizing: border-box;
|
||||
contain: size layout;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.row:nth-child(2n) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.row:nth-child(3n) {
|
||||
text-align: end;
|
||||
}
|
||||
</style>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script>
|
||||
let textNodes = [];
|
||||
let NUM_ROWS = 100;
|
||||
let NUM_COLS = 100;
|
||||
|
||||
function populateData() {
|
||||
let container = document.createElement('div');
|
||||
container.classList.add('container');
|
||||
let top = 0;
|
||||
for (let i = 0; i < NUM_ROWS; i++) {
|
||||
let left = 0;
|
||||
let row = document.createElement('div');
|
||||
row.classList.add('row');
|
||||
row.style.top = top + "px";
|
||||
for (let j = 0; j < NUM_COLS; j++) {
|
||||
let cell = document.createElement('div');
|
||||
cell.classList.add('cell');
|
||||
let textNode = document.createTextNode('' + (100 * Math.random()).toFixed(2));
|
||||
cell.appendChild(textNode);
|
||||
cell.style.left = left + "px";
|
||||
row.appendChild(cell);
|
||||
textNodes.push(textNode);
|
||||
left += 60;
|
||||
}
|
||||
top += 30;
|
||||
container.appendChild(row);
|
||||
}
|
||||
document.body.appendChild(container);
|
||||
}
|
||||
|
||||
function startTest() {
|
||||
populateData();
|
||||
|
||||
PerfTestRunner.forceLayout();
|
||||
|
||||
PerfTestRunner.measureTime({
|
||||
description: "Measures performance of changing text nodes content.",
|
||||
run: function() {
|
||||
for (let i = 0; i < textNodes.length; i++) {
|
||||
textNodes[i].data = '' + (100 * Math.random()).toFixed(2);
|
||||
}
|
||||
|
||||
PerfTestRunner.forceLayout();
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<body onload="startTest();">
|
||||
</body>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
|
||||
div {
|
||||
position: relative;
|
||||
height: 3000px;
|
||||
}
|
||||
|
||||
.cell {
|
||||
position: absolute;
|
||||
border: solid;
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
box-sizing: border-box;
|
||||
contain: size layout;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
div:nth-child(2n) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div:nth-child(3n) {
|
||||
text-align: end;
|
||||
}
|
||||
</style>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script>
|
||||
let textNodes = [];
|
||||
|
||||
function populateData() {
|
||||
let container = document.createElement('div');
|
||||
let top = 0;
|
||||
for (let i = 0; i < 100; i++) {
|
||||
let left = 0;
|
||||
for (let j = 0; j < 100; j++) {
|
||||
let cell = document.createElement('div');
|
||||
cell.classList.add('cell');
|
||||
let textNode = document.createTextNode('' + (100 * Math.random()).toFixed(2));
|
||||
cell.appendChild(textNode);
|
||||
cell.style.left = left + "px";
|
||||
cell.style.top = top + "px";
|
||||
container.appendChild(cell);
|
||||
textNodes.push(textNode);
|
||||
left += 60;
|
||||
}
|
||||
top += 30;
|
||||
}
|
||||
document.body.appendChild(container);
|
||||
}
|
||||
|
||||
function startTest() {
|
||||
populateData();
|
||||
|
||||
PerfTestRunner.forceLayout();
|
||||
|
||||
PerfTestRunner.measureTime({
|
||||
description: "Measures performance of changing text nodes content.",
|
||||
run: function() {
|
||||
for (let i = 0; i < textNodes.length; i++) {
|
||||
textNodes[i].data = '' + (100 * Math.random()).toFixed(2);
|
||||
}
|
||||
|
||||
PerfTestRunner.forceLayout();
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<body onload="startTest();">
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Bounding box of culled inline</title>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<body>
|
||||
<div id="container" style="width: 800px"></div>
|
||||
<script>
|
||||
let span_count = 0;
|
||||
|
||||
function createTree(container, children, depth) {
|
||||
container.appendChild(document.createTextNode('text '));
|
||||
for (let i = 0; i < children; ++i) {
|
||||
const span = document.createElement('span');
|
||||
if (depth)
|
||||
createTree(span, children, depth - 1);
|
||||
container.appendChild(span);
|
||||
++span_count;
|
||||
}
|
||||
}
|
||||
|
||||
function setup() {
|
||||
// Adjust the number of children of each span, and the depth of the tree to
|
||||
// ensure we're linear to both of them. crbug.com/1111154
|
||||
createTree(container, 5, 5);
|
||||
}
|
||||
|
||||
function test() {
|
||||
for (let element of document.getElementsByTagName('span'))
|
||||
element.getBoundingClientRect();
|
||||
}
|
||||
|
||||
function run() {
|
||||
PerfTestRunner.measureTime({
|
||||
description: `Measures performance of bounding box of ${span_count} culled inline.`,
|
||||
run: test
|
||||
});
|
||||
}
|
||||
|
||||
setup();
|
||||
run();
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Hit-testing culled inline</title>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<body>
|
||||
<div id="container" style="width: 800px"></div>
|
||||
<script>
|
||||
let span_count = 0;
|
||||
|
||||
function createTree(container, children_list) {
|
||||
let children = children_list.shift();
|
||||
for (let i = 0; i < children; ++i) {
|
||||
const span = document.createElement('span');
|
||||
span.appendChild(document.createTextNode('1234567'));
|
||||
container.appendChild(span);
|
||||
container.appendChild(document.createTextNode(' '));
|
||||
++span_count;
|
||||
}
|
||||
|
||||
if (children_list.length) {
|
||||
const span = document.createElement('span');
|
||||
createTree(span, children_list);
|
||||
container.appendChild(span);
|
||||
}
|
||||
}
|
||||
|
||||
function setup() {
|
||||
container.textContent = '';
|
||||
createTree(container, [1, 1, 1, 1, 3000]);
|
||||
}
|
||||
|
||||
function test() {
|
||||
let bounds = container.getBoundingClientRect();
|
||||
for (let y = 0; y < 200; y += 10) {
|
||||
for (let x = bounds.x + 5; x < bounds.x + 800; x += 100)
|
||||
document.elementFromPoint(x, y);
|
||||
document.elementFromPoint(bounds.right - 2, y);
|
||||
}
|
||||
}
|
||||
|
||||
function run() {
|
||||
PerfTestRunner.measureTime({
|
||||
description: `Measures performance of hit-testing ${span_count} culled inline.`,
|
||||
run: test
|
||||
});
|
||||
}
|
||||
|
||||
setup();
|
||||
run();
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
.gridItem {
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script>
|
||||
'use strict';
|
||||
function startTest() {
|
||||
let root;
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Measures performance of layout on a page using deeply nested grids.",
|
||||
setup() {
|
||||
let node = document.createElement("div");
|
||||
node.className = "gridItem";
|
||||
node.textContent = "Inner contents";
|
||||
for (let i = 0; i < 16; ++i) {
|
||||
let parent = document.createElement("div");
|
||||
parent.className = "grid gridItem";
|
||||
parent.appendChild(node);
|
||||
node = parent;
|
||||
}
|
||||
root = node;
|
||||
root.className = "grid";
|
||||
document.body.appendChild(root);
|
||||
PerfTestRunner.forceLayout();
|
||||
},
|
||||
run() {
|
||||
root.style.display = "none";
|
||||
PerfTestRunner.forceLayout();
|
||||
root.style.display = "";
|
||||
PerfTestRunner.forceLayout();
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<body onload="startTest()"></body>
|
||||
40
tests/blink_perf_tests/perf_tests/layout/editing_append.html
Normal file
40
tests/blink_perf_tests/perf_tests/layout/editing_append.html
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<body>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script src="resources/line-layout-perf-test.js"></script>
|
||||
<style>
|
||||
#container {
|
||||
width: 120ch;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
<pre id="container">A</pre>
|
||||
<script>
|
||||
const kNumberOfWords = 100;
|
||||
const kSampleText = (() => {
|
||||
const words = [];
|
||||
for (let i = 1; i <= kNumberOfWords; ++i) {
|
||||
words.push(TextGenerator.createWord(i % 12 + 3));
|
||||
if (i % 10 === 0)
|
||||
words.push('\n');
|
||||
}
|
||||
return words.join(' ');
|
||||
})().repeat(1);
|
||||
|
||||
const kCount = 10;
|
||||
|
||||
const container = document.getElementById('container');
|
||||
const editable = container.firstChild;
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
run: function() {
|
||||
for (let i = 0; i < kCount; ++i) {
|
||||
editable.nodeValue = kSampleText;
|
||||
PerfTestRunner.forceLayout();
|
||||
editable.appendData('xyz');
|
||||
PerfTestRunner.forceLayout();
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<body>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script src="resources/line-layout-perf-test.js"></script>
|
||||
<style>
|
||||
#container {
|
||||
width: 120ch;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
<pre id="container">A</pre>
|
||||
<script>
|
||||
const kNumberOfWords = 10;
|
||||
const kSampleText = (() => {
|
||||
const words = [];
|
||||
for (let i = 1; i <= kNumberOfWords; ++i) {
|
||||
words.push(TextGenerator.createWord(i % 12 + 3));
|
||||
}
|
||||
return words.join(' ');
|
||||
})().repeat(1);
|
||||
|
||||
const kCount = 10;
|
||||
|
||||
const container = document.getElementById('container');
|
||||
const editable = container.firstChild;
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
run: function() {
|
||||
for (let i = 0; i < kCount; ++i) {
|
||||
editable.nodeValue = kSampleText;
|
||||
PerfTestRunner.forceLayout();
|
||||
editable.appendData('XYZ');
|
||||
PerfTestRunner.forceLayout();
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
40
tests/blink_perf_tests/perf_tests/layout/editing_delete.html
Normal file
40
tests/blink_perf_tests/perf_tests/layout/editing_delete.html
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<body>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script src="resources/line-layout-perf-test.js"></script>
|
||||
<style>
|
||||
#container {
|
||||
width: 120ch;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
<pre id="container">A</pre>
|
||||
<script>
|
||||
const kNumberOfWords = 100;
|
||||
const kSampleText = (() => {
|
||||
const words = [];
|
||||
for (let i = 1; i <= kNumberOfWords; ++i) {
|
||||
words.push(TextGenerator.createWord(i % 12 + 3));
|
||||
if (i % 10 === 0)
|
||||
words.push('\n');
|
||||
}
|
||||
return words.join(' ');
|
||||
})().repeat(1);
|
||||
|
||||
const kCount = 10;
|
||||
|
||||
const container = document.getElementById('container');
|
||||
const editable = container.firstChild;
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
run: function() {
|
||||
for (let i = 0; i < kCount; ++i) {
|
||||
editable.nodeValue = kSampleText;
|
||||
PerfTestRunner.forceLayout();
|
||||
editable.deleteData(10, 20);
|
||||
PerfTestRunner.forceLayout();
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
40
tests/blink_perf_tests/perf_tests/layout/editing_insert.html
Normal file
40
tests/blink_perf_tests/perf_tests/layout/editing_insert.html
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<body>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script src="resources/line-layout-perf-test.js"></script>
|
||||
<style>
|
||||
#container {
|
||||
width: 120ch;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
<pre id="container">A</pre>
|
||||
<script>
|
||||
const kNumberOfWords = 100;
|
||||
const kSampleText = (() => {
|
||||
const words = [];
|
||||
for (let i = 1; i <= kNumberOfWords; ++i) {
|
||||
words.push(TextGenerator.createWord(i % 12 + 3));
|
||||
if (i % 10 === 0)
|
||||
words.push('\n');
|
||||
}
|
||||
return words.join(' ');
|
||||
})().repeat(1);
|
||||
|
||||
const kCount = 10;
|
||||
|
||||
const container = document.getElementById('container');
|
||||
const editable = container.firstChild;
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
run: function() {
|
||||
for (let i = 0; i < kCount; ++i) {
|
||||
editable.nodeValue = kSampleText;
|
||||
PerfTestRunner.forceLayout();
|
||||
editable.insertData(10, 'xyz');
|
||||
PerfTestRunner.forceLayout();
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<body>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script src="resources/line-layout-perf-test.js"></script>
|
||||
<style>
|
||||
#container {
|
||||
width: 120ch;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
<pre id="container">A</pre>
|
||||
<script>
|
||||
const kNumberOfWords = 100;
|
||||
const kSampleText = (() => {
|
||||
const words = [];
|
||||
for (let i = 1; i <= kNumberOfWords; ++i) {
|
||||
words.push(TextGenerator.createWord(i % 12 + 3));
|
||||
if (i % 10 === 0)
|
||||
words.push('\n');
|
||||
}
|
||||
return words.join(' ');
|
||||
})().repeat(1);
|
||||
|
||||
const kCount = 10;
|
||||
|
||||
const container = document.getElementById('container');
|
||||
const editable = container.firstChild;
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
run: function() {
|
||||
for (let i = 0; i < kCount; ++i) {
|
||||
editable.nodeValue = kSampleText;
|
||||
PerfTestRunner.forceLayout();
|
||||
editable.insertData(0, 'xyz');
|
||||
PerfTestRunner.forceLayout();
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<div id="container" style="width:500px;">
|
||||
<div id="stf" style="width:fit-content;"></div>
|
||||
</div>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script>
|
||||
var stf = document.getElementById("stf");
|
||||
|
||||
for (var i = 0; i < 10000; i++) {
|
||||
var child = document.createElement("div");
|
||||
child.style.width = "100px";
|
||||
child.style.height = "1px";
|
||||
stf.appendChild(child);
|
||||
}
|
||||
|
||||
var container = document.getElementById("container");
|
||||
var style = container.style;
|
||||
|
||||
function test() {
|
||||
style.width = "400px";
|
||||
PerfTestRunner.forceLayout();
|
||||
style.width = "500px";
|
||||
PerfTestRunner.forceLayout();
|
||||
}
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Measures performance of relayout of a container with many auto fit-content children.",
|
||||
run: test
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<div id="container" style="width:500px;">
|
||||
<div id="stf" style="width:fit-content;"></div>
|
||||
</div>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script>
|
||||
const LOREM_IPSUM = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
|
||||
var stf = document.getElementById("stf");
|
||||
|
||||
for (var i = 0; i < 1000; i++) {
|
||||
var child = document.createElement("span");
|
||||
stf.appendChild(child);
|
||||
child.textContent = LOREM_IPSUM.substr(
|
||||
Math.floor(Math.random()*100), Math.floor(Math.random()*200)+150);
|
||||
}
|
||||
|
||||
var container = document.getElementById("container");
|
||||
var style = container.style;
|
||||
|
||||
function test() {
|
||||
style.width = "400px";
|
||||
PerfTestRunner.forceLayout();
|
||||
style.width = "500px";
|
||||
PerfTestRunner.forceLayout();
|
||||
}
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Measures performance of relayout of a container with many auto fit-content children.",
|
||||
run: test
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../resources/runner.js"></script>
|
||||
</head>
|
||||
<body style="overflow-y: scroll">
|
||||
|
||||
<div id="flexbox" style="height: 400px; flex-direction: column; justify-content: center; align-items: center;">
|
||||
<div style="flex: 1 auto">1</div>
|
||||
<div style="flex: 2 auto">2 2</div>
|
||||
<div style="flex: 3 auto">3 3 3</div>
|
||||
<div style="flex: 4 auto">4 4 4 4</div>
|
||||
<div style="flex: 5 auto">5 5 5 5 5</div>
|
||||
<div style="flex: 6 auto">6 6 6 6 6 6</div>
|
||||
<div style="flex: 7 auto">7 7 7 7 7 7 7</div>
|
||||
<div style="flex: 8 auto">8 8 8 8 8 8 8 8</div>
|
||||
<div style="flex: 9 auto">9 9 9 9 9 9 9 9 9</div>
|
||||
<div style="flex: 10 auto">10 10 10 10 10 10 10 10 10</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<script>
|
||||
function runTest()
|
||||
{
|
||||
document.getElementById("flexbox").style.display = 'flex';
|
||||
PerfTestRunner.forceLayout();
|
||||
document.getElementById("flexbox").style.display = '';
|
||||
PerfTestRunner.forceLayout();
|
||||
}
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Measures performance of flexbox with no wrapping (column).",
|
||||
run: runTest,
|
||||
done: function() {
|
||||
document.getElementById("flexbox").style.display = 'none';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../resources/runner.js"></script>
|
||||
</head>
|
||||
<body style="overflow-y: scroll">
|
||||
|
||||
<div id="flexbox" style="height: 400px; flex-flow: column wrap; justify-content: center; align-items: center;">
|
||||
<div style="flex: 1 180px">1</div>
|
||||
<div style="flex: 2 auto">2 2</div>
|
||||
<div style="flex: 3 180px">3 3 3</div>
|
||||
<div style="flex: 4 auto">4 4 4 4</div>
|
||||
<div style="flex: 5 180px">5 5 5 5 5</div>
|
||||
<div style="flex: 6 auto">6 6 6 6 6 6</div>
|
||||
<div style="flex: 7 180px">7 7 7 7 7 7 7</div>
|
||||
<div style="flex: 8 auto">8 8 8 8 8 8 8 8</div>
|
||||
<div style="flex: 9 180px">9 9 9 9 9 9 9 9 9</div>
|
||||
<div style="flex: 10 auto">10 10 10 10 10 10 10 10 10</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<script>
|
||||
function runTest()
|
||||
{
|
||||
document.getElementById("flexbox").style.display = 'flex';
|
||||
PerfTestRunner.forceLayout();
|
||||
document.getElementById("flexbox").style.display = '';
|
||||
PerfTestRunner.forceLayout();
|
||||
}
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Measures performance of flexbox with wrapping (column).",
|
||||
run: runTest,
|
||||
done: function() {
|
||||
document.getElementById("flexbox").style.display = 'none';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<style>
|
||||
.col { display:flex; flex-direction:column; height:100%; }
|
||||
</style>
|
||||
<div style="display:flex; width:300px; height:200px;">
|
||||
<div>
|
||||
<div id="child"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="col">
|
||||
<div class="col">
|
||||
<div class="col">
|
||||
<div class="col">
|
||||
<div class="col">
|
||||
<div class="col">
|
||||
<div class="col">
|
||||
<div class="col">
|
||||
<div class="col">
|
||||
<div class="col">
|
||||
<div class="col">
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function runTest()
|
||||
{
|
||||
document.getElementById("child").style.width = '100px';
|
||||
PerfTestRunner.forceLayout();
|
||||
document.getElementById("child").style.width = '200px';
|
||||
PerfTestRunner.forceLayout();
|
||||
}
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Layout of sibling of deeply nested column flow flex containers",
|
||||
run: runTest,
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
body {
|
||||
overflow: scroll;
|
||||
}
|
||||
iframe {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<iframe id="target" xsrc="resources/flexbox-deeply-nested-with-ortho-flow-as-iframe.html">
|
||||
</iframe>
|
||||
<pre id="log"></pre>
|
||||
<script>
|
||||
var target = document.getElementById("target");
|
||||
var style = target.style;
|
||||
|
||||
var parent = target.contentDocument.body;
|
||||
for (var i = 0; i < 20; i++) {
|
||||
var div = target.contentDocument.createElement("div");
|
||||
div.style.display = "flex";
|
||||
parent.appendChild(div);
|
||||
parent = div;
|
||||
}
|
||||
var div = target.contentDocument.createElement("div");
|
||||
div.style.writingMode = "vertical-rl";
|
||||
div.id = "ortho";
|
||||
parent.appendChild(div);
|
||||
parent = div;
|
||||
var text = target.contentDocument.createTextNode("It went sideways");
|
||||
parent.appendChild(text);
|
||||
|
||||
function test() {
|
||||
style.height = "200px";
|
||||
target.contentDocument.documentElement.offsetTop;
|
||||
style.height = "190px";
|
||||
target.contentDocument.documentElement.offsetTop;
|
||||
}
|
||||
|
||||
onload = function() {
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Orthogonal flow root inside deeply nested flex, change initial containing block size",
|
||||
run: test
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<style>
|
||||
div {
|
||||
display: flex;
|
||||
border: 1px solid grey;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0.2em;
|
||||
font-family: Ahem;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<p>1</p>
|
||||
<div>
|
||||
<p>2</p>
|
||||
<div>
|
||||
<p>3</p>
|
||||
<div>
|
||||
<p>4</p>
|
||||
<div>
|
||||
<p>5</p>
|
||||
<div>
|
||||
<p>6</p>
|
||||
<div>
|
||||
<p>7</p>
|
||||
<div>
|
||||
<p>8</p>
|
||||
<div>
|
||||
<p>9</p>
|
||||
<div>
|
||||
<p>10</p>
|
||||
<div>
|
||||
<p>11</p>
|
||||
<div>
|
||||
<p>12</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function runTest() {
|
||||
// 320, 30 is where the "12" is in Ahem font.
|
||||
document.elementsFromPoint(320, 30);
|
||||
}
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Measure elementsFromPoint from a deeply nested flexbox.",
|
||||
run: runTest,
|
||||
});
|
||||
</script>
|
||||
33
tests/blink_perf_tests/perf_tests/layout/flexbox-input.html
Normal file
33
tests/blink_perf_tests/perf_tests/layout/flexbox-input.html
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<div style="display: flex; width: 600px; height: 600px;">
|
||||
<div style="width: 200px;"></div>
|
||||
<div style="display: flex; flex-direction: column; flex-grow: 1; overflow-y: auto;">
|
||||
<div style="flex-grow: 1; position: relative;">
|
||||
<div style="position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column;">
|
||||
<div id="container" style="overflow-y: auto;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="target" style="min-height: 20px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const container = document.getElementById('container');
|
||||
for (let i = 0; i < 500; i++) {
|
||||
const child = document.createElement('div');
|
||||
child.innerText = 'This is some placeholder text.';
|
||||
container.appendChild(child);
|
||||
}
|
||||
|
||||
const target = document.getElementById('target');
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: 'Measures performance of a series of nested flexboxes with input changing.',
|
||||
run: () => {
|
||||
target.innerText = Math.random();
|
||||
PerfTestRunner.forceLayout();
|
||||
},
|
||||
done: () => {
|
||||
document.body.children[0].style.display = 'none';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,91 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<style>
|
||||
#container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100px;
|
||||
}
|
||||
.flex-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
}
|
||||
.flex-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="container">
|
||||
<div class="flex-row">
|
||||
<div class="flex-column">
|
||||
<div class="flex-row">
|
||||
<div class="flex-column">
|
||||
<div class="flex-row">
|
||||
<div class="flex-column">
|
||||
<div class="flex-row">
|
||||
<div class="flex-column">
|
||||
<div class="flex-row">
|
||||
<div class="flex-column">
|
||||
<div class="flex-row">
|
||||
<div class="flex-column">
|
||||
<div class="flex-row">
|
||||
<div class="flex-column">
|
||||
<div class="flex-row">
|
||||
<div class="flex-column">
|
||||
<div class="flex-row">
|
||||
<div class="flex-column">
|
||||
<div class="flex-row">
|
||||
<div class="flex-column">
|
||||
<div class="flex-row">
|
||||
<div class="flex-column">
|
||||
<div class="flex-row">
|
||||
<div class="flex-column">
|
||||
<div>
|
||||
<div id="descendant"></div>
|
||||
<div style="width:100px; height:2000px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function runTest() {
|
||||
document.body.offsetTop;
|
||||
descendant.style.display = "none";
|
||||
document.body.offsetTop;
|
||||
descendant.style.display = "block";
|
||||
document.body.offsetTop;
|
||||
}
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Nested flex containers with alternating row and column flow, with auto overflow",
|
||||
run: runTest
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../resources/runner.js"></script>
|
||||
</head>
|
||||
<body style="overflow-y: scroll">
|
||||
|
||||
<div id="flexbox" style="justify-content: center; align-items: center">
|
||||
<div style="flex: 1">1</div>
|
||||
<div style="flex: 2">2<br>2</div>
|
||||
<div style="flex: 3">3<br>3<br>3</div>
|
||||
<div style="flex: 4">4<br>4<br>4<br>4</div>
|
||||
<div style="flex: 5">5<br>5<br>5<br>5<br>5</div>
|
||||
<div style="flex: 6">6<br>6<br>6<br>6<br>6<br>6</div>
|
||||
<div style="flex: 7">7<br>7<br>7<br>7<br>7<br>7<br>7</div>
|
||||
<div style="flex: 8">8<br>8<br>8<br>8<br>8<br>8<br>8<br>8</div>
|
||||
<div style="flex: 9">9<br>9<br>9<br>9<br>9<br>9<br>9<br>9<br>9</div>
|
||||
<div style="flex: 10">10<br>10<br>10<br>10<br>10<br>10<br>10<br>10<br>10</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<script>
|
||||
function runTest()
|
||||
{
|
||||
document.getElementById("flexbox").style.display = 'flex';
|
||||
PerfTestRunner.forceLayout();
|
||||
document.getElementById("flexbox").style.display = '';
|
||||
PerfTestRunner.forceLayout();
|
||||
}
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Measures performance of flexbox with no wrapping (row).",
|
||||
run: runTest,
|
||||
done:function() {
|
||||
document.getElementById("flexbox").style.display = 'none';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../resources/runner.js"></script>
|
||||
</head>
|
||||
<body style="overflow-y: scroll">
|
||||
|
||||
<div id="flexbox-outer" style="display: flex; width: 512px; height: 256px">
|
||||
<div id="neighbor" style="width: 256px">
|
||||
</div>
|
||||
<div id="flexbox-inner" style="flex-direction: column; overflow: auto">
|
||||
<div id="contents" style="height: 100%; overflow: hidden">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<script>
|
||||
|
||||
// Add wrapping text to make the relayout from scrollbar positioning more expensive.
|
||||
const contents = document.querySelector('#contents');
|
||||
for (let i = 0; i < 1000; i++) {
|
||||
contents.innerHTML += '<div>this text should wrap so a change in its container width triggers a relayout</div>';
|
||||
}
|
||||
|
||||
const neighbor = document.querySelector("#neighbor");
|
||||
|
||||
function runTest()
|
||||
{
|
||||
neighbor.innerHTML = "changing this element's contents should not relayout the right flexbox";
|
||||
PerfTestRunner.forceLayout();
|
||||
neighbor.innerHTML = "";
|
||||
PerfTestRunner.forceLayout();
|
||||
}
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Measures performance of definite-height flexbox that stretches its children's height (row).",
|
||||
run: runTest,
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../resources/runner.js"></script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
/* Make the text the same size in chrome and firefox. */
|
||||
font-family: "Times New Roman";
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="display: flex; width: 800px; background: orange;">
|
||||
<div id="neighbor" style="width: 50px;"></div>
|
||||
<!-- 750px lets the text not wrap. -->
|
||||
<div id="test" style="width: 750px;"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
<script>
|
||||
|
||||
const test = document.querySelector('#test');
|
||||
for (let i = 0; i < 60; i++) {
|
||||
test.innerHTML += '<div style="height: 1%">some stuff here blah blah blah blah blah blah blah blah blah blah blah blah blah</div>';
|
||||
}
|
||||
|
||||
const neighbor = document.querySelector("#neighbor");
|
||||
function runTest()
|
||||
{
|
||||
// When #neighbor changes height, #test shouldn't have to relayout.
|
||||
// 1200px is higher than #test's intrinsic block size and its pre-stretched
|
||||
// layout size. Performance characteristics change if that's not the case.
|
||||
neighbor.style.height = "1200px";
|
||||
PerfTestRunner.forceLayout();
|
||||
neighbor.style.height = "1300px";
|
||||
PerfTestRunner.forceLayout();
|
||||
}
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Ensures cache hits for stretched flex items in a row flexbox with indefinite height, when the flexbox changes heights.",
|
||||
run: runTest,
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../resources/runner.js"></script>
|
||||
</head>
|
||||
<body style="overflow-y: scroll">
|
||||
|
||||
<div id="flexbox" style="width: 300px; flex-wrap: wrap; justify-content: center; align-items: center">
|
||||
<div style="flex: 1 120px">1</div>
|
||||
<div style="flex: 2 auto">2<br>2</div>
|
||||
<div style="flex: 3 120px">3<br>3<br>3</div>
|
||||
<div style="flex: 4 auto">4<br>4<br>4<br>4</div>
|
||||
<div style="flex: 5 120px">5<br>5<br>5<br>5<br>5</div>
|
||||
<div style="flex: 6 auto">6<br>6<br>6<br>6<br>6<br>6</div>
|
||||
<div style="flex: 7 120px">7<br>7<br>7<br>7<br>7<br>7<br>7</div>
|
||||
<div style="flex: 8 auto">8<br>8<br>8<br>8<br>8<br>8<br>8<br>8</div>
|
||||
<div style="flex: 9 120px">9<br>9<br>9<br>9<br>9<br>9<br>9<br>9<br>9</div>
|
||||
<div style="flex: 10 auto">10<br>10<br>10<br>10<br>10<br>10<br>10<br>10<br>10</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<script>
|
||||
function runTest()
|
||||
{
|
||||
document.getElementById("flexbox").style.display = 'flex';
|
||||
PerfTestRunner.forceLayout();
|
||||
document.getElementById("flexbox").style.display = '';
|
||||
PerfTestRunner.forceLayout();
|
||||
}
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Measures performance of flexbox with wrapping (row).",
|
||||
run: runTest,
|
||||
done: function() {
|
||||
document.getElementById("flexbox").style.display = 'none';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<style>
|
||||
|
||||
#container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.byteBox {
|
||||
width: 9px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.inlineBlock {
|
||||
font-family: Ahem;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="container" style="">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<script>
|
||||
|
||||
var nbsp = '\u00A0';
|
||||
|
||||
function setupTest()
|
||||
{
|
||||
var container = document.getElementById("container");
|
||||
for (var i = 0; i < 200; i++) {
|
||||
var div = document.createElement("div");
|
||||
div.className = "byteBox";
|
||||
var span = document.createElement("span");
|
||||
span.className = "inlineBlock";
|
||||
span.innerText = nbsp;
|
||||
div.appendChild(span);
|
||||
container.appendChild(div);
|
||||
};
|
||||
PerfTestRunner.forceLayout();
|
||||
};
|
||||
|
||||
setupTest();
|
||||
|
||||
var switcher = true;
|
||||
|
||||
function runTest()
|
||||
{
|
||||
var inlineBlocks = document.getElementsByClassName("inlineBlock");
|
||||
for (var i = inlineBlocks.length - 1; i >= 0; i--) {
|
||||
inlineBlocks[i].innerText = switcher ? " " : nbsp;
|
||||
PerfTestRunner.forceLayout();
|
||||
};
|
||||
switcher = !switcher;
|
||||
};
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Measures performance of flexbox containing many small elements with wrapping (column).",
|
||||
run: runTest
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!doctype html>
|
||||
<head>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<style>
|
||||
#rootview {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#elements-content { color: gray; overflow: auto; }
|
||||
.outline { outline: auto; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="rootview">
|
||||
<div id="elements-content"></div>
|
||||
</div>
|
||||
<script>
|
||||
const container = document.getElementById('elements-content');
|
||||
const kItems = 100;
|
||||
for (let i = 0; i < kItems; ++i) {
|
||||
const child = document.createElement('li');
|
||||
container.appendChild(child);
|
||||
child.innerHTML = `child ${i} - ` + `<span>= </span>`.repeat(200);
|
||||
}
|
||||
|
||||
PerfTestRunner.forceLayout();
|
||||
|
||||
const startAt = Date.now();
|
||||
|
||||
// For http://crbug.com/980399
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
descritpion: 'Measuers performance of moving foucs around list item.',
|
||||
run : () => {
|
||||
let lastChild = null;
|
||||
for (const child of container.childNodes) {
|
||||
if (lastChild) lastChild.classList.toggle('outline');
|
||||
child.classList.toggle('outline');
|
||||
lastChild = child;
|
||||
PerfTestRunner.forceLayout();
|
||||
}
|
||||
},
|
||||
done: () => {
|
||||
container.textContent = '';
|
||||
},
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
18
tests/blink_perf_tests/perf_tests/layout/floats_100_100.html
Normal file
18
tests/blink_perf_tests/perf_tests/layout/floats_100_100.html
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Floats layout performance tester with 2 columns and 100 rows</title>
|
||||
<link rel="stylesheet" href="resources/floats.css" TYPE="text/css"></link>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script src="resources/floats.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<pre id="log"></pre>
|
||||
<script>
|
||||
PerfTestRunner.measureTime({
|
||||
description: "Measures performance of a float layout with 1 row containing 100x100 floats.",
|
||||
run: createFloatsLayoutTestFunction(100, 100, 0, 3, 1)
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Floats layout performance tester with 2 columns and 100 rows</title>
|
||||
<link rel="stylesheet" href="resources/floats.css" TYPE="text/css"></link>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script src="resources/floats.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<pre id="log"></pre>
|
||||
<script>
|
||||
PerfTestRunner.measureTime({
|
||||
description: "Measures performance of a float layout with 1 row containing 100x100 floats (nested).",
|
||||
run: createFloatsLayoutTestFunction(100, 100, 100, 3, 1)
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
18
tests/blink_perf_tests/perf_tests/layout/floats_10_1000.html
Normal file
18
tests/blink_perf_tests/perf_tests/layout/floats_10_1000.html
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Layout performance tester with 1000 rows containing 10 floats and a normal flow div.</title>
|
||||
<link rel="stylesheet" href="resources/floats.css" TYPE="text/css"></link>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script src="resources/floats.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<pre id="log"></pre>
|
||||
<script>
|
||||
PerfTestRunner.measureTime({
|
||||
description: "Measures performance of a float layout with 1000 rows containing 10x1 floats each.",
|
||||
run: createFloatsLayoutTestFunction(10, 1, 0, 1, 1000)
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
18
tests/blink_perf_tests/perf_tests/layout/floats_20_100.html
Normal file
18
tests/blink_perf_tests/perf_tests/layout/floats_20_100.html
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Floats layout performance tester with 2 columns and 100 rows</title>
|
||||
<link rel="stylesheet" href="resources/floats.css" TYPE="text/css"></link>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script src="resources/floats.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<pre id="log"></pre>
|
||||
<script>
|
||||
PerfTestRunner.measureTime({
|
||||
description: "Measures performance of a float layout with 1 row containing 20x100 floats.",
|
||||
run: createFloatsLayoutTestFunction(20, 100, 0, 100, 1)
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Floats layout performance tester with 2 columns and 100 rows</title>
|
||||
<link rel="stylesheet" href="resources/floats.css" TYPE="text/css"></link>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script src="resources/floats.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<pre id="log"></pre>
|
||||
<script>
|
||||
PerfTestRunner.measureTime({
|
||||
description: "Measures performance of a float layout with 1 row containing 20x100 floats (nested).",
|
||||
run: createFloatsLayoutTestFunction(20, 100, 100, 100, 1)
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
18
tests/blink_perf_tests/perf_tests/layout/floats_2_100.html
Normal file
18
tests/blink_perf_tests/perf_tests/layout/floats_2_100.html
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Floats layout performance tester with 2 columns and 100 rows</title>
|
||||
<link rel="stylesheet" href="resources/floats.css" TYPE="text/css"></link>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script src="resources/floats.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<pre id="log"></pre>
|
||||
<script>
|
||||
PerfTestRunner.measureTime({
|
||||
description: "Measures performance of a float layout with 1 row containing 2x100 floats.",
|
||||
run: createFloatsLayoutTestFunction(2, 100, 0, 500, 1)
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Floats layout performance tester with 2 columns and 100 rows</title>
|
||||
<link rel="stylesheet" href="resources/floats.css" TYPE="text/css"></link>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script src="resources/floats.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<pre id="log"></pre>
|
||||
<script>
|
||||
PerfTestRunner.measureTime({
|
||||
description: "Measures performance of a float layout with 1 row containing 2x100 floats (nested).",
|
||||
run: createFloatsLayoutTestFunction(2, 100, 100, 250, 1)
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
18
tests/blink_perf_tests/perf_tests/layout/floats_50_100.html
Normal file
18
tests/blink_perf_tests/perf_tests/layout/floats_50_100.html
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Floats layout performance tester with 2 columns and 100 rows</title>
|
||||
<link rel="stylesheet" href="resources/floats.css" TYPE="text/css"></link>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script src="resources/floats.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<pre id="log"></pre>
|
||||
<script>
|
||||
PerfTestRunner.measureTime({
|
||||
description: "Measures performance of a float layout with 1 row containing 50x100 floats.",
|
||||
run: createFloatsLayoutTestFunction(50, 100, 0, 20, 1)
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Floats layout performance tester with 2 columns and 100 rows</title>
|
||||
<link rel="stylesheet" href="resources/floats.css" TYPE="text/css"></link>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script src="resources/floats.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<pre id="log"></pre>
|
||||
<script>
|
||||
PerfTestRunner.measureTime({
|
||||
description: "Measures performance of a float layout with 1 row containing 50x100 floats.",
|
||||
run: createFloatsLayoutTestFunction(50, 100, 100, 20, 1)
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.float {
|
||||
float: left;
|
||||
width: 20px;
|
||||
}
|
||||
</style>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<body style="overflow-y: scroll;">
|
||||
<div id="parent" style="display: flow-root;"></div>
|
||||
</body>
|
||||
<script>
|
||||
const parent = document.getElementById('parent');
|
||||
const containers = [];
|
||||
for (let i = 0; i < 100; i++) {
|
||||
const container = document.createElement('div');
|
||||
container.style.height = '100px';
|
||||
const random = Math.random();
|
||||
container.innerHTML = `
|
||||
<div class="float" style="height: ${90 * random}px"></div>
|
||||
<div class="float" style="height: ${80 * random}px"></div>
|
||||
<div class="float" style="height: ${70 * random}px"></div>
|
||||
<div class="float" style="height: ${60 * random}px"></div>
|
||||
<div class="float" style="height: ${50 * random}px"></div>
|
||||
<div class="float" style="height: ${40 * random}px"></div>
|
||||
<div class="float" style="height: ${30 * random}px"></div>
|
||||
<div class="float" style="height: ${20 * random}px"></div>
|
||||
<div class="float" style="height: ${10 * random}px"></div>
|
||||
`;
|
||||
parent.appendChild(container);
|
||||
containers.push(container);
|
||||
}
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: 'Measures formance of showing/hiding containers with many floats',
|
||||
run: () => {
|
||||
for (let container of containers) {
|
||||
container.style.display = 'none';
|
||||
PerfTestRunner.forceLayout();
|
||||
container.style.display = '';
|
||||
PerfTestRunner.forceLayout();
|
||||
}
|
||||
},
|
||||
done: () => {
|
||||
parent.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
align-items: baseline;
|
||||
}
|
||||
</style>
|
||||
<div class="grid">
|
||||
<div class="grid">
|
||||
<div class="grid">
|
||||
<div class="grid">
|
||||
<div class="grid">
|
||||
<div class="grid">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: 'Layout of nested grid with baseline alignment.',
|
||||
run: () => {
|
||||
document.getElementById('target').innerText = 'Some text here.';
|
||||
PerfTestRunner.forceLayout();
|
||||
document.getElementById('target').innerText = '';
|
||||
PerfTestRunner.forceLayout();
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<div id=c1 style="display: grid; grid-template: auto / 1fr;">
|
||||
<div id=c2 style="display: grid; grid-template: auto / 1fr;">
|
||||
<div id=c3 style="display: grid; grid-template: auto auto / 1fr;">
|
||||
<div id="target" style="display: grid; height: 100px;"></div>
|
||||
<div id=i1 style="display: grid;">
|
||||
<div id=i2 style="display: grid;">
|
||||
<div id=i3 style="width: 100%; height: 100%;">
|
||||
<canvas id=i4 width=50 height=50 style="width: 100%; height: 100%;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: 'Layout of nested grid with a replaced element dependant on block-constraints.',
|
||||
run: () => {
|
||||
document.getElementById('target').innerText = 'text';
|
||||
PerfTestRunner.forceLayout();
|
||||
document.getElementById('target').innerText = '';
|
||||
PerfTestRunner.forceLayout();
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Hindi Line breaking performance test</title>
|
||||
<meta charset="utf-8">
|
||||
<script src="../resources/runner.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Example hindi from http://people.w3.org/rishida/scripts/samples/hindi.php. Hindi was chosen, as its ligatures should cause us to use the complex-text path. -->
|
||||
<pre id="log"></pre>
|
||||
<div id="target" style="width: 300px; display: none;">
|
||||
<p lang="hi" xml:lang="hi" title="This is Hindi"><span id="e8" class="ex">हालाँकि</span> सूर के जीवन के बारे में कई जनश्रुतियाँ <span id="e9" class="ex">प्रचलित</span> <span id="e3" class="ex">हैं</span>, पर इन में कितनी सच्चाई है यह कहना कठिन है। कहा जाता है उनका जन्म सन् <span id="e10" class="ex">१४७८</span> में <span id="e4" class="ex">दिल्ली</span> के पास एक ग़रीब ब्राह्मीण परिवार <span id="e1" class="ex">में</span> हुआ। जनश्रुति के अनुसार सूरदास जन्म से ही अंधे थे। आजकल थी <span id="e2" class="ex">अंधे</span> आदमी अक्सर 'सूरदास' कहलाते हैं। कई लोगों ने उन्हें गुरु के <span id="e6" class="ex">रूप</span> में अपनाया और उनकी <span id="e7" class="ex">पूजा</span> करना शुरु कर दिया । </p>
|
||||
<p lang="hi" xml:lang="hi" title="This is Hindi"><span id="e8" class="ex">हालाँकि</span> सूर के जीवन के बारे में कई जनश्रुतियाँ <span id="e9" class="ex">प्रचलित</span> <span id="e3" class="ex">हैं</span>, पर इन में कितनी सच्चाई है यह कहना कठिन है। कहा जाता है उनका जन्म सन् <span id="e10" class="ex">१४७८</span> में <span id="e4" class="ex">दिल्ली</span> के पास एक ग़रीब ब्राह्मीण परिवार <span id="e1" class="ex">में</span> हुआ। जनश्रुति के अनुसार सूरदास जन्म से ही अंधे थे। आजकल थी <span id="e2" class="ex">अंधे</span> आदमी अक्सर 'सूरदास' कहलाते हैं। कई लोगों ने उन्हें गुरु के <span id="e6" class="ex">रूप</span> में अपनाया और उनकी <span id="e7" class="ex">पूजा</span> करना शुरु कर दिया । </p>
|
||||
<p lang="hi" xml:lang="hi" title="This is Hindi"><span id="e8" class="ex">हालाँकि</span> सूर के जीवन के बारे में कई जनश्रुतियाँ <span id="e9" class="ex">प्रचलित</span> <span id="e3" class="ex">हैं</span>, पर इन में कितनी सच्चाई है यह कहना कठिन है। कहा जाता है उनका जन्म सन् <span id="e10" class="ex">१४७८</span> में <span id="e4" class="ex">दिल्ली</span> के पास एक ग़रीब ब्राह्मीण परिवार <span id="e1" class="ex">में</span> हुआ। जनश्रुति के अनुसार सूरदास जन्म से ही अंधे थे। आजकल थी <span id="e2" class="ex">अंधे</span> आदमी अक्सर 'सूरदास' कहलाते हैं। कई लोगों ने उन्हें गुरु के <span id="e6" class="ex">रूप</span> में अपनाया और उनकी <span id="e7" class="ex">पूजा</span> करना शुरु कर दिया । </p>
|
||||
<p lang="hi" xml:lang="hi" title="This is Hindi"><span id="e8" class="ex">हालाँकि</span> सूर के जीवन के बारे में कई जनश्रुतियाँ <span id="e9" class="ex">प्रचलित</span> <span id="e3" class="ex">हैं</span>, पर इन में कितनी सच्चाई है यह कहना कठिन है। कहा जाता है उनका जन्म सन् <span id="e10" class="ex">१४७८</span> में <span id="e4" class="ex">दिल्ली</span> के पास एक ग़रीब ब्राह्मीण परिवार <span id="e1" class="ex">में</span> हुआ। जनश्रुति के अनुसार सूरदास जन्म से ही अंधे थे। आजकल थी <span id="e2" class="ex">अंधे</span> आदमी अक्सर 'सूरदास' कहलाते हैं। कई लोगों ने उन्हें गुरु के <span id="e6" class="ex">रूप</span> में अपनाया और उनकी <span id="e7" class="ex">पूजा</span> करना शुरु कर दिया । </p>
|
||||
<p lang="hi" xml:lang="hi" title="This is Hindi"><span id="e8" class="ex">हालाँकि</span> सूर के जीवन के बारे में कई जनश्रुतियाँ <span id="e9" class="ex">प्रचलित</span> <span id="e3" class="ex">हैं</span>, पर इन में कितनी सच्चाई है यह कहना कठिन है। कहा जाता है उनका जन्म सन् <span id="e10" class="ex">१४७८</span> में <span id="e4" class="ex">दिल्ली</span> के पास एक ग़रीब ब्राह्मीण परिवार <span id="e1" class="ex">में</span> हुआ। जनश्रुति के अनुसार सूरदास जन्म से ही अंधे थे। आजकल थी <span id="e2" class="ex">अंधे</span> आदमी अक्सर 'सूरदास' कहलाते हैं। कई लोगों ने उन्हें गुरु के <span id="e6" class="ex">रूप</span> में अपनाया और उनकी <span id="e7" class="ex">पूजा</span> करना शुरु कर दिया । </p>
|
||||
<p lang="hi" xml:lang="hi" title="This is Hindi"><span id="e8" class="ex">हालाँकि</span> सूर के जीवन के बारे में कई जनश्रुतियाँ <span id="e9" class="ex">प्रचलित</span> <span id="e3" class="ex">हैं</span>, पर इन में कितनी सच्चाई है यह कहना कठिन है। कहा जाता है उनका जन्म सन् <span id="e10" class="ex">१४७८</span> में <span id="e4" class="ex">दिल्ली</span> के पास एक ग़रीब ब्राह्मीण परिवार <span id="e1" class="ex">में</span> हुआ। जनश्रुति के अनुसार सूरदास जन्म से ही अंधे थे। आजकल थी <span id="e2" class="ex">अंधे</span> आदमी अक्सर 'सूरदास' कहलाते हैं। कई लोगों ने उन्हें गुरु के <span id="e6" class="ex">रूप</span> में अपनाया और उनकी <span id="e7" class="ex">पूजा</span> करना शुरु कर दिया । </p>
|
||||
<p lang="hi" xml:lang="hi" title="This is Hindi"><span id="e8" class="ex">हालाँकि</span> सूर के जीवन के बारे में कई जनश्रुतियाँ <span id="e9" class="ex">प्रचलित</span> <span id="e3" class="ex">हैं</span>, पर इन में कितनी सच्चाई है यह कहना कठिन है। कहा जाता है उनका जन्म सन् <span id="e10" class="ex">१४७८</span> में <span id="e4" class="ex">दिल्ली</span> के पास एक ग़रीब ब्राह्मीण परिवार <span id="e1" class="ex">में</span> हुआ। जनश्रुति के अनुसार सूरदास जन्म से ही अंधे थे। आजकल थी <span id="e2" class="ex">अंधे</span> आदमी अक्सर 'सूरदास' कहलाते हैं। कई लोगों ने उन्हें गुरु के <span id="e6" class="ex">रूप</span> में अपनाया और उनकी <span id="e7" class="ex">पूजा</span> करना शुरु कर दिया । </p>
|
||||
<p lang="hi" xml:lang="hi" title="This is Hindi"><span id="e8" class="ex">हालाँकि</span> सूर के जीवन के बारे में कई जनश्रुतियाँ <span id="e9" class="ex">प्रचलित</span> <span id="e3" class="ex">हैं</span>, पर इन में कितनी सच्चाई है यह कहना कठिन है। कहा जाता है उनका जन्म सन् <span id="e10" class="ex">१४७८</span> में <span id="e4" class="ex">दिल्ली</span> के पास एक ग़रीब ब्राह्मीण परिवार <span id="e1" class="ex">में</span> हुआ। जनश्रुति के अनुसार सूरदास जन्म से ही अंधे थे। आजकल थी <span id="e2" class="ex">अंधे</span> आदमी अक्सर 'सूरदास' कहलाते हैं। कई लोगों ने उन्हें गुरु के <span id="e6" class="ex">रूप</span> में अपनाया और उनकी <span id="e7" class="ex">पूजा</span> करना शुरु कर दिया । </p>
|
||||
<p lang="hi" xml:lang="hi" title="This is Hindi"><span id="e8" class="ex">हालाँकि</span> सूर के जीवन के बारे में कई जनश्रुतियाँ <span id="e9" class="ex">प्रचलित</span> <span id="e3" class="ex">हैं</span>, पर इन में कितनी सच्चाई है यह कहना कठिन है। कहा जाता है उनका जन्म सन् <span id="e10" class="ex">१४७८</span> में <span id="e4" class="ex">दिल्ली</span> के पास एक ग़रीब ब्राह्मीण परिवार <span id="e1" class="ex">में</span> हुआ। जनश्रुति के अनुसार सूरदास जन्म से ही अंधे थे। आजकल थी <span id="e2" class="ex">अंधे</span> आदमी अक्सर 'सूरदास' कहलाते हैं। कई लोगों ने उन्हें गुरु के <span id="e6" class="ex">रूप</span> में अपनाया और उनकी <span id="e7" class="ex">पूजा</span> करना शुरु कर दिया । </p>
|
||||
<p lang="hi" xml:lang="hi" title="This is Hindi"><span id="e8" class="ex">हालाँकि</span> सूर के जीवन के बारे में कई जनश्रुतियाँ <span id="e9" class="ex">प्रचलित</span> <span id="e3" class="ex">हैं</span>, पर इन में कितनी सच्चाई है यह कहना कठिन है। कहा जाता है उनका जन्म सन् <span id="e10" class="ex">१४७८</span> में <span id="e4" class="ex">दिल्ली</span> के पास एक ग़रीब ब्राह्मीण परिवार <span id="e1" class="ex">में</span> हुआ। जनश्रुति के अनुसार सूरदास जन्म से ही अंधे थे। आजकल थी <span id="e2" class="ex">अंधे</span> आदमी अक्सर 'सूरदास' कहलाते हैं। कई लोगों ने उन्हें गुरु के <span id="e6" class="ex">रूप</span> में अपनाया और उनकी <span id="e7" class="ex">पूजा</span> करना शुरु कर दिया । </p>
|
||||
<p lang="hi" xml:lang="hi" title="This is Hindi"><span id="e8" class="ex">हालाँकि</span> सूर के जीवन के बारे में कई जनश्रुतियाँ <span id="e9" class="ex">प्रचलित</span> <span id="e3" class="ex">हैं</span>, पर इन में कितनी सच्चाई है यह कहना कठिन है। कहा जाता है उनका जन्म सन् <span id="e10" class="ex">१४७८</span> में <span id="e4" class="ex">दिल्ली</span> के पास एक ग़रीब ब्राह्मीण परिवार <span id="e1" class="ex">में</span> हुआ। जनश्रुति के अनुसार सूरदास जन्म से ही अंधे थे। आजकल थी <span id="e2" class="ex">अंधे</span> आदमी अक्सर 'सूरदास' कहलाते हैं। कई लोगों ने उन्हें गुरु के <span id="e6" class="ex">रूप</span> में अपनाया और उनकी <span id="e7" class="ex">पूजा</span> करना शुरु कर दिया । </p>
|
||||
</div>
|
||||
<script>
|
||||
var target = document.getElementById("target");
|
||||
var style = target.style;
|
||||
|
||||
function test() {
|
||||
style.display = "block";
|
||||
style.width = "280px";
|
||||
PerfTestRunner.forceLayout();
|
||||
style.width = "300px";
|
||||
PerfTestRunner.forceLayout();
|
||||
style.width = "290px";
|
||||
PerfTestRunner.forceLayout();
|
||||
style.display = "none";
|
||||
}
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Measures performance of layout on a page containing Hindi.",
|
||||
run: test
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Hit-testing block children</title>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<body>
|
||||
<div id="container"></div>
|
||||
<script>
|
||||
let y = 100;
|
||||
|
||||
function createTree(container) {
|
||||
for (let i = 0; i < 20000; ++i) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = i;
|
||||
container.appendChild(div);
|
||||
}
|
||||
}
|
||||
|
||||
function setup() {
|
||||
container.textContent = '';
|
||||
createTree(container);
|
||||
}
|
||||
|
||||
function test() {
|
||||
for (let i = 0; i < 10; ++i) {
|
||||
document.elementFromPoint(100, y);
|
||||
++y;
|
||||
}
|
||||
}
|
||||
|
||||
function run() {
|
||||
PerfTestRunner.measureTime({
|
||||
description: `Measures performance of hit-testing block children.`,
|
||||
run: test
|
||||
});
|
||||
}
|
||||
|
||||
setup();
|
||||
run();
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<div id="container">
|
||||
<div style="display:inline-block;">
|
||||
<div style="display:inline-block;">
|
||||
<div style="display:inline-block;">
|
||||
<div style="display:inline-block;">
|
||||
<div style="display:inline-block;">
|
||||
<div style="display:inline-block;">
|
||||
<div style="display:inline-block;">
|
||||
<div style="display:inline-block;">
|
||||
<div style="display:inline-block;">
|
||||
<div style="display:inline-block; width:100px; height:100px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function test() {
|
||||
document.elementsFromPoint(50, 50);
|
||||
}
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: `Measures performance of hit-testing nested inline-blocks, list-based.`,
|
||||
run: test
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
1616
tests/blink_perf_tests/perf_tests/layout/japanese-kokoro-insert.html
Normal file
1616
tests/blink_perf_tests/perf_tests/layout/japanese-kokoro-insert.html
Normal file
File diff suppressed because it is too large
Load diff
146
tests/blink_perf_tests/perf_tests/layout/large-grid.html
Normal file
146
tests/blink_perf_tests/perf_tests/layout/large-grid.html
Normal file
|
|
@ -0,0 +1,146 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
|
||||
<style>
|
||||
html, body { height: 100% }
|
||||
ui-pane#main {
|
||||
contain: strict;
|
||||
min-width: 100% !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
min-height: 100% !important;
|
||||
height: 100% !important;
|
||||
max-height: 100% !important;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
|
||||
[row1] {
|
||||
grid-row-start: 1;
|
||||
grid-row-end: auto
|
||||
}
|
||||
|
||||
[row2] {
|
||||
grid-row-start: 2;
|
||||
grid-row-end: auto
|
||||
}
|
||||
|
||||
|
||||
[col2] {
|
||||
grid-column-start: 2;
|
||||
grid-column-end: auto
|
||||
}
|
||||
|
||||
ui-pane {
|
||||
display: grid;
|
||||
height: 100%;
|
||||
contain: content
|
||||
}
|
||||
|
||||
[hgrid] {
|
||||
grid-template-rows: 1fr
|
||||
}
|
||||
|
||||
[vgrid] {
|
||||
grid-template-columns: 1fr
|
||||
}
|
||||
|
||||
ui-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
[collapsed ] { display: none; }
|
||||
|
||||
.eventChildrenWrap {
|
||||
grid-column: 1/span 3;
|
||||
contain: content
|
||||
}
|
||||
|
||||
.eventChildrenContainer {
|
||||
display: grid;
|
||||
grid-template-columns: 3em 0px 1fr;
|
||||
contain: content;
|
||||
}
|
||||
|
||||
.actionBlockWrap {
|
||||
grid-column: 3;
|
||||
align-self: start;
|
||||
contain: layout style;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.actionBlock {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
overflow: hidden;
|
||||
contain: content
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<pre id="log"></pre>
|
||||
|
||||
<ui-pane id="main" vgrid="" style="grid-template-rows: 1fr;">
|
||||
<ui-pane id="middle" row1="" hgrid="" style="grid-template-columns: 320px 1fr 300px;">
|
||||
<ui-pane col2="">
|
||||
<ui-body row2="">
|
||||
<ui-pane class="eventSheetViewPane">
|
||||
<ui-body row2="" class="eventSheetView">
|
||||
<div id="thisistheone" class="eventChildrenWrap">
|
||||
<div class="eventChildrenContainer">
|
||||
<div class="actionBlockWrap">
|
||||
<div class="actionBlock" id="inserthere">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui-body>
|
||||
</ui-pane>
|
||||
</ui-body>
|
||||
</ui-pane>
|
||||
|
||||
</ui-pane>
|
||||
</ui-pane>
|
||||
|
||||
|
||||
<script>
|
||||
var target = document.getElementById('thisistheone');
|
||||
|
||||
function setup() {
|
||||
let insert = document.getElementById('inserthere');
|
||||
for (let i = 0; i < 2750; ++i) {
|
||||
let name = document.createElement('div');
|
||||
name.className = 'actionNameCell';
|
||||
name.innerHTML = '<ui-icon style="width: 20px; height: 20px; "></ui-icon><span class="actionObjectNameSpan">Button</span>';
|
||||
let desc = document.createElement('div');
|
||||
desc.className = 'actionDescCell';
|
||||
desc.innerHTML = 'Set position to <event-parameter data-index="0"> <ui-icon class="objectParameterIcon" style="width: 20px; height: 20px; "></ui-icon><span class="objectParameterObjectName">Sprite</span> </event-parameter> <em>(image point <event-parameter data-index="1">3213213</event-parameter>)</em>';
|
||||
insert.appendChild(name);
|
||||
insert.appendChild(desc);
|
||||
}
|
||||
}
|
||||
|
||||
function test() {
|
||||
target.setAttribute('collapsed', '');
|
||||
PerfTestRunner.forceLayout();
|
||||
target.removeAttribute('collapsed');
|
||||
PerfTestRunner.forceLayout();
|
||||
}
|
||||
|
||||
setup();
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Measures performance of laying out a large grid.",
|
||||
run: test
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.gridItem {
|
||||
grid-column: span 100;
|
||||
grid-row: span 100;
|
||||
}
|
||||
#grid {
|
||||
display: grid;
|
||||
grid-auto-rows: 2px;
|
||||
grid-auto-columns: 5px;
|
||||
}
|
||||
</style>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script>
|
||||
function startTest() {
|
||||
PerfTestRunner.forceLayout();
|
||||
|
||||
var index = 0;
|
||||
var grid = document.getElementById("grid");
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Measures performance of layout on a page using CSS grid layout (item placement).",
|
||||
run: function() {
|
||||
// This style change forces the grid to place the item again, and thus regenerate the data structure holding the grid.
|
||||
grid.style.gridAutoFlow = ++index % 2 ? "row" : "column";
|
||||
PerfTestRunner.forceLayout();
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<body onload="startTest()">
|
||||
<div id="grid"">
|
||||
<div class="gridItem" style="background: lime"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Table layout performance with collapsed borders and a cell with a colspan wider than the other rows in the table.</title>
|
||||
<link rel="stylesheet" href="resources/large-table-with-collapsed-borders.css" TYPE="text/css"></link>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script src="resources/large-table-with-collapsed-borders.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<pre id="log"></pre>
|
||||
<script>
|
||||
PerfTestRunner.measureTime({
|
||||
description: "Table layout performance with collapsed borders and a cell with a colspan wider than the other rows in the table.",
|
||||
run: createTableTestFunction(400, 100, 500)
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Table layout performance with collapsed borders and a cell with a colspan that can be accomodated by the width given by other rows in the table.</title>
|
||||
<link rel="stylesheet" href="resources/large-table-with-collapsed-borders.css" TYPE="text/css"></link>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script src="resources/large-table-with-collapsed-borders.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<pre id="log"></pre>
|
||||
<script>
|
||||
PerfTestRunner.measureTime({
|
||||
description: "Table layout performance with collapsed borders and a cell with a colspan that can be accomodated by the width given by other rows in the table.",
|
||||
run: createTableTestFunction(400, 100, 50)
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Table layout performance with collapsed borders and no cells with colspan.</title>
|
||||
<link rel="stylesheet" href="resources/large-table-with-collapsed-borders.css" TYPE="text/css"></link>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script src="resources/large-table-with-collapsed-borders.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<pre id="log"></pre>
|
||||
<script>
|
||||
PerfTestRunner.measureTime({
|
||||
description: "Table layout performance with collapsed borders and no cells with colspan.",
|
||||
run: createTableTestFunction(400, 100, 0)
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1594
tests/blink_perf_tests/perf_tests/layout/latin-ebook-french.html
Normal file
1594
tests/blink_perf_tests/perf_tests/layout/latin-ebook-french.html
Normal file
File diff suppressed because it is too large
Load diff
15602
tests/blink_perf_tests/perf_tests/layout/latin-ebook-resize.html
Normal file
15602
tests/blink_perf_tests/perf_tests/layout/latin-ebook-resize.html
Normal file
File diff suppressed because it is too large
Load diff
15599
tests/blink_perf_tests/perf_tests/layout/latin-ebook.html
Normal file
15599
tests/blink_perf_tests/perf_tests/layout/latin-ebook.html
Normal file
File diff suppressed because it is too large
Load diff
42
tests/blink_perf_tests/perf_tests/layout/layer-overhead.html
Normal file
42
tests/blink_perf_tests/perf_tests/layout/layer-overhead.html
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Tests the overhead of many paint layers - don't add code which iterates over every paint layer upon each layout!</title>
|
||||
<style>
|
||||
#container {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#container > div {
|
||||
overflow: hidden;
|
||||
}
|
||||
#target {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
top: 0px;
|
||||
}
|
||||
</style>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<body>
|
||||
<pre id="log"></pre>
|
||||
<div id="container"></div>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
let container = document.getElementById('container');
|
||||
for (let i = 0; i < 50000; i++) {
|
||||
container.appendChild(document.createElement('div'));
|
||||
}
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: 'Measures performance of many paint layers existing in the DOM',
|
||||
run: () => {
|
||||
let target = document.getElementById('target');
|
||||
target.style.top = '10px';
|
||||
PerfTestRunner.forceLayout();
|
||||
target.style.top = '0px';
|
||||
PerfTestRunner.forceLayout();
|
||||
},
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Performance tester for non-overlaping 2D layers</title>
|
||||
<style>
|
||||
.container {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 1px solid #AAA;
|
||||
margin: 0 auto 5px;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
background: red;
|
||||
}
|
||||
|
||||
.composited {
|
||||
-webkit-transform: translateZ(1px);
|
||||
}
|
||||
</style>
|
||||
<script src="../resources/runner.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<pre id="log"></pre>
|
||||
<script>
|
||||
function createTestFunction(count) {
|
||||
return function() {
|
||||
var container = document.createElement("div");
|
||||
for(i = 0; i < count; ++i) {
|
||||
var outer = document.createElement('div');
|
||||
outer.className = 'container';
|
||||
var inner = document.createElement('div');
|
||||
inner.className = 'box';
|
||||
if (i == 0) {
|
||||
// Use at least one 3D layer to trigger the overlap map checking.
|
||||
inner.className += " composited";
|
||||
}
|
||||
outer.appendChild(inner);
|
||||
container.appendChild(outer);
|
||||
}
|
||||
document.body.appendChild(container);
|
||||
PerfTestRunner.forceLayout();
|
||||
container.remove();
|
||||
}
|
||||
}
|
||||
PerfTestRunner.measureTime({
|
||||
description: "Measures performance of non-overlapping 2D layers.",
|
||||
run: createTestFunction(5000)
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Performance tester for non-overlaping 3D layers</title>
|
||||
<style>
|
||||
.container {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 1px solid #AAA;
|
||||
margin: 0 auto 5px;
|
||||
-webkit-perspective: 400px;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
background: red;
|
||||
-webkit-transform: translateZ( -200px );
|
||||
}
|
||||
</style>
|
||||
<script src="../resources/runner.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<pre id="log"></pre>
|
||||
<script>
|
||||
function createTestFunction(count) {
|
||||
return function() {
|
||||
var container = document.createElement("div");
|
||||
for(i = 0; i < count; ++i) {
|
||||
var outer = document.createElement('div');
|
||||
outer.className = 'container';
|
||||
var inner = document.createElement('div');
|
||||
inner.className = 'box';
|
||||
outer.appendChild(inner);
|
||||
container.appendChild(outer);
|
||||
}
|
||||
document.body.appendChild(container);
|
||||
PerfTestRunner.forceLayout();
|
||||
container.remove();
|
||||
}
|
||||
}
|
||||
PerfTestRunner.measureTime({
|
||||
description: "Measures performance of non-overlapping 3D layers.",
|
||||
run: createTestFunction(5000)
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script src="resources/line-layout-perf-test.js"></script>
|
||||
<style>
|
||||
#parent {
|
||||
width: 400px;
|
||||
}
|
||||
#container {
|
||||
width: fit-content;
|
||||
word-break: break-word;
|
||||
}
|
||||
</style>
|
||||
<body onload="run()">
|
||||
<div id="parent">
|
||||
<div id="container"></div>
|
||||
</div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
function run() {
|
||||
var test = new LineLayoutPerfTest(container);
|
||||
test.lineCount = 2000;
|
||||
test.run('Measures performance of "width: fit-content" of long text.');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script src="resources/line-layout-perf-test.js"></script>
|
||||
<style>
|
||||
#parent {
|
||||
width: 400px;
|
||||
}
|
||||
#container {
|
||||
width: fit-content;
|
||||
}
|
||||
</style>
|
||||
<body onload="run()">
|
||||
<div id="parent">
|
||||
<div id="container"></div>
|
||||
</div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
function run() {
|
||||
var test = new LineLayoutPerfTest(container);
|
||||
test.lineCount = 10000;
|
||||
test.run('Measures performance of "width: fit-content" of long text.');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Line height calculation performance test</title>
|
||||
<script src="../resources/runner.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<pre id="log"></pre>
|
||||
<div id="target" style="width: 300px; display: none;">
|
||||
</div>
|
||||
<script>
|
||||
var target = document.getElementById("target");
|
||||
var style = target.style;
|
||||
var rows = 10000;
|
||||
var el = document.createElement('p');
|
||||
el.innerHTML = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut elit lacus, non convallis odio. Integer facilisis, dolor quis porttitor auctor\n';
|
||||
for (var i = 0; i < rows; ++i) {
|
||||
var e = el.cloneNode(true);
|
||||
target.appendChild(e);
|
||||
}
|
||||
function test() {
|
||||
style.display = "block";
|
||||
style.width = "280px";
|
||||
PerfTestRunner.forceLayout();
|
||||
style.width = "300px";
|
||||
PerfTestRunner.forceLayout();
|
||||
style.width = "290px";
|
||||
PerfTestRunner.forceLayout();
|
||||
style.display = "none";
|
||||
}
|
||||
|
||||
PerfTestRunner.measureTime({
|
||||
description: "Measures performance of line-height calculation in layout.",
|
||||
run: test
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Performance test for appending inline items one at a time and setting selection</title>
|
||||
<meta charset="utf-8">
|
||||
<script src="../resources/runner.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container"></div>
|
||||
<script>
|
||||
const pangrams = [
|
||||
'Amazingly few discotheques provide jukeboxes.',
|
||||
'All questions asked by five watched experts amaze the judge.',
|
||||
'Pack my box with five dozen liquor jugs.',
|
||||
'Sphinx of black quartz, judge my vow!',
|
||||
'My faxed joke won a pager in the cable TV quiz show.'
|
||||
];
|
||||
|
||||
function addItem(container, text) {
|
||||
container.appendChild(document.createTextNode(text));
|
||||
container.appendChild(document.createElement('br'));
|
||||
}
|
||||
|
||||
function test() {
|
||||
const container = document.createElement('div');
|
||||
document.body.appendChild(container);
|
||||
for (var i = 0; i < 100; i++) {
|
||||
addItem(container, i + ') ' + pangrams[i % 5]);
|
||||
PerfTestRunner.forceLayout();
|
||||
getSelection().collapse(container.lastChild, 0);
|
||||
getSelection().removeAllRanges();
|
||||
}
|
||||
document.body.removeChild(container);
|
||||
}
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: 'Measures performance of appending inline ' +
|
||||
'items one at a time and setting selection',
|
||||
run: test
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Performance test for appending inline items one at a time</title>
|
||||
<meta charset="utf-8">
|
||||
<script src="../resources/runner.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container"></div>
|
||||
<script>
|
||||
var pangrams = [
|
||||
'Amazingly few discotheques provide jukeboxes.',
|
||||
'All questions asked by five watched experts amaze the judge.',
|
||||
'Pack my box with five dozen liquor jugs.',
|
||||
'Sphinx of black quartz, judge my vow!',
|
||||
'My faxed joke won a pager in the cable TV quiz show.'
|
||||
];
|
||||
|
||||
function addItem(container, text) {
|
||||
container.appendChild(document.createTextNode(text));
|
||||
container.appendChild(document.createElement('br'));
|
||||
}
|
||||
|
||||
function test() {
|
||||
var container = document.createElement('div');
|
||||
document.body.appendChild(container);
|
||||
for (var i = 0; i < 100; i++) {
|
||||
addItem(container, i + ') ' + pangrams[i % 5]);
|
||||
PerfTestRunner.forceLayout();
|
||||
}
|
||||
document.body.removeChild(container);
|
||||
}
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: 'Measures performance of appending inline ' +
|
||||
'items one at a time',
|
||||
run: test
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
95
tests/blink_perf_tests/perf_tests/layout/line-layout.html
Normal file
95
tests/blink_perf_tests/perf_tests/layout/line-layout.html
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Line breaking performance test</title>
|
||||
<script src="../resources/runner.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<pre id="log"></pre>
|
||||
<div id="target" style="width: 300px; display: none;">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut elit lacus, non convallis odio. Integer facilisis, dolor quis porttitor auctor, nisi tellus aliquet urna, a dignissim orci nisl in nunc. Vivamus elit risus, sagittis et lacinia quis, blandit ac elit. Suspendisse non turpis vitae lorem molestie imperdiet sit amet in justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In at quam sapien. Nam nunc eros, interdum ut commodo nec, sollicitudin ultrices magna. Mauris eu fringilla massa. Phasellus facilisis augue in lectus luctus scelerisque. Proin quis facilisis lacus. Morbi tempor, mauris vitae posuere scelerisque, turpis massa pulvinar tortor, quis congue dolor eros iaculis elit. Quisque blandit blandit elit, sed suscipit justo scelerisque ut. Aenean sed diam at ligula bibendum rhoncus quis in nunc. Suspendisse semper auctor dui vitae gravida. Fusce et risus in velit ullamcorper placerat. Pellentesque sollicitudin commodo porta. Nam eu enim orci, at euismod ipsum.
|
||||
</p>
|
||||
<p>
|
||||
ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut elit lacus, non convallis odio. Integer facilisis, dolor quis porttitor auctor, nisi tellus aliquet urna, a dignissim orci nisl in nunc. Vivamus elit risus, sagittis et lacinia quis, blandit ac elit. Suspendisse non turpis vitae lorem molestie imperdiet sit amet in justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In at quam sapien. Nam nunc eros, interdum ut commodo nec, sollicitudin ultrices magna. Mauris eu fringilla massa. Phasellus facilisis augue in lectus luctus scelerisque. Proin quis facilisis lacus. Morbi tempor, mauris vitae posuere scelerisque, turpis massa pulvinar tortor, quis congue dolor eros iaculis elit. Quisque blandit blandit elit, sed suscipit justo scelerisque ut. Aenean sed diam at ligula bibendum rhoncus quis in nunc. Suspendisse semper auctor dui vitae gravida. Fusce et risus in velit ullamcorper placerat. Pellentesque sollicitudin commodo porta. Nam eu enim orci, at euismod ipsum.
|
||||
</p>
|
||||
<p>
|
||||
dolor sit amet, consectetur adipiscing elit. Mauris ut elit lacus, non convallis odio. Integer facilisis, dolor quis porttitor auctor, nisi tellus aliquet urna, a dignissim orci nisl in nunc. Vivamus elit risus, sagittis et lacinia quis, blandit ac elit. Suspendisse non turpis vitae lorem molestie imperdiet sit amet in justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In at quam sapien. Nam nunc eros, interdum ut commodo nec, sollicitudin ultrices magna. Mauris eu fringilla massa. Phasellus facilisis augue in lectus luctus scelerisque. Proin quis facilisis lacus. Morbi tempor, mauris vitae posuere scelerisque, turpis massa pulvinar tortor, quis congue dolor eros iaculis elit. Quisque blandit blandit elit, sed suscipit justo scelerisque ut. Aenean sed diam at ligula bibendum rhoncus quis in nunc. Suspendisse semper auctor dui vitae gravida. Fusce et risus in velit ullamcorper placerat. Pellentesque sollicitudin commodo porta. Nam eu enim orci, at euismod ipsum.
|
||||
</p>
|
||||
<p>
|
||||
sit amet, consectetur adipiscing elit. Mauris ut elit lacus, non convallis odio. Integer facilisis, dolor quis porttitor auctor, nisi tellus aliquet urna, a dignissim orci nisl in nunc. Vivamus elit risus, sagittis et lacinia quis, blandit ac elit. Suspendisse non turpis vitae lorem molestie imperdiet sit amet in justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In at quam sapien. Nam nunc eros, interdum ut commodo nec, sollicitudin ultrices magna. Mauris eu fringilla massa. Phasellus facilisis augue in lectus luctus scelerisque. Proin quis facilisis lacus. Morbi tempor, mauris vitae posuere scelerisque, turpis massa pulvinar tortor, quis congue dolor eros iaculis elit. Quisque blandit blandit elit, sed suscipit justo scelerisque ut. Aenean sed diam at ligula bibendum rhoncus quis in nunc. Suspendisse semper auctor dui vitae gravida. Fusce et risus in velit ullamcorper placerat. Pellentesque sollicitudin commodo porta. Nam eu enim orci, at euismod ipsum.
|
||||
</p>
|
||||
<p>
|
||||
amet, consectetur adipiscing elit. Mauris ut elit lacus, non convallis odio. Integer facilisis, dolor quis porttitor auctor, nisi tellus aliquet urna, a dignissim orci nisl in nunc. Vivamus elit risus, sagittis et lacinia quis, blandit ac elit. Suspendisse non turpis vitae lorem molestie imperdiet sit amet in justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In at quam sapien. Nam nunc eros, interdum ut commodo nec, sollicitudin ultrices magna. Mauris eu fringilla massa. Phasellus facilisis augue in lectus luctus scelerisque. Proin quis facilisis lacus. Morbi tempor, mauris vitae posuere scelerisque, turpis massa pulvinar tortor, quis congue dolor eros iaculis elit. Quisque blandit blandit elit, sed suscipit justo scelerisque ut. Aenean sed diam at ligula bibendum rhoncus quis in nunc. Suspendisse semper auctor dui vitae gravida. Fusce et risus in velit ullamcorper placerat. Pellentesque sollicitudin commodo porta. Nam eu enim orci, at euismod ipsum.
|
||||
</p>
|
||||
<p>
|
||||
consectetur adipiscing elit. Mauris ut elit lacus, non convallis odio. Integer facilisis, dolor quis porttitor auctor, nisi tellus aliquet urna, a dignissim orci nisl in nunc. Vivamus elit risus, sagittis et lacinia quis, blandit ac elit. Suspendisse non turpis vitae lorem molestie imperdiet sit amet in justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In at quam sapien. Nam nunc eros, interdum ut commodo nec, sollicitudin ultrices magna. Mauris eu fringilla massa. Phasellus facilisis augue in lectus luctus scelerisque. Proin quis facilisis lacus. Morbi tempor, mauris vitae posuere scelerisque, turpis massa pulvinar tortor, quis congue dolor eros iaculis elit. Quisque blandit blandit elit, sed suscipit justo scelerisque ut. Aenean sed diam at ligula bibendum rhoncus quis in nunc. Suspendisse semper auctor dui vitae gravida. Fusce et risus in velit ullamcorper placerat. Pellentesque sollicitudin commodo porta. Nam eu enim orci, at euismod ipsum.
|
||||
</p>
|
||||
<p>
|
||||
adipiscing elit. Mauris ut elit lacus, non convallis odio. Integer facilisis, dolor quis porttitor auctor, nisi tellus aliquet urna, a dignissim orci nisl in nunc. Vivamus elit risus, sagittis et lacinia quis, blandit ac elit. Suspendisse non turpis vitae lorem molestie imperdiet sit amet in justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In at quam sapien. Nam nunc eros, interdum ut commodo nec, sollicitudin ultrices magna. Mauris eu fringilla massa. Phasellus facilisis augue in lectus luctus scelerisque. Proin quis facilisis lacus. Morbi tempor, mauris vitae posuere scelerisque, turpis massa pulvinar tortor, quis congue dolor eros iaculis elit. Quisque blandit blandit elit, sed suscipit justo scelerisque ut. Aenean sed diam at ligula bibendum rhoncus quis in nunc. Suspendisse semper auctor dui vitae gravida. Fusce et risus in velit ullamcorper placerat. Pellentesque sollicitudin commodo porta. Nam eu enim orci, at euismod ipsum.
|
||||
</p>
|
||||
<p>
|
||||
elit. Mauris ut elit lacus, non convallis odio. Integer facilisis, dolor quis porttitor auctor, nisi tellus aliquet urna, a dignissim orci nisl in nunc. Vivamus elit risus, sagittis et lacinia quis, blandit ac elit. Suspendisse non turpis vitae lorem molestie imperdiet sit amet in justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In at quam sapien. Nam nunc eros, interdum ut commodo nec, sollicitudin ultrices magna. Mauris eu fringilla massa. Phasellus facilisis augue in lectus luctus scelerisque. Proin quis facilisis lacus. Morbi tempor, mauris vitae posuere scelerisque, turpis massa pulvinar tortor, quis congue dolor eros iaculis elit. Quisque blandit blandit elit, sed suscipit justo scelerisque ut. Aenean sed diam at ligula bibendum rhoncus quis in nunc. Suspendisse semper auctor dui vitae gravida. Fusce et risus in velit ullamcorper placerat. Pellentesque sollicitudin commodo porta. Nam eu enim orci, at euismod ipsum.
|
||||
</p>
|
||||
<p>
|
||||
Mauris ut elit lacus, non convallis odio. Integer facilisis, dolor quis porttitor auctor, nisi tellus aliquet urna, a dignissim orci nisl in nunc. Vivamus elit risus, sagittis et lacinia quis, blandit ac elit. Suspendisse non turpis vitae lorem molestie imperdiet sit amet in justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In at quam sapien. Nam nunc eros, interdum ut commodo nec, sollicitudin ultrices magna. Mauris eu fringilla massa. Phasellus facilisis augue in lectus luctus scelerisque. Proin quis facilisis lacus. Morbi tempor, mauris vitae posuere scelerisque, turpis massa pulvinar tortor, quis congue dolor eros iaculis elit. Quisque blandit blandit elit, sed suscipit justo scelerisque ut. Aenean sed diam at ligula bibendum rhoncus quis in nunc. Suspendisse semper auctor dui vitae gravida. Fusce et risus in velit ullamcorper placerat. Pellentesque sollicitudin commodo porta. Nam eu enim orci, at euismod ipsum.
|
||||
</p>
|
||||
<p>
|
||||
ut elit lacus, non convallis odio. Integer facilisis, dolor quis porttitor auctor, nisi tellus aliquet urna, a dignissim orci nisl in nunc. Vivamus elit risus, sagittis et lacinia quis, blandit ac elit. Suspendisse non turpis vitae lorem molestie imperdiet sit amet in justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In at quam sapien. Nam nunc eros, interdum ut commodo nec, sollicitudin ultrices magna. Mauris eu fringilla massa. Phasellus facilisis augue in lectus luctus scelerisque. Proin quis facilisis lacus. Morbi tempor, mauris vitae posuere scelerisque, turpis massa pulvinar tortor, quis congue dolor eros iaculis elit. Quisque blandit blandit elit, sed suscipit justo scelerisque ut. Aenean sed diam at ligula bibendum rhoncus quis in nunc. Suspendisse semper auctor dui vitae gravida. Fusce et risus in velit ullamcorper placerat. Pellentesque sollicitudin commodo porta. Nam eu enim orci, at euismod ipsum.
|
||||
</p>
|
||||
<p>
|
||||
elit lacus, non convallis odio. Integer facilisis, dolor quis porttitor auctor, nisi tellus aliquet urna, a dignissim orci nisl in nunc. Vivamus elit risus, sagittis et lacinia quis, blandit ac elit. Suspendisse non turpis vitae lorem molestie imperdiet sit amet in justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In at quam sapien. Nam nunc eros, interdum ut commodo nec, sollicitudin ultrices magna. Mauris eu fringilla massa. Phasellus facilisis augue in lectus luctus scelerisque. Proin quis facilisis lacus. Morbi tempor, mauris vitae posuere scelerisque, turpis massa pulvinar tortor, quis congue dolor eros iaculis elit. Quisque blandit blandit elit, sed suscipit justo scelerisque ut. Aenean sed diam at ligula bibendum rhoncus quis in nunc. Suspendisse semper auctor dui vitae gravida. Fusce et risus in velit ullamcorper placerat. Pellentesque sollicitudin commodo porta. Nam eu enim orci, at euismod ipsum.
|
||||
</p>
|
||||
<p>
|
||||
lacus, non convallis odio. Integer facilisis, dolor quis porttitor auctor, nisi tellus aliquet urna, a dignissim orci nisl in nunc. Vivamus elit risus, sagittis et lacinia quis, blandit ac elit. Suspendisse non turpis vitae lorem molestie imperdiet sit amet in justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In at quam sapien. Nam nunc eros, interdum ut commodo nec, sollicitudin ultrices magna. Mauris eu fringilla massa. Phasellus facilisis augue in lectus luctus scelerisque. Proin quis facilisis lacus. Morbi tempor, mauris vitae posuere scelerisque, turpis massa pulvinar tortor, quis congue dolor eros iaculis elit. Quisque blandit blandit elit, sed suscipit justo scelerisque ut. Aenean sed diam at ligula bibendum rhoncus quis in nunc. Suspendisse semper auctor dui vitae gravida. Fusce et risus in velit ullamcorper placerat. Pellentesque sollicitudin commodo porta. Nam eu enim orci, at euismod ipsum.
|
||||
</p>
|
||||
<p>
|
||||
non convallis odio. Integer facilisis, dolor quis porttitor auctor, nisi tellus aliquet urna, a dignissim orci nisl in nunc. Vivamus elit risus, sagittis et lacinia quis, blandit ac elit. Suspendisse non turpis vitae lorem molestie imperdiet sit amet in justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In at quam sapien. Nam nunc eros, interdum ut commodo nec, sollicitudin ultrices magna. Mauris eu fringilla massa. Phasellus facilisis augue in lectus luctus scelerisque. Proin quis facilisis lacus. Morbi tempor, mauris vitae posuere scelerisque, turpis massa pulvinar tortor, quis congue dolor eros iaculis elit. Quisque blandit blandit elit, sed suscipit justo scelerisque ut. Aenean sed diam at ligula bibendum rhoncus quis in nunc. Suspendisse semper auctor dui vitae gravida. Fusce et risus in velit ullamcorper placerat. Pellentesque sollicitudin commodo porta. Nam eu enim orci, at euismod ipsum.
|
||||
</p>
|
||||
<p>
|
||||
convallis odio. Integer facilisis, dolor quis porttitor auctor, nisi tellus aliquet urna, a dignissim orci nisl in nunc. Vivamus elit risus, sagittis et lacinia quis, blandit ac elit. Suspendisse non turpis vitae lorem molestie imperdiet sit amet in justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In at quam sapien. Nam nunc eros, interdum ut commodo nec, sollicitudin ultrices magna. Mauris eu fringilla massa. Phasellus facilisis augue in lectus luctus scelerisque. Proin quis facilisis lacus. Morbi tempor, mauris vitae posuere scelerisque, turpis massa pulvinar tortor, quis congue dolor eros iaculis elit. Quisque blandit blandit elit, sed suscipit justo scelerisque ut. Aenean sed diam at ligula bibendum rhoncus quis in nunc. Suspendisse semper auctor dui vitae gravida. Fusce et risus in velit ullamcorper placerat. Pellentesque sollicitudin commodo porta. Nam eu enim orci, at euismod ipsum.
|
||||
</p>
|
||||
<p>
|
||||
odio. Integer facilisis, dolor quis porttitor auctor, nisi tellus aliquet urna, a dignissim orci nisl in nunc. Vivamus elit risus, sagittis et lacinia quis, blandit ac elit. Suspendisse non turpis vitae lorem molestie imperdiet sit amet in justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In at quam sapien. Nam nunc eros, interdum ut commodo nec, sollicitudin ultrices magna. Mauris eu fringilla massa. Phasellus facilisis augue in lectus luctus scelerisque. Proin quis facilisis lacus. Morbi tempor, mauris vitae posuere scelerisque, turpis massa pulvinar tortor, quis congue dolor eros iaculis elit. Quisque blandit blandit elit, sed suscipit justo scelerisque ut. Aenean sed diam at ligula bibendum rhoncus quis in nunc. Suspendisse semper auctor dui vitae gravida. Fusce et risus in velit ullamcorper placerat. Pellentesque sollicitudin commodo porta. Nam eu enim orci, at euismod ipsum.
|
||||
</p>
|
||||
<p>
|
||||
Integer facilisis, dolor quis porttitor auctor, nisi tellus aliquet urna, a dignissim orci nisl in nunc. Vivamus elit risus, sagittis et lacinia quis, blandit ac elit. Suspendisse non turpis vitae lorem molestie imperdiet sit amet in justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In at quam sapien. Nam nunc eros, interdum ut commodo nec, sollicitudin ultrices magna. Mauris eu fringilla massa. Phasellus facilisis augue in lectus luctus scelerisque. Proin quis facilisis lacus. Morbi tempor, mauris vitae posuere scelerisque, turpis massa pulvinar tortor, quis congue dolor eros iaculis elit. Quisque blandit blandit elit, sed suscipit justo scelerisque ut. Aenean sed diam at ligula bibendum rhoncus quis in nunc. Suspendisse semper auctor dui vitae gravida. Fusce et risus in velit ullamcorper placerat. Pellentesque sollicitudin commodo porta. Nam eu enim orci, at euismod ipsum.
|
||||
</p>
|
||||
<p>
|
||||
facilisis, dolor quis porttitor auctor, nisi tellus aliquet urna, a dignissim orci nisl in nunc. Vivamus elit risus, sagittis et lacinia quis, blandit ac elit. Suspendisse non turpis vitae lorem molestie imperdiet sit amet in justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In at quam sapien. Nam nunc eros, interdum ut commodo nec, sollicitudin ultrices magna. Mauris eu fringilla massa. Phasellus facilisis augue in lectus luctus scelerisque. Proin quis facilisis lacus. Morbi tempor, mauris vitae posuere scelerisque, turpis massa pulvinar tortor, quis congue dolor eros iaculis elit. Quisque blandit blandit elit, sed suscipit justo scelerisque ut. Aenean sed diam at ligula bibendum rhoncus quis in nunc. Suspendisse semper auctor dui vitae gravida. Fusce et risus in velit ullamcorper placerat. Pellentesque sollicitudin commodo porta. Nam eu enim orci, at euismod ipsum.
|
||||
</p>
|
||||
<p>
|
||||
dolor quis porttitor auctor, nisi tellus aliquet urna, a dignissim orci nisl in nunc. Vivamus elit risus, sagittis et lacinia quis, blandit ac elit. Suspendisse non turpis vitae lorem molestie imperdiet sit amet in justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In at quam sapien. Nam nunc eros, interdum ut commodo nec, sollicitudin ultrices magna. Mauris eu fringilla massa. Phasellus facilisis augue in lectus luctus scelerisque. Proin quis facilisis lacus. Morbi tempor, mauris vitae posuere scelerisque, turpis massa pulvinar tortor, quis congue dolor eros iaculis elit. Quisque blandit blandit elit, sed suscipit justo scelerisque ut. Aenean sed diam at ligula bibendum rhoncus quis in nunc. Suspendisse semper auctor dui vitae gravida. Fusce et risus in velit ullamcorper placerat. Pellentesque sollicitudin commodo porta. Nam eu enim orci, at euismod ipsum.
|
||||
</p>
|
||||
<p>
|
||||
quis porttitor auctor, nisi tellus aliquet urna, a dignissim orci nisl in nunc. Vivamus elit risus, sagittis et lacinia quis, blandit ac elit. Suspendisse non turpis vitae lorem molestie imperdiet sit amet in justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In at quam sapien. Nam nunc eros, interdum ut commodo nec, sollicitudin ultrices magna. Mauris eu fringilla massa. Phasellus facilisis augue in lectus luctus scelerisque. Proin quis facilisis lacus. Morbi tempor, mauris vitae posuere scelerisque, turpis massa pulvinar tortor, quis congue dolor eros iaculis elit. Quisque blandit blandit elit, sed suscipit justo scelerisque ut. Aenean sed diam at ligula bibendum rhoncus quis in nunc. Suspendisse semper auctor dui vitae gravida. Fusce et risus in velit ullamcorper placerat. Pellentesque sollicitudin commodo porta. Nam eu enim orci, at euismod ipsum.
|
||||
</p>
|
||||
<p>
|
||||
porttitor auctor, nisi tellus aliquet urna, a dignissim orci nisl in nunc. Vivamus elit risus, sagittis et lacinia quis, blandit ac elit. Suspendisse non turpis vitae lorem molestie imperdiet sit amet in justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In at quam sapien. Nam nunc eros, interdum ut commodo nec, sollicitudin ultrices magna. Mauris eu fringilla massa. Phasellus facilisis augue in lectus luctus scelerisque. Proin quis facilisis lacus. Morbi tempor, mauris vitae posuere scelerisque, turpis massa pulvinar tortor, quis congue dolor eros iaculis elit. Quisque blandit blandit elit, sed suscipit justo scelerisque ut. Aenean sed diam at ligula bibendum rhoncus quis in nunc. Suspendisse semper auctor dui vitae gravida. Fusce et risus in velit ullamcorper placerat. Pellentesque sollicitudin commodo porta. Nam eu enim orci, at euismod ipsum.
|
||||
</p>
|
||||
<p>
|
||||
auctor, nisi tellus aliquet urna, a dignissim orci nisl in nunc. Vivamus elit risus, sagittis et lacinia quis, blandit ac elit. Suspendisse non turpis vitae lorem molestie imperdiet sit amet in justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In at quam sapien. Nam nunc eros, interdum ut commodo nec, sollicitudin ultrices magna. Mauris eu fringilla massa. Phasellus facilisis augue in lectus luctus scelerisque. Proin quis facilisis lacus. Morbi tempor, mauris vitae posuere scelerisque, turpis massa pulvinar tortor, quis congue dolor eros iaculis elit. Quisque blandit blandit elit, sed suscipit justo scelerisque ut. Aenean sed diam at ligula bibendum rhoncus quis in nunc. Suspendisse semper auctor dui vitae gravida. Fusce et risus in velit ullamcorper placerat. Pellentesque sollicitudin commodo porta. Nam eu enim orci, at euismod ipsum.
|
||||
</p>
|
||||
</div>
|
||||
<script>
|
||||
var target = document.getElementById("target");
|
||||
var style = target.style;
|
||||
|
||||
function test() {
|
||||
style.display = "block";
|
||||
style.width = "280px";
|
||||
PerfTestRunner.forceLayout();
|
||||
style.width = "300px";
|
||||
PerfTestRunner.forceLayout();
|
||||
style.width = "290px";
|
||||
PerfTestRunner.forceLayout();
|
||||
style.display = "none";
|
||||
}
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Measures performance of line breaking in layout.",
|
||||
run: test
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script src="resources/line-layout-perf-test.js"></script>
|
||||
<style>
|
||||
#container {
|
||||
width: 400px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
<body onload="run()">
|
||||
<div id="container"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
function run() {
|
||||
var test = new LineLayoutPerfTest(container);
|
||||
test.spanCount = 0;
|
||||
test.lineCount = 1000;
|
||||
test.wordSeparator = ' '; // Make all word separators collapsible.
|
||||
test.run('Measures performance of "white-space: nowrap" with collapsible spaces.');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script src="resources/line-layout-perf-test.js"></script>
|
||||
<style>
|
||||
#container {
|
||||
width: 400px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
<body onload="run()">
|
||||
<div id="container"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
function run() {
|
||||
var test = new LineLayoutPerfTest(container);
|
||||
test.spanCount = 10;
|
||||
test.lineCount = 100;
|
||||
test.wordSeparator = ' '; // Make all word separators collapsible.
|
||||
test.run('Measures performance of "white-space: nowrap" with multiple spans and collapsible spaces.');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script src="resources/line-layout-perf-test.js"></script>
|
||||
<style>
|
||||
#container {
|
||||
width: 400px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
<body onload="run()">
|
||||
<div id="container"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
function run() {
|
||||
var test = new LineLayoutPerfTest(container);
|
||||
test.spanCount = 0;
|
||||
test.lineCount = 10000;
|
||||
test.run('Measures performance of "white-space: nowrap".');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
#target > div { height:10px; }
|
||||
</style>
|
||||
<div id="target" style="width:100px;">
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
</div>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script>
|
||||
var target = document.getElementById("target");
|
||||
var style = target.style;
|
||||
|
||||
function test() {
|
||||
style.width = "101px";
|
||||
PerfTestRunner.forceLayout();
|
||||
style.width = "100px";
|
||||
PerfTestRunner.forceLayout();
|
||||
}
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Measures performance of relayout of a container with many auto inline-size children.",
|
||||
run: test
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
#target > div { width:50px; height:10px; }
|
||||
</style>
|
||||
<div id="target" style="width:100px;">
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
</div>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script>
|
||||
var target = document.getElementById("target");
|
||||
var style = target.style;
|
||||
|
||||
function test() {
|
||||
style.width = "101px";
|
||||
PerfTestRunner.forceLayout();
|
||||
style.width = "100px";
|
||||
PerfTestRunner.forceLayout();
|
||||
}
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Measures performance of relayout of a container with many fixed inline-size children.",
|
||||
run: test
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
#target > div { width:50px; height:10px; }
|
||||
</style>
|
||||
<pre id="log"></pre>
|
||||
<div id="target" style="width:100px;">
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
|
||||
</div>
|
||||
<script src="../resources/runner.js"></script>
|
||||
<script>
|
||||
var target = document.getElementById("target");
|
||||
var style = target.style;
|
||||
|
||||
function test() {
|
||||
style.display = "block";
|
||||
PerfTestRunner.forceLayout();
|
||||
style.display = "none";
|
||||
PerfTestRunner.forceLayout();
|
||||
}
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Measures performance of rebuilding the layout box tree + layout.",
|
||||
run: test
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="../../resources/runner.js"></script>
|
||||
<pre id="log"></pre>
|
||||
<!-- We only want to measure layout performance, so try to avoid irrelevant things, such as painting. -->
|
||||
<div style="overflow:hidden; width:0; height:0;">
|
||||
<div id="target" style="display:none; columns:5; width:40em; orphans:1; widows:1;">
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
<div style="break-before:column;"></div>
|
||||
<br><br><br><br><br><br><br>
|
||||
<div style="break-before:column;"></div>
|
||||
<br><br><br><br><br><br><br>
|
||||
<div style="break-before:column;"></div>
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var target = document.getElementById("target");
|
||||
var style = target.style;
|
||||
|
||||
function test() {
|
||||
style.display = "block";
|
||||
PerfTestRunner.forceLayout();
|
||||
style.display = "none";
|
||||
PerfTestRunner.forceLayout();
|
||||
}
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Measures performance of multicol balancing with forced breaks.",
|
||||
run: test
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="../../resources/runner.js"></script>
|
||||
<style>
|
||||
ul li li::marker {
|
||||
content:'x';
|
||||
font-size: 120%;
|
||||
}
|
||||
#target > * {
|
||||
break-before: avoid;
|
||||
break-inside: avoid;
|
||||
}
|
||||
</style>
|
||||
<pre id="log"></pre>
|
||||
<div style="overflow:hidden; width:0; height:0;">
|
||||
<ul id="target" style="columns:3; orphans:1; widows:1; width:40em;">
|
||||
<li>
|
||||
<ul>
|
||||
<li>List item 1</li>
|
||||
<li>List item 2</li>
|
||||
<li>List item 3</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul>
|
||||
<li>List item 4</li>
|
||||
<li>List item 5</li>
|
||||
<li>List item 6</li>
|
||||
<li>List item 7</li>
|
||||
<li>List item 8</li>
|
||||
<li>List item 9</li>
|
||||
<li>List item 10</li>
|
||||
<li>List item 11</li>
|
||||
<li>List item 12</li>
|
||||
<li>List item 13</li>
|
||||
<li>List item 14</li>
|
||||
<li>List item 15</li>
|
||||
<li>List item 16</li>
|
||||
<li>List item 17</li>
|
||||
<li>List item 18</li>
|
||||
<li>List item 19</li>
|
||||
<li>List item 20</li>
|
||||
<li>List item 21</li>
|
||||
<li>List item 22</li>
|
||||
<li>List item 23</li>
|
||||
<li>List item 24</li>
|
||||
<li>List item 25</li>
|
||||
<li>List item 26</li>
|
||||
<li>List item 27</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul>
|
||||
<li>List item 28</li>
|
||||
<li>List item 29</li>
|
||||
<li>List item 30</li>
|
||||
<li>List item 31</li>
|
||||
<li>List item 32</li>
|
||||
<li>List item 33</li>
|
||||
<li>List item 34</li>
|
||||
<li>List item 35</li>
|
||||
<li>List item 36</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul>
|
||||
<li>List item 37</li>
|
||||
<li>List item 38</li>
|
||||
<li>List item 39</li>
|
||||
<li>List item 40</li>
|
||||
<li>List item 41</li>
|
||||
<li>List item 42</li>
|
||||
<li>List item 43</li>
|
||||
<li>List item 44</li>
|
||||
<li>List item 45</li>
|
||||
<li>List item 46</li>
|
||||
<li>List item 47</li>
|
||||
<li>List item 48</li>
|
||||
<li>List item 49</li>
|
||||
<li>List item 50</li>
|
||||
<li>List item 51</li>
|
||||
<li>List item 52</li>
|
||||
<li>List item 53</li>
|
||||
<li>List item 54</li>
|
||||
<li>List item 55</li>
|
||||
<li>List item 56</li>
|
||||
<li>List item 57</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<h4>Heading</h4>
|
||||
<ul>
|
||||
<li>List item 58</li>
|
||||
<li>List item 59</li>
|
||||
<li>List item 60</li>
|
||||
<li>List item 61</li>
|
||||
<li>List item 62</li>
|
||||
<li>List item 63</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<script>
|
||||
var target = document.getElementById("target");
|
||||
var style = target.style;
|
||||
|
||||
function test() {
|
||||
style.display = "block";
|
||||
PerfTestRunner.forceLayout();
|
||||
style.display = "none";
|
||||
PerfTestRunner.forceLayout();
|
||||
}
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Lists items with tall markers in balanced multicol.",
|
||||
run: test
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="../../resources/runner.js"></script>
|
||||
<style>
|
||||
#target .table {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
.table > div {
|
||||
display: table-row;
|
||||
}
|
||||
.table > div > div {
|
||||
display: table-cell;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
</style>
|
||||
<pre id="log"></pre>
|
||||
<div style="overflow:hidden; width:0; height:0;">
|
||||
<div id="target" style="columns:3; orphans:1; widows:1; width:40em; line-height: 20px;">
|
||||
<div style="break-inside: avoid;">
|
||||
<div style="height:30px;"></div>
|
||||
<div class="table">
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="break-inside: avoid;">
|
||||
<div style="height:30px;"></div>
|
||||
<div class="table">
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="break-inside: avoid;">
|
||||
<div style="height:30px;"></div>
|
||||
<div class="table">
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="break-inside: avoid;">
|
||||
<div style="height:30px;"></div>
|
||||
<div class="table">
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="break-inside: avoid;">
|
||||
<div style="height:30px;"></div>
|
||||
<div class="table">
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
<div><div><br></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var target = document.getElementById("target");
|
||||
var style = target.style;
|
||||
|
||||
function test() {
|
||||
style.display = "block";
|
||||
PerfTestRunner.forceLayout();
|
||||
style.display = "none";
|
||||
PerfTestRunner.forceLayout();
|
||||
}
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Lists items with tall markers in balanced multicol.",
|
||||
run: test
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="../../resources/runner.js"></script>
|
||||
<pre id="log"></pre>
|
||||
<!-- We only want to measure layout performance, so try to avoid irrelevant things, such as painting. -->
|
||||
<div style="overflow:hidden; width:0; height:0;">
|
||||
<div id="target" style="columns:2; column-fill:auto; height:100px;">
|
||||
<div style="display:table;">
|
||||
<div style="display:table;">
|
||||
<div style="display:table;">
|
||||
<div style="display:table;">
|
||||
<div style="display:table;">
|
||||
<div style="display:table;">
|
||||
<div style="display:table;">
|
||||
<div style="display:table;">
|
||||
<div style="display:table;">
|
||||
<div style="display:table;">
|
||||
<div style="display:table;">
|
||||
<div style="display:table;">
|
||||
<div style="display:table;">
|
||||
<div style="display:table;">
|
||||
<div style="display:table;">
|
||||
<div style="display:table;">
|
||||
<div style="height:150px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var target = document.getElementById("target");
|
||||
var style = target.style;
|
||||
|
||||
function test() {
|
||||
style.display = "none";
|
||||
PerfTestRunner.forceLayout();
|
||||
style.display = "block";
|
||||
PerfTestRunner.forceLayout();
|
||||
}
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Measures performance of multicol layout in deeply nested tables.",
|
||||
run: test
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="../../resources/runner.js"></script>
|
||||
<style>
|
||||
#target div { display:table; }
|
||||
#target span { display:block; break-inside:avoid; height:2em; }
|
||||
</style>
|
||||
<pre id="log"></pre>
|
||||
<!-- We only want to measure layout performance, so try to avoid irrelevant things, such as painting. -->
|
||||
<div style="overflow:hidden; width:0; height:0;">
|
||||
<div id="target" style="columns:3; column-fill:auto; width:40em; height:13em; line-height:2em;">
|
||||
<div>
|
||||
<span></span>
|
||||
<div>
|
||||
<span></span>
|
||||
<div>
|
||||
<span></span>
|
||||
<div>
|
||||
<span></span>
|
||||
<div>
|
||||
<span></span>
|
||||
<div>
|
||||
<span></span>
|
||||
<div>
|
||||
<span></span>
|
||||
<div>
|
||||
<span></span>
|
||||
<div>
|
||||
<span></span>
|
||||
<div>
|
||||
<span></span>
|
||||
<div>
|
||||
<span></span>
|
||||
<div>
|
||||
<span></span>
|
||||
<div>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var target = document.getElementById("target");
|
||||
var style = target.style;
|
||||
|
||||
function test() {
|
||||
style.width = "41em";
|
||||
PerfTestRunner.forceLayout();
|
||||
style.width = "40em";
|
||||
PerfTestRunner.forceLayout();
|
||||
}
|
||||
|
||||
PerfTestRunner.measureRunsPerSecond({
|
||||
description: "Measures performance of multicol layout in deeply nested tables.",
|
||||
run: test
|
||||
});
|
||||
</script>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue