Skip to content

GitLab

T
tangled
Commit c3eee4c4 authored by Chris Nardi's avatar Chris Nardi Committed by Commit Bot
Browse files
Options

Import wpt/css/css-images 

Import wpt/css/css-images so existing images tests can be upstreamed.

No-Export: true
Bug: 630597
Change-Id: I034a5c02eb3b1b91aceea9579b3f6f84414a7a41
Reviewed-on: https://chromium-review.googlesource.com/898224
Commit-Queue: Chris Nardi <cnardi@chromium.org>
Reviewed-by: default avatarPhilip Jägenstedt <foolip@chromium.org>
Cr-Commit-Position: refs/heads/master@{#534059}
parent cf903c2d
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1061 additions and 1 deletion
third_party/WebKit/LayoutTests/NeverFixTests
View file @ c3eee4c4
......@@ -1821,6 +1821,13 @@ external/wpt/css/css-color/t425-hsla-onscreen-multiple-boxes-c.xht [ WontFix ]
external/wpt/css/mediaqueries/device-aspect-ratio-001.html [ WontFix ]
external/wpt/css/mediaqueries/device-aspect-ratio-005.html [ WontFix ]
# image() (https://drafts.csswg.org/css-images-4/#image-notation) isn't supported
crbug.com/254753 external/wpt/css/css-images/css-image-fallbacks-and-annotations.html [ WontFix ]
crbug.com/254753 external/wpt/css/css-images/css-image-fallbacks-and-annotations002.html [ WontFix ]
crbug.com/254753 external/wpt/css/css-images/css-image-fallbacks-and-annotations003.html [ WontFix ]
crbug.com/254753 external/wpt/css/css-images/css-image-fallbacks-and-annotations004.html [ WontFix ]
crbug.com/254753 external/wpt/css/css-images/css-image-fallbacks-and-annotations005.html [ WontFix ]
# https://github.com/w3c/web-platform-tests/issues/8633
external/wpt/css/css-style-attr/style-attr-braces-002-quirks.htm [ WontFix ]
......
third_party/WebKit/LayoutTests/TestExpectations
View file @ c3eee4c4
......@@ -1666,6 +1666,8 @@ crbug.com/626703 external/wpt/css/css-writing-modes/sizing-orthog-vrl-in-htb-008
crbug.com/626703 external/wpt/css/css-writing-modes/sizing-orthog-vrl-in-htb-020.xht [ Failure ]
crbug.com/626703 external/wpt/css/css-writing-modes/wm-propagation-body-008.xht [ Failure ]
crbug.com/604875 external/wpt/css/css-images/tiled-gradients.html [ Failure ]
crbug.com/655458 crbug.com/721814 external/wpt/mediacapture-image/idlharness.html [ Skip ]
crbug.com/626703 external/wpt/web-nfc/idlharness.https.html [ Skip ]
......
third_party/WebKit/LayoutTests/W3CImportExpectations
View file @ c3eee4c4
......@@ -86,7 +86,6 @@ external/wpt/css/css-counter-styles [ Skip ]
external/wpt/css/css-display/run-in [ Skip ]
external/wpt/css/css-exclusions [ Skip ]
external/wpt/css/css-gcpm [ Skip ]
external/wpt/css/css-images [ Skip ]
external/wpt/css/css-lists [ Skip ]
external/wpt/css/css-masking [ Skip ]
external/wpt/css/css-page [ Skip ]
......
third_party/WebKit/LayoutTests/external/wpt/css/css-images/css-image-fallbacks-and-annotations-ref.html 0 → 100644
View file @ c3eee4c4
<!DOCTYPE html>
<html>
<head>
<title>CSS Image Fallbacks and Annotations: the 'image()' notation</title>
<link rel="author" title="Hirokazu Egashira" href="mailto:yo9ega@aol.com">
<style type="text/css">
.square{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<p>Test passes if background is green and no red.</p>
<div class="square"></div>
</body>
</html>
third_party/WebKit/LayoutTests/external/wpt/css/css-images/css-image-fallbacks-and-annotations.html 0 → 100644
View file @ c3eee4c4
<!DOCTYPE html>
<html>
<head>
<title>CSS Image Fallbacks and Annotations: the 'image()' notation</title>
<link rel="author" title="Hirokazu Egashira" href="mailto:yo9ega@aol.com">
<link rel="help" href="http://www.w3.org/TR/css3-images/#image-notation">
<link rel="match" href="css-image-fallbacks-and-annotations-ref.html">
<meta name="assert" content="When the image doesn't load, the background color is still there to ensure that the white text is readable.">
<style type="text/css">
.square{
width: 200px;
height: 200px;
background-color: red;
background: image("green.png", green);
}
</style>
</head>
<body>
<p>Test passes if background is green and no red.</p>
<div class="square"></div>
</body>
</html>
third_party/WebKit/LayoutTests/external/wpt/css/css-images/css-image-fallbacks-and-annotations002.html 0 → 100644
View file @ c3eee4c4
<!DOCTYPE html>
<html>
<head>
<title>CSS Image Fallbacks and Annotations: the 'image()' notation</title>
<link rel="author" title="Hirokazu Egashira" href="mailto:yo9ega@aol.com">
<link rel="help" href="http://www.w3.org/TR/css3-images/#image-notation">
<link rel="match" href="css-image-fallbacks-and-annotations-ref.html">
<meta name="assert" content="The 'image()' function load the image.">
<style type="text/css">
.square{
width: 200px;
height: 200px;
color: white;
background-color: red;
background-image: image("support/1x1-green.png");
}
</style>
</head>
<body>
<p>Test passes if background is green and no red.</p>
<div class="square"></div>
</body>
</html>
third_party/WebKit/LayoutTests/external/wpt/css/css-images/css-image-fallbacks-and-annotations003.html 0 → 100644
View file @ c3eee4c4
<!DOCTYPE html>
<html>
<head>
<title>CSS Image Fallbacks and Annotations: the 'image()' notation</title>
<link rel="author" title="Hirokazu Egashira" href="mailto:yo9ega@aol.com">
<link rel="help" href="http://www.w3.org/TR/css3-images/#image-notation">
<link rel="match" href="css-image-fallbacks-and-annotations-ref.html">
<meta name="assert" content="The rule below would tell the UA to load The first file if it can; failing that to load The second file; failing that to display The third file.">
<style type="text/css">
.square{
width: 200px;
height: 200px;
background-color: red;
background-image: image("1x1-green.svg", "support/1x1-green.png","support/1x1-green.gif");
}
</style>
</head>
<body>
<p>Test passes if background is green and no red.</p>
<div class="square"></div>
</body>
</html>
third_party/WebKit/LayoutTests/external/wpt/css/css-images/css-image-fallbacks-and-annotations004.html 0 → 100644
View file @ c3eee4c4
<!DOCTYPE html>
<html>
<head>
<title>CSS Image Fallbacks and Annotations: the 'image()' notation</title>
<link rel="author" title="Hirokazu Egashira" href="mailto:yo9ega@aol.com">
<link rel="help" href="http://www.w3.org/TR/css3-images/#image-notation">
<link rel="match" href="css-image-fallbacks-and-annotations-ref.html">
<meta name="assert" content="The rule below would tell the UA to load The first file if it can; failing that to load The second file.">
<style type="text/css">
.square{
width: 200px;
height: 200px;
background-color: red;
background-image: image("1x1-green.svg", "1x1-green.png", "support/1x1-green.gif");
}
</style>
</head>
<body>
<p>Test passes if background is green and no red.</p>
<div class="square"></div>
</body>
</html>
third_party/WebKit/LayoutTests/external/wpt/css/css-images/css-image-fallbacks-and-annotations005.html 0 → 100644
View file @ c3eee4c4
<!DOCTYPE html>
<html>
<head>
<title>CSS Image Fallbacks and Annotations: the 'image()' notation</title>
<link rel="author" title="Hirokazu Egashira" href="mailto:yo9ega@aol.com">
<link rel="help" href="http://www.w3.org/TR/css3-images/#image-notation">
<link rel="match" href="css-image-fallbacks-and-annotations-ref.html">
<meta name="assert" content="The 'image()' function specifies only a color without any URLs, the function immediately falls back to representing a solid-color image of the chosen color.">
<style type="text/css">
.square{
width: 200px;
height: 200px;
background-color: red;
background-image: image(rgba(0,0,255,0.5)), url("support/1x1-green.png");
}
</style>
</head>
<body>
<p>Test passes if background is pale green and no green and no red.</p>
<div class="square"></div>
</body>
</html>
third_party/WebKit/LayoutTests/external/wpt/css/css-images/gradient-border-box-ref.html 0 → 100644
View file @ c3eee4c4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#x {
width: 280px;
height: 280px;
background-image: repeating-linear-gradient(to bottom right, white, black, white 30px);
}
</style>
</head>
<body>
<div id="x"></div>
</body>
</html>
third_party/WebKit/LayoutTests/external/wpt/css/css-images/gradient-border-box.html 0 → 100644
View file @ c3eee4c4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gradient Background aligned to Content Box</title>
<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-background-origin">
<link rel="match" href="gradient-border-box-ref.html">
<meta name="assert" content="The background-origin: border-box; statement is understood.">
<style>
#x {
background-origin: border-box;
width: 200px;
height: 200px;
border-style: solid;
border-width: 40px;
border-color: transparent;
background-image: repeating-linear-gradient(to bottom right, white, black, white 30px);
}
</style>
</head>
<body>
<div id="x"></div>
</body>
</html>
third_party/WebKit/LayoutTests/external/wpt/css/css-images/gradient-button-ref.html 0 → 100644
View file @ c3eee4c4
<!doctype html>
<meta charset="utf-8">
<title>Big button with gradient (without padding)</title>
<style>
#button {
width: calc(300px + 2 * 30px);
height: calc(80px + 2 * 20px);
background: linear-gradient(blue, green);
border-width: 5px;
border-style: solid;
border-color: red;
border-radius: 10px;
}
</style>
<div id="button"></div>
third_party/WebKit/LayoutTests/external/wpt/css/css-images/gradient-button.html 0 → 100644
View file @ c3eee4c4
<!doctype html>
<meta charset="utf-8">
<title>Gradients with padding</title>
<link rel="help" href="https://drafts.csswg.org/css-images-3/#gradients">
<meta name="assert" content="gradients cover element padding">
<link rel="match" href="gradient-button-ref.html">
<style>
#button {
width: 300px;
height: 80px;
padding: 20px 30px;
background: linear-gradient(blue, green);
border-width: 5px;
border-style: solid;
border-color: red;
border-radius: 10px;
}
</style>
<div id="button"></div>
third_party/WebKit/LayoutTests/external/wpt/css/css-images/gradient-content-box-ref.html 0 → 100644
View file @ c3eee4c4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#x {
width: 200px;
height: 200px;
border: 40px;
border-style: solid;
border-color: transparent;
background-image: repeating-linear-gradient(to bottom right, white, black, white 30px);
}
</style>
</head>
<body>
<div id="x"></div>
</body>
</html>
third_party/WebKit/LayoutTests/external/wpt/css/css-images/gradient-content-box.html 0 → 100644
View file @ c3eee4c4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gradient Background aligned to Content Box</title>
<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-background-origin">
<link rel="match" href="gradient-content-box-ref.html">
<meta name="assert" content="The background-origin: content-box; statement is understood.">
<style>
#x {
background-origin: content-box;
width: 200px;
height: 200px;
padding: 40px;
background-image: repeating-linear-gradient(to bottom right, white, black, white 30px);
}
</style>
</head>
<body>
<div id="x"></div>
</body>
</html>
third_party/WebKit/LayoutTests/external/wpt/css/css-images/gradient-crash.html 0 → 100644
View file @ c3eee4c4
<!DOCTYPE html>
<meta charset="utf-8">
<title>Does this gradient crash the browser?</title>
<link rel="match" href="gradient-crash-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-images-3/#color-stop-syntax">
<meta name="assert" content="Gradients with total length zero and absolute positioned stops do not crash.">
<style>
div {
background: linear-gradient(black 0,white);
}
</style>
<div></div>
third_party/WebKit/LayoutTests/external/wpt/css/css-images/gradient-move-stops-ref.html 0 → 100644
View file @ c3eee4c4
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
#gradient {
width: 400px;
height: 300px;
background-image: linear-gradient(to right, yellow 0%, blue 70%, green 70%, green 100%);
}
</style>
</head>
<body>
<div id="gradient"></div>
</body>
</html>
\ No newline at end of file
third_party/WebKit/LayoutTests/external/wpt/css/css-images/gradient-move-stops.html 0 → 100644
View file @ c3eee4c4
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Linear gradient which needs some positions changed and inferred.</title>
<link rel="help" href="https://drafts.csswg.org/css-images-3/#radial-color-stops">
<link rel="match" href="gradient-move-stops-ref.html">
<style>
#gradient {
width: 400px;
height: 300px;
background-image: linear-gradient(to right, yellow, blue 70%, green 0);
}
</style>
</head>
<body>
<div id="gradient"></div>
</body>
</html>
\ No newline at end of file
third_party/WebKit/LayoutTests/external/wpt/css/css-images/gradients-with-border-ref.html 0 → 100644
View file @ c3eee4c4
<!doctype html>
<style>
.test {
width: 200px;
height: 100px;
margin-left: 90px;
border: solid 10px blue;
}
.spacer {
float: left;
width: 90px;
height: 120px;
background-color: blue;
}
.outer {
width: 200px;
height: 100px;
margin-left: 90px;
padding: 10px;
background-color: blue;
}
#gradient1 {
width: 200px;
height: 100px;
background-image: linear-gradient(to right top, black 49%, white 50%);
}
#gradient2 {
background-image: linear-gradient(to right top, black 49%, white 50%);
}
#gradient3 {
background-image: radial-gradient(ellipse at 30% 30%, black 49%, white 50%);
}
</style>
<div>
<div class="spacer"></div>
<div class="outer">
<div id="gradient1"></div>
</div>
</div>
<div id="gradient2" class="test"></div>
<div>
<div class="spacer"></div>
<div id="gradient3" class="test"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-images/gradients-with-border.html 0 → 100644
View file @ c3eee4c4
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Gradients with borders</title>
<link rel="help" href="https://drafts.csswg.org/css-images-3/#gradients">
<meta name="assert" content="Correct placement and rendering of gradients inside elements with borders.">
<link rel="match" href="gradients-with-border-ref.html">
<style>
.test {
width: 200px;
height: 100px;
border: solid 10px blue;
}
#gradient1 {
border-left-width: 100px;
background-image: linear-gradient(to right top, black 49%, white 50%);
}
#gradient2 {
margin-left: 90px;
background-image: linear-gradient(to right top, black 49%, white 50%);
}
#gradient3 {
border-left-width: 100px;
background-image: radial-gradient(ellipse at 30% 30%, black 49%, white 50%);
}
</style>
</head>
<body>
<div id="gradient1" class="test"></div>
<div id="gradient2" class="test"></div>
<div id="gradient3" class="test"></div>
</body>
</html>
third_party/WebKit/LayoutTests/external/wpt/css/css-images/gradients-with-transparent-ref.html 0 → 100644
View file @ c3eee4c4
<!DOCTYPE html>
<meta charset="utf-8">
<title>Linear gradient with transparent reference</title>
<style>
.test {
width: 200px;
height: 100px;
margin-left: 90px;
}
.gradient {
background-image: linear-gradient(to left, blue 0%, blue 20%, rgba(0,0,255,0));
}
</style>
<body>
<p>Gradient using 'transparent'</p>
<div id="gradient1" class="test gradient"></div>
<br />
<p>Gradient using rgba(0,0,255,0)</p>
<div id="gradient2" class="test gradient"></div>
</body>
third_party/WebKit/LayoutTests/external/wpt/css/css-images/gradients-with-transparent.html 0 → 100644
View file @ c3eee4c4
<!DOCTYPE html>
<meta charset="utf-8">
<title>Gradients with transparent</title>
<link rel="help" href="https://www.w3.org/TR/css3-images/#linear-gradients">
<link rel="match" href="gradients-with-transparent-ref.html">
<meta name="assert" content="The blue gradients to 'transparent' keyword, and rgba(0,0,0,0), match the gradient to rgba(0,0,255,0)">
<style>
.test {
width: 200px;
height: 100px;
margin-left: 90px;
}
#gradient1 {
background-image: linear-gradient(to left, blue 0%, blue 20%, transparent);
}
#gradient2 {
background-image: linear-gradient(to left, blue 0%, blue 20%, rgba(0,0,0,0));
}
</style>
<body>
<p>Gradient using 'transparent'</p>
<div id="gradient1" class="test"></div>
<br />
<p>Gradient using rgba(0,0,255,0)</p>
<div id="gradient2" class="test"></div>
</body>
third_party/WebKit/LayoutTests/external/wpt/css/css-images/image-fit-001.xht 0 → 100644
View file @ c3eee4c4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Object Fit - initial value</title>
<link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/>
<link rel="help" href="http://www.w3.org/TR/css3-images/#object-fit"/>
<meta name="assert" content="The initial value of the 'object-fit' property is 'fill'."/>
<style type="text/css"><![CDATA[
img {
background: red;
height: 100px;
width: 50px;
}
]]></style>
</head>
<body>
<div>A green block appears below. There must be no red on the page.</div>
<div><img src="support/swatch-green.png" alt="Failed: image missing"/></div>
</body>
</html>
\ No newline at end of file
third_party/WebKit/LayoutTests/external/wpt/css/css-images/image-fit-006.xht 0 → 100644
View file @ c3eee4c4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Object Fit - 'fill', explicit 'height'/'width'</title>
<link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/>
<link rel="help" href="http://www.w3.org/TR/css3-images/#object-fit"/>
<meta name="assert" content="The 'fill' value of the 'object-fit' property does not affect the usual calculation of the used 'height' and 'width."/>
<meta name="assert" content="The 'fill' value of the 'image-scaling' property scales the content height and width independently so that the edges of the content just meet the edges of the box established by the used 'height' and 'width'."/>
<style type="text/css"><![CDATA[
img {
border: 5px solid blue;
height: 50px;
width: 100px;
object-fit: fill;
background: red;
}
]]></style>
</head>
<body>
<div>The image below should fill the blue border with no red between the border and the image.</div>
<div><img src="support/intrinsic-size.jpg" alt="Failed: image missing" /></div>
</body>
</html>
\ No newline at end of file
third_party/WebKit/LayoutTests/external/wpt/css/css-images/img-orient-012.xht 0 → 100644
View file @ c3eee4c4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Image Orientation - Negative Values</title>
<link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/>
<link rel="help" href="http://www.w3.org/TR/css3-images/#image-orientation"/>
<meta name="assert" content="A negative value for 'image-orientation' rotates the image to the left (in a counter-clockwise direction) by the given number of degrees. "/>
<style type="text/css"><![CDATA[
img.turn { image-orientation: -90deg; }
]]></style>
</head>
<body>
<div>
<p>This arrow should appear sideways, with the tip of the arrow pointing left.</p>
<img src="support/intrinsic-size.png" alt="FAIL: missing image" class="turn" />
</div>
</body>
</html>
\ No newline at end of file
third_party/WebKit/LayoutTests/external/wpt/css/css-images/linear-gradient-1.html 0 → 100644
View file @ c3eee4c4
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Linear gradient with some inferred positions</title>
<link rel="help" href="https://drafts.csswg.org/css-images-3/#radial-color-stops">
<meta name="assert" content="Calculation of implicit gradient stops.">
<link rel="match" href="linear-gradient-ref.html">
<style>
#gradient {
width: 400px;
height: 300px;
background-image: linear-gradient(to right, black 0%, red, gold);
}
</style>
</head>
<body>
<div id="gradient"></div>
</body>
</html>
\ No newline at end of file
third_party/WebKit/LayoutTests/external/wpt/css/css-images/linear-gradient-2.html 0 → 100644
View file @ c3eee4c4
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Linear gradient with all inferred positions</title>
<link rel="help" href="https://drafts.csswg.org/css-images-3/#radial-color-stops">
<meta name="assert" content="Calculation of implicit gradient stops.">
<link rel="match" href="linear-gradient-ref.html">
<style>
#gradient {
width: 400px;
height: 300px;
background-image: linear-gradient(to right, black, red, gold);
}
</style>
</head>
<body>
<div id="gradient"></div>
</body>
</html>
\ No newline at end of file
third_party/WebKit/LayoutTests/external/wpt/css/css-images/linear-gradient-ref.html 0 → 100644
View file @ c3eee4c4
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
#gradient {
width: 400px;
height: 300px;
background-image: linear-gradient(to right, black 0%, red 50%, gold 100%);
}
</style>
</head>
<body>
<div id="gradient"></div>
</body>
</html>
\ No newline at end of file
third_party/WebKit/LayoutTests/external/wpt/css/css-images/tiled-gradients-ref.html 0 → 100644
View file @ c3eee4c4
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.bar {
width: 400px;
height: 100px;
}
.box {
display: inline-block;
width: 100px;
height: 100px;
border: 0px;
background-image: linear-gradient(to bottom left, red 50%, transparent 50%);
}
</style>
</head>
<body>
<div class="bar">
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
</div>
<div class="bar">
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
</div>
</body>
</html>
third_party/WebKit/LayoutTests/external/wpt/css/css-images/tiled-gradients.html 0 → 100644
View file @ c3eee4c4
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Eight Red Triangles on White Ground (with gradients)</title>
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-size">
<meta name="assert" content="Gradients are correctly repeated.">
<link rel="match" href="tiled-gradients-ref.html">
<style>
#gradient {
width: 400px;
height: 200px;
background-size: 25% 50%;
background-image: linear-gradient(to bottom left, red 50%, transparent 50%);
}
</style>
</head>
<body>
<div id="gradient"></div>
</body>
</html>
third_party/WebKit/LayoutTests/external/wpt/css/css-images/tiled-radial-gradients-ref.html 0 → 100644
View file @ c3eee4c4
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
margin: 0px;
}
#outer {
position: absolute;
width: 600px;
height: 200px;
background-color: aquamarine;
}
#left, #right {
position: absolute;
width: 300px;
height: 200px;
background-image: radial-gradient(closest-side, red 40%, transparent 40%)
}
#left {
left: 80px;
}
#right {
left: 380px;
}
</style>
</head>
<body>
<div id="outer">
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>
third_party/WebKit/LayoutTests/external/wpt/css/css-images/tiled-radial-gradients.html 0 → 100644
View file @ c3eee4c4
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Two Ellipses with Custom Placement (with gradients)</title>
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-size">
<meta name="assert" content="Gradients are correctly repeated.">
<link rel="match" href="tiled-radial-gradients-ref.html">
<style>
body {
margin: 0px;
}
#gradient {
position: absolute;
width: 600px;
height: 200px;
left: 0px;
margin: 0px;
background-color: aquamarine;
background-image: radial-gradient(closest-side, red 40%, transparent 40%);
background-size: 300px 200px;
background-position: 80px 0px;
}
</style>
</head>
<body>
<div id="gradient"></div>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment