diff options
Diffstat (limited to 'layout/reftests/css-shapes')
34 files changed, 1353 insertions, 0 deletions
diff --git a/layout/reftests/css-shapes/dynamic-shape-outside-1-ref.html b/layout/reftests/css-shapes/dynamic-shape-outside-1-ref.html new file mode 100644 index 0000000000..751755d392 --- /dev/null +++ b/layout/reftests/css-shapes/dynamic-shape-outside-1-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<title>Reference: Dynamic change to shape-outside</title> +<style> +.circle { + float: left; + width: 25vmin; + height: 25vmin; + background: #f06; + shape-outside: circle(); +} +</style> +</head> +<body> +<div class="circle"></div> +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent +scelerisque pretium interdum. Nam rhoncus auctor consequat. Duis porta +tortor eu nibh efficitur, eget tempor tortor semper. Integer eu sem +placerat, sodales tortor at, ornare orci. Fusce id malesuada est. Aenean + mattis augue sapien. Fusce efficitur ante sed porttitor blandit. Nam +facilisis aliquam elit, ut consequat quam interdum sit amet. Integer +bibendum turpis at mi dapibus dictum. Donec id lorem arcu. Pellentesque +tortor nunc, semper a dui vel, maximus varius orci. Maecenas posuere +enim in tempor imperdiet. +</body> +</html> diff --git a/layout/reftests/css-shapes/dynamic-shape-outside-1.html b/layout/reftests/css-shapes/dynamic-shape-outside-1.html new file mode 100644 index 0000000000..eece5aff42 --- /dev/null +++ b/layout/reftests/css-shapes/dynamic-shape-outside-1.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<title>Dynamic change to shape-outside</title> +<style> +.circle { + float: left; + width: 25vmin; + height: 25vmin; + background: #f06; +} +</style> +<script> +function doTest() { + let circle = document.querySelector(".circle"); + circle.style.shapeOutside = "circle()"; + + document.documentElement.removeAttribute('class'); +} +document.addEventListener("MozReftestInvalidate", doTest); +</script> +</head> +<body> +<div class="circle"></div> +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent +scelerisque pretium interdum. Nam rhoncus auctor consequat. Duis porta +tortor eu nibh efficitur, eget tempor tortor semper. Integer eu sem +placerat, sodales tortor at, ornare orci. Fusce id malesuada est. Aenean + mattis augue sapien. Fusce efficitur ante sed porttitor blandit. Nam +facilisis aliquam elit, ut consequat quam interdum sit amet. Integer +bibendum turpis at mi dapibus dictum. Donec id lorem arcu. Pellentesque +tortor nunc, semper a dui vel, maximus varius orci. Maecenas posuere +enim in tempor imperdiet. +</body> +</html> diff --git a/layout/reftests/css-shapes/dynamic-shape-outside-2.html b/layout/reftests/css-shapes/dynamic-shape-outside-2.html new file mode 100644 index 0000000000..f5be203b77 --- /dev/null +++ b/layout/reftests/css-shapes/dynamic-shape-outside-2.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<title>Dynamic change to shape-outside</title> +<style> +.circle { + float: left; + width: 25vmin; + height: 25vmin; + background: #f06; + shape-outside: circle(100%); +} +</style> +<script> +function doTest() { + let circle = document.querySelector(".circle"); + circle.style.shapeOutside = "circle()"; + + document.documentElement.removeAttribute('class'); +} +document.addEventListener("MozReftestInvalidate", doTest); +</script> +</head> +<body> +<div class="circle"></div> +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent +scelerisque pretium interdum. Nam rhoncus auctor consequat. Duis porta +tortor eu nibh efficitur, eget tempor tortor semper. Integer eu sem +placerat, sodales tortor at, ornare orci. Fusce id malesuada est. Aenean + mattis augue sapien. Fusce efficitur ante sed porttitor blandit. Nam +facilisis aliquam elit, ut consequat quam interdum sit amet. Integer +bibendum turpis at mi dapibus dictum. Donec id lorem arcu. Pellentesque +tortor nunc, semper a dui vel, maximus varius orci. Maecenas posuere +enim in tempor imperdiet. +</body> +</html> diff --git a/layout/reftests/css-shapes/reftest.list b/layout/reftests/css-shapes/reftest.list new file mode 100644 index 0000000000..7465f12a62 --- /dev/null +++ b/layout/reftests/css-shapes/reftest.list @@ -0,0 +1,34 @@ +== dynamic-shape-outside-1.html dynamic-shape-outside-1-ref.html +== dynamic-shape-outside-2.html dynamic-shape-outside-1-ref.html + +== shape-outside-empty-circle-1.html shape-outside-empty-point-ref.html +== shape-outside-empty-circle-2.html shape-outside-empty-circle-ref.html +== shape-outside-empty-circle-3.html shape-outside-empty-nothing-ref.html + +== shape-outside-empty-ellipse-1.html shape-outside-empty-point-ref.html +== shape-outside-empty-ellipse-2.html shape-outside-empty-circle-ref.html +== shape-outside-empty-ellipse-3.html shape-outside-empty-point-ref.html +# The next test needs fuzzy due to chamfer aberration +fuzzy(0-255,0-520) == shape-outside-empty-ellipse-4.html shape-outside-empty-circle-ref.html +== shape-outside-empty-ellipse-5.html shape-outside-empty-line-ref.html +== shape-outside-empty-ellipse-6.html shape-outside-empty-line-ref.html +== shape-outside-empty-ellipse-7.html shape-outside-empty-nothing-ref.html +== shape-outside-empty-ellipse-8.html shape-outside-empty-nothing-ref.html + +== shape-outside-empty-inset-1.html shape-outside-empty-point-ref.html +== shape-outside-empty-inset-2.html shape-outside-empty-circle-ref.html +== shape-outside-empty-inset-3.html shape-outside-empty-point-ref.html +== shape-outside-empty-inset-4.html shape-outside-empty-circle-ref.html +== shape-outside-empty-inset-5.html shape-outside-empty-line-ref.html +== shape-outside-empty-inset-6.html shape-outside-empty-line-ref.html +== shape-outside-empty-inset-7.html shape-outside-empty-nothing-ref.html +== shape-outside-empty-inset-8.html shape-outside-empty-nothing-ref.html + +== shape-outside-empty-polygon-1.html shape-outside-empty-point-ref.html +# The next test needs fuzzy due to chamfer aberration +fuzzy(0-255,0-520) == shape-outside-empty-polygon-2.html shape-outside-empty-circle-ref.html +== shape-outside-empty-polygon-3.html shape-outside-empty-line-ref.html +== shape-outside-empty-polygon-4.html shape-outside-empty-line-ref.html +== shape-outside-empty-polygon-5.html shape-outside-empty-point-ref.html +== shape-outside-empty-polygon-6.html shape-outside-empty-nothing-ref.html +== shape-outside-empty-polygon-7.html shape-outside-empty-nothing-ref.html diff --git a/layout/reftests/css-shapes/shape-outside-empty-circle-1.html b/layout/reftests/css-shapes/shape-outside-empty-circle-1.html new file mode 100644 index 0000000000..51de60cbe3 --- /dev/null +++ b/layout/reftests/css-shapes/shape-outside-empty-circle-1.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<title>Shape-outside empty circle, acts like a point</title> +<style> + body { + line-height: 0; + } + .container { + width: 600px; + } + box { + display: inline-block; + background-color: blue; + width: 100px; + height: 20px; + } + .shape { + float: left; + width: 200px; + height: 180px; + shape-outside: circle(0px); + } +</style> +</head> +<body> +<div class="container"> +<div class="shape"></div> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +</div> +</body> +</html> diff --git a/layout/reftests/css-shapes/shape-outside-empty-circle-2.html b/layout/reftests/css-shapes/shape-outside-empty-circle-2.html new file mode 100644 index 0000000000..3c35b55e4a --- /dev/null +++ b/layout/reftests/css-shapes/shape-outside-empty-circle-2.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<title>Shape-outside empty circle, with shape-margin acts like a circle</title> +<style> + body { + line-height: 0; + } + .container { + width: 600px; + } + box { + display: inline-block; + background-color: blue; + width: 100px; + height: 20px; + } + .shape { + float: left; + width: 200px; + height: 180px; + shape-outside: circle(0px); + shape-margin: 90px; + } +</style> +</head> +<body> +<div class="container"> +<div class="shape"></div> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +</div> +</body> +</html> diff --git a/layout/reftests/css-shapes/shape-outside-empty-circle-3.html b/layout/reftests/css-shapes/shape-outside-empty-circle-3.html new file mode 100644 index 0000000000..e001ad0b54 --- /dev/null +++ b/layout/reftests/css-shapes/shape-outside-empty-circle-3.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<title>Shape-outside empty circle, positioned between elements, acts like nothing</title> +<style> + body { + line-height: 0; + } + .container { + width: 600px; + } + box { + display: inline-block; + background-color: blue; + width: 100px; + height: 20px; + } + .shape { + float: left; + width: 200px; + height: 180px; + shape-outside: circle(0px at 100px 20px); + } +</style> +</head> +<body> +<div class="container"> +<div class="shape"></div> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +</div> +</body> +</html> diff --git a/layout/reftests/css-shapes/shape-outside-empty-circle-ref.html b/layout/reftests/css-shapes/shape-outside-empty-circle-ref.html new file mode 100644 index 0000000000..2f28650135 --- /dev/null +++ b/layout/reftests/css-shapes/shape-outside-empty-circle-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<title>Reference: Shape-outside empty area, float elements around a circle</title> +<style> + body { + line-height: 0; + } + .container { + width: 600px; + } + box { + display: inline-block; + background-color: blue; + width: 100px; + height: 20px; + } + .shape { + float: left; + width: 200px; + height: 180px; + shape-outside: circle(90px); + } +</style> +</head> +<body> +<div class="container"> +<div class="shape"></div> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +</div> +</body> +</html> diff --git a/layout/reftests/css-shapes/shape-outside-empty-ellipse-1.html b/layout/reftests/css-shapes/shape-outside-empty-ellipse-1.html new file mode 100644 index 0000000000..f20798c41e --- /dev/null +++ b/layout/reftests/css-shapes/shape-outside-empty-ellipse-1.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<title>Shape-outside empty point ellipse, acts like a point</title> +<style> + body { + line-height: 0; + } + .container { + width: 600px; + } + box { + display: inline-block; + background-color: blue; + width: 100px; + height: 20px; + } + .shape { + float: left; + width: 200px; + height: 180px; + shape-outside: ellipse(0px 0px); + } +</style> +</head> +<body> +<div class="container"> +<div class="shape"></div> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +</div> +</body> +</html> diff --git a/layout/reftests/css-shapes/shape-outside-empty-ellipse-2.html b/layout/reftests/css-shapes/shape-outside-empty-ellipse-2.html new file mode 100644 index 0000000000..58fe473a3d --- /dev/null +++ b/layout/reftests/css-shapes/shape-outside-empty-ellipse-2.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<title>Shape-outside empty point ellipse, with shape-margin acts like a circle</title> +<style> + body { + line-height: 0; + } + .container { + width: 600px; + } + box { + display: inline-block; + background-color: blue; + width: 100px; + height: 20px; + } + .shape { + float: left; + width: 200px; + height: 180px; + shape-outside: ellipse(0px 0px); + shape-margin: 90px; + } +</style> +</head> +<body> +<div class="container"> +<div class="shape"></div> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +</div> +</body> +</html> diff --git a/layout/reftests/css-shapes/shape-outside-empty-ellipse-3.html b/layout/reftests/css-shapes/shape-outside-empty-ellipse-3.html new file mode 100644 index 0000000000..8e5d50855f --- /dev/null +++ b/layout/reftests/css-shapes/shape-outside-empty-ellipse-3.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<title>Shape-outside empty horizontal ellipse, acts like a point</title> +<style> + body { + line-height: 0; + } + .container { + width: 600px; + } + box { + display: inline-block; + background-color: blue; + width: 100px; + height: 20px; + } + .shape { + float: left; + width: 200px; + height: 180px; + shape-outside: ellipse(50px 0px at 50px 90px); + } +</style> +</head> +<body> +<div class="container"> +<div class="shape"></div> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +</div> +</body> +</html> diff --git a/layout/reftests/css-shapes/shape-outside-empty-ellipse-4.html b/layout/reftests/css-shapes/shape-outside-empty-ellipse-4.html new file mode 100644 index 0000000000..2e7b6fd51c --- /dev/null +++ b/layout/reftests/css-shapes/shape-outside-empty-ellipse-4.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<title>Shape-outside empty horizontal ellipse, with shape-margin acts like a circle (with some aberration)</title> +<style> + body { + line-height: 0; + } + .container { + width: 600px; + } + box { + display: inline-block; + background-color: blue; + width: 100px; + height: 20px; + } + .shape { + float: left; + width: 200px; + height: 180px; + shape-outside: ellipse(50px 0px at 50px 90px); + shape-margin: 90px; + } +</style> +</head> +<body> +<div class="container"> +<div class="shape"></div> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +</div> +</body> +</html> diff --git a/layout/reftests/css-shapes/shape-outside-empty-ellipse-5.html b/layout/reftests/css-shapes/shape-outside-empty-ellipse-5.html new file mode 100644 index 0000000000..2ffe426de4 --- /dev/null +++ b/layout/reftests/css-shapes/shape-outside-empty-ellipse-5.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<title>Shape-outside empty vertical ellipse, acts like a line</title> +<style> + body { + line-height: 0; + } + .container { + width: 600px; + } + box { + display: inline-block; + background-color: blue; + width: 100px; + height: 20px; + } + .shape { + float: left; + width: 200px; + height: 180px; + shape-outside: ellipse(0px 100px at 190px 100px); + } +</style> +</head> +<body> +<div class="container"> +<div class="shape"></div> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +</div> +</body> +</html> diff --git a/layout/reftests/css-shapes/shape-outside-empty-ellipse-6.html b/layout/reftests/css-shapes/shape-outside-empty-ellipse-6.html new file mode 100644 index 0000000000..395cf5d6e0 --- /dev/null +++ b/layout/reftests/css-shapes/shape-outside-empty-ellipse-6.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<title>Shape-outside empty vertical ellipse, with shape-margin acts like a capsule (with rounded endpoints at top and bottom)</title> +<style> + body { + line-height: 0; + } + .container { + width: 600px; + } + box { + display: inline-block; + background-color: blue; + width: 100px; + height: 20px; + } + .shape { + float: left; + width: 200px; + height: 180px; + shape-outside: ellipse(0px 100px at 100px 100px); + shape-margin: 90px; + } +</style> +</head> +<body> +<div class="container"> +<div class="shape"></div> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +</div> +</body> +</html> diff --git a/layout/reftests/css-shapes/shape-outside-empty-ellipse-7.html b/layout/reftests/css-shapes/shape-outside-empty-ellipse-7.html new file mode 100644 index 0000000000..61933786ef --- /dev/null +++ b/layout/reftests/css-shapes/shape-outside-empty-ellipse-7.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<title>Shape-outside empty point ellipse, positioned between elements, acts like nothing</title> +<style> + body { + line-height: 0; + } + .container { + width: 600px; + } + box { + display: inline-block; + background-color: blue; + width: 100px; + height: 20px; + } + .shape { + float: left; + width: 200px; + height: 180px; + shape-outside: ellipse(0px 0px at 100px 20px); + } +</style> +</head> +<body> +<div class="container"> +<div class="shape"></div> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +</div> +</body> +</html> diff --git a/layout/reftests/css-shapes/shape-outside-empty-ellipse-8.html b/layout/reftests/css-shapes/shape-outside-empty-ellipse-8.html new file mode 100644 index 0000000000..a6530ec812 --- /dev/null +++ b/layout/reftests/css-shapes/shape-outside-empty-ellipse-8.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<title>Shape-outside empty horizontal ellipse, positioned between elements, acts like nothing</title> +<style> + body { + line-height: 0; + } + .container { + width: 600px; + } + box { + display: inline-block; + background-color: blue; + width: 100px; + height: 20px; + } + .shape { + float: left; + width: 200px; + height: 180px; + shape-outside: ellipse(50px 0px at 50px 20px); + } +</style> +</head> +<body> +<div class="container"> +<div class="shape"></div> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +</div> +</body> +</html> diff --git a/layout/reftests/css-shapes/shape-outside-empty-inset-1.html b/layout/reftests/css-shapes/shape-outside-empty-inset-1.html new file mode 100644 index 0000000000..907975237c --- /dev/null +++ b/layout/reftests/css-shapes/shape-outside-empty-inset-1.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<title>Shape-outside empty zero-sized inset, acts like a point</title> +<style> + body { + line-height: 0; + } + .container { + width: 600px; + } + box { + display: inline-block; + background-color: blue; + width: 100px; + height: 20px; + } + .shape { + float: left; + width: 200px; + height: 180px; + shape-outside: inset(50% 50%); + } +</style> +</head> +<body> +<div class="container"> +<div class="shape"></div> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +</div> +</body> +</html> diff --git a/layout/reftests/css-shapes/shape-outside-empty-inset-2.html b/layout/reftests/css-shapes/shape-outside-empty-inset-2.html new file mode 100644 index 0000000000..c91f29e987 --- /dev/null +++ b/layout/reftests/css-shapes/shape-outside-empty-inset-2.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<title>Shape-outside empty zero-sized inset, with shape-margin acts like a circle</title> +<style> + body { + line-height: 0; + } + .container { + width: 600px; + } + box { + display: inline-block; + background-color: blue; + width: 100px; + height: 20px; + } + .shape { + float: left; + width: 200px; + height: 180px; + shape-outside: inset(50% 50%); + shape-margin: 90px; + } +</style> +</head> +<body> +<div class="container"> +<div class="shape"></div> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +</div> +</body> +</html> diff --git a/layout/reftests/css-shapes/shape-outside-empty-inset-3.html b/layout/reftests/css-shapes/shape-outside-empty-inset-3.html new file mode 100644 index 0000000000..25aa323587 --- /dev/null +++ b/layout/reftests/css-shapes/shape-outside-empty-inset-3.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<title>Shape-outside empty horizontal flat inset, acts like a point</title> +<style> + body { + line-height: 0; + } + .container { + width: 600px; + } + box { + display: inline-block; + background-color: blue; + width: 100px; + height: 20px; + } + .shape { + float: left; + width: 200px; + height: 180px; + shape-outside: inset(50% 50% 50% 0%); + } +</style> +</head> +<body> +<div class="container"> +<div class="shape"></div> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +</div> +</body> +</html> diff --git a/layout/reftests/css-shapes/shape-outside-empty-inset-4.html b/layout/reftests/css-shapes/shape-outside-empty-inset-4.html new file mode 100644 index 0000000000..11ce071c35 --- /dev/null +++ b/layout/reftests/css-shapes/shape-outside-empty-inset-4.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<title>Shape-outside empty horizontal flat inset, with shape-margin acts like a circle</title> +<style> + body { + line-height: 0; + } + .container { + width: 600px; + } + box { + display: inline-block; + background-color: blue; + width: 100px; + height: 20px; + } + .shape { + float: left; + width: 200px; + height: 180px; + shape-outside: inset(50% 50% 50% 0%); + shape-margin: 90px; + } +</style> +</head> +<body> +<div class="container"> +<div class="shape"></div> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +</div> +</body> +</html> diff --git a/layout/reftests/css-shapes/shape-outside-empty-inset-5.html b/layout/reftests/css-shapes/shape-outside-empty-inset-5.html new file mode 100644 index 0000000000..27d562e447 --- /dev/null +++ b/layout/reftests/css-shapes/shape-outside-empty-inset-5.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<title>Shape-outside empty vertical flat inset, acts like a line</title> +<style> + body { + line-height: 0; + } + .container { + width: 600px; + } + box { + display: inline-block; + background-color: blue; + width: 100px; + height: 20px; + } + .shape { + float: left; + width: 200px; + height: 180px; + shape-outside: inset(0% 5% 0% 95%); + } +</style> +</head> +<body> +<div class="container"> +<div class="shape"></div> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +</div> +</body> +</html> diff --git a/layout/reftests/css-shapes/shape-outside-empty-inset-6.html b/layout/reftests/css-shapes/shape-outside-empty-inset-6.html new file mode 100644 index 0000000000..6f408f740a --- /dev/null +++ b/layout/reftests/css-shapes/shape-outside-empty-inset-6.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<title>Shape-outside inside-out vertical flat inset, acts like a line</title> +<style> + body { + line-height: 0; + } + .container { + width: 600px; + } + box { + display: inline-block; + background-color: blue; + width: 100px; + height: 20px; + } + .shape { + float: left; + width: 200px; + height: 180px; + shape-outside: inset(0% 100% 0% 95%); + } +</style> +</head> +<body> +<div class="container"> +<div class="shape"></div> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +</div> +</body> +</html> diff --git a/layout/reftests/css-shapes/shape-outside-empty-inset-7.html b/layout/reftests/css-shapes/shape-outside-empty-inset-7.html new file mode 100644 index 0000000000..2b190b6057 --- /dev/null +++ b/layout/reftests/css-shapes/shape-outside-empty-inset-7.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<title>Shape-outside empty zero-sized inset, positioned between elements, acts like nothing</title> +<style> + body { + line-height: 0; + } + .container { + width: 600px; + } + box { + display: inline-block; + background-color: blue; + width: 100px; + height: 20px; + } + .shape { + float: left; + width: 200px; + height: 180px; + shape-outside: inset(20px 100px 160px 100px); + } +</style> +</head> +<body> +<div class="container"> +<div class="shape"></div> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +</div> +</body> +</html> diff --git a/layout/reftests/css-shapes/shape-outside-empty-inset-8.html b/layout/reftests/css-shapes/shape-outside-empty-inset-8.html new file mode 100644 index 0000000000..8e04ac0de8 --- /dev/null +++ b/layout/reftests/css-shapes/shape-outside-empty-inset-8.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<title>Shape-outside empty horizontal inset, positioned between elements, acts like nothing</title> +<style> + body { + line-height: 0; + } + .container { + width: 600px; + } + box { + display: inline-block; + background-color: blue; + width: 100px; + height: 20px; + } + .shape { + float: left; + width: 200px; + height: 180px; + shape-outside: inset(20px 0px 160px 50px); + } +</style> +</head> +<body> +<div class="container"> +<div class="shape"></div> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +</div> +</body> +</html> diff --git a/layout/reftests/css-shapes/shape-outside-empty-line-ref.html b/layout/reftests/css-shapes/shape-outside-empty-line-ref.html new file mode 100644 index 0000000000..1b7d12ade0 --- /dev/null +++ b/layout/reftests/css-shapes/shape-outside-empty-line-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<title>Reference: Shape-outside empty area, float text around a vertical line</title> +<style> + body { + line-height: 0; + } + .container { + width: 600px; + } + box { + display: inline-block; + background-color: blue; + width: 100px; + height: 20px; + margin-left: 190px; + } +</style> +</head> +<body> +<div class="container"> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +</div> +</body> +</html> diff --git a/layout/reftests/css-shapes/shape-outside-empty-nothing-ref.html b/layout/reftests/css-shapes/shape-outside-empty-nothing-ref.html new file mode 100644 index 0000000000..af98b88893 --- /dev/null +++ b/layout/reftests/css-shapes/shape-outside-empty-nothing-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<title>Reference: Shape-outside empty area, no float impact</title> +<style> + body { + line-height: 0; + } + .container { + width: 600px; + } + box { + display: inline-block; + background-color: blue; + width: 100px; + height: 20px; + } +</style> +</head> +<body> +<div class="container"> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +</div> +</body> +</html> diff --git a/layout/reftests/css-shapes/shape-outside-empty-point-ref.html b/layout/reftests/css-shapes/shape-outside-empty-point-ref.html new file mode 100644 index 0000000000..8a32a8c430 --- /dev/null +++ b/layout/reftests/css-shapes/shape-outside-empty-point-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<title>Reference: Shape-outside empty area, float text around a point</title> +<style> + body { + line-height: 0; + } + .container { + width: 600px; + } + box { + display: inline-block; + background-color: blue; + width: 100px; + height: 20px; + } +</style> +</head> +<body> +<div class="container"> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box style="margin-left: 100px"></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +</div> +</body> +</html> diff --git a/layout/reftests/css-shapes/shape-outside-empty-polygon-1.html b/layout/reftests/css-shapes/shape-outside-empty-polygon-1.html new file mode 100644 index 0000000000..5b52ba6ce7 --- /dev/null +++ b/layout/reftests/css-shapes/shape-outside-empty-polygon-1.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<title>Shape-outside polygon with 1 vertex, acts like a point</title> +<style> + body { + line-height: 0; + } + .container { + width: 600px; + } + box { + display: inline-block; + background-color: blue; + width: 100px; + height: 20px; + } + .shape { + float: left; + width: 200px; + height: 180px; + shape-outside: polygon(100px 90px); + } +</style> +</head> +<body> +<div class="container"> +<div class="shape"></div> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +</div> +</body> +</html> diff --git a/layout/reftests/css-shapes/shape-outside-empty-polygon-2.html b/layout/reftests/css-shapes/shape-outside-empty-polygon-2.html new file mode 100644 index 0000000000..7df4a77ba0 --- /dev/null +++ b/layout/reftests/css-shapes/shape-outside-empty-polygon-2.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<title>Shape-outside polygon with 1 vertex, with shape-margin acts like a circle (with some aberration)</title> +<style> + body { + line-height: 0; + } + .container { + width: 600px; + } + box { + display: inline-block; + background-color: blue; + width: 100px; + height: 20px; + } + .shape { + float: left; + width: 200px; + height: 180px; + shape-outside: polygon(100px 90px); + shape-margin: 90px; + } +</style> +</head> +<body> +<div class="container"> +<div class="shape"></div> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +</div> +</body> +</html> diff --git a/layout/reftests/css-shapes/shape-outside-empty-polygon-3.html b/layout/reftests/css-shapes/shape-outside-empty-polygon-3.html new file mode 100644 index 0000000000..c1b56c884d --- /dev/null +++ b/layout/reftests/css-shapes/shape-outside-empty-polygon-3.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<title>Shape-outside polygon with 2 vertices, acts like a line</title> +<style> + body { + line-height: 0; + } + .container { + width: 600px; + } + box { + display: inline-block; + background-color: blue; + width: 100px; + height: 20px; + } + .shape { + float: left; + width: 200px; + height: 180px; + shape-outside: polygon(190px 0px, 190px 200px); + } +</style> +</head> +<body> +<div class="container"> +<div class="shape"></div> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +</div> +</body> +</html> diff --git a/layout/reftests/css-shapes/shape-outside-empty-polygon-4.html b/layout/reftests/css-shapes/shape-outside-empty-polygon-4.html new file mode 100644 index 0000000000..6a0f6f988b --- /dev/null +++ b/layout/reftests/css-shapes/shape-outside-empty-polygon-4.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<title>Shape-outside polygon with 2 vertices, with shape-margin acts like a line with rounded endpoints</title> +<style> + body { + line-height: 0; + } + .container { + width: 600px; + } + box { + display: inline-block; + background-color: blue; + width: 100px; + height: 20px; + } + .shape { + float: left; + width: 200px; + height: 180px; + shape-outside: polygon(100px 0px, 100px 200px); + shape-margin: 90px; + } +</style> +</head> +<body> +<div class="container"> +<div class="shape"></div> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +</div> +</body> +</html> diff --git a/layout/reftests/css-shapes/shape-outside-empty-polygon-5.html b/layout/reftests/css-shapes/shape-outside-empty-polygon-5.html new file mode 100644 index 0000000000..3d3f064f9c --- /dev/null +++ b/layout/reftests/css-shapes/shape-outside-empty-polygon-5.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<title>Shape-outside polygon with 3 coincident vertices, acts like a point</title> +<style> + body { + line-height: 0; + } + .container { + width: 600px; + } + box { + display: inline-block; + background-color: blue; + width: 100px; + height: 20px; + } + .shape { + float: left; + width: 200px; + height: 180px; + shape-outside: polygon(100px 90px, 100px 90px, 100px 90px); + } +</style> +</head> +<body> +<div class="container"> +<div class="shape"></div> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +</div> +</body> +</html> diff --git a/layout/reftests/css-shapes/shape-outside-empty-polygon-6.html b/layout/reftests/css-shapes/shape-outside-empty-polygon-6.html new file mode 100644 index 0000000000..3239f72ddb --- /dev/null +++ b/layout/reftests/css-shapes/shape-outside-empty-polygon-6.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<title>Shape-outside polygon with 1 vertex, positioned between elements, acts like nothing</title> +<style> + body { + line-height: 0; + } + .container { + width: 600px; + } + box { + display: inline-block; + background-color: blue; + width: 100px; + height: 20px; + } + .shape { + float: left; + width: 200px; + height: 180px; + shape-outside: polygon(100px 20px); + } +</style> +</head> +<body> +<div class="container"> +<div class="shape"></div> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +</div> +</body> +</html> diff --git a/layout/reftests/css-shapes/shape-outside-empty-polygon-7.html b/layout/reftests/css-shapes/shape-outside-empty-polygon-7.html new file mode 100644 index 0000000000..59cb4a97b3 --- /dev/null +++ b/layout/reftests/css-shapes/shape-outside-empty-polygon-7.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<title>Shape-outside polygon with 2 vertices, positioned between elements, acts like nothing</title> +<style> + body { + line-height: 0; + } + .container { + width: 600px; + } + box { + display: inline-block; + background-color: blue; + width: 100px; + height: 20px; + } + .shape { + float: left; + width: 200px; + height: 180px; + shape-outside: polygon(0px 20px, 100px 20px); + } +</style> +</head> +<body> +<div class="container"> +<div class="shape"></div> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +<box></box><br> +</div> +</body> +</html> |