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:
Niklas von Hertzen
2019-05-25 15:54:41 -07:00
committed by GitHub
parent 20a797cbeb
commit 522a443055
221 changed files with 13668 additions and 23699 deletions

View 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>

View File

@ -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>

View File

@ -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 {

View File

@ -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>

View File

@ -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>

View File

@ -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;" />

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -12,7 +12,7 @@
background-color: green;
}
body {
font-family: Arial;
font-family: "Helvetica Neue", Arial, sans-serif;
}
</style>

View File

@ -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);

View File

@ -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);

View File

@ -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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u> label u
<div id="test">
Creating content through JavaScript
</div>
</body>
</html>