WPT tests for the 'transform-box' property

Basic tests for 'fill-box' and 'view-box' with various viewport configurations. Bug: 595829 Change-Id: I81ec92e958c5ec240c7932219371b6c5369f5ac5 Reviewed-on: https://chromium-review.googlesource.com/796211 Reviewed-by: Stephen Chenney <[email protected]> Commit-Queue: Fredrik Söderquist <[email protected]> Cr-Commit-Position: refs/heads/master@{#520111}
travisleithead · Nov 29, 2017 · 7abede2 · 7abede2
1 parent 45ed50b
commit 7abede2
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 0 deletions.
diff --git a/css/css-transforms/transform-box/fill-box.html b/css/css-transforms/transform-box/fill-box.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>transform-box: fill-box</title>
+<link rel="match" href="support/greensquare200x200.html">
+<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-box">
+<style>
+svg {
+  background-color: red;
+}
+rect {
+  transform-box: fill-box;
+}
+#target1 {
+  transform: rotate(90deg);
+}
+#target2 {
+  transform: translate(50%, -50%);
+}
+#target3 {
+  transform-origin: 25% 25%;
+  transform: rotate(180deg) translate(-25%, -25%);
+}
+#target4 {
+  transform-origin: 75px 75px;
+  transform: rotate(-180deg) translate(-25%, -25%);
+}
+</style>
+<p>There should be a green 200x200 rectangle below, and no red.</p>
+<svg width="200" height="200">
+  <rect id="target1" x="100" y="100" width="100" height="100" fill="green"/>
+  <rect id="target2" x="50" y="50" width="100" height="100" fill="green"/>
+  <rect id="target3" x="25" y="25" width="100" height="100" fill="green"/>
+  <rect id="target4" x="25" y="25" width="100" height="100" fill="green"/>
+</svg>
diff --git a/css/css-transforms/transform-box/support/greensquare200x200.html b/css/css-transforms/transform-box/support/greensquare200x200.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<p>There should be a green 200x200 rectangle below, and no red.</p>
+<div style="width: 200px; height: 200px; background-color: green"></div>
diff --git a/css/css-transforms/transform-box/view-box-nested.html b/css/css-transforms/transform-box/view-box-nested.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>transform-box: view-box, relative to nested viewport</title>
+<link rel="match" href="support/greensquare200x200.html">
+<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-box">
+<style>
+#target {
+  transform-box: view-box;
+  transform: translate(-50%, -50%);
+}
+</style>
+<p>There should be a green 200x200 rectangle below, and no red.</p>
+<svg width="400" height="200">
+  <rect width="200" height="200" fill="red"/>
+  <svg width="200" height="200">
+    <rect id="target" x="100" y="100" width="200" height="200" fill="green"/>
+  </svg>
+</svg>
diff --git a/css/css-transforms/transform-box/view-box-viewbox-nested.html b/css/css-transforms/transform-box/view-box-viewbox-nested.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>transform-box: view-box, relative to viewport defined by nested viewBox</title>
+<link rel="match" href="support/greensquare200x200.html">
+<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-box">
+<style>
+#target {
+  transform-box: view-box;
+  transform: translate(-50%, -50%);
+}
+</style>
+<p>There should be a green 200x200 rectangle below, and no red.</p>
+<svg width="400" height="200">
+  <rect width="200" height="200" fill="red"/>
+  <svg viewBox="0 0 200 200" preserveAspectRatio="xMinYMin">
+    <rect id="target" x="100" y="100" width="200" height="200" fill="green"/>
+  </svg>
+</svg>
diff --git a/css/css-transforms/transform-box/view-box-viewbox.html b/css/css-transforms/transform-box/view-box-viewbox.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>transform-box: view-box, relative to viewport defined by viewBox</title>
+<link rel="match" href="support/greensquare200x200.html">
+<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-box">
+<style>
+#target {
+  transform-box: view-box;
+  transform: translate(-50%, -50%);
+}
+</style>
+<p>There should be a green 200x200 rectangle below, and no red.</p>
+<svg width="400" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMinYMin">
+  <rect width="200" height="200" fill="red"/>
+  <rect id="target" x="100" y="100" width="200" height="200" fill="green"/>
+</svg>
diff --git a/css/css-transforms/transform-box/view-box.html b/css/css-transforms/transform-box/view-box.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>transform-box: view-box</title>
+<link rel="match" href="support/greensquare200x200.html">
+<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-box">
+<style>
+svg {
+  background-color: red;
+}
+rect {
+  transform-box: view-box;
+}
+#target1 {
+  transform-origin: 25% 25%;
+  transform: scale(2);
+}
+#target2 {
+  transform: translate(50%, 0);
+}
+#target3 {
+  transform: translate(0, 50%);
+}
+#target4 {
+  transform-origin: 50% 50%;
+  transform: rotate(180deg);
+}
+</style>
+<p>There should be a green 200x200 rectangle below, and no red.</p>
+<svg width="200" height="200">
+  <rect id="target1" x="25" y="25" width="50" height="50" fill="green"/>
+  <rect id="target2" width="100" height="100" fill="green"/>
+  <rect id="target3" width="100" height="100" fill="green"/>
+  <rect id="target4" width="100" height="100" fill="green"/>
+</svg>