mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
Typescript conversion (#1828)
* initial typescript conversion * test: update overflow+transform ref test * fix: correctly render pseudo element content * fix: testrunner build * fix: karma test urls * test: update underline tests with <u> elements * test: update to es6-promise polyfill * test: remove watch from server * test: remove flow * format: update prettier for typescript * test: update eslint to use typescript parser * test: update linear gradient reftest * test: update test runner * test: update testrunner promise polyfill * fix: handle display: -webkit-flex correctly (fix #1817) * fix: correctly render gradients with clip & repeat (fix #1773) * fix: webkit-gradient function support * fix: implement radial gradients * fix: text-decoration rendering * fix: missing scroll positions for elements * ci: fix ios 11 tests * fix: ie logging * ci: improve device availability logging * fix: lint errors * ci: update to ios 12 * fix: check for console availability * ci: fix build dependency * test: update text reftests * fix: window reference for unit tests * feat: add hsl/hsla color support * fix: render options * fix: CSSKeyframesRule cssText Permission Denied on Internet Explorer 11 (#1830) * fix: option lint * fix: list type rendering * test: fix platform import * fix: ie css parsing for numbers * ci: add minified build * fix: form element rendering * fix: iframe rendering * fix: re-introduce experimental foreignobject renderer * fix: text-shadow rendering * feat: improve logging * fix: unit test logging * fix: cleanup resources * test: update overflow scrolling to work with ie * build: update build to include typings * fix: do not parse select element children * test: fix onclone test to work with older IEs * test: reduce reftest canvas sizes * test: remove dynamic setUp from list tests * test: update linear-gradient tests * build: remove old source files * build: update docs dependencies * build: fix typescript definition path * ci: include test.js on docs website
This commit is contained in:

committed by
GitHub

parent
20a797cbeb
commit
522a443055
50
tests/reftests/animation.html
Normal file
50
tests/reftests/animation.html
Normal file
@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Animation</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../test.js"></script>
|
||||
<style>
|
||||
span {
|
||||
color:blue;
|
||||
}
|
||||
p {
|
||||
background-color: green;
|
||||
}
|
||||
div {
|
||||
background: red;
|
||||
border: 5px solid blue;
|
||||
animation: spin 3s linear 1s infinite;
|
||||
}
|
||||
body {
|
||||
font-family: Arial;
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
/* Firefox 16+, IE 10+, Opera */ }
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
/* Firefox 16+, IE 10+, Opera */ } }
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
/* Firefox 16+, IE 10+, Opera */ }
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
/* Firefox 16+, IE 10+, Opera */ } }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div style="clip: rect(0px, 400px, 50px, 200px); ">Some inline text <span> followed by text in span </span> followed by more inline text.
|
||||
<p>Then a block level element.</p>
|
||||
Then more inline text.</div>
|
||||
</body>
|
||||
</html>
|
@ -20,13 +20,14 @@
|
||||
}
|
||||
|
||||
.medium div{
|
||||
width:200px;
|
||||
height:200px;
|
||||
width:100px;
|
||||
height:100px;
|
||||
float:left;
|
||||
margin:10px;
|
||||
border:20px solid transparent;
|
||||
border-width: 10px 20px 30px 40px;
|
||||
background: green;
|
||||
padding: 25px 15px;
|
||||
}
|
||||
|
||||
.small, .medium{
|
||||
@ -51,6 +52,8 @@
|
||||
<div class="medium">
|
||||
<div style="background:url(../../assets/image.jpg);background-clip: border-box; background-repeat: no-repeat;"></div>
|
||||
<div style="background:url(../../assets/image.jpg);background-clip: padding-box; background-repeat: repeat-y;"></div>
|
||||
<div style="background:url(../../assets/image.jpg);background-clip: padding-box; background-repeat: repeat-x;"></div>
|
||||
<div style="background:url(../../assets/image.jpg);background-clip: content-box; background-repeat: repeat-y;"></div>
|
||||
<div style="background:url(../../assets/image.jpg);background-clip: content-box; background-repeat: repeat-x;"></div>
|
||||
<div style="background:url(../../assets/image.jpg); background-repeat: no-repeat;"></div>
|
||||
</div>
|
||||
|
@ -49,7 +49,7 @@
|
||||
}
|
||||
|
||||
.linearGradient2 {
|
||||
background: -webkit-gradient(linear, 0% 0, 0% 100%, from(rgb(252, 252, 252)), to(rgb(232, 232, 232)));
|
||||
background: -webkit-gradient(linear, 0% 0, 0% 100%, from(rgb(252, 252, 252)), color-stop(0.3, #000000), to(rgb(232, 232, 232)));
|
||||
}
|
||||
|
||||
.linearGradient3 {
|
||||
|
@ -14,8 +14,14 @@
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 10px;
|
||||
border: 15px solid black;
|
||||
border: 15px solid transparent;
|
||||
}
|
||||
.linearGradient {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.7) 0.1em, transparent 0.1em), linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0.1em, transparent 0.1em);
|
||||
background-size: 1em 1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -38,5 +44,8 @@
|
||||
<div style="background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); "></div>
|
||||
<div style="background: linear-gradient(90deg, yellow 0%, orange 10%, red 50%, blue 90%, cyan 100%) content-box;"></div>
|
||||
<div style="background: linear-gradient(60deg, hsla(120,80%,50%,0.8) 0%, transparent 50%, rgba(255,100,100,0.5) 100%);"></div>
|
||||
<div style="background: linear-gradient(to right, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);"></div>
|
||||
<div style="background: linear-gradient(-45deg, #FF0000 40%, #00FF00 50%);"></div>
|
||||
<div class="linearGradient"></div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
@ -56,6 +56,6 @@
|
||||
<div style='background-size: auto 100%;'></div>
|
||||
<div style='background-size: auto;'></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="padding: 10px; background-size: contain; background-origin: content-box; background-clip: content-box"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
@ -36,7 +36,7 @@
|
||||
<input type="text" value="textbox" />
|
||||
<input type="password" value="textbox" />
|
||||
<input type="text" value="textbox" style="border:5px solid navy;" />
|
||||
<input type="text" value="textbox" style="border:5px solid navy;height:40px;" />
|
||||
<input type="text" value="textbox with very long text that overflows" style="border:5px solid navy;height:40px;" />
|
||||
|
||||
<input type="text" value="textbox" style="border:5px solid navy;height:40px;padding:10px;" />
|
||||
|
||||
|
@ -5,18 +5,9 @@
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
function setUp() {
|
||||
var supportedTypes = ["decimal","decimal-leading-zero","upper-roman","lower-roman","lower-alpha","upper-alpha"];
|
||||
for (var i = 1;i<=15;i++){
|
||||
$('#dynamic').append($('<li />').text(i).css('list-style-type',supportedTypes[1]));
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#dynamic{
|
||||
list-style-type:decimal;
|
||||
list-style-type:decimal-leading-zero;
|
||||
list-style-position: outside;
|
||||
font-size:20px;
|
||||
line-height:50px;
|
||||
@ -53,6 +44,23 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<ol id="dynamic"></ol>
|
||||
|
||||
<ol id="dynamic">
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
<li>4</li>
|
||||
<li>5</li>
|
||||
<li>6</li>
|
||||
<li>7</li>
|
||||
<li>8</li>
|
||||
<li>9</li>
|
||||
<li>10</li>
|
||||
<li>11</li>
|
||||
<li>12</li>
|
||||
<li>13</li>
|
||||
<li>14</li>
|
||||
<li>15</li>
|
||||
</ol>
|
||||
</body>
|
||||
</html>
|
||||
|
@ -5,15 +5,6 @@
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
function setUp() {
|
||||
var supportedTypes = ["decimal","decimal-leading-zero","upper-roman","lower-roman","lower-alpha","upper-alpha"];
|
||||
for (var i = 1;i<=15;i++){
|
||||
$('#dynamic').append($('<li />').text(i).css('list-style-type',supportedTypes[0]));
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#dynamic{
|
||||
list-style-type:decimal;
|
||||
@ -54,7 +45,23 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ol id="dynamic"></ol>
|
||||
|
||||
<ol id="dynamic">
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
<li>4</li>
|
||||
<li>5</li>
|
||||
<li>6</li>
|
||||
<li>7</li>
|
||||
<li>8</li>
|
||||
<li>9</li>
|
||||
<li>10</li>
|
||||
<li>11</li>
|
||||
<li>12</li>
|
||||
<li>13</li>
|
||||
<li>14</li>
|
||||
<li>15</li>
|
||||
</ol>
|
||||
</body>
|
||||
</html>
|
||||
|
@ -1,102 +1,102 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>List tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
<head>
|
||||
<title>List tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
|
||||
<style>
|
||||
li {
|
||||
margin: 10px 5%;
|
||||
}
|
||||
.list1 {
|
||||
list-style-type: circle;
|
||||
}
|
||||
<style>
|
||||
li {
|
||||
margin: 10px 5%;
|
||||
}
|
||||
.list1 {
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
.list2 {
|
||||
list-style-image: url(../../assets/image.jpg);
|
||||
}
|
||||
.list2 {
|
||||
list-style-image: url(../../assets/image.jpg);
|
||||
}
|
||||
|
||||
.list3 {
|
||||
list-style-image: linear-gradient(60deg, deeppink, aquamarine);
|
||||
list-style-position: inside;
|
||||
}
|
||||
.list3 {
|
||||
list-style-image: linear-gradient(60deg, deeppink, aquamarine);
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
.list4 {
|
||||
}
|
||||
.list4 {
|
||||
}
|
||||
|
||||
.list5 {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
.list5 {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
|
||||
.list6 {
|
||||
list-style-type: hiragana;
|
||||
}
|
||||
.list6 {
|
||||
list-style-type: hiragana;
|
||||
}
|
||||
|
||||
.list7 {
|
||||
list-style-type: simp-chinese-informal;
|
||||
}
|
||||
.list7 {
|
||||
list-style-type: simp-chinese-informal;
|
||||
}
|
||||
|
||||
.list8 {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
.list8 {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
|
||||
.list8 li {
|
||||
display: block;
|
||||
}
|
||||
.list8 li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.list9 {
|
||||
display: list-item;
|
||||
list-style-type: lower-alpha;
|
||||
margin: 10px;
|
||||
position: relative;
|
||||
left: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul class="list1">
|
||||
<li>Alpha</li>
|
||||
<li>Beta</li>
|
||||
<li>Gamma</li>
|
||||
</ul>
|
||||
<ul class="list2">
|
||||
<li>Alpha</li>
|
||||
<li>Beta</li>
|
||||
<li>Gamma</li>
|
||||
</ul>
|
||||
<ul class="list3">
|
||||
<li>Alpha</li>
|
||||
<li>Beta</li>
|
||||
<li>Gamma</li>
|
||||
</ul>
|
||||
<ol class="list4" start="-1">
|
||||
<li>Alpha</li>
|
||||
<li>Beta</li>
|
||||
<li>Gamma</li>
|
||||
</ol>
|
||||
<ol class="list5">
|
||||
<li>Alpha</li>
|
||||
<li value="5">Beta</li>
|
||||
<li>Gamma</li>
|
||||
</ol>
|
||||
<ol class="list6">
|
||||
<li>Alpha</li>
|
||||
<li>Beta</li>
|
||||
<li>Gamma</li>
|
||||
</ol>
|
||||
<ol class="list7">
|
||||
<li>Alpha</li>
|
||||
<li>Beta</li>
|
||||
<li>Gamma</li>
|
||||
</ol>
|
||||
<ol class="list8">
|
||||
<li>Alpha</li>
|
||||
<li>Beta</li>
|
||||
<li>Gamma</li>
|
||||
</ol>
|
||||
<div class="list9">Alpha</div>
|
||||
<div class="list9">Beta</div>
|
||||
<div class="list9">Gamma</div>
|
||||
</body>
|
||||
.list9 {
|
||||
display: list-item;
|
||||
list-style-type: lower-alpha;
|
||||
margin: 10px;
|
||||
position: relative;
|
||||
left: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul class="list1">
|
||||
<li>Alpha</li>
|
||||
<li>Beta</li>
|
||||
<li>Gamma</li>
|
||||
</ul>
|
||||
<ul class="list2">
|
||||
<li>Alpha</li>
|
||||
<li>Beta</li>
|
||||
<li>Gamma</li>
|
||||
</ul>
|
||||
<ul class="list3">
|
||||
<li>Alpha</li>
|
||||
<li>Beta</li>
|
||||
<li>Gamma</li>
|
||||
</ul>
|
||||
<ol class="list4" start="-1">
|
||||
<li>Alpha</li>
|
||||
<li>Beta</li>
|
||||
<li>Gamma</li>
|
||||
</ol>
|
||||
<ol class="list5">
|
||||
<li>Alpha</li>
|
||||
<li value="5">Beta</li>
|
||||
<li>Gamma</li>
|
||||
</ol>
|
||||
<ol class="list6">
|
||||
<li>Alpha</li>
|
||||
<li>Beta</li>
|
||||
<li>Gamma</li>
|
||||
</ol>
|
||||
<ol class="list7">
|
||||
<li>Alpha</li>
|
||||
<li>Beta</li>
|
||||
<li>Gamma</li>
|
||||
</ol>
|
||||
<ol class="list8">
|
||||
<li>Alpha</li>
|
||||
<li>Beta</li>
|
||||
<li>Gamma</li>
|
||||
</ol>
|
||||
<div class="list9">list-less Alpha</div>
|
||||
<div class="list9">list-less Beta</div>
|
||||
<div class="list9">list-less Gamma</div>
|
||||
</body>
|
||||
</html>
|
||||
|
@ -4,19 +4,9 @@
|
||||
<title>List tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
function setUp() {
|
||||
var supportedTypes = ["decimal","decimal-leading-zero","upper-roman","lower-roman","lower-alpha","upper-alpha"];
|
||||
for (var i = 1;i<=15;i++){
|
||||
$('#dynamic').append($('<li />').text(i).css('list-style-type',supportedTypes[4]));
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#dynamic{
|
||||
list-style-type:decimal;
|
||||
list-style-type:lower-alpha;
|
||||
list-style-position: outside;
|
||||
font-size:20px;
|
||||
line-height:50px;
|
||||
@ -54,7 +44,23 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ol id="dynamic"></ol>
|
||||
<ol id="dynamic">
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
<li>4</li>
|
||||
<li>5</li>
|
||||
<li>6</li>
|
||||
<li>7</li>
|
||||
<li>8</li>
|
||||
<li>9</li>
|
||||
<li>10</li>
|
||||
<li>11</li>
|
||||
<li>12</li>
|
||||
<li>13</li>
|
||||
<li>14</li>
|
||||
<li>15</li>
|
||||
</ol>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
@ -5,18 +5,9 @@
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
function setUp() {
|
||||
var supportedTypes = ["decimal","decimal-leading-zero","upper-roman","lower-roman","lower-alpha","upper-alpha"];
|
||||
for (var i = 1;i<=15;i++){
|
||||
$('#dynamic').append($('<li />').text(i).css('list-style-type',supportedTypes[2]));
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#dynamic{
|
||||
list-style-type:decimal;
|
||||
list-style-type:upper-roman;
|
||||
list-style-position: outside;
|
||||
font-size:20px;
|
||||
line-height:50px;
|
||||
@ -54,7 +45,24 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ol id="dynamic"></ol>
|
||||
|
||||
<ol id="dynamic">
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
<li>4</li>
|
||||
<li>5</li>
|
||||
<li>6</li>
|
||||
<li>7</li>
|
||||
<li>8</li>
|
||||
<li>9</li>
|
||||
<li>10</li>
|
||||
<li>11</li>
|
||||
<li>12</li>
|
||||
<li>13</li>
|
||||
<li>14</li>
|
||||
<li>15</li>
|
||||
</ol>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
@ -5,7 +5,7 @@
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script>
|
||||
h2cOptions = {onclone: function(document) {
|
||||
const remove = document.querySelector('.ignored');
|
||||
var remove = document.querySelector('.ignored');
|
||||
remove.parentNode.removeChild(remove);
|
||||
}};
|
||||
</script>
|
||||
|
@ -40,6 +40,29 @@
|
||||
line-height: 17px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
|
||||
#app {
|
||||
background-color: lightcoral;
|
||||
width: 300px;
|
||||
color: #333;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#box {
|
||||
background-color: lightgreen;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content {
|
||||
background-color: lightskyblue;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
transform: translate(100px, 0);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
@ -51,5 +74,16 @@
|
||||
<div class="img-2"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="app">
|
||||
This is app
|
||||
<div id="box">
|
||||
This is box, overflow hidden
|
||||
<div class="content">
|
||||
This is content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
@ -115,7 +115,13 @@
|
||||
|
||||
</div>
|
||||
<script>
|
||||
document.querySelector('#scroll').scrollTo(0, 200);
|
||||
try {
|
||||
document.querySelector('#scroll').scrollTo(0, 200);
|
||||
} catch(e) {
|
||||
// internet explorer
|
||||
document.querySelector('#scroll').scrollTop = 200;
|
||||
}
|
||||
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
|
@ -1,104 +1,167 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript" src="../test.js"></script>
|
||||
<head>
|
||||
<script type="text/javascript" src="../test.js"></script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
quotes: "<{" "}>" "->" "<-" "(" ")" "-:" ":-";
|
||||
}
|
||||
<style>
|
||||
body {
|
||||
quotes: "<{" "}>" "->" "<-" "(" ")" "-:" ":-";
|
||||
}
|
||||
|
||||
.counter1,
|
||||
.counter2,
|
||||
.quotes1,
|
||||
.attr-url {
|
||||
border: 1px solid deepskyblue;
|
||||
padding: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.counter1,
|
||||
.counter2,
|
||||
.quotes1,
|
||||
.attr-url {
|
||||
border: 1px solid deepskyblue;
|
||||
padding: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.counter1 {
|
||||
counter-reset: c1 3;
|
||||
}
|
||||
.counter1 {
|
||||
counter-reset: c1 3;
|
||||
}
|
||||
|
||||
.counter1 > div::before {
|
||||
content: "«\"" counter(c1) "\»";
|
||||
counter-increment: c1 -1;
|
||||
}
|
||||
.counter1 > div::before {
|
||||
content: "«\"" counter(c1) "\»";
|
||||
counter-increment: c1 -1;
|
||||
}
|
||||
|
||||
.counter2 {
|
||||
counter-reset: c2;
|
||||
}
|
||||
.counter2 {
|
||||
counter-reset: c2;
|
||||
}
|
||||
|
||||
.counter2 > div::before {
|
||||
content: "["counters(c2, " < ", upper-roman) ']';
|
||||
counter-increment: c2 2;
|
||||
}
|
||||
.counter2 > div::before {
|
||||
content: "["counters(c2, " < ", upper-roman) ']';
|
||||
counter-increment: c2 2;
|
||||
}
|
||||
|
||||
.quotes1::before {
|
||||
content: open-quote "!" open-quote close-quote open-quote;
|
||||
}
|
||||
.counter-divs {
|
||||
counter-reset: c5 3;
|
||||
}
|
||||
|
||||
.quotes1::after {
|
||||
content: "!" close-quote close-quote;
|
||||
}
|
||||
.counter-divs div {
|
||||
counter-increment: c5 1;
|
||||
}
|
||||
|
||||
.quotes2 {
|
||||
quotes: "«" "»" "“" "”";
|
||||
}
|
||||
.counter-divs > div::before {
|
||||
content: "["counter(c5) ']';
|
||||
counter-increment: c5 2;
|
||||
}
|
||||
|
||||
.quotes2::before {
|
||||
content: open-quote;
|
||||
}
|
||||
.quotes1::before {
|
||||
content: open-quote "!" open-quote close-quote open-quote;
|
||||
}
|
||||
|
||||
.quotes2::after {
|
||||
content: close-quote;
|
||||
}
|
||||
.quotes1::after {
|
||||
content: "!" close-quote close-quote;
|
||||
}
|
||||
|
||||
.attr-url > div::after {
|
||||
content: url(../assets/image.jpg) "///" attr(data-text);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="counter1">
|
||||
<div>A</div>
|
||||
<div>B</div>
|
||||
<div>C</div>
|
||||
<div>D</div>
|
||||
</div>
|
||||
.quotes2 {
|
||||
quotes: "«" "»" "“" "”";
|
||||
}
|
||||
|
||||
<div class="counter2">
|
||||
<div>A</div>
|
||||
<div>B</div>
|
||||
<div>
|
||||
C
|
||||
<div class="counter2">
|
||||
<div>a</div>
|
||||
<div>b</div>
|
||||
<div>
|
||||
c
|
||||
<div class="counter2">
|
||||
<div>Aa</div>
|
||||
<div>Bb</div>
|
||||
<div>Cc</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>D</div>
|
||||
</div>
|
||||
.quotes2::before {
|
||||
content: open-quote;
|
||||
}
|
||||
|
||||
<div class="quotes1">
|
||||
Hello
|
||||
<div class="quotes2">
|
||||
Quoted
|
||||
<div class="quotes2">World</div>
|
||||
</div>
|
||||
</div>
|
||||
.quotes2::after {
|
||||
content: close-quote close-quote close-quote close-quote;
|
||||
}
|
||||
|
||||
<div class="attr-url">
|
||||
<div data-text="Hello World"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
.attr-url > div::after {
|
||||
content: url(../assets/image.jpg) "///" attr(data-text);
|
||||
}
|
||||
|
||||
ol {
|
||||
counter-reset: section; /* Creates a new instance of the
|
||||
section counter with each ol
|
||||
element */
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
li::before {
|
||||
counter-increment: section; /* Increments only this instance
|
||||
of the section counter */
|
||||
content: counters(section, ".") " "; /* Combines the values of all instances
|
||||
of the section counter, separated
|
||||
by a period */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="counter1">
|
||||
<div>A</div>
|
||||
<div>B</div>
|
||||
<div>C</div>
|
||||
<div>D</div>
|
||||
</div>
|
||||
|
||||
<div class="counter2">
|
||||
<div>A</div>
|
||||
<div>B</div>
|
||||
<div>
|
||||
C
|
||||
<div class="counter2">
|
||||
<div>a</div>
|
||||
<div>b</div>
|
||||
<div>
|
||||
c
|
||||
<div class="counter2">
|
||||
<div>Aa</div>
|
||||
<div>Bb</div>
|
||||
<div>Cc</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>D</div>
|
||||
</div>
|
||||
|
||||
<div class="quotes1">
|
||||
Hello
|
||||
<div class="quotes2">
|
||||
Quoted
|
||||
<div class="quotes2">World</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="attr-url">
|
||||
<div data-text="Hello World"></div>
|
||||
</div>
|
||||
|
||||
<div class="counter-divs">
|
||||
<div>A</div>
|
||||
<div>B</div>
|
||||
<div>C</div>
|
||||
<div>D</div>
|
||||
</div>
|
||||
<ol>
|
||||
<li>item</li> <!-- 1 -->
|
||||
<li>item <!-- 2 -->
|
||||
<ol>
|
||||
<li>item</li> <!-- 2.1 -->
|
||||
<li>item</li> <!-- 2.2 -->
|
||||
<li>item <!-- 2.3 -->
|
||||
<ol>
|
||||
<li>item</li> <!-- 2.3.1 -->
|
||||
<li>item</li> <!-- 2.3.2 -->
|
||||
</ol>
|
||||
<ol>
|
||||
<li>item</li> <!-- 2.3.1 -->
|
||||
<li>item</li> <!-- 2.3.2 -->
|
||||
<li>item</li> <!-- 2.3.3 -->
|
||||
</ol>
|
||||
</li>
|
||||
<li>item</li> <!-- 2.4 -->
|
||||
</ol>
|
||||
</li>
|
||||
<li>item</li> <!-- 3 -->
|
||||
<li>item</li> <!-- 4 -->
|
||||
</ol>
|
||||
<ol>
|
||||
<li>item</li> <!-- 1 -->
|
||||
<li>item</li> <!-- 2 -->
|
||||
</ol>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
@ -12,7 +12,7 @@
|
||||
background-color: green;
|
||||
}
|
||||
body {
|
||||
font-family: Arial;
|
||||
font-family: "Helvetica Neue", Arial, sans-serif;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
@ -7,7 +7,7 @@
|
||||
<script type="text/javascript">
|
||||
function setUp() {
|
||||
$('body').empty();
|
||||
$.each(['arial','verdana','tahoma','courier new'],function(i,e){
|
||||
$.each(['arial','verdana','courier new'],function(i,e){
|
||||
var div = $('<div />').css('font-family',e).appendTo('body');
|
||||
for(var i=0;i<=5;i++){
|
||||
$('<div />').text('Testing texts').css('margin-top',1).css('border','1px solid black').css('font-size',(16+i*6)).appendTo(div);
|
||||
|
@ -7,7 +7,7 @@
|
||||
<script type="text/javascript">
|
||||
function setUp() {
|
||||
$('body').empty();
|
||||
$.each(['arial','verdana','tahoma','courier new'],function(i,e){
|
||||
$.each(['arial','verdana','courier new'],function(i,e){
|
||||
var div = $('<div />').css('font-family',e).appendTo('body');
|
||||
for(var i=0;i<=5;i++){
|
||||
$('<div />').text('Testing texts').css('margin-top',1).css('border','1px solid black').css('font-size',(16+i*6)).appendTo(div);
|
||||
|
@ -6,13 +6,20 @@
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
<script type="text/javascript">
|
||||
function setUp() {
|
||||
$('body').empty();
|
||||
$.each(['arial','verdana','tahoma','courier new'],function(i,e){
|
||||
var div = $('<div />').css('font-family',e).appendTo('body');
|
||||
for(var i=1;i<=10;i*=2){
|
||||
$('<div />').text('Testing texts').css('margin-top',1).css('font-size',(16+i*6)).appendTo(div);
|
||||
}
|
||||
var container = document.querySelector('#test');
|
||||
container.innerHTML = '';
|
||||
|
||||
['arial','verdana','courier new'].forEach(function(e) {
|
||||
var div = document.createElement('div');
|
||||
div.style.fontFamily = e;
|
||||
container.appendChild(div);
|
||||
for(var i=1;i<=10;i*=2) {
|
||||
var text = document.createElement('div');
|
||||
text.innerText = 'Testing texts';
|
||||
text.style.marginTop = '1px';
|
||||
text.style.fontSize = (16+i*6) + 'px';
|
||||
div.appendChild(text);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@ -45,6 +52,9 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
Creating content through JavaScript
|
||||
test <u> </u> label u
|
||||
<div id="test">
|
||||
Creating content through JavaScript
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
Reference in New Issue
Block a user