aboutsummaryrefslogtreecommitdiffstats
path: root/tests/wpt/web-platform-tests/css/css-transforms/css-transform-inherit-scale.html
diff options
context:
space:
mode:
Diffstat (limited to 'tests/wpt/web-platform-tests/css/css-transforms/css-transform-inherit-scale.html')
-rw-r--r--tests/wpt/web-platform-tests/css/css-transforms/css-transform-inherit-scale.html75
1 files changed, 37 insertions, 38 deletions
diff --git a/tests/wpt/web-platform-tests/css/css-transforms/css-transform-inherit-scale.html b/tests/wpt/web-platform-tests/css/css-transforms/css-transform-inherit-scale.html
index b4702f8fda2..fa9b5bbbc02 100644
--- a/tests/wpt/web-platform-tests/css/css-transforms/css-transform-inherit-scale.html
+++ b/tests/wpt/web-platform-tests/css/css-transforms/css-transform-inherit-scale.html
@@ -1,50 +1,49 @@
<!DOCTYPE html>
<html>
-<head>
+ <head>
<title>CSS Transforms Test: CSS transforms scale 2 inheritance on div elements</title>
<link rel="author" title="Delong Gao" href="mailto:gaodl@uw.edu">
<link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
- <!--<link rel="match" href="reference/ttwf-reftest-tutorial-ref.html">
- <meta name="flags" content="svg">-->
+ <link rel="match" href="../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="While child div inherits property from its parent, scaling 2 on parent div will course the child to scale 4 and totally cover the red div. The test passes if there is a green square and no red. ">
<style type="text/css">
- * {
- margin: 0;
- padding: 0;
- }
- .red {
- position: absolute;
- width: 200px;
- height: 200px;
- background-color: red;
- }
- .parent {
- background: yellow;
- width: 50px;
- height: 50px;
- position: absolute;
- top: 75px;
- left: 75px;
- transform: scale(2);
+ .test {
+ position: relative;
+ }
+ .red {
+ position: absolute;
+ width: 200px;
+ height: 200px;
+ background-color: red;
+ }
+ .parent {
+ background: yellow;
+ width: 50px;
+ height: 50px;
+ position: absolute;
+ top: 75px;
+ left: 75px;
+ transform: scale(2);
- }
- .child {
- position: absolute;
- top: 10px;
- transform: inherit;
- width: 50px;
- height: 50px;
- background-color: green;
- }
+ }
+ .child {
+ position: absolute;
+ transform: inherit;
+ width: 50px;
+ height: 50px;
+ background-color: green;
+ }
</style>
-</head>
-<body>
- <p>The test passes if there is a green square and no red. </p>
- <div class="red"></div>
- <div class="parent">
- <div class="child"></div>
- </div>
-</body>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div class="test">
+ <div class="red"></div>
+ <div class="parent">
+ <div class="child"></div>
+ </div>
+ </div>
+ </body>
</html>