145099 2015-05-16 15:58:17 -0700 [css-scroll-snap] Support masonry layouts and more advanced snappoint selection 2021-07-22 01:41:34 -0700 1 1 1 Unclassified WebKit Layout and Rendering 528+ (Nightly build) All All NEW https://bugs.webkit.org/show_bug.cgi?id=142523 InRadar P2 Normal --- 219345 220765 220915 221030 227949 218115 1 bfulgham webkit-unassigned bfulgham mrobinson sam simon.fraser webkit-bug-importer wenson_hsieh oldest_to_newest 1095452 0 bfulgham 2015-05-16 15:58:17 -0700 The existing two-axis scroll snap implementation works fine for a regular 2-dimensional grid, but fails if we want to support irregularly-shaped containers of elements (e.g., "Masonry-style layout"). To better accommodate this type of layout, we need to switch from disparate vectors of x and y snap points, and instead consider snap points as 2-dimensional entities. The downside of this approach is that very large grids would consume much more memory (i.e, we go from 2N memory use to N^2). However, I doubt that we will encounter scroll snap documents of sufficient size for this to be a problem. 1095453 1 webkit-bug-importer 2015-05-16 15:58:54 -0700 <rdar://problem/20989900> 1095512 2 sam 2015-05-17 12:06:17 -0700 (In reply to comment #0) > The downside of this approach is that very large grids would consume much > more memory (i.e, we go from 2N memory use to N^2). However, I doubt that we > will encounter scroll snap documents of sufficient size for this to be a > problem. Scary statement! What does the N used above represent? 1095811 3 bfulgham 2015-05-18 21:03:21 -0700 (In reply to comment #2) > (In reply to comment #0) > > The downside of this approach is that very large grids would consume much > > more memory (i.e, we go from 2N memory use to N^2). However, I doubt that we > > will encounter scroll snap documents of sufficient size for this to be a > > problem. > > Scary statement! What does the N used above represent? N would be the number of elements contained inside the scroll region. E.g., if we had a grid of photos or something, N would be the number of images. 1095812 4 bfulgham 2015-05-18 21:04:36 -0700 (In reply to comment #3) > (In reply to comment #2) > > (In reply to comment #0) > > > The downside of this approach is that very large grids would consume much > > > more memory (i.e, we go from 2N memory use to N^2). However, I doubt that we > > > will encounter scroll snap documents of sufficient size for this to be a > > > problem. > > > > Scary statement! What does the N used above represent? > > N would be the number of elements contained inside the scroll region. E.g., > if we had a grid of photos or something, N would be the number of images. Just to be more precise, each 'N' would probably represent a pair of float values representing the "scroll-snap-coordinate" of the element. 1095957 5 bfulgham 2015-05-19 09:06:38 -0700 Sam dropped by and helped me understand that my proposed data structure change would be at worst N, while our existing implementation is some smaller value proportional to the number of horizontal elements plus the number of vertical elements. 1095966 6 bfulgham 2015-05-19 09:27:01 -0700 Note: The wording in the CSS Scroll Snap specification <http://dev.w3.org/csswg/css-snappoints/#propdef-scroll-snap-coordinate> indicates that we should support having multiple snap coordinates in a single element. To properly achieve this (without affecting other elements in the container) we will need to implement a data structure like I am proposing here. 1102161 7 254933 bfulgham 2015-06-15 22:12:23 -0700 Created attachment 254933 Example Masonry Grid 1102345 8 254968 wenson_hsieh 2015-06-16 14:22:15 -0700 Created attachment 254968 Simple masonry example using overflow div HTML page resembling Brent's picture above. The current implementation computes snap offsets instead of actual points, producing extra snap points. 1775253 9 mrobinson 2021-07-07 07:17:02 -0700 Renaming this bug to reference handling masonry layouts. There are two pieces to this: * Not selecting snap points when a scroll wouldn't bring its snap area onscreen. * When a bidirectional scroll chooses two incompatible snap points for the x and y axis, choosing the snap point that is the shortest distance away from the original scroll position. 1775255 10 mrobinson 2021-07-07 07:18:13 -0700 *** Bug 145157 has been marked as a duplicate of this bug. *** 254933 2015-06-15 22:12:23 -0700 2015-06-15 22:12:23 -0700 Example Masonry Grid desired_grid.pdf application/pdf 10972 bfulgham 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 6RiVlka1dOBSq/mzEmbLJWTPF6MqK2lGhTkcE0APj8g/KFCXcy8ozJRtota0aCsDnpX6bxEUVxXT uJzDoEt6O8OFB0d93f6BIWrt2cZUk1+jTBWNOpxBkYlz0IuUjPndFAD7Lj33Z2ts6lh6LvfyjTX2 a7eYbnmpxwNsj2oT6q4fYPMKcv0A21xieE4M+5GHyE9KGKeREtYxbD8CNxgo4ScuUo0EXsV6VGhv s6LLh+hGwv40vkNCPmW3b++33sK3t+LP/wApi/OOCmVuZHN0cmVhbQplbmRvYmoKNSAwIG9iagox OTQ3CmVuZG9iagoyIDAgb2JqCjw8IC9UeXBlIC9QYWdlIC9QYXJlbnQgMyAwIFIgL1Jlc291cmNl cyA2IDAgUiAvQ29udGVudHMgNCAwIFIgL01lZGlhQm94IFswIDAgNTQzIDQwNF0KPj4KZW5kb2Jq CjYgMCBvYmoKPDwgL1Byb2NTZXQgWyAvUERGIC9UZXh0IF0gL0NvbG9yU3BhY2UgPDwgL0NzMSA3 IDAgUiAvQ3MyIDggMCBSID4+IC9Gb250IDw8Ci9UVDEgOSAwIFIgPj4gPj4KZW5kb2JqCjEwIDAg b2JqCjw8IC9MZW5ndGggMTEgMCBSIC9OIDMgL0FsdGVybmF0ZSAvRGV2aWNlUkdCIC9GaWx0ZXIg L0ZsYXRlRGVjb2RlID4+CnN0cmVhbQp4Aa2Xd1QT2RfH75QkEBJaIAJSQm+C9Cq9CwrSwUZIAoQS QyCo2MuigmsXC1Z0VcS2FkDWgtiVRbD3RV1UlHWxYEPl9yYU93h2//vNOe/NJ/fdd+d777yZvAFQ c+FLpbm4OkCepFAWGxbIS05J5TH+ABK4oAYqYMQXFEgDYmKi4D+P9zcBowav2VGx/tPt3wc0hKIC AQAWg4bThQWCPMSHAUg9gVRWCEBrQXbTyYVSit8h1pIhgQB0JYoz+1if4vQ+dlD4xMcGIZ9gACUW ny/LBFCl4vOKBJkojqoUsYNEKJYg3oLYV5DFFyJuQzwsL28SYjUWYqv0f8TJ/Afz+emDMfn8zEHu ywXNRBcOFhdIc/lTFT/+n11erhzVS3GYoJ6VJQuPRWctVLddOZMiKUbasWOS9NHRiDURXxCjjPr5 bpY8PAEx5d8pKAhCtUR3GnAQ8oMjEaNa4lx5TkJAPzvxZYgU/vhocWFEfD+nyybF9sfHiyS5o6n1 QcVZmCWKGOBNooKQOGRHGvCiDHFoBGJ1xIeLs+KTECOd+JkiceJoxKqIWwpy4igNVJyHxVlBlF3h I5PHUprNkP1dhiyUyhH5EDp5BYgU8Ql7AV9xLR1k9y/Mig9HdjSXSBYVJFN6FBqEouAQxEgDIRRJ Evq1EWh1BVIxqbkl0lzFWkf+xCZRbhhlR3UmDhQUxQ3MvVooi6fsqIbE42z+SGptIf3Ee2lhDFUf pI0kIQqCIBh4IEctHSZBNoibO2s70a++kVDggwwyQQR2/ZaBGUmKEQnq46AY/gIJ8ikYnBeoGBVB EbJ/HbT2zbWDDMVokWJGDjxFV8gj9Uhf0puMQr0/ak6kB+k5MI+nNqCTHkIPpofTQ+nWAxYQINW5 qMlA/C+2SDQmQtnJUC8ZyOF7PNpTWivtMe0GrY12BxLhT0WU/kwniufKBhQMRh4FbShaX1VEqGIS 6BjwIS2QalcykPRB+pF2kkvqgR3pgjIJIP1Qbq7IOlA9SrV8UNv3Wg7UfcCPUs37R479dlUbVdd+ FekDWaE7OVCJH6N8HxGDEHlF/uhJLCQOEeeJU8RF4hhRCzziJFFHNBHHKe7XHKqoTubg1WIVFc1B OYgHfByqHTocvgz8GsyVjyyUAuoeoGehUDSlEK0/CJoknSoTZ2YV8gLQG1nEi5AI7IfxnBwcXQGo 9zvlA/CWq3hvY9xL3235DQCepejdQL1aeZQXAN8U4OhTAM777zbTN+jxWgZwvEUglxX1+ZHUiQZM 9L+hBbpgCKZghXJyAjfwBn8IgZEQDfGQAhNQ1bMgD6meDNNhDpRAGSyD1bAeNsM22AV74SDUwjE4 BefgMrTADbiH1kY7vIQueA89GIYxMDbGwXQxI8wcs8WcMA/MFwvBorBYLAVLwzIxCSbHpmPzsDJs BbYe24pVYb9iR7FT2EWsFbuDPcI6sDfYZ5zAWbgWboBb4MNxDzwAj8Tj8fF4Jp6PF+Pz8SX4WrwS 34PX4Kfwy/gNvA1/iXcTQKgQXMKYsCM8iCAimkglMggZMZMoJcqJSmIfUY/u9TWijegkPpF0kkPy SDu0PsPJBFJA5pMzycXkenIXWUOeIa+Rj8gu8huNTdOn2dK8aBG0ZFombTKthFZO20E7QjuLnp12 2ns6nc6lW9Ld0bOZQs+mT6Mvpm+k76c30FvpT+jdDAZDl2HL8GFEM/iMQkYJYx1jD+Mk4yqjnfFR SUXJSMlJKVQpVUmiNFepXGm30gmlq0rPlHqU1ZXNlb2Uo5WFylOVlypvV65XvqLcrtzD1GBaMn2Y 8cxs5hzmWuY+5lnmfeZbFRUVExVPlTEqYpXZKmtVDqhcUHmk8omlybJhBbHGseSsJaydrAbWHdZb NpttwfZnp7IL2UvYVezT7Ifsj6ocVXvVCFWh6izVCtUa1auqr9SU1czVAtQmqBWrlasdUrui1qmu rG6hHqTOV5+pXqF+VP2WercGR8NRI1ojT2Oxxm6NixrPNRmaFpohmkLN+ZrbNE9rPuEQHFNOEEfA mcfZzjnLadeia1lqRWhla5Vp7dVq1urS1tR20U7UnqJdoX1cu41LcC24Edxc7lLuQe5N7uchBkMC hoiGLBqyb8jVIR90hur464h0SnX269zQ+azL0w3RzdFdrlur+0CP1LPRG6M3WW+T3lm9zqFaQ72H CoaWDj049K4+rm+jH6s/TX+bfpN+t4GhQZiB1GCdwWmDTkOuob9htuEqwxOGHUYcI18jsdEqo5NG L3javABeLm8t7wyvy1jfONxYbrzVuNm4x8TSJMFkrsl+kwemTFMP0wzTVaaNpl1mRmajzKabVZvd NVc29zDPMl9jft78g4WlRZLFAotai+eWOpYRlsWW1Zb3rdhWflb5VpVW163p1h7WOdYbrVtscBtX myybCpsrtritm63YdqNt6zDaMM9hkmGVw27ZsewC7Irsqu0e2XPto+zn2tfavxpuNjx1+PLh54d/ c3B1yHXY7nDPUdNxpONcx3rHN042TgKnCqfrzmznUOdZznXOr11sXUQum1xuu3JcR7kucG10/erm 7iZz2+fW4W7mnua+wf2Wh5ZHjMdijwueNM9Az1mexzw/ebl5FXod9Prb2847x3u39/MRliNEI7aP eOJj4sP32erT5svzTfPd4tvmZ+zH96v0e+xv6i/03+H/LMA6IDtgT8CrQIdAWeCRwA9BXkEzghqC ieCw4NLg5hDNkISQ9SEPQ01CM0OrQ7vCXMOmhTWE08Ijw5eH34owiBBEVEV0jXQfOWPkmUhWZFzk +sjHUTZRsqj6UfiokaNWjro/2ny0ZHRtNERHRK+MfhBjGZMf89sY+piYMRVjnsY6xk6PPR/HiZsY tzvufXxg/NL4ewlWCfKExkS1xHGJVYkfkoKTViS1JQ9PnpF8OUUvRZxSl8pITUzdkdo9NmTs6rHt 41zHlYy7Od5y/JTxFyfoTcidcHyi2kT+xENptLSktN1pX/jR/Ep+d3pE+ob0LkGQYI3gpdBfuErY IfIRrRA9y/DJWJHxPNMnc2VmR5ZfVnlWpzhIvF78Ojs8e3P2h5zonJ05vblJufvzlPLS8o5KNCU5 kjOTDCdNmdQqtZWWSNvyvfJX53fJImU7CrCC8QV1hVpoq9Mkt5L/JH9U5FtUUfRxcuLkQ1M0pkim NE21mbpo6rPi0OJfppHTBNMapxtPnzP90YyAGVtnYjPTZzbOMp01f1b77LDZu+Yw5+TM+X2uw9wV c9/NS5pXP99g/uz5T34K+6m6RLVEVnJrgfeCzQvJheKFzYucF61b9K1UWHqpzKGsvOzLYsHiSz87 /rz2594lGUual7ot3bSMvkyy7OZyv+W7VmisKF7xZOWolTWreKtKV71bPXH1xXKX8s1rmGvka9rW Rq2tW2e2btm6L+uz1t+oCKzYv0F/w6INHzYKN17d5L9p32aDzWWbP28Rb7m9NWxrTaVFZfk2+rai bU+3J24//4vHL1U79HaU7fi6U7KzbVfsrjNV7lVVu/V3L63Gq+XVHXvG7WnZG7y3bp/dvq37ufvL DsAB+YEXv6b9evNg5MHGQx6H9h02P7zhCOdIaQ1WM7Wmqzartq0upa716MijjfXe9Ud+s/9t5zHj YxXHtY8vPcE8Mf9E78nik90N0obOU5mnnjRObLx3Ovn09TNjzjSfjTx74VzoudPnA86fvOBz4dhF r4tHL3lcqr3sdrmmybXpyO+uvx9pdmuuueJ+pa7Fs6W+dUTriat+V09dC7527nrE9cs3Rt9ovZlw 8/atcbfabgtvP7+Te+f13aK7Pfdm36fdL32g/qD8of7Dyj+s/9jf5tZ2/FHwo6bHcY/vPRE8efln wZ9f2uc/ZT8tf2b0rOq50/NjHaEdLS/Gvmh/KX3Z01nyl8ZfG15ZvTr8t//fTV3JXe2vZa973yx+ q/t25zuXd43dMd0P3+e97/lQ+lH3465PHp/Of076/Kxn8hfGl7Vfrb/Wf4v8dr83r7dXypfxFXsB AvV4RgbAm50A7BS0d2gBYKr2fX8pPLC+b0bEWH+jzD9w3zcaNYD2ELDTHyBhNkBUA8Am1MwRs9CZ 2n7H+wPu7DzYkIU6CjKcnRSAsWRoa/Kxt/etAQCjHuCrrLe3Z2Nv79ftaN9+B6Ahv++7j/KmqwNs 0aWo6RbCH47/AQQmazEKZW5kc3RyZWFtCmVuZG9iagoxMSAwIG9iagozMTI2CmVuZG9iago3IDAg b2JqClsgL0lDQ0Jhc2VkIDEwIDAgUiBdCmVuZG9iagoxMiAwIG9iago8PCAvTGVuZ3RoIDEzIDAg UiAvTiAzIC9BbHRlcm5hdGUgL0RldmljZVJHQiAvRmlsdGVyIC9GbGF0ZURlY29kZSA+PgpzdHJl YW0KeAGFVVuIG1UY/pM5yQq7ztPa1S2kQ710KbtLthXdpbSaW5O0axqy2dUWQbOTk2TM7CTOTNIL fSqC4ourvklBvL0tCILSesHWB/tSqVBWd+siKD60eEEo9EW38TuTZCZZaptlz3zz/d/5b+efGaKB tUK9rvsVoiXDNnPJqPLc0WPKwDr56SEapFEaLKhWPZLNzhJ+Qiuu/b9bP5BPMFcn7mzvV2+5Gyxy SyXy3Qe+VrTUJeATRIGzat20iQaGwU8ft+sCixyGTSQI/KLA5TaGjYYX2/g1R5PPxaA5CyyrlUIR eAV4fLGHL/fgdg5QwE+SG9zUVEX0ImvWSprOHUN7uYe5R3k3uKQ3ULPz24F1yKrOHcZ1DLW/UizE BZ4EXlELiTngR4CvNbWFTAffrtvRHPBjRP6djep8BHg3cKpkHpwHhh+/WWmkuvidU5X8s+C3gf/G WMwc6exdU60Yekk7wd+u8LTob4hIUjQ7nQeGH+mAWcsJPXKQSkUeTwCPA79erR0WOcCn9JnVnBO8 yGftVCUm8hT85ZcKh7LAo8C/cj0p9Igl/Vu3s50cWMjQMyIuYrE4t5x64YeF7Eo+BR5xmW6b+c5e tlzSDqY7+k8qZkrwYu+1uu7MKHIL+M1GTtSOWIHJgplIAsNnIMuNedFPgZu04CsQpxotYlXJoE1S KEdJiuJaJxOWEmmkg+GwcjAcd13NhLPPoip4jZqOzcKadZTtnV2tQmWwBl13tCrFQh9RA54q9AfY iutToRjuGuDK/+OnncuNjp8aG2Fhthf/+9gs28+m2Qwp7Cn2NDvA4mBn2D7XdxZ7uhWJfG4gStvP y4jIHd0Car+IGm0qYP0FihpZroe+riyPNsY8yxnzBU298sbfPb3SsLPqKib6OnrkXj0P/Ba4HljF uh7YcH0ogZ8CG/hbR2+8WmqevdNlcVIaTrTWp9t6Fl1VBJXqzs4ldEFDzbyn5oleH5dOf/mgF22V nXv+6tCl0yVjedRjRRf4q5lbGToz7rHhH8N/hlfD74U/DP8uvS19Kn0lnZc+ly6TIl2QLkpfS99K H0tfuPq7zZB79iQyF3Ml8hbT1a2wt9eYWDkqb5cfluPyDvlRedZVKfKIPCWn5F2wbHfPzZtvpbdy 9OUoonX7c+dY4lnRXE84A9/9mADNi9g3A/PIWKPj8Gmi32LeDDoJbe+T16mIhdgUS2+Z7mkx813f wUQwHoyQEtwdnAlOBQ8J3H2Wg7tgm8Ga6M0N8+Eq+irlNj8hvicUq9VPmlq5Yit7wuEnlQg+fVxJ G+rkuFLQdcUxWYrJLW42eXGSxHdT7CO6mXO+h75tVzzOfoZo/194933vcccaRCsW0cjjHjeGd+UD 7xKde0JtmM22P/L5viOySnv3OPe+oSjeXz+3WjfxHht4i2jzzVbrn/dbrc0P4H+D6IL+H6CffFUK ZW5kc3RyZWFtCmVuZG9iagoxMyAwIG9iagoxMDc5CmVuZG9iago4IDAgb2JqClsgL0lDQ0Jhc2Vk IDEyIDAgUiBdCmVuZG9iagozIDAgb2JqCjw8IC9UeXBlIC9QYWdlcyAvTWVkaWFCb3ggWzAgMCA2 MTIgNzkyXSAvQ291bnQgMSAvS2lkcyBbIDIgMCBSIF0gPj4KZW5kb2JqCjE0IDAgb2JqCjw8IC9U eXBlIC9DYXRhbG9nIC9QYWdlcyAzIDAgUiA+PgplbmRvYmoKOSAwIG9iago8PCAvVHlwZSAvRm9u dCAvU3VidHlwZSAvVHJ1ZVR5cGUgL0Jhc2VGb250IC9XV1pRUU8rSGVsdmV0aWNhIC9Gb250RGVz Y3JpcHRvcgoxNSAwIFIgL0VuY29kaW5nIC9NYWNSb21hbkVuY29kaW5nIC9GaXJzdENoYXIgNDMg L0xhc3RDaGFyIDQzIC9XaWR0aHMgWyA1ODQKXSA+PgplbmRvYmoKMTUgMCBvYmoKPDwgL1R5cGUg L0ZvbnREZXNjcmlwdG9yIC9Gb250TmFtZSAvV1daUVFPK0hlbHZldGljYSAvRmxhZ3MgMzIgL0Zv bnRCQm94IFstOTUxIC00ODEgMTQ0NSAxMTIyXQovSXRhbGljQW5nbGUgMCAvQXNjZW50IDc3MCAv RGVzY2VudCAtMjMwIC9DYXBIZWlnaHQgNjg0IC9TdGVtViAwIC9YSGVpZ2h0CjUxMyAvTWF4V2lk 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 puaglgk7tG/+Lj7/9QJNWHwR3/kYG5iEtcJEfMHc5M7me0ROtiX1JCaOS0/PtPQICTKf2EMZyaX1 9oKalPOLz8/9du75Gm/I8ymVxoziaeNnOFMxwkRnqpK6kvX3sv6h6l52dD97bqhy/9AidtScE274 8gzh++j7Lg7Oa8wAw5ce/mLAZcF/X3TzzSvq6pYUVITWdIe62pqC8MeiRgbilK0PX4YjrjPwiuv/ krGBFQplbmRzdHJlYW0KZW5kb2JqCjE3IDAgb2JqCjI4MDMKZW5kb2JqCjE4IDAgb2JqCihNYWMg T1MgWCAxMC4xMSBRdWFydHogUERGQ29udGV4dCkKZW5kb2JqCjE5IDAgb2JqCihEOjIwMTUwNTE5 MTU1MDI3WjAwJzAwJykKZW5kb2JqCjEgMCBvYmoKPDwgL1Byb2R1Y2VyIDE4IDAgUiAvQ3JlYXRp b25EYXRlIDE5IDAgUiAvTW9kRGF0ZSAxOSAwIFIgPj4KZW5kb2JqCnhyZWYKMCAyMAowMDAwMDAw MDAwIDY1NTM1IGYgCjAwMDAwMTAzMzkgMDAwMDAgbiAKMDAwMDAwMjA2MyAwMDAwMCBuIAowMDAw MDA2ODAwIDAwMDAwIG4gCjAwMDAwMDAwMjIgMDAwMDAgbiAKMDAwMDAwMjA0MyAwMDAwMCBuIAow MDAwMDAyMTY3IDAwMDAwIG4gCjAwMDAwMDU1MjUgMDAwMDAgbiAKMDAwMDAwNjc2NCAwMDAwMCBu IAowMDAwMDA2OTMzIDAwMDAwIG4gCjAwMDAwMDIyNzUgMDAwMDAgbiAKMDAwMDAwNTUwNCAwMDAw MCBuIAowMDAwMDA1NTYxIDAwMDAwIG4gCjAwMDAwMDY3NDMgMDAwMDAgbiAKMDAwMDAwNjg4MyAw MDAwMCBuIAowMDAwMDA3MTA3IDAwMDAwIG4gCjAwMDAwMDczMzIgMDAwMDAgbiAKMDAwMDAxMDIy NSAwMDAwMCBuIAowMDAwMDEwMjQ2IDAwMDAwIG4gCjAwMDAwMTAyOTcgMDAwMDAgbiAKdHJhaWxl cgo8PCAvU2l6ZSAyMCAvUm9vdCAxNCAwIFIgL0luZm8gMSAwIFIgL0lEIFsgPDBiODlkNDA1MWY0 OGIwZWVlN2MzYzJhOTA2NGQ5ZjNhPgo8MGI4OWQ0MDUxZjQ4YjBlZWU3YzNjMmE5MDY0ZDlmM2E+ IF0gPj4Kc3RhcnR4cmVmCjEwNDE0CiUlRU9GCg== 254968 2015-06-16 14:22:15 -0700 2015-06-16 14:22:15 -0700 Simple masonry example using overflow div masonry.html text/html 2480 wenson_hsieh PGh0bWw+Cgo8aGVhZD4KICAgIDxzdHlsZT4KICAgICAgICBib2R5IHsKICAgICAgICAgICAgbWFy Z2luOiAwOwogICAgICAgIH0KCiAgICAgICAgI2NvbnRhaW5lciB7CiAgICAgICAgICAgIHdpZHRo OiA2MDBweDsKICAgICAgICAgICAgaGVpZ2h0OiA2MDBweDsKICAgICAgICAgICAgcG9zaXRpb246 IHJlbGF0aXZlOwogICAgICAgICAgICBvdmVyZmxvdzogc2Nyb2xsOwogICAgICAgICAgICBib3Jk ZXI6IDFweCBibGFjayBzb2xpZDsKICAgICAgICAgICAgbWFyZ2luOiAwIGF1dG87CiAgICAgICAg ICAgIC13ZWJraXQtc2Nyb2xsLXNuYXAtdHlwZTogbWFuZGF0b3J5OwogICAgICAgICAgICAtd2Vi a2l0LXNjcm9sbC1zbmFwLWRlc3RpbmF0aW9uOiAwJSAwJTsKICAgICAgICB9CgogICAgICAgIC5i bG9jayB7CiAgICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICAgICAgICAgICAgLXdlYmtp dC1zY3JvbGwtc25hcC1jb29yZGluYXRlOiAwJSAwJTsKICAgICAgICB9CgogICAgICAgIC8qIERp bWVuc2lvbnMgKi8KICAgICAgICAjYmxvY2sxLCAjYmxvY2syLCAjYmxvY2szLCAjYmxvY2s0LCAj YmxvY2s1LCAjYmxvY2s3LCAjYmxvY2s4IHsKICAgICAgICAgICAgd2lkdGg6IDYwMHB4OwogICAg ICAgIH0KCiAgICAgICAgI2Jsb2NrMSwgI2Jsb2NrMiwgI2Jsb2NrMywgI2Jsb2NrNCwgI2Jsb2Nr NiwgI2Jsb2NrNywgI2Jsb2NrOCwgI2Jsb2NrOSB7CiAgICAgICAgICAgIGhlaWdodDogNjAwcHg7 CiAgICAgICAgfQoKICAgICAgICAjYmxvY2s2LCAjYmxvY2s5IHsKICAgICAgICAgICAgd2lkdGg6 IDEyMDBweDsKICAgICAgICB9CgogICAgICAgICNibG9jazUgewogICAgICAgICAgICBoZWlnaHQ6 IDEyMDBweDsKICAgICAgICB9CgogICAgICAgIC8qIFBvc2l0aW9ucyAqLwogICAgICAgICNibG9j azEsICNibG9jazIsICNibG9jazMsICNibG9jazQgewogICAgICAgICAgICB0b3A6IDBweDsKICAg ICAgICB9CgogICAgICAgICNibG9jazUsICNibG9jazYsICNibG9jazcgewogICAgICAgICAgICB0 b3A6IDYwMHB4OwogICAgICAgIH0KCiAgICAgICAgI2Jsb2NrOCwgI2Jsb2NrOSB7CiAgICAgICAg ICAgIHRvcDogMTIwMHB4OwogICAgICAgIH0KCiAgICAgICAgI2Jsb2NrMSwgI2Jsb2NrNSB7CiAg ICAgICAgICAgIGxlZnQ6IDBweDsKICAgICAgICB9CgogICAgICAgICNibG9jazIsICNibG9jazYs ICNibG9jazggewogICAgICAgICAgICBsZWZ0OiA2MDBweDsKICAgICAgICB9CgogICAgICAgICNi bG9jazMsICNibG9jazkgewogICAgICAgICAgICBsZWZ0OiAxMjAwcHg7CiAgICAgICAgfQoKICAg ICAgICAjYmxvY2s0LCAjYmxvY2s3IHsKICAgICAgICAgICAgbGVmdDogMTgwMHB4OwogICAgICAg IH0KCiAgICAgICAgLyogQ29sb3JzICovCiAgICAgICAgI2Jsb2NrMSB7CiAgICAgICAgICAgIGJh Y2tncm91bmQtY29sb3I6IGJsdWU7CiAgICAgICAgfQoKICAgICAgICAjYmxvY2syIHsKICAgICAg ICAgICAgYmFja2dyb3VuZC1jb2xvcjogZ3JlZW47CiAgICAgICAgfQoKICAgICAgICAjYmxvY2sz IHsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7CiAgICAgICAgfQoKICAgICAg ICAjYmxvY2s0IHsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogcHVycGxlOwogICAgICAg IH0KCiAgICAgICAgI2Jsb2NrNSB7CiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IHRlYWw7 CiAgICAgICAgfQoKICAgICAgICAjYmxvY2s2IHsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xv cjogb3JhbmdlOwogICAgICAgIH0KCiAgICAgICAgI2Jsb2NrNyB7CiAgICAgICAgICAgIGJhY2tn cm91bmQtY29sb3I6IHllbGxvdzsKICAgICAgICB9CgogICAgICAgICNibG9jazggewogICAgICAg ICAgICBiYWNrZ3JvdW5kLWNvbG9yOiByZWQ7CiAgICAgICAgfQoKICAgICAgICAjYmxvY2s5IHsK ICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogYmxhY2s7CiAgICAgICAgfQogICAgPC9zdHls ZT4KPC9oZWFkPgoKPGJvZHk+CiAgICA8ZGl2IGlkPSJjb250YWluZXIiPgogICAgICAgIDxkaXYg Y2xhc3M9ImJsb2NrIiBpZD0iYmxvY2sxIj48L2Rpdj4KICAgICAgICA8ZGl2IGNsYXNzPSJibG9j ayIgaWQ9ImJsb2NrMiI+PC9kaXY+CiAgICAgICAgPGRpdiBjbGFzcz0iYmxvY2siIGlkPSJibG9j azMiPjwvZGl2PgogICAgICAgIDxkaXYgY2xhc3M9ImJsb2NrIiBpZD0iYmxvY2s0Ij48L2Rpdj4K ICAgICAgICA8ZGl2IGNsYXNzPSJibG9jayIgaWQ9ImJsb2NrNSI+PC9kaXY+CiAgICAgICAgPGRp diBjbGFzcz0iYmxvY2siIGlkPSJibG9jazYiPjwvZGl2PgogICAgICAgIDxkaXYgY2xhc3M9ImJs b2NrIiBpZD0iYmxvY2s3Ij48L2Rpdj4KICAgICAgICA8ZGl2IGNsYXNzPSJibG9jayIgaWQ9ImJs b2NrOCI+PC9kaXY+CiAgICAgICAgPGRpdiBjbGFzcz0iYmxvY2siIGlkPSJibG9jazkiPjwvZGl2 PgogICAgPC9kaXY+CjwvYm9keT4KCjwvaHRtbD4=