diff options
| author | WPT Sync Bot <josh+wptsync@joshmatthews.net> | 2020-06-16 08:20:51 +0000 |
|---|---|---|
| committer | WPT Sync Bot <josh+wptsync@joshmatthews.net> | 2020-06-16 10:58:22 +0000 |
| commit | 1a24e35f18a311873ee77ffb5f046abea033a341 (patch) | |
| tree | 059da1082512802b25780e8610ed0e41e78d681c /tests/wpt/web-platform-tests/css/css-transforms/transform-box | |
| parent | 19c1f72eb2fe5178311161b6c85a67956a5a69b3 (diff) | |
| download | servo-1a24e35f18a311873ee77ffb5f046abea033a341.tar.gz servo-1a24e35f18a311873ee77ffb5f046abea033a341.zip | |
Update web-platform-tests to revision 4af6af604800559d2c58cf3561621ae43e28aaa8
Diffstat (limited to 'tests/wpt/web-platform-tests/css/css-transforms/transform-box')
14 files changed, 374 insertions, 0 deletions
diff --git a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-border-box.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-border-box.html new file mode 100644 index 00000000000..d0176e367b4 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-border-box.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>transform-box: border-box (CSS layout)</title> +<link rel="match" href="./reference/cssbox-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> +<meta name="assert" content="This should display a square with a black bar at the top whose top-left corner is at 100,100."/> + +<style> +#target { + width: 150px; + height: 200px; + margin-left: 300px; + margin-top: 100px; + background-color: green; + border-left: solid 50px black; + + transform: rotate(90deg); + transform-origin: 0 0; + transform-box: border-box; +} +</style> + +<div id="target"></div> + +<div id="error"></div> +<script> +var refStyle = "border-box"; +var compStyle = getComputedStyle(document.getElementById('target')).transformBox; +if (refStyle != compStyle) + document.getElementById('error').textContent = "Error, got computed style " + compStyle; +</script> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-content-box.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-content-box.html new file mode 100644 index 00000000000..31a44282930 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-content-box.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>transform-box: content-box (CSS layout)</title> +<link rel="match" href="./reference/cssbox-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> +<meta name="assert" content="This should display a square with a black bar at the top whose top-left corner is at 100,100."/> + +<style> +#target { + width: 150px; + height: 200px; + margin-left: 300px; + margin-top: 100px; + background-color: green; + border-left: solid 50px black; + + transform: rotate(90deg); + transform-origin: -50px 0; + transform-box: content-box; +} +</style> + +<div id="target"></div> + +<div id="error"></div> +<script> +var refStyle = "content-box"; +var compStyle = getComputedStyle(document.getElementById('target')).transformBox; +if (refStyle != compStyle) + document.getElementById('error').textContent = "Error, got computed style " + compStyle; +</script> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-fill-box.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-fill-box.html new file mode 100644 index 00000000000..6821140bfea --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-fill-box.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>transform-box: fill-box (CSS layout)</title> +<link rel="match" href="./reference/cssbox-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> +<meta name="assert" content="This should display a square with a black bar at the top whose top-left corner is at 100,100."/> + +<style> +#target { + width: 150px; + height: 200px; + margin-left: 300px; + margin-top: 100px; + background-color: green; + border-left: solid 50px black; + + transform: rotate(90deg); + transform-origin: -50px 0; + transform-box: fill-box; /* alias for content-box */ +} +</style> + +<div id="target"></div> + +<div id="error"></div> +<script> +var refStyle = "fill-box"; +var compStyle = getComputedStyle(document.getElementById('target')).transformBox; +if (refStyle != compStyle) + document.getElementById('error').textContent = "Error, got computed style " + compStyle; +</script> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-initial.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-initial.html new file mode 100644 index 00000000000..5344fb23490 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-initial.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>transform-box: initial (CSS layout)</title> +<link rel="match" href="./reference/cssbox-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> +<meta name="assert" content="This should display a square with a black bar at the top whose top-left corner is at 100,100."/> + +<style> +#target { + width: 150px; + height: 200px; + margin-left: 300px; + margin-top: 100px; + background-color: green; + border-left: solid 50px black; + + transform: rotate(90deg); + transform-origin: 0 0; +} +</style> + +<div id="target"></div> + +<div id="error"></div> +<script> +var refStyle = "view-box"; +var compStyle = getComputedStyle(document.getElementById('target')).transformBox; +if (refStyle != compStyle) + document.getElementById('error').textContent = "Error, got computed style " + compStyle; +</script> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-stroke-box.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-stroke-box.html new file mode 100644 index 00000000000..fd0db232155 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-stroke-box.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>transform-box: stroke-box (CSS layout)</title> +<link rel="match" href="./reference/cssbox-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> +<meta name="assert" content="This should display a square with a black bar at the top whose top-left corner is at 100,100."/> + +<style> +#target { + width: 150px; + height: 200px; + margin-left: 300px; + margin-top: 100px; + background-color: green; + border-left: solid 50px black; + + transform: rotate(90deg); + transform-origin: 0 0; + transform-box: stroke-box; /* alias for border-box */ +} +</style> + +<div id="target"></div> + +<div id="error"></div> +<script> +var refStyle = "stroke-box"; +var compStyle = getComputedStyle(document.getElementById('target')).transformBox; +if (refStyle != compStyle) + document.getElementById('error').textContent = "Error, got computed style " + compStyle; +</script> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-view-box.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-view-box.html new file mode 100644 index 00000000000..2336957bf1c --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-view-box.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>transform-box: view-box (CSS layout)</title> +<link rel="match" href="./reference/cssbox-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> +<meta name="assert" content="This should display a square with a black bar at the top whose top-left corner is at 100,100."/> + +<style> +#target { + width: 150px; + height: 200px; + margin-left: 300px; + margin-top: 100px; + background-color: green; + border-left: solid 50px black; + + transform: rotate(90deg); + transform-origin: 0 0; + transform-box: view-box; /* acts like border-box on css boxes */ +} +</style> + +<div id="target"></div> + +<div id="error"></div> +<script> +var refStyle = "view-box"; +var compStyle = getComputedStyle(document.getElementById('target')).transformBox; +if (refStyle != compStyle) + document.getElementById('error').textContent = "Error, got computed style " + compStyle; +</script> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/reference/cssbox-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/reference/cssbox-ref.html new file mode 100644 index 00000000000..138d65df940 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/reference/cssbox-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> + +<style> +#target { + width: 200px; + height: 150px; + margin-left: 100px; + margin-top: 100px; + background-color: green; + border-top: solid 50px black; +} +</style> + +<div id="target"></div>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/reference/svgbox-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/reference/svgbox-ref.html new file mode 100644 index 00000000000..c765ebe8665 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/reference/svgbox-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> + +<style> +#target { + fill: green; + stroke: black; + stroke-width: 50; + transform: none; +} +</style> + +<svg width="400" height="300"> + <path id="target" d="M 200 100 h -100 v 100 h 100"/> +</svg>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-border-box.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-border-box.html new file mode 100644 index 00000000000..921dba1d738 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-border-box.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>transform-box: border-box (SVG layout)</title> +<link rel="match" href="./reference/svgbox-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> +<meta name="assert" content="This should display a C shape with the center of the top endpoint at 200,100."/> + +<style> +#target { + fill: green; + stroke: black; + stroke-width: 50; + transform-box: border-box; /* alias for stroke-box */ + transform-origin: 25px 0px; + transform: rotate(90deg); +} +</style> + +<svg width="400" height="300"> + <path id="target" d="M 200 100 v 100 h 100 v -100"/> +</svg> + +<div id="error"></div> +<script> +var refStyle = "border-box"; +var compStyle = getComputedStyle(document.getElementById('target')).transformBox; +if (refStyle != compStyle) + document.getElementById('error').textContent = "Error, got computed style " + compStyle; +</script> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-content-box.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-content-box.html new file mode 100644 index 00000000000..2f7f2dd071a --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-content-box.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>transform-box: content-box (SVG layout)</title> +<link rel="match" href="./reference/svgbox-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> +<meta name="assert" content="This should display a C shape with the center of the top endpoint at 200,100."/> + +<style> +#target { + fill: green; + stroke: black; + stroke-width: 50; + transform-box: content-box; /* alias for fill-box */ + transform-origin: 0px 0px; + transform: rotate(90deg); +} +</style> + +<svg width="400" height="300"> + <path id="target" d="M 200 100 v 100 h 100 v -100"/> +</svg> + +<div id="error"></div> +<script> +var refStyle = "content-box"; +var compStyle = getComputedStyle(document.getElementById('target')).transformBox; +if (refStyle != compStyle) + document.getElementById('error').textContent = "Error, got computed style " + compStyle; +</script> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-fill-box.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-fill-box.html new file mode 100644 index 00000000000..111d8dbcfb3 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-fill-box.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>transform-box: fill-box (SVG layout)</title> +<link rel="match" href="./reference/svgbox-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> +<meta name="assert" content="This should display a C shape with the center of the top endpoint at 200,100."/> + +<style> +#target { + fill: green; + stroke: black; + stroke-width: 50; + transform-box: fill-box; + transform-origin: 0px 0px; + transform: rotate(90deg); +} +</style> + +<svg width="400" height="300"> + <path id="target" d="M 200 100 v 100 h 100 v -100"/> +</svg> + +<div id="error"></div> +<script> +var refStyle = "fill-box"; +var compStyle = getComputedStyle(document.getElementById('target')).transformBox; +if (refStyle != compStyle) + document.getElementById('error').textContent = "Error, got computed style " + compStyle; +</script> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-initial.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-initial.html new file mode 100644 index 00000000000..ba07c884522 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-initial.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>transform-box: initial (SVG layout)</title> +<link rel="match" href="./reference/svgbox-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> +<meta name="assert" content="This should display a C shape with the center of the top endpoint at 200,100."/> + +<style> +#target { + fill: green; + stroke: black; + stroke-width: 50; + transform-origin: 200px 100px; + transform: rotate(90deg); +} +</style> + +<svg width="400" height="300"> + <path id="target" d="M 200 100 v 100 h 100 v -100"/> +</svg> + +<div id="error"></div> +<script> +var refStyle = "view-box"; +var compStyle = getComputedStyle(document.getElementById('target')).transformBox; +if (refStyle != compStyle) + document.getElementById('error').textContent = "Error, got computed style " + compStyle; +</script> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-stroke-box.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-stroke-box.html new file mode 100644 index 00000000000..d2ca1411ae8 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-stroke-box.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>transform-box: stroke-box (SVG layout)</title> +<link rel="match" href="./reference/svgbox-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> +<meta name="assert" content="This should display a C shape with the center of the top endpoint at 200,100."/> + +<style> +#target { + fill: green; + stroke: black; + stroke-width: 50; + transform-box: stroke-box; + transform-origin: 25px 0px; + transform: rotate(90deg); +} +</style> + +<svg width="400" height="300"> + <path id="target" d="M 200 100 v 100 h 100 v -100"/> +</svg> + +<div id="error"></div> +<script> +var refStyle = "stroke-box"; +var compStyle = getComputedStyle(document.getElementById('target')).transformBox; +if (refStyle != compStyle) + document.getElementById('error').textContent = "Error, got computed style " + compStyle; +</script> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-view-box.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-view-box.html new file mode 100644 index 00000000000..dbce635d6e7 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-view-box.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>transform-box: view-box (SVG layout)</title> +<link rel="match" href="./reference/svgbox-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> +<meta name="assert" content="This should display a C shape with the center of the top endpoint at 200,100."/> + +<style> +#target { + fill: green; + stroke: black; + stroke-width: 50; + transform-box: view-box; + transform-origin: 200px 100px; + transform: rotate(90deg); +} +</style> + +<svg width="400" height="300"> + <path id="target" d="M 200 100 v 100 h 100 v -100"/> +</svg> + +<div id="error"></div> +<script> +var refStyle = "view-box"; +var compStyle = getComputedStyle(document.getElementById('target')).transformBox; +if (refStyle != compStyle) + document.getElementById('error').textContent = "Error, got computed style " + compStyle; +</script> |