├── images
    ├── tl1.png
    ├── tl2.png
    ├── tl3.png
    ├── tl4.png
    ├── tl5.png
    ├── tl6.png
    ├── tl7.png
    ├── tl8.png
    ├── tl9.png
    ├── yrftx.jpg
    ├── icon-1.png
    └── icon-144.png
├── css
    ├── font_2768819_g3u1ca8dk06.ttf
    ├── font_2768819_g3u1ca8dk06.woff
    ├── font_2768819_g3u1ca8dk06.woff2
    └── font_2768819_g3u1ca8dk06.css
├── manifest.json
├── .gitignore
├── file-cache-demo3.html
├── file-cache-demo1.html
├── file-cache-demo2.html
├── font-size.html
├── typeit.html
├── font-v-middle.html
├── prepared.html
├── v-middle.html
├── css_var.html
├── aspect-ratio.html
├── number-input.html
├── div-canvas.html
├── nth-child.html
├── multipleTag.html
├── pwa.html
├── css-infinity.html
├── svgdemo.html
├── background.html
├── consoledemo.html
├── percent-demo.html
├── bodysize.html
├── flex-direction.html
├── fixed-size.html
├── span-margin-top.html
├── writing-mode.html
├── color.html
├── form-submit.html
├── margin-collapse.html
├── onlyoffice-excel.html
├── onlyoffice-word.html
├── box.html
├── onlyoffice-ppt.html
├── test.html
├── margin.html
├── css_func.html
├── js
    ├── prepared.js
    └── ResizeObserver.js
├── resize.html
├── flex-transition-demo2.html
├── download.html
├── touch-scope-demo.html
├── alignitem-stretch-demo.html
├── scrollHeight.html
├── focus-within.html
├── gap-test.html
├── overflow.html
├── ulli.html
├── floatDemo2.html
├── flex_demo.html
├── test22.html
├── drag-hidden.html
├── scheme.html
├── innerClick.html
├── overflow-x.html
├── textarea.html
├── copyspan.html
├── drag-div.html
├── justify-content-scroll.html
├── mobile-scroll.html
├── 1219.html
├── multi_item_center.html
├── 100percent.html
├── trafter.html
├── content-line.html
├── gap.html
├── word-break.html
├── scroll.html
├── flex-transition-demo.html
├── map.html
├── height-transition.html
├── sticky.html
├── dark_demo.html
├── timeline.html
├── container_no.html
├── floatDemo.html
├── scroll-custom.html
├── print_header.html
├── thead.html
└── index.html


/images/tl1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunzsh/st-html-demo/HEAD/images/tl1.png


--------------------------------------------------------------------------------
/images/tl2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunzsh/st-html-demo/HEAD/images/tl2.png


--------------------------------------------------------------------------------
/images/tl3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunzsh/st-html-demo/HEAD/images/tl3.png


--------------------------------------------------------------------------------
/images/tl4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunzsh/st-html-demo/HEAD/images/tl4.png


--------------------------------------------------------------------------------
/images/tl5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunzsh/st-html-demo/HEAD/images/tl5.png


--------------------------------------------------------------------------------
/images/tl6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunzsh/st-html-demo/HEAD/images/tl6.png


--------------------------------------------------------------------------------
/images/tl7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunzsh/st-html-demo/HEAD/images/tl7.png


--------------------------------------------------------------------------------
/images/tl8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunzsh/st-html-demo/HEAD/images/tl8.png


--------------------------------------------------------------------------------
/images/tl9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunzsh/st-html-demo/HEAD/images/tl9.png


--------------------------------------------------------------------------------
/images/yrftx.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunzsh/st-html-demo/HEAD/images/yrftx.jpg


--------------------------------------------------------------------------------
/images/icon-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunzsh/st-html-demo/HEAD/images/icon-1.png


--------------------------------------------------------------------------------
/images/icon-144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunzsh/st-html-demo/HEAD/images/icon-144.png


--------------------------------------------------------------------------------
/css/font_2768819_g3u1ca8dk06.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunzsh/st-html-demo/HEAD/css/font_2768819_g3u1ca8dk06.ttf


--------------------------------------------------------------------------------
/css/font_2768819_g3u1ca8dk06.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunzsh/st-html-demo/HEAD/css/font_2768819_g3u1ca8dk06.woff


--------------------------------------------------------------------------------
/css/font_2768819_g3u1ca8dk06.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunzsh/st-html-demo/HEAD/css/font_2768819_g3u1ca8dk06.woff2


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "Test",
 3 | 	"display": "standalone",
 4 | 	"start_url": "./pwa.html",
 5 | 	"icons":
 6 | 	[{
 7 | 		"src": "images/icon-144.png",
 8 | 		"sizes": "144x144",
 9 | 		"type": "image/png"
10 | 	}]
11 | }
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | /dist/
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | .vscode
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln
15 | package-lock.json
16 | 


--------------------------------------------------------------------------------
/file-cache-demo3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <title>Document</title>
 7 | </head>
 8 | <body>
 9 |   <p>http://www.a.com/file-cache-demo1.html</p>
10 |   <iframe src="http://www.a.com/file-cache-demo1.html"/>
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/file-cache-demo1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <script src="https://eladmin.vip/demo/static/js/chunk-elementUI.ad353d88.js"></script>
 7 |   <title>Document</title>
 8 | </head>
 9 | <body>
10 |   <img src="https://avatars.githubusercontent.com/u/6297087" />
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/file-cache-demo2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <script src="https://eladmin.vip/demo/static/js/chunk-elementUI.ad353d88.js"></script>
 7 |   <title>Document</title>
 8 | </head>
 9 | <body>
10 |   <img src="https://avatars.githubusercontent.com/u/6297087" />
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/font-size.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Document</title>
 8 | </head>
 9 | <body>
10 |   <div style="font-size: 40px; background-color: antiquewhite;" contenteditable="true">
11 |     │你好xltRegE一
12 |   </div>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/typeit.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head></head>
 3 |   <body>
 4 |     <!-- A root element for TypeIt to target. -->
 5 |     <span id="myElement"></span>
 6 | 
 7 |     <!-- The script itself, loaded AFTER your root element. -->
 8 |     <script src="https://unpkg.com/typeit@8.2.0/dist/index.umd.js"></script>
 9 |     <script>
10 |       new TypeIt("#myElement", {
11 |         strings: "你好，我很好",
12 |       }).move(-3, {delay: 300})
13 |       .go();
14 |     </script>
15 |   </body>
16 | </html>


--------------------------------------------------------------------------------
/font-v-middle.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Document</title>
 8 |   <style>
 9 |     .vmid {
10 |       vertical-align: middle;
11 |     }
12 |   </style>
13 | </head>
14 | <body>
15 | 
16 |     demo
17 |     <span class="vmid">test</span>
18 |     x你好世界
19 |     
20 | 
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/prepared.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Document</title>
 8 |   <!-- 引入js -->
 9 |   <script src="./js/prepared.js"></script>
10 |   <script>
11 |     let prepare = Prepared(3).ready(() => {
12 |       console.log('ready')
13 |     })
14 |   </script>
15 | </head>
16 | <body>
17 |   <button onclick="prepare.submit()">submit</button>
18 | 
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/v-middle.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Document</title>
 8 |   <link rel="stylesheet" href="./css/font_2768819_g3u1ca8dk06.css" />
 9 | </head>
10 | <body>
11 |   <div>abcjy你好
12 |     <img style="height: 1em; vertical-align: -0.15em; " src="./images/icon-1.png" />
13 |     <i class="iconfont icon-qiehuan"></i>
14 |     jyabcs
15 |   </div>
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/css_var.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>css var</title>
 8 |     <style>
 9 |         :root {
10 |             --red: red;
11 |         }
12 |         .content {
13 |             color: var(--red);
14 |         }
15 |     </style>
16 | </head>
17 | <body>
18 |     <div class="content">xiaoshan.bug</div>
19 |     <div class="content">hello world</div>
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/aspect-ratio.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 |     <style>
 9 |         .test {
10 |             display: inline-block;
11 |             background-color: aquamarine;
12 |             aspect-ratio: 2.5/1;
13 |         }
14 |     </style>
15 | </head>
16 | <body>
17 |     <div class="test" contenteditable="true">
18 |         12312asdflkjasdlf
19 |     </div>
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/number-input.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <title>Document</title>
 7 |   <script>
 8 |     function fixInvalidChar(e) {
 9 |       if (e.data === '' && e.target.value === '') {
10 |         e.target.value = '0';
11 |         setTimeout(() => {
12 |           e.target.value = ''
13 |         }, 0);
14 |       }
15 |     }
16 |   </script>
17 | </head>
18 | <body>
19 |   <input style="text-align: center;" type="number" oninput="fixInvalidChar(event)" />
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/css/font_2768819_g3u1ca8dk06.css:
--------------------------------------------------------------------------------
 1 | @font-face {
 2 |   font-family: "iconfont"; /* Project id 2768819 */
 3 |   src: url('./font_2768819_g3u1ca8dk06.woff2?t=1670691719763') format('woff2'),
 4 |        url('./font_2768819_g3u1ca8dk06.woff?t=1670691719763') format('woff'),
 5 |        url('./font_2768819_g3u1ca8dk06.ttf?t=1670691719763') format('truetype');
 6 | }
 7 | 
 8 | .iconfont {
 9 |   font-family: "iconfont" !important;
10 |   font-size: 16px;
11 |   font-style: normal;
12 |   -webkit-font-smoothing: antialiased;
13 |   -moz-osx-font-smoothing: grayscale;
14 | }
15 | 
16 | .icon-qiehuan:before {
17 |   content: "\e656";
18 | }
19 | 
20 | 


--------------------------------------------------------------------------------
/div-canvas.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Document</title>
 8 |   <style>
 9 |     body {
10 |       margin: 0;
11 |       font-size: 0;
12 |     }
13 | 
14 |     #main {
15 |       width: 100vw;
16 |       height: 100vh;
17 |       background-color:#4eabbb;
18 |       /* display: block; */
19 |       /* vertical-align: top; */
20 |     }
21 |   </style>
22 | </head>
23 | <body>
24 | 
25 |   <canvas id="main"></canvas>
26 | 
27 | </body>
28 | </html>


--------------------------------------------------------------------------------
/nth-child.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>nth-child</title>
 9 |   <style>
10 |     p:nth-of-type(2) {
11 |       background: #ff0000;
12 |     }
13 |   </style>
14 | </head>
15 | 
16 | <body>
17 |   <h1>这是标题</h1>
18 |   <div>
19 |     <p>第n个段落。</p>
20 |     <span>第n个段落。</span>
21 |     <p>=-----</p>
22 |   </div>
23 |   <p>第一个段落。</p>
24 |   <p>第二个段落。</p>
25 |   <p>第三个段落。</p>
26 |   <p>第四个段落。</p>
27 |   <p>第五个段落。</p>
28 |   <p>第六个段落。</p>
29 | </body>
30 | 
31 | </html>


--------------------------------------------------------------------------------
/multipleTag.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Document</title>
 8 | 
 9 |   <style>
10 |     .item+.item::before {
11 |       content: '、';
12 |     }
13 |   </style>
14 | 
15 | </head>
16 | <body>
17 | 
18 |   <span class="item">张三</span>
19 |   <span class="item">李四</span>
20 |   <span class="item">王五</span>
21 |   <span class="item">李四</span>
22 |   <span class="item">王五</span>
23 |   <span class="item">李四</span>
24 |   <span class="item">王五</span>
25 | 
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/pwa.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <link rel="manifest" href="manifest.json" />
 7 |   <title>Document</title>
 8 | </head>
 9 | <body>
10 |   test
11 |   <button id="btn" style="display:none" onclick="pwaEvent.prompt()">添加</button>
12 | 
13 |   <script>
14 |     let pwaEvent = null
15 |     window.addEventListener('beforeinstallprompt', e => {
16 |       pwaEvent = e
17 |       btn.style.display = 'block'
18 | 
19 |       pwaEvent.userChoice.then(res => {
20 |         console.log(res.outcome)
21 |       })
22 |     })
23 |   </script>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/css-infinity.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <title>Document</title>
 6 | <style>
 7 | 
 8 | 
 9 | 
10 | .btn {
11 | 
12 |   width: 300px;
13 |   height: 80px;
14 |   border-radius: 
15 |   calc(infinity * 1px);
16 | 
17 |   
18 | 
19 | 
20 | 
21 |   /* other */
22 |   border: solid 2px #303133;
23 |   color: #303133;
24 |   display: flex;
25 |   cursor: pointer;
26 |   align-items: center;
27 |   justify-content: center;
28 |   font-size: 1.2em;
29 |   user-select: none;
30 | }
31 | 
32 | body {
33 |   margin-top: 10em;
34 |   margin-left: 6em;
35 | }
36 | </style>
37 | </head>
38 | <body>
39 |   <div class="btn">程序员小山与Bug</div>
40 | </body>
41 | </html>


--------------------------------------------------------------------------------
/svgdemo.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 | </head>
 9 | <body>
10 |     <!-- svg实现× -->
11 |     <svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
12 |         <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
13 |         <line x1="10" y1="10" x2="90" y2="90" stroke="black" stroke-width="3" />
14 |         <line x1="10" y1="90" x2="90" y2="10" stroke="black" stroke-width="3" />
15 |     </svg>
16 | 
17 | 
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/background.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>background</title>
 8 |     <style>
 9 | 
10 |         .no-repeat {
11 |             background-repeat: no-repeat;
12 |         }
13 | 
14 |         .bg {
15 |             height: 100px;
16 |             width: 200px;
17 |             background: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png');
18 |         }
19 | 
20 |     </style>
21 | </head>
22 | <body>
23 | 
24 |     <div class="bg no-repeat"></div>
25 | 
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/consoledemo.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 |     
 9 | </head>
10 | <body>
11 | 
12 | 
13 | 
14 |     <button onclick="test()">xiaoshan.bug</button>
15 |     
16 |     <script>
17 |         var arr = [ ];
18 |         // ...
19 |         function test() {
20 |             console.log(arr);
21 |             console.log(arr[0]);
22 | 
23 | 
24 |             //...
25 |             arr.push({name: '张三', age: 30})
26 | 
27 |         }
28 | 
29 | 
30 | 
31 | 
32 |     </script>
33 | </body>
34 | </html>


--------------------------------------------------------------------------------
/percent-demo.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 |     <style>
 9 |         html, body { 
10 |             height: 100%; 
11 |         } 
12 |     </style>
13 | </head>
14 | <body>
15 |     <div style="max-height: 30%; background-color: aqua; display: flex; align-items: flex-start; ">
16 |         <div style="width: 100px; background-color: beige; height: 30%">1</div>
17 |         <div style="width: 100px; background-color: mediumturquoise; height: 300px;">2</div>
18 |     </div>
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/bodysize.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 |     <style>
 9 |         body {
10 |             /* background-color: red; */
11 |             /* height: 100vh; */
12 |             margin: 0px;
13 |             outline: 2px solid red;
14 |         }
15 |     </style>
16 | </head>
17 | <body>
18 |     <div style="height: 10%; overflow: auto;">
19 |         123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>
20 |     </div>
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/flex-direction.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 |     <style>
 9 |         .wrapper {
10 |             display: flex; 
11 |             flex-direction: row;
12 |         }
13 |         .demo {
14 |             background-color: darkturquoise;
15 |             margin: 5px;
16 |         }
17 |     </style>
18 | </head>
19 | <body>
20 |     <div class="wrapper">
21 |         <div class="demo">test</div>
22 |         <div class="demo">test</div>
23 |         <div class="demo">test</div>
24 |     </div>
25 | </body>
26 | </html>


--------------------------------------------------------------------------------
/fixed-size.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |   <title>Document</title>
 8 |   <style>
 9 |     .wrapper {
10 |       height: 400px;
11 |       border: 6px dashed red;
12 |       /* filter: blur(0px); */
13 |     }
14 |     .wrapper-inner {
15 |       position: fixed;
16 |       background-color: cornflowerblue;
17 |       width: 300px;
18 |       top: 0px;
19 |       bottom: 0px;
20 |     }
21 |   </style>
22 | </head>
23 | <body>
24 |   <div class="wrapper">
25 |     
26 |     wrapper
27 |     <div class="wrapper-inner">test</div>
28 | 
29 |   </div>
30 | </body>
31 | </html>


--------------------------------------------------------------------------------
/span-margin-top.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Document</title>
 8 |   <style>
 9 |     div.father{
10 |     width: 200px;
11 |     height: 200px;
12 |     background-color: rgb(219, 68, 101);
13 |     margin-left: 100px;
14 |     margin-top: 100px;
15 | }
16 | div.father div.son{
17 |     width: 100px;
18 |     height: 100px;
19 |     background-color: rgb(56, 248, 207);
20 |     margin-left: 50px;
21 |     margin-top: 50px;
22 | }
23 |   </style>
24 | </head>
25 | <body>
26 |   <div class="father">
27 |     <div class="son"></div>
28 |   </div>
29 |   asfsdf
30 | </body>
31 | </html>


--------------------------------------------------------------------------------
/writing-mode.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Document</title>
 8 |   <style>
 9 |     .text {
10 |       display: inline-block;
11 | 
12 | 
13 |       /* width: 60px;
14 |       height: 30px; */
15 | 
16 |       inline-size: 60px;
17 |       block-size: 30px;
18 |       padding-block: 10px;
19 | 
20 |       /* padding: 10px 0px; */
21 |       writing-mode: vertical-lr;
22 |       
23 | 
24 |       text-align: center;
25 |       background-color: black;
26 |       color: #fff;
27 |     }
28 |   </style>
29 | </head>
30 | <body>
31 |     <div class="text">test</div>
32 | </body>
33 | </html>


--------------------------------------------------------------------------------
/color.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 |     <script>
 9 |         function fixIME() {
10 |             // 是否windows系统
11 |             var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
12 |             if (!isWin) {
13 |                 return;
14 |             }
15 |             let fixIMEWin = window.open();
16 |             fixIMEWin.close();
17 |         }
18 |     </script>
19 | </head>
20 | <body>
21 |     
22 |     <input type="text" />
23 |     <input type="color" onblur="fixIME()"/>
24 | 
25 |     
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/form-submit.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <title>Document</title>
 7 | </head>
 8 | <body>
 9 |   <form>
10 |         <input type="submit" value="提交" />
11 |   </form>
12 | 
13 |   <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
14 |   <span id="123"> 12312</span>
15 |   <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
16 | 
17 | 
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/margin-collapse.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <title>Document</title>
 7 |   <style>
 8 |     body {
 9 |       background-color: black;
10 |     }
11 |     div.father{
12 |       width: 200px;
13 |       height: 200px;
14 |       background-color: rgb(219, 68, 101);
15 |       margin-left: 100px;
16 |       margin-top: 100px;
17 |     }
18 |     div.father div.son{
19 |       width: 100px;
20 |       height: 100px;
21 |       background-color: rgb(56, 248, 207);
22 |       margin-left: 50px;
23 |       margin-top: 500px;
24 |     }
25 |   </style>
26 | </head>
27 | <body>
28 |   <div class="father">
29 |     <div class="son">
30 |       
31 |     </div>
32 |   </div>
33 | </body>
34 | </html>


--------------------------------------------------------------------------------
/onlyoffice-excel.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 7 |   
 8 |   <title>Excel</title>
 9 | </head>
10 | <body>
11 |   <div style="width: 80vw; height: 70vh;">
12 |     <div id="placeholder"></div>
13 |   </div>
14 | 
15 |   <script type="text/javascript" src="http://localhost:8001/web-apps/apps/api/documents/api.js"></script>
16 | 
17 |   <script>
18 |     axios.get('http://172.28.3.105:3000/editor-config?fileName=new.xlsx&lang=zh&directUrl=false')
19 |     .then(function (res) {
20 |       const config = res.data
21 |       window.docEditor = new DocsAPI.DocEditor("placeholder", config);
22 |     })
23 |   </script>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/onlyoffice-word.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 7 |   
 8 |   <title>Word</title>
 9 | </head>
10 | <body>
11 |   <div style="width: 80vw; height: 70vh;">
12 |     <div id="placeholder"></div>
13 |   </div>
14 | 
15 |   <script type="text/javascript" src="http://localhost:8001/web-apps/apps/api/documents/api.js"></script>
16 | 
17 |   <script>
18 |     axios.get('http://172.28.3.105:3000/editor-config?fileName=new.docx&lang=zh&directUrl=false')
19 |     .then(function (res) {
20 |       const config = res.data
21 |       window.docEditor = new DocsAPI.DocEditor("placeholder", config);
22 |     })
23 |   </script>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/box.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 |     <style>
 9 | 
10 | 
11 | 
12 |         .white {
13 |             width: 200px;
14 |             height: 200px;
15 |             background-color: #fff;
16 |             border-radius: 9px;
17 |             box-shadow: 0 0 0 0.4px #fff;
18 |              
19 |         }
20 | 
21 |         .wrapper {
22 |             width: 200px;
23 |             height: 200px;
24 |             background-color: red;
25 |         }
26 |     </style>
27 | </head>
28 | <body >
29 | 
30 |     <div class="wrapper">
31 |         <div class="white"></div>
32 |     </div>
33 | 
34 | </body>
35 | </html>


--------------------------------------------------------------------------------
/onlyoffice-ppt.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 7 | 
 8 |   <title>PPT</title>
 9 | </head>
10 | <body>
11 |   
12 |   <div style="width: 80vw; height: 70vh;">
13 |     <div id="placeholder"></div>
14 |   </div>
15 | 
16 |   <script type="text/javascript" src="http://localhost:8001/web-apps/apps/api/documents/api.js"></script>
17 | 
18 | 
19 |   <script>
20 |     axios.get('http://172.28.3.105:3000/editor-config?fileName=new.pptx&lang=zh&directUrl=false')
21 |     .then(function (res) {
22 |       const config = res.data
23 |       window.docEditor = new DocsAPI.DocEditor("placeholder", config);
24 |     })
25 |   </script>
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/test.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 |     <style>
 9 |         body, html {
10 |             height: 100%;
11 |         }
12 | 
13 |         .outter {
14 |             border: 5px solid black;
15 |             position: relative;
16 |         }
17 |         .inner {
18 |             border: 5px solid red;
19 |             height: 50%;
20 |             position: absolute;
21 |         }
22 |     </style>
23 | </head>
24 | <body>
25 | 
26 |     <div class="outter">
27 |         <div class="inner">程序员小山与Bug</div>
28 |         <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
29 |     </div>
30 | 
31 | 
32 | </body>
33 | </html>


--------------------------------------------------------------------------------
/margin.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>margin demo</title>
 8 |     <style>
 9 |         .wrapper {
10 |             border: solid 4px #3a4243;
11 |             height: 400px;
12 |             width: 300px;
13 |             position: relative;
14 |         }
15 |         .inner {
16 |             background-color: cadetblue;
17 |             width: 100%;
18 |             height: 50%;
19 |             position: absolute;
20 |             top: 50%;
21 |             /* margin-top: 66.666%; */
22 |         }
23 |     </style>
24 | </head>
25 | <body>
26 |     <div class="wrapper">
27 |         <div class="inner"></div>
28 |     </div>
29 | </body>
30 | </html>


--------------------------------------------------------------------------------
/css_func.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>test</title>
 8 |     <style>
 9 |         .test {
10 |             background-color: lightsteelblue;
11 |             height: 100px;
12 |             line-height: 100px;
13 |             position: relative;
14 |             vertical-align: middle;
15 |         }
16 | 
17 |         .inner {
18 |             /* position: absolute;
19 |             top: 50%;
20 |             -webkit-transform: translateY(-50%);
21 |              */
22 |         }
23 | 
24 |     </style>
25 | </head>
26 | <body>
27 |     <div class="test">
28 |        <div class="inner">hello world <br/>asdf</div>
29 |     </div>
30 | </body>
31 | </html>


--------------------------------------------------------------------------------
/js/prepared.js:
--------------------------------------------------------------------------------
 1 | function Prepared(count, repeatable = false){
 2 | 
 3 | 
 4 |   let _preparedCount, _preparedResolve, _prepared, _callback, _this
 5 | 
 6 | 
 7 |   const reset = () => {
 8 |     _preparedCount = count
 9 |     _prepared = new Promise((resolve, reject) => {
10 |       _preparedResolve = resolve
11 |     })
12 |     if (_callback) {
13 |       _prepared.then(_callback)
14 |     }
15 |     return _preparedCount
16 |   }
17 |   const ready = (callback) => {
18 |     _callback = callback
19 |     _prepared.then(_callback)
20 |     return _this
21 |   }
22 |   const submit = () => {
23 |     _preparedCount--
24 |     if (_preparedCount === 0) {
25 |       _preparedResolve()
26 |       if (repeatable) {
27 |         reset();
28 |       }
29 |     }
30 |     return _preparedCount;
31 |   }
32 |   _this = { reset, ready, submit }
33 |   reset()
34 |   return _this
35 | }


--------------------------------------------------------------------------------
/resize.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 |     <script>
 9 |         window.addEventListener('resize', function(){
10 |             console.log('00000');
11 |         });
12 |     </script>
13 | </head>
14 | <body>
15 |     <div id="test" style="height: 100px; width: 100px; background-color: red;">
16 |         
17 |     </div>
18 | 
19 |     <input type="button" value="test" onclick="up();"></input>
20 |     <script>
21 |         function up() {
22 |             window.requestAnimationFrame(()=>{
23 | 
24 |             });
25 |             document.getElementById('test').style.height='80px';
26 |         }
27 |     </script>
28 | </body>
29 | </html>


--------------------------------------------------------------------------------
/flex-transition-demo2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Document</title>
 8 |   <style>
 9 |     .wrapper {
10 |       display: flex;
11 |       flex-direction: column;
12 |       height: 80vh;
13 |       overflow: hidden;
14 |       background-color: cornflowerblue;
15 |     }
16 | 
17 |     .item {
18 |       border: 6px solid red;
19 |       box-sizing: border-box;
20 |       transition: flex-grow .3s;
21 |     }
22 |     .active {
23 |       flex-grow: 1;
24 |     }
25 |   </style>
26 | </head>
27 | <body>
28 |   <div class="wrapper">
29 |     <div class="item">111</div>
30 |     <div class="item active">22222</div>
31 |     <div class="item">3333333</div>
32 |   </div>
33 | </body>
34 | </html>


--------------------------------------------------------------------------------
/download.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 | </head>
 9 | <body>
10 |     <button onclick="test()">test</button>
11 | 
12 |     <a href="https://lf3-package.vlabstatic.com/obj/faceu-packages/Jianying_2_5_1_4567_0.dmg" target="_blank" download="test.zip">test</a>
13 | 
14 |     <script>
15 |         function test() {
16 |             const link = document.createElement("a");
17 |             link.style.display = "none";
18 |             link.href = "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png";
19 |             link.target = "_blank";
20 |             link.setAttribute("download", "测试");
21 |             document.body.appendChild(link);
22 |             link.click();
23 |             document.removeChild(link);
24 |         }
25 |     </script>
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/touch-scope-demo.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Document</title>
 8 |   <style>
 9 |     .title {
10 |       height: 50px;
11 |       background-color: aquamarine;
12 |     }
13 |     .title2 {
14 |       height: 50px;
15 |       background-color: rgb(173, 147, 30);
16 |     }
17 |     #cc {
18 |       position: absolute;
19 |       height: 30px;
20 |       width: 30px;
21 |       background-color: red;
22 |     }
23 |   </style>
24 |   <script>
25 |     function test(e) {
26 |       cc.style.top = e.clientY + 'px';
27 |       cc.style.left = e.clientX + 'px';
28 |     }
29 |   </script>
30 | </head>
31 | <body>
32 | 
33 |   <div class="title" onclick="test(event)">
34 |     test
35 |   </div>
36 |   <!-- <div class="title2" onclick="test(event)">
37 |     test2
38 |   </div> -->
39 |   <!-- <input/> -->
40 |   <div id="cc"></div>
41 |   
42 | </body>
43 | </html>


--------------------------------------------------------------------------------
/alignitem-stretch-demo.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <title>Document</title>
 7 |   <style>
 8 |     .wrapper {
 9 |       width: 80%;
10 |       margin: 1em auto;
11 |       outline: 1px dashed #999;
12 |       
13 |       display: flex;
14 |       align-items: stretch;
15 |     }
16 |     .item-a, .item-b, .item-c {
17 |       padding: 12px;
18 |       outline: none;
19 |       flex: 1;
20 |       /* height: 100%; */
21 |     }
22 |     .item-a { background-color: aquamarine; }
23 |     .item-b { background-color: deepskyblue; }
24 |     .item-c { background-color: coral; }
25 |   </style>
26 | </head>
27 | <body>
28 | 
29 |   <div class="wrapper">
30 |     <div class="item-a" contenteditable="true"> item-a </div>
31 |     <div class="item-b" contenteditable="true"> item-b<br>item-b<br>item-b<br>item-b </div>
32 |     <div class="item-c" contenteditable="true"> item-c<br>item-c </div>
33 |   </div>
34 | 
35 | </body>
36 | </html>


--------------------------------------------------------------------------------
/scrollHeight.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Document</title>
 8 |   <style>
 9 |     body, html {
10 |       height: 100%;
11 |     }
12 |     .wrapper {
13 |       height: 80px;
14 |       background-color: aqua;
15 |       overflow: auto;
16 |       
17 |     }
18 |   </style>
19 | </head>
20 | <body>
21 | 
22 |   <div class="wrapper">
23 |     <div style="padding-bottom: 0px;">
24 |       <div>test</div>
25 |       <div>test</div>
26 |       <div>test</div>
27 |       <div>test</div>
28 |       <div>test</div>
29 |       <div>test</div>
30 |       <div>test</div>
31 |       <div>test</div>
32 |       <div>test</div>
33 |       <div>test</div>
34 |       <div>test</div>
35 |       <div>test</div>
36 |       <div>test</div>
37 |       <div>test</div>
38 |       <div>test</div>
39 |       <div>test</div>
40 |     </div>
41 |   </div>
42 | 
43 | </body>
44 | </html>


--------------------------------------------------------------------------------
/focus-within.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 |     <style>
 9 | 
10 |         .wrapper {
11 |             padding: 20px; 
12 |             margin: 20px;
13 |             /* 阴影 */
14 |             box-shadow: 0 0 10px rgba(0,0,0,0.2);
15 |             /* box-shadow 动画过渡 */
16 |             transition: box-shadow 0.2s;
17 |         }
18 |         .wrapper:focus-within {
19 |             box-shadow: 0 0 15px rgba(0,0,0,0.5);
20 |         }
21 | 
22 |     </style>
23 | </head>
24 | <body>
25 |     <div class="wrapper">
26 |         <input type="text" />
27 |     </div>
28 | 
29 |     <div style="width: 50px; display: inline-block; outline: 1px solid red;">
30 |         <div style="background-color: antiquewhite;width: 100px;">
31 |             <div style="">
32 |                 123
33 |             </div>
34 |         </div>
35 |     </div>
36 | </body>
37 | </html>


--------------------------------------------------------------------------------
/gap-test.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 |     <style>
 9 |         .container {
10 |             width: 100px;
11 |             height: 100px;
12 |             outline: 1px solid red;
13 |             margin: 1px;
14 |             /* background-color: blue; */
15 |         }
16 |         .container div {
17 |             height: 100px;
18 |             line-height: 100px;
19 |             text-align: center;
20 |             width: 100%;
21 |             /* background: #88a86e; */
22 |         }
23 | 
24 |     </style>
25 | </head>
26 | <body>
27 |     
28 |     <div style="display: flex; flex-direction: column;">
29 |         <div class="container">
30 |             <div>1</div>
31 |         </div>
32 |         <div class="container" style="outline-color: blueviolet;">
33 |             <div>1</div>
34 |         </div>
35 |     </div>
36 | 
37 | </body>
38 | </html>


--------------------------------------------------------------------------------
/overflow.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 |     <style>
 9 | 
10 |         .outter {
11 |             border: 2px dashed #387779;
12 |             padding: 80px;
13 |         }
14 | 
15 |         .inner {
16 |             width: 100px;
17 |             height: 100px;
18 |             display: inline-block;
19 |             background-color: #a3af92;
20 |             color: #26310a;
21 |             border-radius: 5px;
22 |             padding: 4px;
23 |             vertical-align: baseline;
24 |         }
25 | 
26 |     </style>
27 | </head>
28 | <body>
29 | 
30 |     <div class="outter">
31 |         <div class="inner">对这个<br/>世界<br/>如果你</div>
32 |         <div class="inner">有太多的<br/>抱怨。</div>
33 |         <div class="inner">跌倒了<br/>就不敢<br/>继续<br/>往前走</div>
34 |         <div class="inner">珍惜一切<br/>就算<br/>没有拥有</div>
35 |         <div class="inner">xiaoshan.bug</div>
36 |         nihao
37 |     </div>
38 | 
39 | </body>
40 | </html>


--------------------------------------------------------------------------------
/ulli.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 |     <style>
 9 |         .button-container {
10 |             display: flex;
11 |             position: absolute;
12 |             top: 10px;
13 |             right: 10px;
14 |             text-align: center;
15 |             vertical-align: middle;
16 |         }
17 | 
18 |         .button {
19 |             color: white;
20 |             font-family: arial;
21 |             font-size: 14px;
22 |             background-color: black;
23 |             /* padding-left: 15px;
24 |             padding-right: 15px; */
25 |             /* padding-top: 5px;
26 |             padding-bottom: 5px; */
27 |             border-style: none;
28 |             /* height: 40px;  */
29 |             aspect-ratio: 1/1;
30 |             border-radius: 50%;
31 |         }
32 |     </style>
33 | </head>
34 | <body>
35 |     <div class="button-container">
36 |         <button class="button">X</button>
37 |     </div>
38 | </body>
39 | </html>


--------------------------------------------------------------------------------
/floatDemo2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 |     <style>
 9 | 
10 | 
11 |         .wrapper1 {
12 |             background-color: darkgrey;
13 |             height: 30px;
14 |         }
15 |         .inner1 {
16 |             width: 120px;
17 |             height: 40px;
18 |             background-color: gold;
19 |             float: left;
20 |         }
21 | 
22 | 
23 |         .wrapper2 {
24 |             /* border: 10px solid red; */
25 |             height: 30px;
26 |             background-color: grey;
27 |         }
28 | 
29 |         .inner2 {
30 |             width: 120px;
31 |             height: 30px;
32 |             background-color: springgreen;
33 |             float: left;
34 |         }
35 | 
36 | 
37 |     </style>
38 | </head>
39 | <body>
40 |     <div class="wrapper1">
41 |         <div class="inner1">1</div>
42 |     </div>
43 |     <div class="wrapper2">
44 |         <div class="inner2">2</div>
45 |     </div>
46 | 
47 | </body>
48 | </html>


--------------------------------------------------------------------------------
/flex_demo.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 |     <style>
 9 |         html, body {
10 |             margin: 0px;
11 |             height: 100%;
12 |             background-color:bisque;
13 |         }
14 | 
15 |         .wrapper {
16 |             width: 480px;
17 |             /* margin: 20px auto 0px auto; */
18 |             /* padding: 20px 60px 10px 30px; */
19 |             border-radius: 8px;
20 |             /* box-sizing: border-box; */
21 |             background-color: #fff;
22 |         
23 |             /* min-height: 400px; */
24 |             height: 80%;
25 |         }
26 |     </style>
27 | </head>
28 | <body>
29 |     <div class="wrapper">
30 |         <div>
31 |           123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>
32 |         </div>
33 |           <!-- <img src="./assets/bg.jpg" /> -->
34 |     </div>
35 | 
36 | 
37 | </body>
38 | </html>


--------------------------------------------------------------------------------
/test22.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 | </head>
 9 | <body>
10 |     <h1 id="some-element-you-want-to-animate">test</h1>
11 |     <script>
12 |         const element = document.getElementById('some-element-you-want-to-animate');
13 | let start, previousTimeStamp;
14 | let done = false
15 | 
16 | function step(timestamp) {
17 |   if (start === undefined) {
18 |     start = timestamp;
19 |   }
20 |   const elapsed = timestamp - start;
21 | 
22 |   if (previousTimeStamp !== timestamp) {
23 |     // 这里使用 `Math.min()` 确保元素刚好停在 200px 的位置。
24 |     const count = Math.min(0.09 * elapsed, 200);
25 |     console.log(0.09 * elapsed, 200);
26 |     element.style.transform = 'translateX(' + count + 'px)';
27 |     if (count === 200) done = true;
28 |   }
29 | 
30 |   if (elapsed < 2000) { // 在两秒后停止动画
31 |     previousTimeStamp = timestamp;
32 |     if (!done) {
33 |       window.requestAnimationFrame(step);
34 |     }
35 |   }
36 | }
37 | 
38 | window.requestAnimationFrame(step);
39 |     </script>
40 | </body>
41 | </html>


--------------------------------------------------------------------------------
/drag-hidden.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Document</title>
 8 |   <style>
 9 |     .box {
10 |       width: 100px;
11 |       height: 60px;
12 |       display: inline-block;
13 |       line-height: 30px;
14 |       background-color: yellow;
15 |       position: relative;
16 |       /* overflow: scroll; */
17 |     }
18 |   </style>
19 |   <script>
20 |     function test(e) {
21 |       console.log(e);
22 |     }
23 |   </script>
24 | </head>
25 | <body>
26 |   
27 |   <div class="box" draggable="true" ondragstart="test(event)">
28 |     <div>1</div>
29 |     <div>2</div>
30 |     <div>3</div>
31 |     <!-- <div style="background-color: red; position: absolute; left: 200px; top: 100px;"> -->
32 |     <div style="overflow: hidden;">
33 |       4
34 |     </div>
35 |     <div>5</div>
36 |   </div>
37 |   <img style="display: inline-block; width: 300px;" src="http://oa.successhetai.com/static/img/background_oa.0feedb41.jpg" />
38 |   zzzz<br/>zzzz<br/>zzzz<br/>zzzz<br/>zzzz<br/>zzzz<br/>zzzz<br/>zzzz<br/>zzzz<br/>
39 | 
40 | </body>
41 | </html>


--------------------------------------------------------------------------------
/scheme.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 | </head>
 9 | <body>
10 |     <script>
11 |     console.log(window);
12 |     window.isfocus = true;
13 |     window.onblur = function(){
14 |         window.isfocus = false;
15 |     }
16 |     window.onfocus = function(){
17 |         window.isfocus = true;
18 |     }
19 | 
20 |         
21 |         
22 |     function startIThrown(){
23 |         setTimeout(function() {
24 |             if (window.isfocus) {
25 |                 console.log('失败了')
26 |             } else {
27 |                 console.log('成功了');
28 |             }
29 |         }, 100);
30 | 
31 |         // If "custom-uri://" is registered the app will launch immediately and your
32 |         // timer won't fire. If it's not set, you'll get an ugly "Cannot Open Page"
33 |         // dialogue prior to the App Store application launching
34 |         window.location = "test://";
35 |       }
36 |       
37 |     </script>
38 |       <a href="#" onclick="startIThrown()">Restart iThrown</a>
39 | </body>
40 | </html>


--------------------------------------------------------------------------------
/innerClick.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <title>Document</title>
 7 |   <style>
 8 |     .outter {
 9 |       width: 400px;
10 |       height: 150px;
11 |       background-color: rgb(112, 112, 112);
12 |       position: relative;
13 |     }
14 |     .inner {
15 |       width: 80px;
16 |       height: 50px;
17 |       background-color: rgb(255, 255, 255);
18 |       position: absolute;
19 |       top: 50%;
20 |       left: 50%;
21 |       transform: translate(-50%, -50%);
22 |     }
23 |   </style>
24 |   <script>
25 |     let outterMouseDowned = false
26 |     function clickOutter(e) {
27 |       if (!outterMouseDowned) {
28 |         return
29 |       }
30 |       console.log('click-outter---', e)
31 |     }
32 |     function clickInner(e) {
33 |       console.log('click-inner===', e)
34 |       e.stopPropagation()
35 |     }
36 |     
37 |   </script>
38 | </head>
39 | <body>
40 |   <div class="outter" onclick="clickOutter(event)" onmousedown="outterMouseDowned = event.target.classList.contains('outter')">
41 |     <div class="inner" onclick="clickInner(event)">
42 |     </div>
43 |   </div>
44 | </body>
45 | </html>


--------------------------------------------------------------------------------
/overflow-x.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Document</title>
 8 |   <style>
 9 |     * {
10 |       padding: 0px;
11 |     }
12 |     .p1 {
13 |       width: 230px;
14 |       height: 400px;
15 |       overflow: auto;
16 |     }
17 |     .p2 {
18 |       width: 200px;
19 |       height: 300px;
20 |       position: sticky;
21 |       z-index: 1;
22 |       top: 0px;
23 |       left: 0px;
24 |       background-color: brown;
25 |     }
26 | 
27 |     p {
28 |       width: 230px;
29 |       background-color: aqua;
30 |       opacity: 0.5;
31 |     }
32 |   </style>
33 | </head>
34 | <body>
35 |   <div class="p1">
36 |     <div class="p2">
37 |       
38 |     </div>
39 |     <p>01</p>
40 |     <p>02</p>
41 |     <p>03</p>
42 |     <p>04</p>
43 |     <p>05</p>
44 |     <p>06</p>
45 |     <p>07</p>
46 |     <p>08</p>
47 |     <p>09</p>
48 |     <p>10</p>
49 |     <p>11</p>
50 |     <p>12</p>
51 |     <p>13</p>
52 |     <p>14</p>
53 |     <p>15</p>
54 |     <p>16</p>
55 |     <p>17</p>
56 |     <p>18</p>
57 |     <p>19</p>
58 |     <p>20</p>
59 |   </div> 
60 | </body>
61 | </html>


--------------------------------------------------------------------------------
/textarea.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 |     <style>
 9 |         html,
10 |         body {
11 |             height: 100%;
12 |             margin: 0;
13 |         }
14 |         .container {
15 |             /* height: 100%; */
16 |             /* flex-direction: column; */
17 |             /* display: flex; */
18 |             /* align-items: flex-start; */
19 |             /* background-color: red; */
20 |         }
21 | 
22 |         /* .test {
23 |             background-color: tomato;
24 |         } */
25 |         .container div {
26 |             display: inline-block;
27 |             vertical-align: top;
28 |         }
29 |     </style>
30 | </head>
31 | <body>
32 |     <div class="container">
33 |         <div style="background-color: antiquewhite;">Div 1<br/>23423<br/>23423<br/>23423<br/>23423<br/>23423<br/>23423</div><!--
34 |         --><div style="background-color:aqua; height: 100%;">Div 2</div><!--
35 |         --><div style="background-color: rgb(112, 132, 165); height: 100%;">Div 3<br/>werwer</div>
36 |     </div>
37 | </body>
38 | </html>


--------------------------------------------------------------------------------
/copyspan.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Document</title>
 8 |   <style>
 9 |     span {
10 |       display: inline-block;
11 |     }
12 |   </style>
13 |   <script>
14 |     addEventListener('copy', (event) => { 
15 |       const selection = window.getSelection();
16 |       const str = selection.toString().replace(/\n%%BR%%\n/g, '');
17 |       event.clipboardData.setData('text/plain', str)
18 |       event.preventDefault()
19 |     });
20 |   </script>
21 |   <style>
22 |     .flex-br, .flex-nobr {
23 |       width: 0;
24 |       font-size: 0; 
25 |       line-height: 0;
26 |       height: 0;
27 |     }
28 |   </style>
29 | </head>
30 | <body>
31 |   <div class="test" style="display: flex;user-select: auto;">
32 |     <span>abc</span><span class="flex-nobr">%%BR%%</span><span>111</span>
33 |   </div>
34 |   <div class="test" style="display: flex">
35 |     <span>sssss</span><span class="flex-nobr">%%BR%%</span><span>222</span>
36 |   </div>
37 |   <div class="test1123123" style="display: flex">
38 |     <span>abc</span><span class="flex-nobr">%%BR%%</span><span>111</span>
39 |   </div>
40 | </body>
41 | </html>


--------------------------------------------------------------------------------
/drag-div.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Document</title>
 8 |   <style>
 9 |     div {
10 |       width: 300px;
11 |       height: 300px;
12 |       background-color: cadetblue;
13 |       position: absolute;
14 |       top: 10px;
15 |       left: 10px;
16 |     }
17 |   </style>
18 | 
19 | <script>
20 |   // 拖拽
21 |   let isDrag = false
22 |   let x = 0
23 |   let y = 0
24 |   function dragstart(e) {
25 |     isDrag = true
26 |     x = e.clientX - box.offsetLeft
27 |     y = e.clientY - box.offsetTop
28 |   }
29 |   function toggleDrag(e) {
30 |     if (isDrag) {
31 |       dragend(e)
32 |     } else {
33 |       dragstart(e)
34 |     }
35 |   }
36 | 
37 |   function draging(e) {
38 |     console.log('-----');
39 |     if (isDrag) {
40 |       box.style.left = e.clientX - x + 'px'
41 |       box.style.top = e.clientY - y + 'px'
42 |     }
43 |   }
44 |   function dragend(e) {
45 |     isDrag = false
46 |   }
47 |   document.addEventListener('mousemove', (event) => {
48 |     draging(event)
49 |   });
50 | </script>
51 | </head>
52 | <body>
53 |   <!-- 拖拽 -->
54 |   <div id="box" onmousedown="dragstart(event)" onmouseup="dragend(event)" />
55 | </body>
56 | </html>


--------------------------------------------------------------------------------
/justify-content-scroll.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <meta name="viewport" content="user-scalable=no">
 7 |   <title></title>
 8 |   <style>
 9 |     html,
10 |     body {
11 |       padding: 0;
12 |       margin: 0;
13 |     }
14 | 
15 |     #father {
16 |       position: absolute;
17 |       top: 0;
18 |       left: 0;
19 |       width: 100%;
20 |       height: 100%;
21 |       background-color: rgba(0, 0, 0, 0.5);
22 |       flex-direction: column;
23 |       display: flex;
24 |       align-items: center;
25 |       /* justify-content: center; */
26 |   }
27 |   #father :first-child {
28 |     margin-top: auto;
29 |   }
30 |   #father :last-child {
31 |     margin-bottom: auto;
32 |   }
33 | 
34 |     .son {
35 |       background: #7985d4;
36 |       width: 100%;
37 |       height: 80px;
38 |       font-size: 30px;
39 |       line-height: 80px;
40 |       text-align: center;
41 |       color: #fff;
42 |     }
43 |     .son:nth-child(2n-1) {
44 |       background: rgb(33, 58, 128);
45 |     }
46 |   </style>
47 | </head>
48 | 
49 | <body>
50 |   <div id="father">
51 |     <div class="son">1</div>
52 |     <div class="son">2</div>
53 |     <div class="son">3</div>
54 |     <div class="son">4</div>
55 |     <div class="son">5</div>
56 |   </div>
57 | </body>
58 | 
59 | </html>


--------------------------------------------------------------------------------
/mobile-scroll.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 | </head>
 9 | <body>
10 |     <div style="background-color: yellow; height: 200px; overflow: scroll">
11 |         123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>
12 |     123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>
13 |     123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>
14 |     123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>
15 |     123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>
16 |     123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/>
17 |     </div>
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/1219.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>梦的光点</title>
 9 | </head>
10 | 
11 | <body>
12 |   <div style="--size: 60px;"></div>
13 |   <div style="--size: 80px;"></div>
14 |   <div style="--size: 150px;"></div>
15 |   <style>
16 |     body {
17 |       margin: 0;
18 |       padding: 0;
19 |       background-color: black;
20 |       min-height: 100vh;
21 |       width: 100vw;
22 |     }
23 | 
24 |     div {
25 |       width: var(--size);
26 |       height: var(--size);
27 |       vertical-align: top;
28 |       
29 |       
30 |       border-radius: 50%;
31 |       margin: 0 20px;
32 |       display: inline-block;
33 |       background-color: #4da6e5;
34 |       box-shadow: 0 0 50px 5px #79bcec, 0 0 150px 5px #a6d2f2;
35 |       animation: bubble 5s linear infinite;
36 |       /* transform: translateY(calc(100vh - var(--size) / 2)) scale(1); */
37 |       
38 |     }
39 | 
40 |     div:nth-of-type(even) {
41 |       background-color: #df208f;
42 |       box-shadow: 0 0 50px 5px #e73a9f, 0 0 150px 5px #e867ff;
43 |     }
44 | 
45 |     @keyframes bubble {
46 |       from {
47 |         transform: translateY(calc(100vh - var(--size) / 2)) scale(0);
48 |       }
49 | 
50 |       to {
51 |         transform: translateY(-10vh) scale(1);
52 |       }
53 |     }
54 | 
55 | 
56 |   </style>
57 | </body>
58 | 
59 | </html>


--------------------------------------------------------------------------------
/multi_item_center.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <title>Document</title>
 7 |   <style>
 8 |     body {
 9 |       overflow-x: hidden;
10 |       font-size: 24px;
11 |     }
12 |     .scrollbar-hide {
13 |       /* 隐藏滚动条 */
14 |       scrollbar-width: none;
15 |       -ms-overflow-style: none;
16 |     }
17 |     .scrollbar-hide::-webkit-scrollbar {
18 |       display: none; /* Chrome Safari */
19 |     }
20 | 
21 |     
22 |     
23 |     .wrapper {
24 |       display: flex;
25 |       margin: 4em 1em;
26 |       overflow: auto;
27 |       /* justify-content: center; */
28 |     }
29 |     .wrapper :first-child {
30 |       margin-left: auto;
31 |     }
32 |     .wrapper :last-child {
33 |       margin-right: auto;
34 |     }
35 |     .item-button {
36 |       color: #989898;
37 |       display: block;
38 |       cursor: pointer;
39 |       user-select: none;
40 |       white-space: nowrap;
41 |     }
42 |     .wrapper .item-button+.item-button {
43 |       margin-left: 1.5em;
44 |     }
45 |     .item-button.active {
46 |       color: #333333;
47 |       font-weight: bold;
48 |     }
49 |   </style>
50 | </head>
51 | <body>
52 | 
53 |   <div class="wrapper scrollbar-hide">
54 |     <div class="item-button" >tab按钮1</div>
55 |     <div class="item-button active mla-l">tab按钮2</div>
56 |     <div class="item-button">tab按钮3</div>
57 |     <div class="item-button">tab按钮4</div>
58 |     <div class="item-button">超长tab按钮5</div>
59 |     <div class="item-button">超超长tab按钮6</div>
60 |   </div>
61 | 
62 | </body>
63 | </html>


--------------------------------------------------------------------------------
/100percent.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Document</title>
 8 |   <style>
 9 |     body, html {
10 |       margin: 0px;
11 |       width: 100%;
12 |     }
13 | 
14 |     #app {
15 |       width: 100vw;
16 |       background-color: lightblue
17 |     }
18 |   </style>
19 | </head>
20 | <body>
21 |   <div id="app">
22 |     test<br/>
23 |     test<br/>
24 |     test<br/>
25 |     test<br/>
26 |     test<br/>
27 |     test<br/>
28 |     test<br/>
29 |     test<br/>
30 |     test<br/>
31 |     test<br/>
32 |     test<br/>
33 |     test<br/>
34 |     test<br/>
35 |     test<br/>
36 |     test<br/>
37 |     test<br/>
38 |     test<br/>
39 |     test<br/>
40 |     test<br/>
41 |     test<br/>
42 |     test<br/>
43 |     test<br/>
44 |     test<br/>
45 |     test<br/>
46 |     test<br/>
47 |     test<br/>
48 |     test<br/>
49 |     test<br/>
50 |     test<br/>
51 |     test<br/>
52 |     test<br/>
53 |     test<br/>
54 |     test<br/>
55 |     test<br/>
56 |     test<br/>
57 |     test<br/>
58 |     test<br/>
59 |     test<br/>
60 |     test<br/>
61 |     test<br/>
62 |     test<br/>
63 |     test<br/>
64 |     test<br/>
65 |     test<br/>
66 |     test<br/>
67 |     test<br/>
68 |     test<br/>
69 |     test<br/>
70 |     test<br/>
71 |     test<br/>
72 |     test<br/>
73 |     test<br/>
74 |     test<br/>
75 |     test<br/>
76 |     test<br/>
77 |     test<br/>
78 |     test<br/>
79 |     test<br/>
80 |     test<br/>
81 |     test<br/>
82 |   </div>
83 | </body>
84 | </html>


--------------------------------------------------------------------------------
/trafter.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Document</title>
 8 |   <script src="./js/ResizeObserver.js"></script>
 9 |   <style>
10 |     body {
11 |       font-family: Arial, Helvetica, sans-serif;
12 |     }
13 |     #mytable {
14 |       width: 80%;
15 |       position: relative;
16 |     }
17 | 
18 | 
19 |     #mytable tr {
20 |       /* position: relative; */
21 |     }
22 |     #mytable tr::after {
23 |       content: ' ';
24 |       position: absolute;
25 |       left: 0px;
26 |       /* bottom: 0px; */
27 |       margin-top: calc(var(--row-height) - 2px);
28 |       height: 2px;
29 |       width: var(--process-value);
30 |       background-color: red;
31 |       transition: width 0.5s ease-in-out;
32 |     }
33 | 
34 |     
35 |   </style>
36 | </head>
37 | <body>
38 |   <table id="mytable" contenteditable="true" border="1" cellspacing="0">
39 |     <tr style="--process-value: 30%">
40 |       <td>1</td>
41 |       <td>2</td>
42 |       <td>3</td>
43 |     </tr>
44 |     <tr>
45 |       <td>4</td>
46 |       <td>5</td>
47 |       <td>6</td>
48 |     </tr>
49 |     <tr>
50 |       <td>7</td>
51 |       <td>8</td>
52 |       <td>9</td>
53 |     </tr>
54 |   </table>
55 |   <script>
56 |     const ro = new ResizeObserver((entries, observer) => {
57 |       const table = entries[0].target;
58 |       table.querySelectorAll('tr').forEach((row, index) => {
59 |         row.style.setProperty('--row-height', `${row.offsetHeight}px`);
60 |       });
61 |     });
62 | 
63 |     ro.observe(mytable);
64 |   </script>
65 | </body>
66 | </html>


--------------------------------------------------------------------------------
/content-line.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 |     <style>
 9 |         .content {
10 |             width: 200px;
11 |             height: 300px;
12 |             background-color: burlywood;
13 |             word-wrap: break-word;
14 |             word-break: break-all;
15 |             padding: 0 10px;
16 |             line-height: 30px;
17 |             position: relative;
18 |         }
19 | 
20 |         .line {
21 |             height: 1px;
22 |             width: calc(100% - 20px);
23 |             background-color: black;
24 |             position: absolute;
25 |         }
26 |     </style>
27 | </head>
28 | <body>
29 | 
30 |     <div class="content">
31 |         <div class="str">
32 |         lkjlkjflaskdjflaskjdflasjdflks jdfaasdflkjasdfl
33 |         asdflkajsdlfkjasldfkjasdlf
34 |         asdfjlaskjdflaksjdflakkjasdlf
35 |         asdfjlaskjdflaksjdflakkjasdlf
36 |         asdfjlaskjdflaksjdflak
37 |         </div>
38 |     </div>
39 | 
40 |     <script>
41 |         function loadLine() {
42 |             const lineHeight = 30;
43 |             var content = document.querySelector('.content');
44 |             var str = content.querySelector('.str');
45 |             for (var h = 30; h <= str.clientHeight; h += lineHeight) {
46 |                 var line = document.createElement('div');
47 |                 line.className = 'line';
48 |                 line.style.top = `${h}px`;
49 |                 content.appendChild(line);
50 |             }
51 |         }
52 | 
53 |         loadLine();
54 |     </script>
55 | </body>
56 | </html>


--------------------------------------------------------------------------------
/gap.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 |     <style>
 9 |         .container {
10 |             width: 100px;
11 |             height: 100px;
12 |             display: flex;
13 |             outline: 1.4px solid blue;
14 |             background-color: yellow;
15 |             position: relative;
16 |         }
17 |         .abs-child {
18 |             position: absolute;
19 |             top: 0px;
20 |             left: 0px;
21 |             width: 10px;
22 |             height: 10px;
23 |             background-color: aqua;
24 |         }
25 |         .container1 {
26 |             width: 10px;
27 |             height: 10px;
28 |             display: flex;
29 |             outline: 1px solid red;
30 |             /* background-color: yellow; */
31 |         }
32 |         .container div, .container1 div {
33 |             /* height: 10.6px; */
34 |             flex-grow: 1;
35 |             /* background: #88a86e; */
36 |         }
37 |         .child1 {
38 |             background-color: #2c8a20;
39 |         }
40 |         .child2 {
41 |             background-color: #323f7c;
42 |         }
43 |     </style>
44 | </head>
45 | <body>
46 |     <div class="container">
47 |         <!-- <div class="child1"></div> -->
48 |         <!-- <div class="child2"></div> -->
49 |         <div class="abs-child"></div>
50 |     </div>
51 |     <!-- <div class="container1">
52 |         <div class="child1"></div>
53 |         <div class="child2"></div>
54 |     </div> -->
55 |     <script>document.write(window.devicePixelRatio)</script>
56 | </body>
57 | </html>


--------------------------------------------------------------------------------
/word-break.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 |     <style>
 9 |         .parent-flex {
10 |             width: 150px;
11 |             background-color:lightgray;
12 |             display: flex;
13 |             align-items: center;
14 |         }
15 | 
16 |         .title {
17 |             outline: 1px solid seagreen;
18 |             /* word-break: break-all; */
19 |         }
20 | 
21 |         .badge {
22 |             width: 25px;
23 |             text-align: center;
24 |             height: 14px;
25 |             line-height: 14px;
26 |             flex-shrink: 0;
27 |             font-size: 12px;
28 |             background-color:crimson;
29 |             color: #ffffff;
30 |             border-radius: 2px;
31 |         }
32 |     </style>
33 | </head>
34 | <body>
35 | 
36 |     <div class="parent-flex">
37 | 
38 |         <div class="title">
39 |             <span>
40 |                 Loooooooooong texxxxt
41 |             </span>
42 |         </div>
43 | 
44 |         <div class="badge">vip</div>
45 |     </div>
46 | 
47 |     <br/>
48 | 
49 | 
50 |     <div class="parent-flex">
51 | 
52 |         <div class="title">
53 |             <span>
54 |                 Loxxxxxxoong texxt
55 |             </span>
56 |         </div>
57 | 
58 |         <div class="badge">vip</div>
59 |     </div>
60 |     
61 | 
62 |     <script>
63 |         var titles = document.querySelectorAll('.title');
64 |         titles.forEach(t => {
65 |             t.style.width = t.querySelector('span').offsetWidth + 'px';
66 |         });
67 |     </script>
68 |     
69 | </body>
70 | </html>


--------------------------------------------------------------------------------
/scroll.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 |     <style>
 9 |         body {
10 |             font-size: 38px;
11 |             line-height: 2.7;
12 |             text-align: center;
13 |             margin: 0px;
14 |         }
15 |         .toolbar {
16 |             display: flex;
17 |             justify-content:space-around
18 |         }
19 |         .main {
20 |             height: 400px;
21 |             overflow: auto;
22 |             background-color: #364174;
23 |             color: #fff;
24 |             /* scroll-behavior: smooth; */
25 |         }
26 |     </style>
27 |     <script>
28 |         function test() {
29 |             // const main = document.querySelector('.main');
30 |             // main.scrollTop = 2317;
31 |             const a40 = document.querySelector('#a40');
32 |             a40.scrollIntoView({
33 |                 behavior: 'smooth'
34 |             });
35 |         }
36 |     </script>
37 | </head>
38 | <body>
39 | 
40 |     <div class="toolbar">
41 |         <a href="#a00">00</a>
42 |         <a href="#a20">20</a>
43 |         <a href="#a40">40</a>
44 |         <button onclick="test()">test</button>
45 |     </div>
46 | 
47 | 
48 |     <div class="main">
49 |         <a id="a00"></a>00<br/>01<br/>02<br/>03<br/>04<br/>05<br/>06<br/>07<br/>08<br/>09<br/>10<br/>11<br/>12<br/>13<br/>14<br/>15<br/>16<br/>17<br/>18<br/>19<br/>
50 |         <a id="a20"></a>20<br/>21<br/>22<br/>23<br/>24<br/>25<br/>26<br/>27<br/>28<br/>29<br/>30<br/>31<br/>32<br/>33<br/>34<br/>35<br/>36<br/>37<br/>38<br/>39<br/>
51 |         <a id="a40"></a>40<br/>41<br/>42<br/>43<br/>44<br/>45<br/>46<br/>47<br/>48<br/>49<br/>50<br/>51<br/>52<br/>53<br/>54<br/>55<br/>56<br/>57<br/>58<br/>59<br/>
52 |     </div>
53 | 
54 | 
55 | 
56 | </body>
57 | </html>


--------------------------------------------------------------------------------
/flex-transition-demo.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Document</title>
 8 |   <style>
 9 |     body, html {
10 |       height: 100%;
11 |       margin: 0;
12 |     }
13 |     .wrapper {
14 |       display: flex;
15 |       flex-direction: column;
16 |       height: 100%;
17 |       overflow: hidden;
18 |       background-color: linen;
19 |     }
20 |     .item {
21 |       text-align: center;
22 |       flex-grow: 0;
23 |       transition: flex-grow .3s;
24 |       position: relative;
25 |     }
26 |     .title {
27 |       background-color: rgb(150, 181, 183);
28 |       color: rgb(4, 43, 46);
29 |       height: 44px;
30 |       line-height: 44px;
31 |       border-top:rgb(125, 157, 160) solid 1px;
32 |     }
33 |     .active {
34 |       flex-grow: 1;
35 |     }
36 |     .content {
37 |       position: absolute;
38 |       top: 44px;
39 |       left: 0;
40 |       width: 100%;
41 |       overflow: auto;
42 |     }
43 |   </style>
44 | </head>
45 | <body>
46 |   <div class="wrapper">
47 |     <div class="item">
48 |       <div class="title">111</div>
49 |       <div class="content">
50 |         asdkfjasldfkjas;ldf
51 |         asdflkajsdfl
52 |       </div>
53 |     </div>
54 |     <div class="item active">
55 |       <div class="title">222</div>
56 |       <div class="content">
57 |         1231
58 |       </div>
59 |     </div>
60 |     <div class="item">
61 |       <div class="title">333</div>
62 |       <div class="content">
63 |         43laksdjflaskdj
64 |       </div>
65 |     </div>
66 |   </div>
67 |   <script>
68 |     const items = document.querySelectorAll('.title');
69 |     items.forEach(item => {
70 |       item.addEventListener('click', () => {
71 |         document.querySelector('.active').classList.remove('active');
72 |         item.parentElement.classList.toggle('active');
73 |       });
74 |     });
75 |   </script>
76 | </body>
77 | </html>


--------------------------------------------------------------------------------
/map.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <script src="//api.map.baidu.com/api?v=1.0&&type=webgl&ak=p07Q22uzDZR0jBnTIIbfy7ukOUBRlQhr"></script>
 8 |   <title>Map Demo</title>
 9 |   <style>
10 |     html{height:100%}    
11 |     body{height:100%;margin:0px;padding:0px}    
12 |     #container{height:100%}
13 | 
14 |     .top-tool-wrapper {
15 |       position: absolute;
16 |       box-sizing: border-box;
17 |       top: 24px;
18 |       width: 100%;
19 |       height: 40px;
20 |       display: flex;
21 |       padding: 0 24px;
22 |       z-index: 99;
23 |       /* background-color: red; */
24 |       pointer-events: none;
25 |     }
26 |     
27 |     .top-tool-wrapper .button {
28 |       pointer-events: auto;
29 |       height: 40px;
30 |       line-height: 40px;
31 |       cursor: pointer;
32 |       padding: 0 24px;
33 |       background-color: #409EFF;
34 |       color: #fff;
35 |       box-shadow: 0 2px 4px 0 rgba(0,0,0,.12);
36 |       border-radius: 4px;
37 |       user-select:none;
38 |     }
39 | 
40 |     .top-tool-wrapper .button:hover {
41 |       background-color: #53a8fc;
42 |     }
43 |     .top-tool-wrapper .button+.button {
44 |       margin-left: 16px;
45 |     }
46 |     .flex-spacer {
47 |       flex: 1;
48 |     }
49 |   </style>
50 | </head>
51 | <body>
52 |   <div id="container"></div>
53 | 
54 |   <div class="top-tool-wrapper">
55 |     <div class="button" onclick="alert('test')">test</div>
56 |     <div class="button" onclick="alert('test')">test</div>
57 |     <div class="button" onclick="alert('test')">test</div>
58 |     <div class="button" onclick="alert('test')">test</div>
59 |     <div class="button" onclick="alert('test')">test</div>
60 |     <div class="flex-spacer"></div>
61 |     <div class="button" onclick="alert('test')">test</div>
62 |   </div>
63 | 
64 |   <script>
65 |     var map = new BMapGL.Map("container");
66 |     map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
67 | 	  map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
68 |   </script>
69 | </body>
70 | </html>


--------------------------------------------------------------------------------
/height-transition.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Document</title>
 8 |   <style>
 9 |     body, html {
10 |       margin: 0;
11 |       height: 100%;
12 |       background: linear-gradient(rgb(64, 145, 247), rgb(107, 35, 232))
13 |     }
14 |     .button {
15 |       position: absolute;
16 |       top: 80px;
17 |       left: 400px;
18 |       height: 42px;
19 |       line-height: 42px;
20 |       text-align: center;
21 |       padding: 0 24px;
22 |       border-radius: 4px;
23 |       background-color: rgb(255, 255, 255);
24 |       cursor: default;
25 |       color: #232323;
26 |       user-select: none;
27 |     }
28 |     .button:hover {
29 |       background-color: rgb(242, 242, 242);
30 |     }
31 |     .search-wrapper {
32 |       position: absolute;
33 |       top: 80px;
34 |       left: 80px;
35 |       padding: 12px 0px 0px 0px;
36 |       width: 300px;
37 |       border-radius: 4px;
38 |       background-color: #fff;
39 |       display: flex;
40 |       flex-direction: column;
41 |       overflow: auto;
42 |     }
43 |     .search-wrapper input {
44 |       margin: 0px 12px 12px 12px;
45 |       width: calc(100% - 28px);
46 |       border: none;
47 |       outline: none;
48 |       font-size: 14px;
49 |     }
50 | 
51 |     .res {
52 |       padding-left: 12px;
53 |       overflow: auto;
54 |       transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
55 |       max-height: 0px;
56 |       overflow: hidden;
57 |     }
58 | 
59 |     .search-wrapper:focus-within .res, .res:hover {
60 |       max-height: 200vh;
61 |       transition: max-height 1s ease-in-out;
62 |     }
63 |     .res:hover {
64 |       max-height: 50vh;
65 |       overflow: auto;
66 |     }
67 | 
68 |   </style>
69 | </head>
70 | <body>
71 |   <div id="txt" class="search-wrapper">
72 |     <input id="tt" placeholder="请输入查询条件"/>
73 |     <div class="res">
74 |       <div>aslkdfjalskdjf</div>
75 |       <div>aslkdfjalskdjf</div>
76 |       <div>aslkdfjalskdjf</div>
77 |       <div>aslkdfjalskdjf</div>
78 |       <div>aslkdfjalskdjf</div>
79 |       <div>aslkdfjalskdjf</div>
80 |       <div>aslkdfjalskdjf</div>
81 |       <div>aslkdfjalskdjf</div>
82 |       <div>aslkdfjalskdjf</div>
83 |       <div>aslkdfjalskdjf</div>
84 |       <div>aslkdfjalskdjf</div>
85 |       <div>aslkdfjalskdjf</div>
86 |       <div>aslkdfjalskdjf</div>
87 |     </div>
88 |   </div>
89 |   
90 | </body>
91 | </html>


--------------------------------------------------------------------------------
/sticky.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>top-bar - demo</title>
 8 |     <style>
 9 |         html, body {
10 |             margin: 0px;
11 |             padding: 0px;
12 |         }
13 |         body {
14 |             /* padding-top: 60px; */
15 |         }
16 | 
17 |         .top-bar {
18 |             /* 基础样式 */
19 |             background-color:cornflowerblue;
20 |             font-size: larger;
21 |             color: #fff;
22 |             padding: 15px 0px;
23 |             width: 100%;
24 |             text-align: center;
25 |             /* End */
26 | 
27 |             position: sticky;
28 |             top: 0px;
29 |             opacity: 0.9;
30 | 
31 |         }
32 |         .content {
33 |             text-align: center;
34 |         }
35 |     </style>
36 | </head>
37 | <body>
38 | 
39 |     <div class="top-bar">
40 |         <div>牛仔很忙</div>
41 |         <div>牛仔很忙</div>
42 |         <div>牛仔很忙</div>
43 |         <div>牛仔很忙</div>
44 |         <div>牛仔很忙</div>
45 |     </div>
46 | 
47 |     <div class="content">
48 |         <p>呜啦啦啦火车笛 随着奔腾的马蹄</p>
49 |         <p>小妹妹吹着口琴 夕阳下美了剪影</p>
50 |         <p>我用子弹写日记 介绍完了风景</p>
51 |         <p>接下来换介绍我自己</p>
52 |         <p>我虽然是个牛仔 在酒吧只点牛奶</p>
53 |         <p>为什么不喝啤酒 因为啤酒伤身体</p>
54 |         <p>很多人不长眼睛 嚣张都靠武器</p>
55 |         <p>赤手空拳就缩成蚂蚁</p>
56 |         <p>不用麻烦了 不用麻烦了</p>
57 |         <p>不用麻烦 不用麻烦了 不用麻烦了</p>
58 |         <p>你们一起上 我在赶时间</p>
59 |         <p>每天决斗观众都累了 英雄也累了</p>
60 |         <p>不用麻烦了 不用麻烦了</p>
61 |         <p>副歌不长你们有几个 一起上好了</p>
62 |         <p>正义呼唤我 美女需要我</p>
63 |         <p>牛仔很忙的</p>
64 |         <p>我啦啦啦骑毛驴 因为马跨不上去</p>
65 |         <p>洗澡都洗泡泡浴 因为可以玩玩具</p>
66 |         <p>我有颗善良的心 都只穿假牛皮</p>
67 |         <p>喔跌倒时尽量不压草皮</p>
68 |         <p>枪口它没长眼睛 我曾经答应上帝</p>
69 |         <p>除非是万不得已 我尽量射橡皮筋</p>
70 |         <p>老板先来杯奶昔 要逃命前请你</p>
71 |         <p>顺便喂喂我那只小毛驴</p>
72 |         <p>不用麻烦了 不用麻烦了</p>
73 |         <p>不用麻烦 不用麻烦了 不用麻烦了</p>
74 |         <p>你们一起上 我在赶时间</p>
75 |         <p>每天决斗观众都累了 英雄也累了</p>
76 |         <p>不用麻烦了 不用麻烦了</p>
77 |         <p>副歌不长你们有几个 一起上好了</p>
78 |         <p>正义呼唤我 美女需要我</p>
79 |         <p>牛仔很忙的</p>
80 |         <p>不用麻烦了 不用麻烦了</p>
81 |         <p>不用麻烦 不用麻烦了 不用麻烦了</p>
82 |         <p>你们一起上 我在赶时间</p>
83 |         <p>每天决斗观众都累了 英雄也累了</p>
84 |         <p>不用麻烦了 不用麻烦了</p>
85 |         <p>副歌不长你们有几个 一起上好了</p>
86 |         <p>正义呼唤我 美女需要我</p>
87 |         <p>牛仔很忙的</p>
88 |     </div>
89 | 
90 |     <!-- <script>
91 |         document.body.style.paddingTop = document.querySelector('.top-bar').clientHeight + "px";
92 |     </script> -->
93 | </body>
94 | </html>


--------------------------------------------------------------------------------
/dark_demo.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 |     <style>
 9 |         body {
10 |             margin: 0px;
11 |             background: white;
12 |             color: #333; 
13 |         }
14 |         .wrapper {
15 |             text-align: center;
16 |             display: flex;
17 |             width: 900px;
18 |             margin: 0 auto;
19 |             font-size: larger;
20 |         }
21 |         .wrapper .lyric {
22 |             flex-grow: 1;
23 |             padding: 10px 0px;
24 |         }
25 |         .wrapper .lyric div {
26 |             line-height: 2;
27 |             height: calc(100vh - 180px);
28 |             overflow: auto;
29 |         }
30 |         .wrapper .cover img {
31 |             width: 400px;
32 |             margin: 0 20px;
33 |             position: relative;
34 |             top: calc(50vh - 200px);
35 |             border-radius: 200px;
36 |         }
37 | 
38 |         @media screen and (max-width: 900px) {
39 |             .wrapper .cover {
40 |                 display: none;
41 |             }
42 | 
43 |             .wrapper {
44 |                 width: 100%;
45 |             }
46 |             .wrapper .lyric div {
47 |                 height: inherit;
48 |                 overflow: inherit;
49 |             }
50 |         }
51 | 
52 |         @media screen and (prefers-color-scheme: dark) {
53 |             body {
54 |                 background-color: #202124;
55 |                 color: #eee;
56 |             }
57 |         }
58 |         
59 | 
60 | 
61 |         
62 |     </style>
63 | </head>
64 | <body>
65 |     <div class="wrapper">
66 |         <div class="cover">
67 |             <img src="./images/yrftx.jpg"/>
68 |         </div>
69 |         <div class="lyric">
70 |             <h1>《本草纲目》</h1></h1>
71 |             <div>如果华佗再世 崇洋都被医治<br/>外邦来学汉字 激发我民族意识<br/>马钱子决明子苍耳子 还有莲子<br/>黄药子苦豆子川楝子 我要面子<br/>用我的方式 改写一部历史<br/>没什么别的事 跟着我念几个字<br/>山药当归枸杞 GO<br/>山药 当归 枸杞 GO<br/>看我抓一把中药 服下一帖骄傲<br/>我表情悠哉 跳个大概<br/>动作轻松自在 你学不来<br/>霓虹的招牌 调整好状态<br/>在华丽的城市 等待醒来<br/>我表情悠哉 跳个大概<br/>用书法书朝代 内力传开<br/>豪气挥正楷 给一拳对白<br/>结局平躺下来 看谁厉害<br/>炼成什么丹 揉成什么丸<br/>鹿茸切片不能太薄<br/>老师傅的手法不能这样乱抄<br/>龟苓膏云南白药 还有冬虫夏草<br/>自己的音乐自己的药 分量刚刚好<br/>听我说中药苦 抄袭应该更苦<br/>快翻开本草纲目 多看一些善本书<br/>蟾酥地龙 已翻过江湖<br/>这些老祖宗的辛苦 我们一定不能输<br/>就是这个光 就是这个光 一起唱<br/>（就是这个光 就是这个光 Hey~）<br/>让我来调个偏方 专治你媚外的内伤<br/>已扎根千年的汉方 有别人不知道的力量<br/>我表情悠哉 跳个大概<br/>动作轻松自在 你学不来<br/>霓虹的招牌 调整好状态<br/>在华丽的城市 等待醒来<br/>我表情悠哉 跳个大概<br/>用书法书朝代 内力传开<br/>豪气挥正楷 给一拳对白<br/>结局平躺下来 看谁厉害<br/>又蹲 小僵尸蹲 暗巷点灯<br/>又蹲 小僵尸蹲 钻萝卜坑<br/>又蹲 小僵尸蹲 念咒语哼<br/>蹲 小僵尸 蹲 小僵尸 蹲<br/>又蹲 小僵尸蹲 暗巷点灯<br/>又蹲 小僵尸蹲 钻萝卜坑<br/>又蹲 小僵尸蹲 念咒语哼<br/>啦啦啦啦啦（啦啦啦啦啦）<br/>啦啦啦啦啦（啦啦啦啦啦 嘿～）<br/>啦啦啦啦啦（啦啦啦啦啦）<br/>啦啦啦啦啦（啦啦啦啦啦）</div>
72 |         </div> 
73 |     </div>
74 |      
75 | </body>
76 | </html>


--------------------------------------------------------------------------------
/timeline.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 |     <style>
 9 |         .tl-photos {
10 |             display: flex;
11 |             width: 400px;
12 |             flex-wrap: wrap;
13 |         }
14 |         
15 |         /* 只有1张照片 */
16 |         .tl-photos>img:only-child {
17 |             width: 100%;
18 |         }
19 | 
20 |         /* 有2张照片 */
21 |         .tl-photos>img:first-child:nth-last-child(2),
22 |         .tl-photos>img:nth-child(2):nth-last-child(1) 
23 |         {
24 |             width: 198px;
25 |         }
26 |         .tl-photos>img:nth-child(2):nth-last-child(1) 
27 |         {
28 |             margin-left: 3px;
29 |         }
30 | 
31 |         /* 有3张照片 */
32 |         .tl-photos>img:first-child:nth-last-child(3),
33 |         .tl-photos>img:nth-child(2):nth-last-child(2),
34 |         .tl-photos>img:nth-child(3):nth-last-child(1) 
35 |         {
36 |             width: 130px;
37 |         }
38 |         .tl-photos>img:nth-child(2):nth-last-child(2),
39 |         .tl-photos>img:nth-child(3):nth-last-child(1) 
40 |         {
41 |             margin-left: 3.33px;
42 |         }
43 | 
44 |         /* 有4张照片 */
45 |         .tl-photos>img:first-child:nth-last-child(4),
46 |         .tl-photos>img:first-child:nth-last-child(4) ~ img {
47 |             width: 198px;
48 |         }
49 |         .tl-photos>img:nth-child(2):nth-last-child(3),
50 |         .tl-photos>img:nth-child(4):nth-last-child(1) {
51 |             margin-left: 3px;
52 |         }
53 |         .tl-photos>img:nth-child(2):nth-last-child(3) ~ img {
54 |             margin-top: 3px;
55 |         }
56 | 
57 | 
58 |         /* 有5张以上照片 */
59 |         .tl-photos>img:first-child:nth-last-child(n + 5),
60 |         .tl-photos>img:first-child:nth-last-child(n + 5) ~ img {
61 |             width: 130px;
62 |         }
63 | 
64 |         .tl-photos>img:nth-child(3n - 1),
65 |         .tl-photos>img:nth-child(3n) {
66 |             margin-left: 3px;
67 |         }
68 |         /* 解决上面的margin-left导致只有4张照片时的特殊情况 */
69 |         .tl-photos>img:nth-child(3):nth-last-child(2){
70 |             margin-left: 0px;
71 |         }
72 |         
73 |         .tl-photos>img:nth-child(3) ~ img {
74 |             margin-top: 3px;
75 |         }
76 | 
77 |     </style>
78 | </head>
79 | <body>
80 |     
81 |     <div class="tl-photos">
82 |         <img src="images/tl1.png" />
83 |         <img src="images/tl2.png" />
84 |         <img src="images/tl3.png" />
85 |         <img src="images/tl4.png" />
86 |         <img src="images/tl5.png" />
87 |         <!-- <img src="images/tl6.png" /> -->
88 |         <!-- <img src="images/tl7.png" /> -->
89 |         <!-- <img src="images/tl8.png" /> -->
90 |         <!-- <img src="images/tl9.png" /> -->
91 |     </div>
92 | 
93 | </body>
94 | </html>


--------------------------------------------------------------------------------
/container_no.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |   <title>Document</title>
  7 |   <style>
  8 |     #right, #wrong {
  9 |       display: none;
 10 |     }
 11 |     body, html {
 12 |       margin: 0px;
 13 |       width: 100%;
 14 |       height: 100%;
 15 |       background-color: black;
 16 |     }
 17 |     #txt {
 18 |       width: 240px;
 19 |       height: 30px;
 20 |       border: 1px solid #ccc;
 21 |       border-radius: 5px;
 22 |       outline: none;
 23 |       padding: 0 5px;
 24 |     }
 25 |     #txt:focus {
 26 |       /* border: 1px solid #dcdcdc; */
 27 |       box-shadow: 0 0 3px #dcdcdc;
 28 |     }
 29 |     .wrapper {
 30 |       width: 100%;
 31 |       height: 100%;
 32 |       display: flex;
 33 |       justify-content: center;
 34 |       align-items: center;
 35 |     }
 36 |     .center {
 37 |       transform: translateY(-50%);
 38 |       width: 280px;
 39 |       height: 64px;
 40 |     }
 41 |   </style>
 42 |   <script>
 43 |     // 校验集装箱号码
 44 |     function check(value) {
 45 |       let getNumber = new Map();
 46 |       let num = 10;
 47 |       // 生成字母与数字对照表
 48 |       for (let i = 0; i < 26; i++) {
 49 |           let word = String.fromCharCode((65 + i));
 50 |           // 对应码取消了11的倍数，比如11，22，33，所以我们要排除掉
 51 |           if (num === 11 || num === 22 || num === 33) {
 52 |               num += 1;
 53 |           }
 54 |           getNumber.set(word, num);
 55 |           num += 1;
 56 |       }
 57 |       let sum = 0;
 58 |       // 取四个字母对应的数字，并进行计算
 59 |       for (let i = 0; i < 4; i++) {
 60 |           sum += getNumber.get(value[i]) * Math.pow(2, i);
 61 |       }
 62 |       // 对前6个数字进行计算
 63 |       for (let i = 4; i < 10; i++) {
 64 |           sum += value[i] * Math.pow(2, i);
 65 |       }
 66 |       // 再对10取余是防止出现校验码为10的情况，假如校验码为10，则取0
 67 |       checkDigit = sum % 11 % 10;
 68 |       // 判断校验码是否与最后一位数字相等
 69 |       if (checkDigit === Number(value[10])) {
 70 |           console.log('校验通过')
 71 |           return true;
 72 |       } else {
 73 |           console.log('校验失败')
 74 |           return false;
 75 |       }
 76 | 
 77 |     };
 78 |     
 79 |     function onInput() {
 80 |       if (txt.value === '') {
 81 |         right.style.display = 'none';
 82 |         wrong.style.display = 'none';
 83 |         return;
 84 |       }
 85 |       if (check(txt.value)) {
 86 |         right.style.display = 'inline';
 87 |         wrong.style.display = 'none';
 88 |       } else {
 89 |         wrong.style.display = 'inline';
 90 |         right.style.display = 'none';
 91 |       }
 92 |     }
 93 |   </script>
 94 | </head>
 95 | <body>
 96 |   <div class="wrapper">
 97 |     <div></div>
 98 |     <div class="center">
 99 |       <div style="color: #aaa; height: 32px; line-height: 32px;">集装箱号：</div>
100 |       <input id="txt" oninput="onInput()" />
101 |       <span id="wrong">❌</span>
102 |       <span id="right">✅</span>
103 |     </div>
104 |   </div>
105 | </body>
106 | </html>


--------------------------------------------------------------------------------
/floatDemo.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <!--一楼开始-->
13 |     <div style="width:100%;height:40px;background-color:#f7f7f7;">
14 |         <div style="width:1200px;height:40px;margin:0 auto;line-height:40px;color:#666;">
15 |             <div style="float:left;">
16 |                 <img src="images/phone_01.png" style="vertical-align:middle; width:17px">
17 |                 <span style="font-size:16px; font-weight:blod;">400-000-0000</span>
18 |                 <span style="font-size:12px;">（9:00-21:00）</span>
19 |             </div>
20 |             <div style="float:right; font-size:14px;">
21 |                 <span style="padding-right:20px;">您好，欢迎来到！</span>
22 |                 <span style="padding:0 10px;">|</span>
23 |                 <a href="#" style="text-decoration:none; padding:0 10px; color:#666;">登录</a>
24 |                 <span style="padding:0 10px;">|</span>
25 |                 <a href="#" style="text-decoration:none; padding:0 10px; color:#666;">免费注册</a>
26 |                 <span style="padding:0 10px;">|</span>
27 |                 <a href="#" style="text-decoration:none; padding:0 10px; color:#666;">帮助中心</a>
28 |             </div>
29 |         </div>
30 | 
31 |     </div>
32 |     <!--一楼结束-->
33 |     <!--二楼开始-->
34 |     <div style="width:1200px; height:150px; line-height:150px; text-align:center; margin:0 auto; border:2px solid red;">
35 |         <div style="float:left; width:226px;">
36 |             <img src="images/index_02.png" style="vertical-align:middle; margin-top:48px;">
37 |         </div>
38 |         <div style="font-size:16px; width:600px; float:left;">
39 |             <a href="#" style="text-decoration:none; padding:0 15px; color:#175a2f;">首页</a>
40 |             <a href="#" style="text-decoration:none; padding:0 15px; color:#333333">我要<img src="images/index_06.png"></a>
41 |             <a href="#" style="text-decoration:none; padding:0 15px; color:#333333">我要</a>
42 |             <a href="#" style="text-decoration:none; padding:0 15px; color:#333333">运营报告</a>
43 |             <a href="#" style="text-decoration:none; padding:0 15px; color:#333333">关于我们
44 |                 <img src="images/index_06.png"></a>
45 |             <a href="#" style="text-decoration:none; padding:0 15px; color:#333333">特权金</a>
46 |         </div>
47 |         <div style="float:right; font-size:14px; width:177px; text-align:center; margin:0 auto;">
48 |             <a href="#" style="display:inline-block; width:80px; height:40px; line-height:40px; margin-top:57px; text-align:center; color:#fff; background-color:#398e57; border-radius:2px; margin-right:10px; text-decoration:none;">登录</a>
49 |             <a href="#" style="display:inline-block; width:80px; height:40px; line-height:40px; margin-top:57px; text-align:center; color:#398e57; background-color:#fff; border:1px solid #398e57; border-radius:2px; text-decoration:none;">注册</a>
50 |         </div>
51 |     </div>
52 |     <!--二楼结束-->
53 | </body>
54 | 
55 | </html>


--------------------------------------------------------------------------------
/scroll-custom.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | <head>
  4 | <meta charset="utf-8">
  5 | <title>自定义滚动条</title>
  6 | <style>
  7 | * {
  8 | 	margin:0;
  9 | 	padding:0;
 10 | }
 11 | #div1 {
 12 | 	width:500px;
 13 | 	height:20px;
 14 | 	background:#eee;
 15 | 	margin:50px auto 0;
 16 | 	border-radius:10px;
 17 | 	position:relative;
 18 | }
 19 | #div2 {
 20 | 	width:100px;
 21 | 	height:20px;
 22 | 	background:#dd6e1e;
 23 | 	border-radius:10px;
 24 | 	position:absolute;
 25 | 	left:0;
 26 | 	top:0;
 27 | }
 28 | #div3 {
 29 | 	width:500px;
 30 | 	height:300px;
 31 | 	border:1px #ddd solid;
 32 | 	margin:30px auto 0;
 33 | 	border-radius:10px;
 34 | 	overflow: auto;
 35 | 	position:relative;
 36 | 	scrollbar-width: none; /* firefox */
 37 |   -ms-overflow-style: none; /* IE 10+ */
 38 | }
 39 | #div3::-webkit-scrollbar {
 40 | 	display: none; /* Chrome Safari */
 41 | }
 42 | #div4 {
 43 | 	position:absolute;
 44 | }
 45 | #div4 p {
 46 | 	text-indent:1em;
 47 | 	margin:10px;
 48 | 	color:#666;
 49 | 	font-size:14px;
 50 | }
 51 | </style>
 52 | </head>
 53 | <body>
 54 | <div id="div1">
 55 |     <div id="div2"></div>
 56 | </div>
 57 | <div id="div3">
 58 |     <div id="div4">
 59 |         <p>jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。</p>
 60 |         <p>jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。</p>
 61 |         <p>2006年1月John Resig等人创建了jQuery；8月，jQuery的第一个稳定版本，并且已经支持CSS选择符、事件处理和AJAX交互。</p>
 62 |         <p>2007年7月，jQuery 1.1.3版发布，这次小版本的变化包含了对jQuery选择符引擎执行速度的显著提升。从这个版本开始，jQuery的性能达到了Prototype、Mootools以及Dojo等同类JavaScript库的水平。同年9月，jQuery 1.2版发布，它去掉了对XPath选择符的支持，原因是相对于CSS语法它已经变得多余了。这一版能够对效果进行更为灵活的定制，而且借助新增的命名空间事件，也使插件开发变得更容易。同时，jQuery UI项目也开始启动，这个新的套件是作为曾经流行但已过时的Interface插件的替代项目而发布的。jQuery UI中包含大量预定义好的部件（widget），以及一组用于构建高级元素（例如可拖放、拖拽、排序）的工具。</p>
 63 | <p>2008年5月，jQuery 1.2.6版发布，这版主要是将Brandon Aaron开发的流行的Dimensions插件的功能移植到了核心库中，同时也修改了许多BUG，而且有不少的性能得到提高。因此，如果以前的jQuery版本升级到1.2.6，那么完全可以从代码中排除Dimensions插件（一个获得元素尺寸、定位的插件）。</p>
 64 | <p>2010年1月，也是jQuery的四周年生日，jQuery 1.4版发布，为了庆祝jQuery四周岁生日，jQuery团队特别创建了jquery14.com站点，带来了连续14天的新版本专题介绍。</p>
 65 |     </div>
 66 | </div>
 67 | 
 68 | <script>
 69 | div2.onmousedown = function(e) {
 70 |     var ev = e || event;
 71 |     var l = ev.clientX - this.offsetLeft;
 72 | 		div3.setAttribute('moving', '1')
 73 |     document.onmousemove = function(e) {
 74 |         var ev = e || event;
 75 |         var needL = ev.clientX - l;
 76 |         //不超过左边距离
 77 |         needL < 0 ? needL = 0 : needL;
 78 |         //不超过右边距离
 79 |         var maxL = div1.offsetWidth - div2.offsetWidth;
 80 |         needL > maxL ? needL = maxL : needL;
 81 |         //计算滚动比例
 82 |         var pre = div2.offsetLeft / maxL;
 83 | 
 84 |         div2.style.left = needL + 'px';
 85 | 				div3.scrollTop = (div3.scrollHeight - div3.clientHeight) * pre;
 86 | 
 87 |         // div4.style.top = -div3.offsetHeight * pre + 'px';
 88 |         // div3.scrollTop = div3.offsetHeight * pre + 'px';
 89 | 
 90 |     };
 91 |     document.onmouseup = function() {
 92 |       document.onmousemove = document.onmouseup = null;
 93 | 			div3.removeAttribute('moving')
 94 |     };
 95 |     return false;
 96 | }
 97 | div3.addEventListener("scroll", (e)=>{
 98 | 	if (div3.getAttribute('moving')) {
 99 | 		return
100 | 	}
101 | 	const pre = e.target.scrollTop / (e.target.scrollHeight - e.target.clientHeight)
102 | 	div2.style.left = (div1.clientWidth - div2.offsetWidth) * pre + 'px';
103 | });
104 | </script>
105 | 
106 | </body>
107 | </html>
108 | 


--------------------------------------------------------------------------------
/print_header.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
  7 |     <title>Document</title>
  8 |     <style type="text/css" >
  9 |         
 10 |     </style>
 11 | </head>
 12 | <body>
 13 |     <table>
 14 |         <tr>
 15 |                 <th>班级</th>
 16 |                 <th>姓名</th>
 17 |                 <th>性别</th>
 18 |                 <th>年龄</th>
 19 |         </tr>
 20 |         <tr>
 21 |             <td>1</td>
 22 |             <td>张三</td>
 23 |             <td>男</td>
 24 |             <td>20</td>
 25 |         </tr>
 26 |         <tr>
 27 |             <td>2</td>
 28 |             <td>李四</td>
 29 |             <td>男</td>
 30 |             <td>21</td>
 31 |         </tr>
 32 |         <tr>
 33 |             <td>3</td>
 34 |             <td>王五</td>
 35 |             <td>男</td>
 36 |             <td>22</td>
 37 |         </tr>
 38 |         <tr>
 39 |             <td>4</td>
 40 |             <td>赵六</td>
 41 |             <td>男</td>
 42 |             <td>23</td>
 43 |         </tr>
 44 |         <tr>
 45 |             <td>5</td>
 46 |             <td>钱七</td>
 47 |             <td>男</td>
 48 |             <td>24</td>
 49 |         </tr>
 50 |         <tr>
 51 |             <td>1</td>
 52 |             <td>张三</td>
 53 |             <td>男</td>
 54 |             <td>20</td>
 55 |         </tr>
 56 |         <tr>
 57 |             <td>2</td>
 58 |             <td>李四</td>
 59 |             <td>男</td>
 60 |             <td>21</td>
 61 |         </tr>
 62 |         <tr>
 63 |             <td>3</td>
 64 |             <td>王五</td>
 65 |             <td>男</td>
 66 |             <td>22</td>
 67 |         </tr>
 68 |         <tr>
 69 |             <td>4</td>
 70 |             <td>赵六</td>
 71 |             <td>男</td>
 72 |             <td>23</td>
 73 |         </tr>
 74 |         <tr>
 75 |             <td>5</td>
 76 |             <td>钱七</td>
 77 |             <td>男</td>
 78 |             <td>24</td>
 79 |         </tr>
 80 |         <tr>
 81 |             <td>1</td>
 82 |             <td>张三</td>
 83 |             <td>男</td>
 84 |             <td>20</td>
 85 |         </tr>
 86 |         <tr>
 87 |             <td>2</td>
 88 |             <td>李四</td>
 89 |             <td>男</td>
 90 |             <td>21</td>
 91 |         </tr>
 92 |         <tr>
 93 |             <td>3</td>
 94 |             <td>王五</td>
 95 |             <td>男</td>
 96 |             <td>22</td>
 97 |         </tr>
 98 |         <tr>
 99 |             <td>4</td>
100 |             <td>赵六</td>
101 |             <td>男</td>
102 |             <td>23</td>
103 |         </tr>
104 |         <tr>
105 |             <td>5</td>
106 |             <td>钱七</td>
107 |             <td>男</td>
108 |             <td>24</td>
109 |         </tr>
110 |         <tr>
111 |             <td>1</td>
112 |             <td>张三</td>
113 |             <td>男</td>
114 |             <td>20</td>
115 |         </tr>
116 |         <tr>
117 |             <td>2</td>
118 |             <td>李四</td>
119 |             <td>男</td>
120 |             <td>21</td>
121 |         </tr>
122 |         <tr>
123 |             <td>3</td>
124 |             <td>王五</td>
125 |             <td>男</td>
126 |             <td>22</td>
127 |         </tr>
128 |         <tr>
129 |             <td>4</td>
130 |             <td>赵六</td>
131 |             <td>男</td>
132 |             <td>23</td>
133 |         </tr>
134 |         <tr>
135 |             <td>5</td>
136 |             <td>钱七</td>
137 |             <td>男</td>
138 |             <td>24</td>
139 |         </tr>
140 |         <tr>
141 |             <td>4</td>
142 |             <td>赵六</td>
143 |             <td>男</td>
144 |             <td>23</td>
145 |         </tr>
146 |         <tr>
147 |             <td>5</td>
148 |             <td>钱七</td>
149 |             <td>男</td>
150 |             <td>24</td>
151 |         </tr>
152 |         <tr>
153 |             <td>1</td>
154 |             <td>张三</td>
155 |             <td>男</td>
156 |             <td>20</td>
157 |         </tr>
158 |         <tr>
159 |             <td>2</td>
160 |             <td>李四</td>
161 |             <td>男</td>
162 |             <td>21</td>
163 |         </tr>
164 |         <tr>
165 |             <td>3</td>
166 |             <td>王五</td>
167 |             <td>男</td>
168 |             <td>22</td>
169 |         </tr>
170 |         <tr>
171 |             <td>4</td>
172 |             <td>赵六</td>
173 |             <td>男</td>
174 |             <td>23</td>
175 |         </tr>
176 |         <tr>
177 |             <td>5</td>
178 |             <td>钱七</td>
179 |             <td>男</td>
180 |             <td>24</td>
181 |         </tr>
182 |         <tr>
183 |             <td>4</td>
184 |             <td>赵六</td>
185 |             <td>男</td>
186 |             <td>23</td>
187 |         </tr>
188 |         <tr>
189 |             <td>5</td>
190 |             <td>钱七</td>
191 |             <td>男</td>
192 |             <td>24</td>
193 |         </tr>
194 |         <tr>
195 |             <td>1</td>
196 |             <td>张三</td>
197 |             <td>男</td>
198 |             <td>20</td>
199 |         </tr>
200 |         <tr>
201 |             <td>2</td>
202 |             <td>李四</td>
203 |             <td>男</td>
204 |             <td>21</td>
205 |         </tr>
206 |         <tr>
207 |             <td>3</td>
208 |             <td>王五</td>
209 |             <td>男</td>
210 |             <td>22</td>
211 |         </tr>
212 |         <tr>
213 |             <td>4</td>
214 |             <td>赵六</td>
215 |             <td>男</td>
216 |             <td>23</td>
217 |         </tr>
218 |         <tr>
219 |             <td>5</td>
220 |             <td>钱七</td>
221 |             <td>男</td>
222 |             <td>24</td>
223 |         </tr>
224 |         <tr>
225 |             <td>4</td>
226 |             <td>赵六</td>
227 |             <td>男</td>
228 |             <td>23</td>
229 |         </tr>
230 |         <tr>
231 |             <td>5</td>
232 |             <td>钱七</td>
233 |             <td>男</td>
234 |             <td>24</td>
235 |         </tr>
236 |         <tr>
237 |             <td>1</td>
238 |             <td>张三</td>
239 |             <td>男</td>
240 |             <td>20</td>
241 |         </tr>
242 |         <tr>
243 |             <td>2</td>
244 |             <td>李四</td>
245 |             <td>男</td>
246 |             <td>21</td>
247 |         </tr>
248 |         <tr>
249 |             <td>3</td>
250 |             <td>王五</td>
251 |             <td>男</td>
252 |             <td>22</td>
253 |         </tr>
254 |         <tr>
255 |             <td>4</td>
256 |             <td>赵六</td>
257 |             <td>男</td>
258 |             <td>23</td>
259 |         </tr>
260 |         <tr>
261 |             <td>5</td>
262 |             <td>钱七</td>
263 |             <td>男</td>
264 |             <td>24</td>
265 |         </tr>
266 |         <!-- <tfoot class="printfooter"> -->
267 |             <tr>
268 |                 <td>合计</td>
269 |                 <td>-</td>
270 |                 <td>-</td>
271 |                 <td>24</td>
272 |             </tr>
273 |         <!-- </tfoot> -->
274 |     </table>
275 |     
276 |     <div class="footer">
277 |         Content Here
278 |     </div>
279 | </body>
280 | </html>


--------------------------------------------------------------------------------
/thead.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Document</title>
  8 |     <style>
  9 | 
 10 |         body{
 11 |             print-color-adjust: exact;
 12 |             -webkit-print-color-adjust: exact;
 13 |         }
 14 | 
 15 |         table {
 16 |             border-collapse: collapse;
 17 |             width: 100%;
 18 |             box-decoration-break: clone;
 19 |         }
 20 |         th, td {
 21 |             text-align: left;
 22 |             padding: 8px;
 23 |             border: 1px solid #000;
 24 |         }
 25 |         tr:nth-child(even){background-color: #f2f2f2}
 26 |         th {
 27 |             background-color: #4CAF50;
 28 |             color: white;
 29 |         }
 30 |         tr {
 31 |             height: 50px;
 32 |         }
 33 | 
 34 |         body {
 35 |             position: relative;
 36 |         }
 37 |     </style>
 38 | </head>
 39 | <body>
 40 |     <table>
 41 |         <thead>
 42 |             <tr>
 43 |                 <th>班级</th>
 44 |                 <th>姓名</th>
 45 |                 <th>性别</th>
 46 |                 <th>年龄</th>
 47 |             </tr>
 48 |         </thead>
 49 |         <tr>
 50 |             <td>1</td>
 51 |             <td>张三</td>
 52 |             <td>男</td>
 53 |             <td>20</td>
 54 |         </tr>
 55 |         <tr>
 56 |             <td>2</td>
 57 |             <td>李四</td>
 58 |             <td>男</td>
 59 |             <td>21</td>
 60 |         </tr>
 61 |         <tr>
 62 |             <td>3</td>
 63 |             <td>王五</td>
 64 |             <td>男</td>
 65 |             <td>22</td>
 66 |         </tr>
 67 |         <tr>
 68 |             <td>4</td>
 69 |             <td>赵六</td>
 70 |             <td>男</td>
 71 |             <td>23</td>
 72 |         </tr>
 73 |         <tr>
 74 |             <td>5</td>
 75 |             <td>钱七</td>
 76 |             <td>男</td>
 77 |             <td>24</td>
 78 |         </tr>
 79 |         <tr>
 80 |             <td>1</td>
 81 |             <td>张三</td>
 82 |             <td>男</td>
 83 |             <td>20</td>
 84 |         </tr>
 85 |         <tr>
 86 |             <td>2</td>
 87 |             <td>李四</td>
 88 |             <td>男</td>
 89 |             <td>21</td>
 90 |         </tr>
 91 |         <tr>
 92 |             <td>3</td>
 93 |             <td>王五</td>
 94 |             <td>男</td>
 95 |             <td>22</td>
 96 |         </tr>
 97 |         <tr>
 98 |             <td>4</td>
 99 |             <td>赵六</td>
100 |             <td>男</td>
101 |             <td>23</td>
102 |         </tr>
103 |         <tr>
104 |             <td>5</td>
105 |             <td>钱七</td>
106 |             <td>男</td>
107 |             <td>24</td>
108 |         </tr>
109 |         <tr>
110 |             <td>1</td>
111 |             <td>张三</td>
112 |             <td>男</td>
113 |             <td>20</td>
114 |         </tr>
115 |         <tr>
116 |             <td>2</td>
117 |             <td>李四</td>
118 |             <td>男</td>
119 |             <td>21</td>
120 |         </tr>
121 |         <tr>
122 |             <td>3</td>
123 |             <td>王五</td>
124 |             <td>男</td>
125 |             <td>22</td>
126 |         </tr>
127 |         <tr>
128 |             <td>4</td>
129 |             <td>赵六</td>
130 |             <td>男</td>
131 |             <td>23</td>
132 |         </tr>
133 |         <tr>
134 |             <td>5</td>
135 |             <td>钱七</td>
136 |             <td>男</td>
137 |             <td>24</td>
138 |         </tr>
139 |         <tr>
140 |             <td>1</td>
141 |             <td>张三</td>
142 |             <td>男</td>
143 |             <td>20</td>
144 |         </tr>
145 |         <tr>
146 |             <td>2</td>
147 |             <td>李四</td>
148 |             <td>男</td>
149 |             <td>21</td>
150 |         </tr>
151 |         <tr>
152 |             <td>3</td>
153 |             <td>王五</td>
154 |             <td>男</td>
155 |             <td>22</td>
156 |         </tr>
157 |         <tr>
158 |             <td>4</td>
159 |             <td>赵六</td>
160 |             <td>男</td>
161 |             <td>23</td>
162 |         </tr>
163 |         <tr>
164 |             <td>5</td>
165 |             <td>钱七</td>
166 |             <td>男</td>
167 |             <td>24</td>
168 |         </tr>
169 |         <tr>
170 |             <td>4</td>
171 |             <td>赵六</td>
172 |             <td>男</td>
173 |             <td>23</td>
174 |         </tr>
175 |         <tr>
176 |             <td>5</td>
177 |             <td>钱七</td>
178 |             <td>男</td>
179 |             <td>24</td>
180 |         </tr>
181 |         <tr>
182 |             <td>1</td>
183 |             <td>张三</td>
184 |             <td>男</td>
185 |             <td>20</td>
186 |         </tr>
187 |         <tr>
188 |             <td>2</td>
189 |             <td>李四</td>
190 |             <td>男</td>
191 |             <td>21</td>
192 |         </tr>
193 |         <tr>
194 |             <td>3</td>
195 |             <td>王五</td>
196 |             <td>男</td>
197 |             <td>22</td>
198 |         </tr>
199 |         <tr>
200 |             <td>4</td>
201 |             <td>赵六</td>
202 |             <td>男</td>
203 |             <td>23</td>
204 |         </tr>
205 |         <tr>
206 |             <td>5</td>
207 |             <td>钱七</td>
208 |             <td>男</td>
209 |             <td>24</td>
210 |         </tr>
211 |         <tr>
212 |             <td>4</td>
213 |             <td>赵六</td>
214 |             <td>男</td>
215 |             <td>23</td>
216 |         </tr>
217 |         <tr>
218 |             <td>5</td>
219 |             <td>钱七</td>
220 |             <td>男</td>
221 |             <td>24</td>
222 |         </tr>
223 |         <tr>
224 |             <td>1</td>
225 |             <td>张三</td>
226 |             <td>男</td>
227 |             <td>20</td>
228 |         </tr>
229 |         <tr>
230 |             <td>2</td>
231 |             <td>李四</td>
232 |             <td>男</td>
233 |             <td>21</td>
234 |         </tr>
235 |         <tr>
236 |             <td>3</td>
237 |             <td>王五</td>
238 |             <td>男</td>
239 |             <td>22</td>
240 |         </tr>
241 |         <tr>
242 |             <td>4</td>
243 |             <td>赵六</td>
244 |             <td>男</td>
245 |             <td>23</td>
246 |         </tr>
247 |         <tr>
248 |             <td>5</td>
249 |             <td>钱七</td>
250 |             <td>男</td>
251 |             <td>24</td>
252 |         </tr>
253 |         <tr>
254 |             <td>4</td>
255 |             <td>赵六</td>
256 |             <td>男</td>
257 |             <td>23</td>
258 |         </tr>
259 |         <tr>
260 |             <td>5</td>
261 |             <td>钱七</td>
262 |             <td>男</td>
263 |             <td>24</td>
264 |         </tr>
265 |         <tr>
266 |             <td>1</td>
267 |             <td>张三</td>
268 |             <td>男</td>
269 |             <td>20</td>
270 |         </tr>
271 |         <tr>
272 |             <td>2</td>
273 |             <td>李四</td>
274 |             <td>男</td>
275 |             <td>21</td>
276 |         </tr>
277 |         <tr>
278 |             <td>3</td>
279 |             <td>王五</td>
280 |             <td>男</td>
281 |             <td>22</td>
282 |         </tr>
283 |         <tr>
284 |             <td>4</td>
285 |             <td>赵六</td>
286 |             <td>男</td>
287 |             <td>23</td>
288 |         </tr>
289 |         <tr>
290 |             <td>5</td>
291 |             <td>钱七</td>
292 |             <td>男</td>
293 |             <td>24</td>
294 |         </tr>
295 |         <tfoot>
296 |             <tr>
297 |                 <td>合计</td>
298 |                 <td>-</td>
299 |                 <td>-</td>
300 |                 <td>24</td>
301 |             </tr>
302 |         </tfoot>
303 |     </table>
304 |     
305 | </body>
306 | </html>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset='utf-8'> 
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  6 |     <title>listing directory /</title>
  7 |     <style>* {
  8 |   margin: 0;
  9 |   padding: 0;
 10 |   outline: 0;
 11 | }
 12 | 
 13 | body {
 14 |   padding: 80px 100px;
 15 |   font: 13px "Helvetica Neue", "Lucida Grande", "Arial";
 16 |   background: #ECE9E9 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ECE9E9));
 17 |   background: #ECE9E9 -moz-linear-gradient(top, #fff, #ECE9E9);
 18 |   background-repeat: no-repeat;
 19 |   color: #555;
 20 |   -webkit-font-smoothing: antialiased;
 21 | }
 22 | h1, h2, h3 {
 23 |   font-size: 22px;
 24 |   color: #343434;
 25 | }
 26 | h1 em, h2 em {
 27 |   padding: 0 5px;
 28 |   font-weight: normal;
 29 | }
 30 | h1 {
 31 |   font-size: 60px;
 32 | }
 33 | h2 {
 34 |   margin-top: 10px;
 35 | }
 36 | h3 {
 37 |   margin: 5px 0 10px 0;
 38 |   padding-bottom: 5px;
 39 |   border-bottom: 1px solid #eee;
 40 |   font-size: 18px;
 41 | }
 42 | ul li {
 43 |   list-style: none;
 44 | }
 45 | ul li:hover {
 46 |   cursor: pointer;
 47 |   color: #2e2e2e;
 48 | }
 49 | ul li .path {
 50 |   padding-left: 5px;
 51 |   font-weight: bold;
 52 | }
 53 | ul li .line {
 54 |   padding-right: 5px;
 55 |   font-style: italic;
 56 | }
 57 | ul li:first-child .path {
 58 |   padding-left: 0;
 59 | }
 60 | p {
 61 |   line-height: 1.5;
 62 | }
 63 | a {
 64 |   color: #555;
 65 |   text-decoration: none;
 66 | }
 67 | a:hover {
 68 |   color: #303030;
 69 | }
 70 | #stacktrace {
 71 |   margin-top: 15px;
 72 | }
 73 | .directory h1 {
 74 |   margin-bottom: 15px;
 75 |   font-size: 18px;
 76 | }
 77 | ul#files {
 78 |   width: 100%;
 79 |   height: 100%;
 80 |   overflow: hidden;
 81 | }
 82 | ul#files li {
 83 |   float: left;
 84 |   width: 30%;
 85 |   line-height: 25px;
 86 |   margin: 1px;
 87 | }
 88 | ul#files li a {
 89 |   display: block;
 90 |   height: 25px;
 91 |   border: 1px solid transparent;
 92 |   -webkit-border-radius: 5px;
 93 |   -moz-border-radius: 5px;
 94 |   border-radius: 5px;
 95 |   overflow: hidden;
 96 |   white-space: nowrap;
 97 | }
 98 | ul#files li a:focus,
 99 | ul#files li a:hover {
100 |   background: rgba(255,255,255,0.65);
101 |   border: 1px solid #ececec;
102 | }
103 | ul#files li a.highlight {
104 |   -webkit-transition: background .4s ease-in-out;
105 |   background: #ffff4f;
106 |   border-color: #E9DC51;
107 | }
108 | #search {
109 |   display: block;
110 |   position: fixed;
111 |   top: 20px;
112 |   right: 20px;
113 |   width: 90px;
114 |   -webkit-transition: width ease 0.2s, opacity ease 0.4s;
115 |   -moz-transition: width ease 0.2s, opacity ease 0.4s;
116 |   -webkit-border-radius: 32px;
117 |   -moz-border-radius: 32px;
118 |   -webkit-box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.25), inset 0px 1px 3px rgba(0, 0, 0, 0.7), 0px 1px 0px rgba(255, 255, 255, 0.03);
119 |   -moz-box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.25), inset 0px 1px 3px rgba(0, 0, 0, 0.7), 0px 1px 0px rgba(255, 255, 255, 0.03);
120 |   -webkit-font-smoothing: antialiased;
121 |   text-align: left;
122 |   font: 13px "Helvetica Neue", Arial, sans-serif;
123 |   padding: 4px 10px;
124 |   border: none;
125 |   background: transparent;
126 |   margin-bottom: 0;
127 |   outline: none;
128 |   opacity: 0.7;
129 |   color: #888;
130 | }
131 | #search:focus {
132 |   width: 120px;
133 |   opacity: 1.0; 
134 | }
135 | 
136 | /*views*/
137 | #files span {
138 |   display: inline-block;
139 |   overflow: hidden;
140 |   text-overflow: ellipsis;
141 |   text-indent: 10px;
142 | }
143 | #files .name {
144 |   background-repeat: no-repeat;
145 | }
146 | #files .icon .name {
147 |   text-indent: 28px;
148 | }
149 | 
150 | /*tiles*/
151 | .view-tiles .name {
152 |   width: 100%;
153 |   background-position: 8px 5px;
154 | }
155 | .view-tiles .size,
156 | .view-tiles .date {
157 |   display: none;
158 | }
159 | 
160 | /*details*/
161 | ul#files.view-details li {
162 |   float: none;
163 |   display: block;
164 |   width: 90%;
165 | }
166 | ul#files.view-details li.header {
167 |   height: 25px;
168 |   background: #000;
169 |   color: #fff;
170 |   font-weight: bold;
171 | }
172 | .view-details .header {
173 |   border-radius: 5px;
174 | }
175 | .view-details .name {
176 |   width: 60%;
177 |   background-position: 8px 5px;
178 | }
179 | .view-details .size {
180 |   width: 10%;
181 | }
182 | .view-details .date {
183 |   width: 30%;
184 | }
185 | .view-details .size,
186 | .view-details .date {
187 |   text-align: right;
188 |   direction: rtl;
189 | }
190 | 
191 | /*mobile*/
192 | @media (max-width: 768px) {
193 |   body {
194 |     font-size: 13px;
195 |     line-height: 16px;
196 |     padding: 0;
197 |   }
198 |   #search {
199 |     position: static;
200 |     width: 100%;
201 |     font-size: 2em;
202 |     line-height: 1.8em;
203 |     text-indent: 10px;
204 |     border: 0;
205 |     border-radius: 0;
206 |     padding: 10px 0;
207 |     margin: 0;
208 |   }
209 |   #search:focus {
210 |     width: 100%;
211 |     border: 0;
212 |     opacity: 1;
213 |   }
214 |   .directory h1 {
215 |     font-size: 2em;
216 |     line-height: 1.5em;
217 |     color: #fff;
218 |     background: #000;
219 |     padding: 15px 10px;
220 |     margin: 0;
221 |   }
222 |   ul#files {
223 |     border-top: 1px solid #cacaca;
224 |   }
225 |   ul#files li {
226 |     float: none;
227 |     width: auto !important;
228 |     display: block;
229 |     border-bottom: 1px solid #cacaca;
230 |     font-size: 2em;
231 |     line-height: 1.2em;
232 |     text-indent: 0;
233 |     margin: 0;
234 |   }
235 |   ul#files li:nth-child(odd) {
236 |     background: #e0e0e0;
237 |   }
238 |   ul#files li a {
239 |     height: auto;
240 |     border: 0;
241 |     border-radius: 0;
242 |     padding: 15px 10px;
243 |   }
244 |   ul#files li a:focus,
245 |   ul#files li a:hover {
246 |     border: 0;
247 |   }
248 |   #files .header,
249 |   #files .size,
250 |   #files .date {
251 |     display: none !important;
252 |   }
253 |   #files .name {
254 |     float: none;
255 |     display: inline-block;
256 |     width: 100%;
257 |     text-indent: 0;
258 |     background-position: 0 50%;
259 |   }
260 |   #files .icon .name {
261 |     text-indent: 41px;
262 |   }
263 | }
264 | #files .icon-directory .name {
265 |   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAAWtQTFRFAAAA/PPQ9Nhc2q402qQ12qs2/PTX2pg12p81+/LM89NE9dto2q82+/fp2rM22qY39d6U+/bo2qo2/frx/vz32q812qs12qE279SU8c4w9NZP+/LK//367s9y7s925cp0/vzw9t92//342po2/vz25s1579B6+OSO2bQ0/v799NyT8tE79dld8Msm+OrC/vzx79KA2IYs7s6I9d6R4cJe9+OF/PLI/fry79OF/v30//328tWB89RJ8c9p8c0u9eCf//7+9txs6sts5Mdr+++5+u2z/vrv+/fq6cFz8dBs8tA57cpq+OaU9uGs27Y8//799NdX/PbY9uB89unJ//z14sNf+emh+emk+vDc+uys9+OL8dJy89NH+eic8tN5+OaV+OWR9N2n9dtl9t529+KF9+GB9Nue9NdU8tR/9t5y89qW9dpj89iO89eG/vvu2pQ12Y4z/vzy2Ict/vvv48dr/vzz4sNg///+2Igty3PqwQAAAAF0Uk5TAEDm2GYAAACtSURBVBjTY2AgA2iYlJWVhfohBPg0yx38y92dS0pKVOVBAqIi6sb2vsWWpfrFeTI8QAEhYQEta28nCwM1OVleZqCAmKCEkUdwYWmhQnFeOStQgL9cySqkNNDHVJGbiY0FKCCuYuYSGRsV5KgjxcXIARRQNncNj09JTgqw0ZbkZAcK5LuFJaRmZqfHeNnpSucDBQoiEtOycnIz4qI9bfUKQA6pKKqAgqIKQyK8BgAZ5yfODmnHrQAAAABJRU5ErkJggg==);
266 | }
267 | #files .icon-text-html .name,
268 | #files .icon-application-json .name {
269 |   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHtSURBVDjLjZM9T9tQFIYpQ5eOMBKlW6eWIQipa8RfQKQghEAKqZgKFQgmFn5AWyVDCipVQZC2EqBWlEqdO2RCpAssQBRsx1+1ndix8wFvfW6wcUhQsfTI0j33PD7n+N4uAF2E+/S5RFwG/8Njl24/LyCIOI6j1+v1y0ajgU64cSSTybdBSVAwSMmmacKyLB/DMKBpGkRRZBJBEJBKpXyJl/yABLTBtm1Uq1X2JsrlMnRdhyRJTFCpVEAfSafTTUlQoFs1luxBAkoolUqQZbmtJTYTT/AoHInOfpcwtVtkwcSBgrkDGYph+60oisIq4Xm+VfB0+U/P0Lvj3NwPGfHPTcHMvoyFXwpe7UmQtAqTUCU0D1VVbwTPVk5jY19Fe3ZfQny7CE51WJDXqpjeEUHr45ki9rIqa4dmQiJfMLItGEs/FcQ2ucbRmdnSYy5vYWyLx/w3EaMfLmBaDpMQvuDJ65PY8Dpnz3wpYmLtApzcrIAqmfrEgdZH1grY/a36w6Xz0DKD8ES25/niYS6+wWE8mWfByY8cXmYEJFYLkHUHtVqNQcltAvoLD3v7o/FUHsNvzlnwxfsCEukC/ho3yUHaBN5Buo17Ojtyl+DqrnvQgUtfcC0ZcAdkUeA+ye7eMru9AUGIJPe4zh509UP/AAfNypi8oj/mAAAAAElFTkSuQmCC);
270 | }
271 | #files .icon-application-javascript .name {
272 |   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHdSURBVDjLjZNPaxNBGIdrLwURLznWgkcvIrQhRw9FGgy01IY0TVsQ0q6GFkT0kwjJId9AP4AHP4Q9FO2hJ7El2+yf7OzMbja7Sf0578QdNybFLjwszLu/Z2femZkDMEfI54FkRVL4Dw8l8zqXEawMBgM2HA6vR6MRZiHraDabH7KSrKBA4SAIEIahxvd9eJ6HbrerJKZpotVqaUkavkMC+iCKIsRxrN6EEAKMMViWpQT9fh/0k3a7PZZkBUPmqXAKCSjAOYdt21NLUj1JBYW7C6vi6BC8vKWKQXUXQcNA5Nh6KY7jqJl0Op1JwY/Hi7mLp/lT/uoA/OX2WLC3C9FoQBwfILKulIRmQv1wXfevwHmyuMPXS5Fv1MHrFSTmhSomnUvw/Spo3C+vg3/+pJZDPSGRFvilNV+8PUZvoziKvn+d3LZvJ/BelMDevIZXK2EQCiUhtMDM53bY5rOIGXtwjU3EVz/HM5Az8eplqPFKEfzLR91cOg8TPTgr3MudFx+d9owK7KMNVfQOtyQ1OO9qiHsWkiRRUHhKQLuwfH9+1XpfhVVfU0V3//k4zFwdzjIlSA/Sv8jTOZObBL9uugczuNaCP5K8bFBIhduE5bdC3d6MYIkkt7jOKXT1l34DkIu9e0agZjoAAAAASUVORK5CYII=);
273 | }
274 | #files .icon-application-x-sh .name {
275 |   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGNSURBVDjLpVM9SwNBEJ297J1FQBtzjQj2dgppYiP4A1KZRoiFrYWt9rHyH6QUPBDTCimtLNSAnSB26YKg4EdMdsd5611cjwsIWRhmZ3f2zZuPVcxMsyx9fPF0NRfS2vM7lx2WtcQiJHvDRvZMluXMGNHstJH7+Wj09jHkOy1+tc3VxeC+P6TXT1sYZX2hT7cvS6lepv3zHUp2T8vXNw81dXT2yGwEGeERSbSVCC5qysYa+3vm9sJGmLFojceXJ9uklCqUIAic5G3IytahAAhqqVSiwWDwx6nogW9XKhWphaGAvC50Oh1qtVr/7oAdCwBQwjB00mg0qFqtUr1ed3YURZM7X7TWTqM2Gm3CASRJEur1etTtdp1DnrafFtJGMbVNGSBas9l0DrAzR6x8DdwASUB0RqNNGS2/gH7EInvCwMhkZTnlnX0GsP09tJER0BgMoAEAa1rETDIQvBkjBZeHMIjjuNB5Ggg0/oZWPGrHGwd7Fp9F2CAlgHKqf0aYXb6Y2mzE8d/IfrXVrN/5G81p6oa2mIEUAAAAAElFTkSuQmCC);
276 | }
277 | </style>
278 |     <script>
279 |       function $(id){
280 |         var el = 'string' == typeof id
281 |           ? document.getElementById(id)
282 |           : id;
283 | 
284 |         el.on = function(event, fn){
285 |           if ('content loaded' == event) {
286 |             event = window.attachEvent ? "load" : "DOMContentLoaded";
287 |           }
288 |           el.addEventListener
289 |             ? el.addEventListener(event, fn, false)
290 |             : el.attachEvent("on" + event, fn);
291 |         };
292 | 
293 |         el.all = function(selector){
294 |           return $(el.querySelectorAll(selector));
295 |         };
296 | 
297 |         el.each = function(fn){
298 |           for (var i = 0, len = el.length; i < len; ++i) {
299 |             fn($(el[i]), i);
300 |           }
301 |         };
302 | 
303 |         el.getClasses = function(){
304 |           return this.getAttribute('class').split(/\s+/);
305 |         };
306 | 
307 |         el.addClass = function(name){
308 |           var classes = this.getAttribute('class');
309 |           el.setAttribute('class', classes
310 |             ? classes + ' ' + name
311 |             : name);
312 |         };
313 | 
314 |         el.removeClass = function(name){
315 |           var classes = this.getClasses().filter(function(curr){
316 |             return curr != name;
317 |           });
318 |           this.setAttribute('class', classes.join(' '));
319 |         };
320 | 
321 |         return el;
322 |       }
323 | 
324 |       function search() {
325 |         var str = $('search').value.toLowerCase();
326 |         var links = $('files').all('a');
327 | 
328 |         links.each(function(link){
329 |           var text = link.textContent.toLowerCase();
330 | 
331 |           if ('..' == text) return;
332 |           if (str.length && ~text.indexOf(str)) {
333 |             link.addClass('highlight');
334 |           } else {
335 |             link.removeClass('highlight');
336 |           }
337 |         });
338 |       }
339 | 
340 |       $(window).on('content loaded', function(){
341 |         $('search').on('keyup', search);
342 |       });
343 |     </script>
344 |   </head>
345 |   <body class="directory">
346 |     <input id="search" type="text" placeholder="Search" autocomplete="off" />
347 |     <div id="wrapper">
348 |       <ul id="files" class="view-tiles">
349 | 
350 | 
351 | 
352 | 
353 | <li><a href="./color.html" class="icon icon icon-html icon-text-html" title="color.html"><span class="name">color.html</span><span class="size">671</span><span class="date">2022/8/29 23:42:52</span></a></li>
354 | <li><a href="./consoledemo.html" class="icon icon icon-html icon-text-html" title="consoledemo.html"><span class="name">consoledemo.html</span><span class="size">559</span><span class="date">2023/10/16 22:40:17</span></a></li>
355 | <li><a href="./container_no.html" class="icon icon icon-html icon-text-html" title="container_no.html"><span class="name">container_no.html</span><span class="size">2725</span><span class="date">2024/1/8 12:37:00</span></a></li>
356 | <li><a href="./content-line.html" class="icon icon icon-html icon-text-html" title="content-line.html"><span class="name">content-line.html</span><span class="size">1513</span><span class="date">2022/9/20 22:44:50</span></a></li>
357 | <li><a href="./copyspan.html" class="icon icon icon-html icon-text-html" title="copyspan.html"><span class="name">copyspan.html</span><span class="size">1123</span><span class="date">2022/11/27 17:09:26</span></a></li>
358 | <li><a href="./css_func.html" class="icon icon icon-html icon-text-html" title="css_func.html"><span class="name">css_func.html</span><span class="size">717</span><span class="date">2021/9/10 13:50:09</span></a></li>
359 | <li><a href="./css_var.html" class="icon icon icon-html icon-text-html" title="css_var.html"><span class="name">css_var.html</span><span class="size">479</span><span class="date">2022/11/17 09:31:40</span></a></li>
360 | <li><a href="./css-infinity.html" class="icon icon icon-html icon-text-html" title="css-infinity.html"><span class="name">css-infinity.html</span><span class="size">513</span><span class="date">2023/10/22 08:49:23</span></a></li>
361 | <li><a href="./dark_demo.html" class="icon icon icon-html icon-text-html" title="dark_demo.html"><span class="name">dark_demo.html</span><span class="size">3664</span><span class="date">2022/12/27 22:13:35</span></a></li>
362 | <li><a href="./div-canvas.html" class="icon icon icon-html icon-text-html" title="div-canvas.html"><span class="name">div-canvas.html</span><span class="size">510</span><span class="date">2022/9/22 21:49:11</span></a></li>
363 | <li><a href="./download.html" class="icon icon icon-html icon-text-html" title="download.html"><span class="name">download.html</span><span class="size">895</span><span class="date">2022/2/7 17:24:16</span></a></li>
364 | <li><a href="./drag-div.html" class="icon icon icon-html icon-text-html" title="drag-div.html"><span class="name">drag-div.html</span><span class="size">1109</span><span class="date">2022/11/15 08:08:35</span></a></li>
365 | <li><a href="./drag-hidden.html" class="icon icon icon-html icon-text-html" title="drag-hidden.html"><span class="name">drag-hidden.html</span><span class="size">1048</span><span class="date">2023/2/20 00:57:13</span></a></li>
366 | <li><a href="./file-cache-demo1.html" class="icon icon icon-html icon-text-html" title="file-cache-demo1.html"><span class="name">file-cache-demo1.html</span><span class="size">347</span><span class="date">2023/11/20 08:31:08</span></a></li>
367 | <li><a href="./file-cache-demo2.html" class="icon icon icon-html icon-text-html" title="file-cache-demo2.html"><span class="name">file-cache-demo2.html</span><span class="size">347</span><span class="date">2023/11/20 08:31:05</span></a></li>
368 | <li><a href="./file-cache-demo3.html" class="icon icon icon-html icon-text-html" title="file-cache-demo3.html"><span class="name">file-cache-demo3.html</span><span class="size">299</span><span class="date">2023/11/20 08:45:38</span></a></li>
369 | <li><a href="./fixed-size.html" class="icon icon icon-html icon-text-html" title="fixed-size.html"><span class="name">fixed-size.html</span><span class="size">611</span><span class="date">2023/1/9 21:11:49</span></a></li>
370 | <li><a href="./flex_demo.html" class="icon icon icon-html icon-text-html" title="flex_demo.html"><span class="name">flex_demo.html</span><span class="size">1029</span><span class="date">2021/10/1 12:52:54</span></a></li>
371 | <li><a href="./flex-direction.html" class="icon icon icon-html icon-text-html" title="flex-direction.html"><span class="name">flex-direction.html</span><span class="size">617</span><span class="date">2021/11/29 21:03:37</span></a></li>
372 | <li><a href="./flex-transition-demo.html" class="icon icon icon-html icon-text-html" title="flex-transition-demo.html"><span class="name">flex-transition-demo.html</span><span class="size">1695</span><span class="date">2022/10/15 22:42:38</span></a></li>
373 | <li><a href="./flex-transition-demo2.html" class="icon icon icon-html icon-text-html" title="flex-transition-demo2.html"><span class="name">flex-transition-demo2.html</span><span class="size">720</span><span class="date">2022/10/18 19:35:17</span></a></li>
374 | <li><a href="./floatDemo.html" class="icon icon icon-html icon-text-html" title="floatDemo.html"><span class="name">floatDemo.html</span><span class="size">3099</span><span class="date">2022/3/1 21:14:52</span></a></li>
375 | <li><a href="./floatDemo2.html" class="icon icon icon-html icon-text-html" title="floatDemo2.html"><span class="name">floatDemo2.html</span><span class="size">958</span><span class="date">2022/3/1 22:26:02</span></a></li>
376 | <li><a href="./focus-within.html" class="icon icon icon-html icon-text-html" title="focus-within.html"><span class="name">focus-within.html</span><span class="size">923</span><span class="date">2022/7/7 09:27:09</span></a></li>
377 | <li><a href="./font-size.html" class="icon icon icon-html icon-text-html" title="font-size.html"><span class="name">font-size.html</span><span class="size">371</span><span class="date">2022/10/13 23:09:09</span></a></li>
378 | <li><a href="./font-v-middle.html" class="icon icon icon-html icon-text-html" title="font-v-middle.html"><span class="name">font-v-middle.html</span><span class="size">388</span><span class="date">2022/12/15 04:59:33</span></a></li>
379 | <li><a href="./gap-test.html" class="icon icon icon-html icon-text-html" title="gap-test.html"><span class="name">gap-test.html</span><span class="size">914</span><span class="date">2022/2/21 23:28:26</span></a></li>
380 | <li><a href="./gap.html" class="icon icon icon-html icon-text-html" title="gap.html"><span class="name">gap.html</span><span class="size">1518</span><span class="date">2022/2/20 23:15:59</span></a></li>
381 | <li><a href="./height-transition.html" class="icon icon icon-html icon-text-html" title="height-transition.html"><span class="name">height-transition.html</span><span class="size">2154</span><span class="date">2022/11/6 11:53:02</span></a></li>
382 | <li><a href="./innerClick.html" class="icon icon icon-html icon-text-html" title="innerClick.html"><span class="name">innerClick.html</span><span class="size">1040</span><span class="date">2023/6/26 21:29:00</span></a></li>
383 | <li><a href="./justify-content-scroll.html" class="icon icon icon-html icon-text-html" title="justify-content-scroll.html"><span class="name">justify-content-scroll.html</span><span class="size">1105</span><span class="date">2022/11/15 08:08:35</span></a></li>
384 | <li><a href="./manifest.json" class="icon icon icon-json icon-application-json" title="manifest.json"><span class="name">manifest.json</span><span class="size">169</span><span class="date">2023/10/16 22:40:17</span></a></li>
385 | <li><a href="./map.html" class="icon icon icon-html icon-text-html" title="map.html"><span class="name">map.html</span><span class="size">1962</span><span class="date">2022/12/11 00:12:45</span></a></li>
386 | <li><a href="./margin-collapse.html" class="icon icon icon-html icon-text-html" title="margin-collapse.html"><span class="name">margin-collapse.html</span><span class="size">656</span><span class="date">2023/6/18 23:20:49</span></a></li>
387 | <li><a href="./margin.html" class="icon icon icon-html icon-text-html" title="margin.html"><span class="name">margin.html</span><span class="size">721</span><span class="date">2021/9/10 13:50:09</span></a></li>
388 | <li><a href="./mobile-scroll.html" class="icon icon icon-html icon-text-html" title="mobile-scroll.html"><span class="name">mobile-scroll.html</span><span class="size">1339</span><span class="date">2022/2/21 00:27:15</span></a></li>
389 | <li><a href="./multi_item_center.html" class="icon icon icon-html icon-text-html" title="multi_item_center.html"><span class="name">multi_item_center.html</span><span class="size">1390</span><span class="date">2024/1/18 00:39:03</span></a></li>
390 | <li><a href="./multipleTag.html" class="icon icon icon-html icon-text-html" title="multipleTag.html"><span class="name">multipleTag.html</span><span class="size">574</span><span class="date">2023/4/1 22:00:59</span></a></li>
391 | <li><a href="./nth-child.html" class="icon icon icon-html icon-text-html" title="nth-child.html"><span class="name">nth-child.html</span><span class="size">620</span><span class="date">2023/5/10 14:46:36</span></a></li>
392 | <li><a href="./number-input.html" class="icon icon icon-html icon-text-html" title="number-input.html"><span class="name">number-input.html</span><span class="size">504</span><span class="date">2023/10/16 22:40:17</span></a></li>
393 | <li><a href="./onlyoffice-excel.html" class="icon icon icon-html icon-text-html" title="onlyoffice-excel.html"><span class="name">onlyoffice-excel.html</span><span class="size">711</span><span class="date">2023/9/26 00:12:43</span></a></li>
394 | <li><a href="./onlyoffice-ppt.html" class="icon icon icon-html icon-text-html" title="onlyoffice-ppt.html"><span class="name">onlyoffice-ppt.html</span><span class="size">711</span><span class="date">2023/9/26 00:11:55</span></a></li>
395 | <li><a href="./onlyoffice-word.html" class="icon icon icon-html icon-text-html" title="onlyoffice-word.html"><span class="name">onlyoffice-word.html</span><span class="size">710</span><span class="date">2023/9/26 00:12:42</span></a></li>
396 | <li><a href="./overflow-x.html" class="icon icon icon-html icon-text-html" title="overflow-x.html"><span class="name">overflow-x.html</span><span class="size">980</span><span class="date">2022/10/23 20:36:27</span></a></li>
397 | <li><a href="./overflow.html" class="icon icon icon-html icon-text-html" title="overflow.html"><span class="name">overflow.html</span><span class="size">1041</span><span class="date">2022/2/10 16:51:16</span></a></li>
398 | <li><a href="./percent-demo.html" class="icon icon icon-html icon-text-html" title="percent-demo.html"><span class="name">percent-demo.html</span><span class="size">627</span><span class="date">2022/4/2 14:11:01</span></a></li>
399 | <li><a href="./prepared.html" class="icon icon icon-html icon-text-html" title="prepared.html"><span class="name">prepared.html</span><span class="size">468</span><span class="date">2022/9/20 20:09:48</span></a></li>
400 | <li><a href="./print_header.html" class="icon icon icon-html icon-text-html" title="print_header.html"><span class="name">print_header.html</span><span class="size">5987</span><span class="date">2022/7/11 19:20:52</span></a></li>
401 | <li><a href="./pwa.html" class="icon icon icon-html icon-text-html" title="pwa.html"><span class="name">pwa.html</span><span class="size">581</span><span class="date">2023/7/24 19:32:15</span></a></li>
402 | <li><a href="./resize.html" class="icon icon icon-html icon-text-html" title="resize.html"><span class="name">resize.html</span><span class="size">739</span><span class="date">2021/9/17 23:33:16</span></a></li>
403 | <li><a href="./scheme.html" class="icon icon icon-html icon-text-html" title="scheme.html"><span class="name">scheme.html</span><span class="size">1076</span><span class="date">2022/7/8 18:11:05</span></a></li>
404 | <li><a href="./scroll-custom.html" class="icon icon icon-html icon-text-html" title="scroll-custom.html"><span class="name">scroll-custom.html</span><span class="size">4366</span><span class="date">2023/6/1 14:08:43</span></a></li>
405 | <li><a href="./scroll.html" class="icon icon icon-html icon-text-html" title="scroll.html"><span class="name">scroll.html</span><span class="size">1720</span><span class="date">2022/8/14 10:29:21</span></a></li>
406 | <li><a href="./scrollHeight.html" class="icon icon icon-html icon-text-html" title="scrollHeight.html"><span class="name">scrollHeight.html</span><span class="size">851</span><span class="date">2022/10/18 19:40:05</span></a></li>
407 | <li><a href="./span-margin-top.html" class="icon icon icon-html icon-text-html" title="span-margin-top.html"><span class="name">span-margin-top.html</span><span class="size">628</span><span class="date">2023/4/5 01:16:15</span></a></li>
408 | <li><a href="./sticky.html" class="icon icon icon-html icon-text-html" title="sticky.html"><span class="name">sticky.html</span><span class="size">3281</span><span class="date">2022/2/11 16:04:50</span></a></li>
409 | <li><a href="./svgdemo.html" class="icon icon icon-html icon-text-html" title="svgdemo.html"><span class="name">svgdemo.html</span><span class="size">627</span><span class="date">2022/5/16 21:18:43</span></a></li>
410 | <li><a href="./test.html" class="icon icon icon-html icon-text-html" title="test.html"><span class="name">test.html</span><span class="size">710</span><span class="date">2022/4/9 01:23:04</span></a></li>
411 | <li><a href="./test22.html" class="icon icon icon-html icon-text-html" title="test22.html"><span class="name">test22.html</span><span class="size">1097</span><span class="date">2022/8/26 22:17:06</span></a></li>
412 | <li><a href="./textarea.html" class="icon icon icon-html icon-text-html" title="textarea.html"><span class="name">textarea.html</span><span class="size">1111</span><span class="date">2021/9/17 18:04:44</span></a></li>
413 | <li><a href="./thead.html" class="icon icon icon-html icon-text-html" title="thead.html"><span class="name">thead.html</span><span class="size">6509</span><span class="date">2022/7/12 08:59:26</span></a></li>
414 | <li><a href="./timeline.html" class="icon icon icon-html icon-text-html" title="timeline.html"><span class="name">timeline.html</span><span class="size">2630</span><span class="date">2021/9/20 01:34:21</span></a></li>
415 | <li><a href="./touch-scope-demo.html" class="icon icon icon-html icon-text-html" title="touch-scope-demo.html"><span class="name">touch-scope-demo.html</span><span class="size">851</span><span class="date">2022/11/8 01:26:14</span></a></li>
416 | <li><a href="./trafter.html" class="icon icon icon-html icon-text-html" title="trafter.html"><span class="name">trafter.html</span><span class="size">1429</span><span class="date">2022/11/17 09:27:30</span></a></li>
417 | <li><a href="./typeit.html" class="icon icon icon-html icon-text-html" title="typeit.html"><span class="name">typeit.html</span><span class="size">418</span><span class="date">2022/2/21 10:50:24</span></a></li>
418 | <li><a href="./ulli.html" class="icon icon icon-html icon-text-html" title="ulli.html"><span class="name">ulli.html</span><span class="size">1005</span><span class="date">2022/7/16 20:16:35</span></a></li>
419 | <li><a href="./v-middle.html" class="icon icon icon-html icon-text-html" title="v-middle.html"><span class="name">v-middle.html</span><span class="size">486</span><span class="date">2022/12/11 14:48:57</span></a></li>
420 | <li><a href="./word-break.html" class="icon icon icon-html icon-text-html" title="word-break.html"><span class="name">word-break.html</span><span class="size">1470</span><span class="date">2022/2/13 10:39:10</span></a></li>
421 | <li><a href="./writing-mode.html" class="icon icon icon-html icon-text-html" title="writing-mode.html"><span class="name">writing-mode.html</span><span class="size">624</span><span class="date">2023/5/7 10:14:36</span></a></li></ul>
422 |     </div>
423 |   </body>
424 | </html>


--------------------------------------------------------------------------------
/js/ResizeObserver.js:
--------------------------------------------------------------------------------
  1 | (function (global, factory) {
  2 |     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  3 |     typeof define === 'function' && define.amd ? define(factory) :
  4 |     (global.ResizeObserver = factory());
  5 | }(this, (function () { 'use strict';
  6 | 
  7 |     /**
  8 |      * A collection of shims that provide minimal functionality of the ES6 collections.
  9 |      *
 10 |      * These implementations are not meant to be used outside of the ResizeObserver
 11 |      * modules as they cover only a limited range of use cases.
 12 |      */
 13 |     /* eslint-disable require-jsdoc, valid-jsdoc */
 14 |     var MapShim = (function () {
 15 |         if (typeof Map !== 'undefined') {
 16 |             return Map;
 17 |         }
 18 |         /**
 19 |          * Returns index in provided array that matches the specified key.
 20 |          *
 21 |          * @param {Array<Array>} arr
 22 |          * @param {*} key
 23 |          * @returns {number}
 24 |          */
 25 |         function getIndex(arr, key) {
 26 |             var result = -1;
 27 |             arr.some(function (entry, index) {
 28 |                 if (entry[0] === key) {
 29 |                     result = index;
 30 |                     return true;
 31 |                 }
 32 |                 return false;
 33 |             });
 34 |             return result;
 35 |         }
 36 |         return /** @class */ (function () {
 37 |             function class_1() {
 38 |                 this.__entries__ = [];
 39 |             }
 40 |             Object.defineProperty(class_1.prototype, "size", {
 41 |                 /**
 42 |                  * @returns {boolean}
 43 |                  */
 44 |                 get: function () {
 45 |                     return this.__entries__.length;
 46 |                 },
 47 |                 enumerable: true,
 48 |                 configurable: true
 49 |             });
 50 |             /**
 51 |              * @param {*} key
 52 |              * @returns {*}
 53 |              */
 54 |             class_1.prototype.get = function (key) {
 55 |                 var index = getIndex(this.__entries__, key);
 56 |                 var entry = this.__entries__[index];
 57 |                 return entry && entry[1];
 58 |             };
 59 |             /**
 60 |              * @param {*} key
 61 |              * @param {*} value
 62 |              * @returns {void}
 63 |              */
 64 |             class_1.prototype.set = function (key, value) {
 65 |                 var index = getIndex(this.__entries__, key);
 66 |                 if (~index) {
 67 |                     this.__entries__[index][1] = value;
 68 |                 }
 69 |                 else {
 70 |                     this.__entries__.push([key, value]);
 71 |                 }
 72 |             };
 73 |             /**
 74 |              * @param {*} key
 75 |              * @returns {void}
 76 |              */
 77 |             class_1.prototype.delete = function (key) {
 78 |                 var entries = this.__entries__;
 79 |                 var index = getIndex(entries, key);
 80 |                 if (~index) {
 81 |                     entries.splice(index, 1);
 82 |                 }
 83 |             };
 84 |             /**
 85 |              * @param {*} key
 86 |              * @returns {void}
 87 |              */
 88 |             class_1.prototype.has = function (key) {
 89 |                 return !!~getIndex(this.__entries__, key);
 90 |             };
 91 |             /**
 92 |              * @returns {void}
 93 |              */
 94 |             class_1.prototype.clear = function () {
 95 |                 this.__entries__.splice(0);
 96 |             };
 97 |             /**
 98 |              * @param {Function} callback
 99 |              * @param {*} [ctx=null]
100 |              * @returns {void}
101 |              */
102 |             class_1.prototype.forEach = function (callback, ctx) {
103 |                 if (ctx === void 0) { ctx = null; }
104 |                 for (var _i = 0, _a = this.__entries__; _i < _a.length; _i++) {
105 |                     var entry = _a[_i];
106 |                     callback.call(ctx, entry[1], entry[0]);
107 |                 }
108 |             };
109 |             return class_1;
110 |         }());
111 |     })();
112 | 
113 |     /**
114 |      * Detects whether window and document objects are available in current environment.
115 |      */
116 |     var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && window.document === document;
117 | 
118 |     // Returns global object of a current environment.
119 |     var global$1 = (function () {
120 |         if (typeof global !== 'undefined' && global.Math === Math) {
121 |             return global;
122 |         }
123 |         if (typeof self !== 'undefined' && self.Math === Math) {
124 |             return self;
125 |         }
126 |         if (typeof window !== 'undefined' && window.Math === Math) {
127 |             return window;
128 |         }
129 |         // eslint-disable-next-line no-new-func
130 |         return Function('return this')();
131 |     })();
132 | 
133 |     /**
134 |      * A shim for the requestAnimationFrame which falls back to the setTimeout if
135 |      * first one is not supported.
136 |      *
137 |      * @returns {number} Requests' identifier.
138 |      */
139 |     var requestAnimationFrame$1 = (function () {
140 |         if (typeof requestAnimationFrame === 'function') {
141 |             // It's required to use a bounded function because IE sometimes throws
142 |             // an "Invalid calling object" error if rAF is invoked without the global
143 |             // object on the left hand side.
144 |             return requestAnimationFrame.bind(global$1);
145 |         }
146 |         return function (callback) { return setTimeout(function () { return callback(Date.now()); }, 1000 / 60); };
147 |     })();
148 | 
149 |     // Defines minimum timeout before adding a trailing call.
150 |     var trailingTimeout = 2;
151 |     /**
152 |      * Creates a wrapper function which ensures that provided callback will be
153 |      * invoked only once during the specified delay period.
154 |      *
155 |      * @param {Function} callback - Function to be invoked after the delay period.
156 |      * @param {number} delay - Delay after which to invoke callback.
157 |      * @returns {Function}
158 |      */
159 |     function throttle (callback, delay) {
160 |         var leadingCall = false, trailingCall = false, lastCallTime = 0;
161 |         /**
162 |          * Invokes the original callback function and schedules new invocation if
163 |          * the "proxy" was called during current request.
164 |          *
165 |          * @returns {void}
166 |          */
167 |         function resolvePending() {
168 |             if (leadingCall) {
169 |                 leadingCall = false;
170 |                 callback();
171 |             }
172 |             if (trailingCall) {
173 |                 proxy();
174 |             }
175 |         }
176 |         /**
177 |          * Callback invoked after the specified delay. It will further postpone
178 |          * invocation of the original function delegating it to the
179 |          * requestAnimationFrame.
180 |          *
181 |          * @returns {void}
182 |          */
183 |         function timeoutCallback() {
184 |             requestAnimationFrame$1(resolvePending);
185 |         }
186 |         /**
187 |          * Schedules invocation of the original function.
188 |          *
189 |          * @returns {void}
190 |          */
191 |         function proxy() {
192 |             var timeStamp = Date.now();
193 |             if (leadingCall) {
194 |                 // Reject immediately following calls.
195 |                 if (timeStamp - lastCallTime < trailingTimeout) {
196 |                     return;
197 |                 }
198 |                 // Schedule new call to be in invoked when the pending one is resolved.
199 |                 // This is important for "transitions" which never actually start
200 |                 // immediately so there is a chance that we might miss one if change
201 |                 // happens amids the pending invocation.
202 |                 trailingCall = true;
203 |             }
204 |             else {
205 |                 leadingCall = true;
206 |                 trailingCall = false;
207 |                 setTimeout(timeoutCallback, delay);
208 |             }
209 |             lastCallTime = timeStamp;
210 |         }
211 |         return proxy;
212 |     }
213 | 
214 |     // Minimum delay before invoking the update of observers.
215 |     var REFRESH_DELAY = 20;
216 |     // A list of substrings of CSS properties used to find transition events that
217 |     // might affect dimensions of observed elements.
218 |     var transitionKeys = ['top', 'right', 'bottom', 'left', 'width', 'height', 'size', 'weight'];
219 |     // Check if MutationObserver is available.
220 |     var mutationObserverSupported = typeof MutationObserver !== 'undefined';
221 |     /**
222 |      * Singleton controller class which handles updates of ResizeObserver instances.
223 |      */
224 |     var ResizeObserverController = /** @class */ (function () {
225 |         /**
226 |          * Creates a new instance of ResizeObserverController.
227 |          *
228 |          * @private
229 |          */
230 |         function ResizeObserverController() {
231 |             /**
232 |              * Indicates whether DOM listeners have been added.
233 |              *
234 |              * @private {boolean}
235 |              */
236 |             this.connected_ = false;
237 |             /**
238 |              * Tells that controller has subscribed for Mutation Events.
239 |              *
240 |              * @private {boolean}
241 |              */
242 |             this.mutationEventsAdded_ = false;
243 |             /**
244 |              * Keeps reference to the instance of MutationObserver.
245 |              *
246 |              * @private {MutationObserver}
247 |              */
248 |             this.mutationsObserver_ = null;
249 |             /**
250 |              * A list of connected observers.
251 |              *
252 |              * @private {Array<ResizeObserverSPI>}
253 |              */
254 |             this.observers_ = [];
255 |             this.onTransitionEnd_ = this.onTransitionEnd_.bind(this);
256 |             this.refresh = throttle(this.refresh.bind(this), REFRESH_DELAY);
257 |         }
258 |         /**
259 |          * Adds observer to observers list.
260 |          *
261 |          * @param {ResizeObserverSPI} observer - Observer to be added.
262 |          * @returns {void}
263 |          */
264 |         ResizeObserverController.prototype.addObserver = function (observer) {
265 |             if (!~this.observers_.indexOf(observer)) {
266 |                 this.observers_.push(observer);
267 |             }
268 |             // Add listeners if they haven't been added yet.
269 |             if (!this.connected_) {
270 |                 this.connect_();
271 |             }
272 |         };
273 |         /**
274 |          * Removes observer from observers list.
275 |          *
276 |          * @param {ResizeObserverSPI} observer - Observer to be removed.
277 |          * @returns {void}
278 |          */
279 |         ResizeObserverController.prototype.removeObserver = function (observer) {
280 |             var observers = this.observers_;
281 |             var index = observers.indexOf(observer);
282 |             // Remove observer if it's present in registry.
283 |             if (~index) {
284 |                 observers.splice(index, 1);
285 |             }
286 |             // Remove listeners if controller has no connected observers.
287 |             if (!observers.length && this.connected_) {
288 |                 this.disconnect_();
289 |             }
290 |         };
291 |         /**
292 |          * Invokes the update of observers. It will continue running updates insofar
293 |          * it detects changes.
294 |          *
295 |          * @returns {void}
296 |          */
297 |         ResizeObserverController.prototype.refresh = function () {
298 |             var changesDetected = this.updateObservers_();
299 |             // Continue running updates if changes have been detected as there might
300 |             // be future ones caused by CSS transitions.
301 |             if (changesDetected) {
302 |                 this.refresh();
303 |             }
304 |         };
305 |         /**
306 |          * Updates every observer from observers list and notifies them of queued
307 |          * entries.
308 |          *
309 |          * @private
310 |          * @returns {boolean} Returns "true" if any observer has detected changes in
311 |          *      dimensions of it's elements.
312 |          */
313 |         ResizeObserverController.prototype.updateObservers_ = function () {
314 |             // Collect observers that have active observations.
315 |             var activeObservers = this.observers_.filter(function (observer) {
316 |                 return observer.gatherActive(), observer.hasActive();
317 |             });
318 |             // Deliver notifications in a separate cycle in order to avoid any
319 |             // collisions between observers, e.g. when multiple instances of
320 |             // ResizeObserver are tracking the same element and the callback of one
321 |             // of them changes content dimensions of the observed target. Sometimes
322 |             // this may result in notifications being blocked for the rest of observers.
323 |             activeObservers.forEach(function (observer) { return observer.broadcastActive(); });
324 |             return activeObservers.length > 0;
325 |         };
326 |         /**
327 |          * Initializes DOM listeners.
328 |          *
329 |          * @private
330 |          * @returns {void}
331 |          */
332 |         ResizeObserverController.prototype.connect_ = function () {
333 |             // Do nothing if running in a non-browser environment or if listeners
334 |             // have been already added.
335 |             if (!isBrowser || this.connected_) {
336 |                 return;
337 |             }
338 |             // Subscription to the "Transitionend" event is used as a workaround for
339 |             // delayed transitions. This way it's possible to capture at least the
340 |             // final state of an element.
341 |             document.addEventListener('transitionend', this.onTransitionEnd_);
342 |             window.addEventListener('resize', this.refresh);
343 |             if (mutationObserverSupported) {
344 |                 this.mutationsObserver_ = new MutationObserver(this.refresh);
345 |                 this.mutationsObserver_.observe(document, {
346 |                     attributes: true,
347 |                     childList: true,
348 |                     characterData: true,
349 |                     subtree: true
350 |                 });
351 |             }
352 |             else {
353 |                 document.addEventListener('DOMSubtreeModified', this.refresh);
354 |                 this.mutationEventsAdded_ = true;
355 |             }
356 |             this.connected_ = true;
357 |         };
358 |         /**
359 |          * Removes DOM listeners.
360 |          *
361 |          * @private
362 |          * @returns {void}
363 |          */
364 |         ResizeObserverController.prototype.disconnect_ = function () {
365 |             // Do nothing if running in a non-browser environment or if listeners
366 |             // have been already removed.
367 |             if (!isBrowser || !this.connected_) {
368 |                 return;
369 |             }
370 |             document.removeEventListener('transitionend', this.onTransitionEnd_);
371 |             window.removeEventListener('resize', this.refresh);
372 |             if (this.mutationsObserver_) {
373 |                 this.mutationsObserver_.disconnect();
374 |             }
375 |             if (this.mutationEventsAdded_) {
376 |                 document.removeEventListener('DOMSubtreeModified', this.refresh);
377 |             }
378 |             this.mutationsObserver_ = null;
379 |             this.mutationEventsAdded_ = false;
380 |             this.connected_ = false;
381 |         };
382 |         /**
383 |          * "Transitionend" event handler.
384 |          *
385 |          * @private
386 |          * @param {TransitionEvent} event
387 |          * @returns {void}
388 |          */
389 |         ResizeObserverController.prototype.onTransitionEnd_ = function (_a) {
390 |             var _b = _a.propertyName, propertyName = _b === void 0 ? '' : _b;
391 |             // Detect whether transition may affect dimensions of an element.
392 |             var isReflowProperty = transitionKeys.some(function (key) {
393 |                 return !!~propertyName.indexOf(key);
394 |             });
395 |             if (isReflowProperty) {
396 |                 this.refresh();
397 |             }
398 |         };
399 |         /**
400 |          * Returns instance of the ResizeObserverController.
401 |          *
402 |          * @returns {ResizeObserverController}
403 |          */
404 |         ResizeObserverController.getInstance = function () {
405 |             if (!this.instance_) {
406 |                 this.instance_ = new ResizeObserverController();
407 |             }
408 |             return this.instance_;
409 |         };
410 |         /**
411 |          * Holds reference to the controller's instance.
412 |          *
413 |          * @private {ResizeObserverController}
414 |          */
415 |         ResizeObserverController.instance_ = null;
416 |         return ResizeObserverController;
417 |     }());
418 | 
419 |     /**
420 |      * Defines non-writable/enumerable properties of the provided target object.
421 |      *
422 |      * @param {Object} target - Object for which to define properties.
423 |      * @param {Object} props - Properties to be defined.
424 |      * @returns {Object} Target object.
425 |      */
426 |     var defineConfigurable = (function (target, props) {
427 |         for (var _i = 0, _a = Object.keys(props); _i < _a.length; _i++) {
428 |             var key = _a[_i];
429 |             Object.defineProperty(target, key, {
430 |                 value: props[key],
431 |                 enumerable: false,
432 |                 writable: false,
433 |                 configurable: true
434 |             });
435 |         }
436 |         return target;
437 |     });
438 | 
439 |     /**
440 |      * Returns the global object associated with provided element.
441 |      *
442 |      * @param {Object} target
443 |      * @returns {Object}
444 |      */
445 |     var getWindowOf = (function (target) {
446 |         // Assume that the element is an instance of Node, which means that it
447 |         // has the "ownerDocument" property from which we can retrieve a
448 |         // corresponding global object.
449 |         var ownerGlobal = target && target.ownerDocument && target.ownerDocument.defaultView;
450 |         // Return the local global object if it's not possible extract one from
451 |         // provided element.
452 |         return ownerGlobal || global$1;
453 |     });
454 | 
455 |     // Placeholder of an empty content rectangle.
456 |     var emptyRect = createRectInit(0, 0, 0, 0);
457 |     /**
458 |      * Converts provided string to a number.
459 |      *
460 |      * @param {number|string} value
461 |      * @returns {number}
462 |      */
463 |     function toFloat(value) {
464 |         return parseFloat(value) || 0;
465 |     }
466 |     /**
467 |      * Extracts borders size from provided styles.
468 |      *
469 |      * @param {CSSStyleDeclaration} styles
470 |      * @param {...string} positions - Borders positions (top, right, ...)
471 |      * @returns {number}
472 |      */
473 |     function getBordersSize(styles) {
474 |         var positions = [];
475 |         for (var _i = 1; _i < arguments.length; _i++) {
476 |             positions[_i - 1] = arguments[_i];
477 |         }
478 |         return positions.reduce(function (size, position) {
479 |             var value = styles['border-' + position + '-width'];
480 |             return size + toFloat(value);
481 |         }, 0);
482 |     }
483 |     /**
484 |      * Extracts paddings sizes from provided styles.
485 |      *
486 |      * @param {CSSStyleDeclaration} styles
487 |      * @returns {Object} Paddings box.
488 |      */
489 |     function getPaddings(styles) {
490 |         var positions = ['top', 'right', 'bottom', 'left'];
491 |         var paddings = {};
492 |         for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
493 |             var position = positions_1[_i];
494 |             var value = styles['padding-' + position];
495 |             paddings[position] = toFloat(value);
496 |         }
497 |         return paddings;
498 |     }
499 |     /**
500 |      * Calculates content rectangle of provided SVG element.
501 |      *
502 |      * @param {SVGGraphicsElement} target - Element content rectangle of which needs
503 |      *      to be calculated.
504 |      * @returns {DOMRectInit}
505 |      */
506 |     function getSVGContentRect(target) {
507 |         var bbox = target.getBBox();
508 |         return createRectInit(0, 0, bbox.width, bbox.height);
509 |     }
510 |     /**
511 |      * Calculates content rectangle of provided HTMLElement.
512 |      *
513 |      * @param {HTMLElement} target - Element for which to calculate the content rectangle.
514 |      * @returns {DOMRectInit}
515 |      */
516 |     function getHTMLElementContentRect(target) {
517 |         // Client width & height properties can't be
518 |         // used exclusively as they provide rounded values.
519 |         var clientWidth = target.clientWidth, clientHeight = target.clientHeight;
520 |         // By this condition we can catch all non-replaced inline, hidden and
521 |         // detached elements. Though elements with width & height properties less
522 |         // than 0.5 will be discarded as well.
523 |         //
524 |         // Without it we would need to implement separate methods for each of
525 |         // those cases and it's not possible to perform a precise and performance
526 |         // effective test for hidden elements. E.g. even jQuery's ':visible' filter
527 |         // gives wrong results for elements with width & height less than 0.5.
528 |         if (!clientWidth && !clientHeight) {
529 |             return emptyRect;
530 |         }
531 |         var styles = getWindowOf(target).getComputedStyle(target);
532 |         var paddings = getPaddings(styles);
533 |         var horizPad = paddings.left + paddings.right;
534 |         var vertPad = paddings.top + paddings.bottom;
535 |         // Computed styles of width & height are being used because they are the
536 |         // only dimensions available to JS that contain non-rounded values. It could
537 |         // be possible to utilize the getBoundingClientRect if only it's data wasn't
538 |         // affected by CSS transformations let alone paddings, borders and scroll bars.
539 |         var width = toFloat(styles.width), height = toFloat(styles.height);
540 |         // Width & height include paddings and borders when the 'border-box' box
541 |         // model is applied (except for IE).
542 |         if (styles.boxSizing === 'border-box') {
543 |             // Following conditions are required to handle Internet Explorer which
544 |             // doesn't include paddings and borders to computed CSS dimensions.
545 |             //
546 |             // We can say that if CSS dimensions + paddings are equal to the "client"
547 |             // properties then it's either IE, and thus we don't need to subtract
548 |             // anything, or an element merely doesn't have paddings/borders styles.
549 |             if (Math.round(width + horizPad) !== clientWidth) {
550 |                 width -= getBordersSize(styles, 'left', 'right') + horizPad;
551 |             }
552 |             if (Math.round(height + vertPad) !== clientHeight) {
553 |                 height -= getBordersSize(styles, 'top', 'bottom') + vertPad;
554 |             }
555 |         }
556 |         // Following steps can't be applied to the document's root element as its
557 |         // client[Width/Height] properties represent viewport area of the window.
558 |         // Besides, it's as well not necessary as the <html> itself neither has
559 |         // rendered scroll bars nor it can be clipped.
560 |         if (!isDocumentElement(target)) {
561 |             // In some browsers (only in Firefox, actually) CSS width & height
562 |             // include scroll bars size which can be removed at this step as scroll
563 |             // bars are the only difference between rounded dimensions + paddings
564 |             // and "client" properties, though that is not always true in Chrome.
565 |             var vertScrollbar = Math.round(width + horizPad) - clientWidth;
566 |             var horizScrollbar = Math.round(height + vertPad) - clientHeight;
567 |             // Chrome has a rather weird rounding of "client" properties.
568 |             // E.g. for an element with content width of 314.2px it sometimes gives
569 |             // the client width of 315px and for the width of 314.7px it may give
570 |             // 314px. And it doesn't happen all the time. So just ignore this delta
571 |             // as a non-relevant.
572 |             if (Math.abs(vertScrollbar) !== 1) {
573 |                 width -= vertScrollbar;
574 |             }
575 |             if (Math.abs(horizScrollbar) !== 1) {
576 |                 height -= horizScrollbar;
577 |             }
578 |         }
579 |         return createRectInit(paddings.left, paddings.top, width, height);
580 |     }
581 |     /**
582 |      * Checks whether provided element is an instance of the SVGGraphicsElement.
583 |      *
584 |      * @param {Element} target - Element to be checked.
585 |      * @returns {boolean}
586 |      */
587 |     var isSVGGraphicsElement = (function () {
588 |         // Some browsers, namely IE and Edge, don't have the SVGGraphicsElement
589 |         // interface.
590 |         if (typeof SVGGraphicsElement !== 'undefined') {
591 |             return function (target) { return target instanceof getWindowOf(target).SVGGraphicsElement; };
592 |         }
593 |         // If it's so, then check that element is at least an instance of the
594 |         // SVGElement and that it has the "getBBox" method.
595 |         // eslint-disable-next-line no-extra-parens
596 |         return function (target) { return (target instanceof getWindowOf(target).SVGElement &&
597 |             typeof target.getBBox === 'function'); };
598 |     })();
599 |     /**
600 |      * Checks whether provided element is a document element (<html>).
601 |      *
602 |      * @param {Element} target - Element to be checked.
603 |      * @returns {boolean}
604 |      */
605 |     function isDocumentElement(target) {
606 |         return target === getWindowOf(target).document.documentElement;
607 |     }
608 |     /**
609 |      * Calculates an appropriate content rectangle for provided html or svg element.
610 |      *
611 |      * @param {Element} target - Element content rectangle of which needs to be calculated.
612 |      * @returns {DOMRectInit}
613 |      */
614 |     function getContentRect(target) {
615 |         if (!isBrowser) {
616 |             return emptyRect;
617 |         }
618 |         if (isSVGGraphicsElement(target)) {
619 |             return getSVGContentRect(target);
620 |         }
621 |         return getHTMLElementContentRect(target);
622 |     }
623 |     /**
624 |      * Creates rectangle with an interface of the DOMRectReadOnly.
625 |      * Spec: https://drafts.fxtf.org/geometry/#domrectreadonly
626 |      *
627 |      * @param {DOMRectInit} rectInit - Object with rectangle's x/y coordinates and dimensions.
628 |      * @returns {DOMRectReadOnly}
629 |      */
630 |     function createReadOnlyRect(_a) {
631 |         var x = _a.x, y = _a.y, width = _a.width, height = _a.height;
632 |         // If DOMRectReadOnly is available use it as a prototype for the rectangle.
633 |         var Constr = typeof DOMRectReadOnly !== 'undefined' ? DOMRectReadOnly : Object;
634 |         var rect = Object.create(Constr.prototype);
635 |         // Rectangle's properties are not writable and non-enumerable.
636 |         defineConfigurable(rect, {
637 |             x: x, y: y, width: width, height: height,
638 |             top: y,
639 |             right: x + width,
640 |             bottom: height + y,
641 |             left: x
642 |         });
643 |         return rect;
644 |     }
645 |     /**
646 |      * Creates DOMRectInit object based on the provided dimensions and the x/y coordinates.
647 |      * Spec: https://drafts.fxtf.org/geometry/#dictdef-domrectinit
648 |      *
649 |      * @param {number} x - X coordinate.
650 |      * @param {number} y - Y coordinate.
651 |      * @param {number} width - Rectangle's width.
652 |      * @param {number} height - Rectangle's height.
653 |      * @returns {DOMRectInit}
654 |      */
655 |     function createRectInit(x, y, width, height) {
656 |         return { x: x, y: y, width: width, height: height };
657 |     }
658 | 
659 |     /**
660 |      * Class that is responsible for computations of the content rectangle of
661 |      * provided DOM element and for keeping track of it's changes.
662 |      */
663 |     var ResizeObservation = /** @class */ (function () {
664 |         /**
665 |          * Creates an instance of ResizeObservation.
666 |          *
667 |          * @param {Element} target - Element to be observed.
668 |          */
669 |         function ResizeObservation(target) {
670 |             /**
671 |              * Broadcasted width of content rectangle.
672 |              *
673 |              * @type {number}
674 |              */
675 |             this.broadcastWidth = 0;
676 |             /**
677 |              * Broadcasted height of content rectangle.
678 |              *
679 |              * @type {number}
680 |              */
681 |             this.broadcastHeight = 0;
682 |             /**
683 |              * Reference to the last observed content rectangle.
684 |              *
685 |              * @private {DOMRectInit}
686 |              */
687 |             this.contentRect_ = createRectInit(0, 0, 0, 0);
688 |             this.target = target;
689 |         }
690 |         /**
691 |          * Updates content rectangle and tells whether it's width or height properties
692 |          * have changed since the last broadcast.
693 |          *
694 |          * @returns {boolean}
695 |          */
696 |         ResizeObservation.prototype.isActive = function () {
697 |             var rect = getContentRect(this.target);
698 |             this.contentRect_ = rect;
699 |             return (rect.width !== this.broadcastWidth ||
700 |                 rect.height !== this.broadcastHeight);
701 |         };
702 |         /**
703 |          * Updates 'broadcastWidth' and 'broadcastHeight' properties with a data
704 |          * from the corresponding properties of the last observed content rectangle.
705 |          *
706 |          * @returns {DOMRectInit} Last observed content rectangle.
707 |          */
708 |         ResizeObservation.prototype.broadcastRect = function () {
709 |             var rect = this.contentRect_;
710 |             this.broadcastWidth = rect.width;
711 |             this.broadcastHeight = rect.height;
712 |             return rect;
713 |         };
714 |         return ResizeObservation;
715 |     }());
716 | 
717 |     var ResizeObserverEntry = /** @class */ (function () {
718 |         /**
719 |          * Creates an instance of ResizeObserverEntry.
720 |          *
721 |          * @param {Element} target - Element that is being observed.
722 |          * @param {DOMRectInit} rectInit - Data of the element's content rectangle.
723 |          */
724 |         function ResizeObserverEntry(target, rectInit) {
725 |             var contentRect = createReadOnlyRect(rectInit);
726 |             // According to the specification following properties are not writable
727 |             // and are also not enumerable in the native implementation.
728 |             //
729 |             // Property accessors are not being used as they'd require to define a
730 |             // private WeakMap storage which may cause memory leaks in browsers that
731 |             // don't support this type of collections.
732 |             defineConfigurable(this, { target: target, contentRect: contentRect });
733 |         }
734 |         return ResizeObserverEntry;
735 |     }());
736 | 
737 |     var ResizeObserverSPI = /** @class */ (function () {
738 |         /**
739 |          * Creates a new instance of ResizeObserver.
740 |          *
741 |          * @param {ResizeObserverCallback} callback - Callback function that is invoked
742 |          *      when one of the observed elements changes it's content dimensions.
743 |          * @param {ResizeObserverController} controller - Controller instance which
744 |          *      is responsible for the updates of observer.
745 |          * @param {ResizeObserver} callbackCtx - Reference to the public
746 |          *      ResizeObserver instance which will be passed to callback function.
747 |          */
748 |         function ResizeObserverSPI(callback, controller, callbackCtx) {
749 |             /**
750 |              * Collection of resize observations that have detected changes in dimensions
751 |              * of elements.
752 |              *
753 |              * @private {Array<ResizeObservation>}
754 |              */
755 |             this.activeObservations_ = [];
756 |             /**
757 |              * Registry of the ResizeObservation instances.
758 |              *
759 |              * @private {Map<Element, ResizeObservation>}
760 |              */
761 |             this.observations_ = new MapShim();
762 |             if (typeof callback !== 'function') {
763 |                 throw new TypeError('The callback provided as parameter 1 is not a function.');
764 |             }
765 |             this.callback_ = callback;
766 |             this.controller_ = controller;
767 |             this.callbackCtx_ = callbackCtx;
768 |         }
769 |         /**
770 |          * Starts observing provided element.
771 |          *
772 |          * @param {Element} target - Element to be observed.
773 |          * @returns {void}
774 |          */
775 |         ResizeObserverSPI.prototype.observe = function (target) {
776 |             if (!arguments.length) {
777 |                 throw new TypeError('1 argument required, but only 0 present.');
778 |             }
779 |             // Do nothing if current environment doesn't have the Element interface.
780 |             if (typeof Element === 'undefined' || !(Element instanceof Object)) {
781 |                 return;
782 |             }
783 |             if (!(target instanceof getWindowOf(target).Element)) {
784 |                 throw new TypeError('parameter 1 is not of type "Element".');
785 |             }
786 |             var observations = this.observations_;
787 |             // Do nothing if element is already being observed.
788 |             if (observations.has(target)) {
789 |                 return;
790 |             }
791 |             observations.set(target, new ResizeObservation(target));
792 |             this.controller_.addObserver(this);
793 |             // Force the update of observations.
794 |             this.controller_.refresh();
795 |         };
796 |         /**
797 |          * Stops observing provided element.
798 |          *
799 |          * @param {Element} target - Element to stop observing.
800 |          * @returns {void}
801 |          */
802 |         ResizeObserverSPI.prototype.unobserve = function (target) {
803 |             if (!arguments.length) {
804 |                 throw new TypeError('1 argument required, but only 0 present.');
805 |             }
806 |             // Do nothing if current environment doesn't have the Element interface.
807 |             if (typeof Element === 'undefined' || !(Element instanceof Object)) {
808 |                 return;
809 |             }
810 |             if (!(target instanceof getWindowOf(target).Element)) {
811 |                 throw new TypeError('parameter 1 is not of type "Element".');
812 |             }
813 |             var observations = this.observations_;
814 |             // Do nothing if element is not being observed.
815 |             if (!observations.has(target)) {
816 |                 return;
817 |             }
818 |             observations.delete(target);
819 |             if (!observations.size) {
820 |                 this.controller_.removeObserver(this);
821 |             }
822 |         };
823 |         /**
824 |          * Stops observing all elements.
825 |          *
826 |          * @returns {void}
827 |          */
828 |         ResizeObserverSPI.prototype.disconnect = function () {
829 |             this.clearActive();
830 |             this.observations_.clear();
831 |             this.controller_.removeObserver(this);
832 |         };
833 |         /**
834 |          * Collects observation instances the associated element of which has changed
835 |          * it's content rectangle.
836 |          *
837 |          * @returns {void}
838 |          */
839 |         ResizeObserverSPI.prototype.gatherActive = function () {
840 |             var _this = this;
841 |             this.clearActive();
842 |             this.observations_.forEach(function (observation) {
843 |                 if (observation.isActive()) {
844 |                     _this.activeObservations_.push(observation);
845 |                 }
846 |             });
847 |         };
848 |         /**
849 |          * Invokes initial callback function with a list of ResizeObserverEntry
850 |          * instances collected from active resize observations.
851 |          *
852 |          * @returns {void}
853 |          */
854 |         ResizeObserverSPI.prototype.broadcastActive = function () {
855 |             // Do nothing if observer doesn't have active observations.
856 |             if (!this.hasActive()) {
857 |                 return;
858 |             }
859 |             var ctx = this.callbackCtx_;
860 |             // Create ResizeObserverEntry instance for every active observation.
861 |             var entries = this.activeObservations_.map(function (observation) {
862 |                 return new ResizeObserverEntry(observation.target, observation.broadcastRect());
863 |             });
864 |             this.callback_.call(ctx, entries, ctx);
865 |             this.clearActive();
866 |         };
867 |         /**
868 |          * Clears the collection of active observations.
869 |          *
870 |          * @returns {void}
871 |          */
872 |         ResizeObserverSPI.prototype.clearActive = function () {
873 |             this.activeObservations_.splice(0);
874 |         };
875 |         /**
876 |          * Tells whether observer has active observations.
877 |          *
878 |          * @returns {boolean}
879 |          */
880 |         ResizeObserverSPI.prototype.hasActive = function () {
881 |             return this.activeObservations_.length > 0;
882 |         };
883 |         return ResizeObserverSPI;
884 |     }());
885 | 
886 |     // Registry of internal observers. If WeakMap is not available use current shim
887 |     // for the Map collection as it has all required methods and because WeakMap
888 |     // can't be fully polyfilled anyway.
889 |     var observers = typeof WeakMap !== 'undefined' ? new WeakMap() : new MapShim();
890 |     /**
891 |      * ResizeObserver API. Encapsulates the ResizeObserver SPI implementation
892 |      * exposing only those methods and properties that are defined in the spec.
893 |      */
894 |     var ResizeObserver = /** @class */ (function () {
895 |         /**
896 |          * Creates a new instance of ResizeObserver.
897 |          *
898 |          * @param {ResizeObserverCallback} callback - Callback that is invoked when
899 |          *      dimensions of the observed elements change.
900 |          */
901 |         function ResizeObserver(callback) {
902 |             if (!(this instanceof ResizeObserver)) {
903 |                 throw new TypeError('Cannot call a class as a function.');
904 |             }
905 |             if (!arguments.length) {
906 |                 throw new TypeError('1 argument required, but only 0 present.');
907 |             }
908 |             var controller = ResizeObserverController.getInstance();
909 |             var observer = new ResizeObserverSPI(callback, controller, this);
910 |             observers.set(this, observer);
911 |         }
912 |         return ResizeObserver;
913 |     }());
914 |     // Expose public methods of ResizeObserver.
915 |     [
916 |         'observe',
917 |         'unobserve',
918 |         'disconnect'
919 |     ].forEach(function (method) {
920 |         ResizeObserver.prototype[method] = function () {
921 |             var _a;
922 |             return (_a = observers.get(this))[method].apply(_a, arguments);
923 |         };
924 |     });
925 | 
926 |     var index = (function () {
927 |         // Export existing implementation if available.
928 |         if (typeof global$1.ResizeObserver !== 'undefined') {
929 |             return global$1.ResizeObserver;
930 |         }
931 |         return ResizeObserver;
932 |     })();
933 | 
934 |     return index;
935 | 
936 | })));
937 | 


--------------------------------------------------------------------------------