diff options
Diffstat (limited to 'layout/reftests/outline')
21 files changed, 404 insertions, 0 deletions
diff --git a/layout/reftests/outline/outline-and-3d-transform-1-ref.html b/layout/reftests/outline/outline-and-3d-transform-1-ref.html new file mode 100644 index 000000000..30fa7eabe --- /dev/null +++ b/layout/reftests/outline/outline-and-3d-transform-1-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE HTML> +<title>Testcase for outline around 3-D transform</title> +<style> + +html, body { margin: 0; padding: 0; border: none } + +div { + width: 100px; + height: 100px; +} + +body > div { + margin-top: 200px; + margin-left: 200px; + transform-style: flat; + position: relative; +} + +body > div > div { + position: absolute; top: 0; left: 0; + height: 150px; width: 150px; top: -25px; left: -25px; + background: rgba(255, 255, 0, 0.4); + outline: 2px dashed blue; +} + +</style> + +<div><div></div></div> diff --git a/layout/reftests/outline/outline-and-3d-transform-1a.html b/layout/reftests/outline/outline-and-3d-transform-1a.html new file mode 100644 index 000000000..6b7926c2d --- /dev/null +++ b/layout/reftests/outline/outline-and-3d-transform-1a.html @@ -0,0 +1,40 @@ +<!DOCTYPE HTML> +<title>Testcase for outline around 3-D transform</title> +<style> + +html, body { margin: 0; padding: 0; border: none } + +div { + width: 100px; + height: 100px; +} + +body > div { + margin-top: 200px; + margin-left: 200px; + transform-style: flat; + outline: 2px dashed blue; +} + +body > div > div { + transform: rotateX(30deg); + transform-origin: 50% 50%; + transform-style: preserve-3d; +} + +body > div > div > div { + transform: rotateX(30deg); + transform-origin: 50% 50%; + transform-style: preserve-3d; +} + +body > div > div > div > div { + transform: scale(1.5, 3); + transform-origin: 50% 50%; + background: rgba(255, 255, 0, 0.4); +} + + +</style> + +<div><div><div><div></div></div></div></div> diff --git a/layout/reftests/outline/outline-and-3d-transform-1b.html b/layout/reftests/outline/outline-and-3d-transform-1b.html new file mode 100644 index 000000000..d2e2316de --- /dev/null +++ b/layout/reftests/outline/outline-and-3d-transform-1b.html @@ -0,0 +1,40 @@ +<!DOCTYPE HTML> +<title>Testcase for outline around 3-D transform</title> +<style> + +html, body { margin: 0; padding: 0; border: none } + +div { + width: 100px; + height: 100px; +} + +body > div { + margin-top: 200px; + margin-left: 200px; + transform-style: flat; + outline: 2px dashed blue; +} + +body > div > div { + transform: rotateX(90deg); + transform-origin: 50% 50%; + transform-style: preserve-3d; +} + +body > div > div > div { + transform: rotateX(-30deg); + transform-origin: 50% 50%; + transform-style: preserve-3d; +} + +body > div > div > div > div { + transform: scale(1.5, 3); + transform-origin: 50% 50%; + background: rgba(255, 255, 0, 0.4); +} + + +</style> + +<div><div><div><div></div></div></div></div> diff --git a/layout/reftests/outline/outline-and-3d-transform-2-ref.html b/layout/reftests/outline/outline-and-3d-transform-2-ref.html new file mode 100644 index 000000000..93a45d8f8 --- /dev/null +++ b/layout/reftests/outline/outline-and-3d-transform-2-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE HTML> +<title>Testcase for outline around 3-D transform</title> +<style> + +html, body { margin: 0; padding: 0; border: none } + +div { + width: 100px; + height: 100px; +} + +body > div { + margin-top: 200px; + margin-left: 200px; + transform-style: flat; +} + +body > div > div { + transform: rotateX(30deg); + transform-origin: 50% 50%; + transform-style: preserve-3d; + border: 5px solid green; + margin: -5px; +} + +body > div > div > div { + transform: rotateX(30deg); + width: 50px; margin-left: 20px; margin-top: -5px; + transform-origin: 50% 50%; + transform-style: preserve-3d; + border: 5px solid blue; +} + +</style> + +<div><div><div></div></div></div> diff --git a/layout/reftests/outline/outline-and-3d-transform-2.html b/layout/reftests/outline/outline-and-3d-transform-2.html new file mode 100644 index 000000000..724366971 --- /dev/null +++ b/layout/reftests/outline/outline-and-3d-transform-2.html @@ -0,0 +1,35 @@ +<!DOCTYPE HTML> +<title>Testcase for outline around 3-D transform</title> +<style> + +html, body { margin: 0; padding: 0; border: none } + +div { + width: 100px; + height: 100px; +} + +body > div { + margin-top: 200px; + margin-left: 200px; + transform-style: flat; +} + +body > div > div { + transform: rotateX(30deg); + transform-origin: 50% 50%; + transform-style: preserve-3d; + outline: 5px solid green; +} + +body > div > div > div { + transform: rotateX(30deg); + width: 50px; margin-left: 25px; + transform-origin: 50% 50%; + transform-style: preserve-3d; + outline: 5px solid blue; +} + +</style> + +<div><div><div></div></div></div> diff --git a/layout/reftests/outline/outline-and-box-shadow-ref.html b/layout/reftests/outline/outline-and-box-shadow-ref.html new file mode 100644 index 000000000..0d4a9ffcf --- /dev/null +++ b/layout/reftests/outline/outline-and-box-shadow-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE HTML> +<title>outline and box-shadow</title> +<style> +html, body { margin: 0; padding: 0 } +p { + margin: 48px; + border: 2px solid blue; + padding: 5px; /* ensure no font overhang */ + background: yellow; color: black; + box-shadow: 10px 10px 10px 0px black; +} +</style> +<p>The outline should be adjacent to the background.</p> diff --git a/layout/reftests/outline/outline-and-box-shadow.html b/layout/reftests/outline/outline-and-box-shadow.html new file mode 100644 index 000000000..3bb717200 --- /dev/null +++ b/layout/reftests/outline/outline-and-box-shadow.html @@ -0,0 +1,13 @@ +<!DOCTYPE HTML> +<title>outline and box-shadow</title> +<style> +html, body { margin: 0; padding: 0 } +p { + margin: 50px; + outline: 2px solid blue; + padding: 5px; /* ensure no font overhang */ + background: yellow; color: black; + box-shadow: 10px 10px 10px 2px black; +} +</style> +<p>The outline should be adjacent to the background.</p> diff --git a/layout/reftests/outline/outline-auto-001-ref.html b/layout/reftests/outline/outline-auto-001-ref.html new file mode 100644 index 000000000..2055880eb --- /dev/null +++ b/layout/reftests/outline/outline-auto-001-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE HTML> +<html><head> + <title>Testcase for outline:auto</title> + <style type="text/css"> + + html,body { + color:black; background-color:white; padding:10px; margin:0; + } + + .a { outline:auto; width:190px; height:10px; background:black; } + .w { border:solid black; border-width:5px; margin:20px; width:190px; } + </style> +</head> +<body> + +<div class="w"><div class="a" style="outline-width:10px; outline-offset:5px;"></div></div> +<div class="w"><div class="a" style="outline-width:10px; outline-offset:10px;"></div></div> +<div class="w"><div class="a" style="outline-width:10px; outline-offset:0px;"></div></div> +<div class="w"><div class="a" style="outline-width:15px; outline-offset:6px;"></div></div> +<div class="w"><div class="a" style="outline-width:15px; outline-offset:4px;"></div></div> +<div class="w"><div class="a" style="outline-width:11px; outline-offset:5px;"></div></div> +<div class="w"><div class="a" style="outline-width:11px; outline-offset:10px;"></div></div> +<div class="w"><div class="a" style="outline-width:11px; outline-offset:0px;"></div></div> + +</body> +</html> diff --git a/layout/reftests/outline/outline-auto-001-solid-ref.html b/layout/reftests/outline/outline-auto-001-solid-ref.html new file mode 100644 index 000000000..d9a0b851c --- /dev/null +++ b/layout/reftests/outline/outline-auto-001-solid-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE HTML> +<html><head> + <title>Testcase for outline:auto</title> + <style type="text/css"> + + html,body { + color:black; background-color:white; padding:10px; margin:0; + } + + div { outline:solid; width:200px; margin:20px; height:20px; background:black; } + .b div { border:solid blue; border-width: 1px 3px 5px 7px; } + </style> +</head> +<body> + +<div style="outline-width:0; outline-offset:0;"></div> +<div style="outline-width:0; outline-offset:5px;"></div> +<div style="outline-width:0; outline-offset:-5px;"></div> +<div style="outline-width:5px; outline-offset:1px;"></div> +<div style="outline-width:5px; outline-offset:-1px;"></div> +<div style="outline-width:1px; outline-offset:0;"></div> +<div style="outline-width:1px; outline-offset:5px;"></div> +<div style="outline-width:1px; outline-offset:-5px;"></div> + +</body> +</html> diff --git a/layout/reftests/outline/outline-auto-001.html b/layout/reftests/outline/outline-auto-001.html new file mode 100644 index 000000000..2f15008c0 --- /dev/null +++ b/layout/reftests/outline/outline-auto-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE HTML> +<html><head> + <title>Testcase for outline:auto</title> + <style type="text/css"> + + html,body { + color:black; background-color:white; padding:10px; margin:0; + } + + div { outline:auto; width:200px; margin:20px; height:20px; background:black; } + .b div { border:solid blue; border-width: 1px 3px 5px 7px; } + </style> +</head> +<body> + +<div style="outline-width:0; outline-offset:0;"></div> +<div style="outline-width:0; outline-offset:5px;"></div> +<div style="outline-width:0; outline-offset:-5px;"></div> +<div style="outline-width:5px; outline-offset:1px;"></div> +<div style="outline-width:5px; outline-offset:-1px;"></div> +<div style="outline-width:1px; outline-offset:0;"></div> +<div style="outline-width:1px; outline-offset:5px;"></div> +<div style="outline-width:1px; outline-offset:-5px;"></div> + +</body> +</html> diff --git a/layout/reftests/outline/outline-initial-1-ref.html b/layout/reftests/outline/outline-initial-1-ref.html new file mode 100644 index 000000000..53bcb0c4a --- /dev/null +++ b/layout/reftests/outline/outline-initial-1-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<span style="outline-width: 2px; outline-style: solid; color: green; + outline-color: green"> + This should have a green outline. +</span> diff --git a/layout/reftests/outline/outline-initial-1a.html b/layout/reftests/outline/outline-initial-1a.html new file mode 100644 index 000000000..461a8104e --- /dev/null +++ b/layout/reftests/outline/outline-initial-1a.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<span style="outline-width: 2px; outline-style: solid; color: green"> + This should have a green outline. +</span> diff --git a/layout/reftests/outline/outline-initial-1b.html b/layout/reftests/outline/outline-initial-1b.html new file mode 100644 index 000000000..a01459af1 --- /dev/null +++ b/layout/reftests/outline/outline-initial-1b.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<span style="outline-width: 2px; outline-style: solid; color: green; + outline-color: initial"> + This should have a green outline. +</span> diff --git a/layout/reftests/outline/outline-overflow-block-abspos.html b/layout/reftests/outline/outline-overflow-block-abspos.html new file mode 100644 index 000000000..ed6af8cac --- /dev/null +++ b/layout/reftests/outline/outline-overflow-block-abspos.html @@ -0,0 +1,14 @@ +<!DOCTYPE HTML> +<title>outline goes around overflow, floats</title> +<style> + +html, body { margin: 0; padding: 0; border: none } +html { overflow:hidden /* avoid second reflow for scrollbars */ } + +body > div { margin: 100px; outline: 2px solid blue; position: relative } + +body > div > div { position: absolute; top: 0; left: 0; width: 100px; height: 100px } + +</style> +<body> +<div><div></div></div> diff --git a/layout/reftests/outline/outline-overflow-block-float.html b/layout/reftests/outline/outline-overflow-block-float.html new file mode 100644 index 000000000..19c61a287 --- /dev/null +++ b/layout/reftests/outline/outline-overflow-block-float.html @@ -0,0 +1,14 @@ +<!DOCTYPE HTML> +<title>outline goes around overflow, floats</title> +<style> + +html, body { margin: 0; padding: 0; border: none } +html { overflow:hidden /* avoid second reflow for scrollbars */ } + +body > div { margin: 100px; outline: 2px solid blue } + +body > div > div { float: left; width: 100px; height: 100px } + +</style> +<body> +<div><div></div></div> diff --git a/layout/reftests/outline/outline-overflow-block-ref.html b/layout/reftests/outline/outline-overflow-block-ref.html new file mode 100644 index 000000000..9259a5da1 --- /dev/null +++ b/layout/reftests/outline/outline-overflow-block-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML> +<title>outline goes around overflow, floats</title> +<style> + +html, body { margin: 0; padding: 0; border: none } +html { overflow:hidden /* avoid second reflow for scrollbars */ } + +body > div { margin: 98px; border: 2px solid blue; height: 100px } + +</style> +<body> +<div></div> diff --git a/layout/reftests/outline/outline-overflow-inlineblock-abspos.html b/layout/reftests/outline/outline-overflow-inlineblock-abspos.html new file mode 100644 index 000000000..5d3eb67eb --- /dev/null +++ b/layout/reftests/outline/outline-overflow-inlineblock-abspos.html @@ -0,0 +1,14 @@ +<!DOCTYPE HTML> +<title>outline goes around overflow, floats</title> +<style> + +html, body { margin: 0; padding: 0; border: none } +html { overflow:hidden /* avoid second reflow for scrollbars */ } + +body > div { margin: 100px; outline: 2px solid blue; display: inline-block; height: 0; width: 0; position: relative } + +body > div > div { position: absolute; top: 0; left: 0; width: 100px; height: 100px } + +</style> +<body> +<div><div></div></div> diff --git a/layout/reftests/outline/outline-overflow-inlineblock-float.html b/layout/reftests/outline/outline-overflow-inlineblock-float.html new file mode 100644 index 000000000..c20a63e67 --- /dev/null +++ b/layout/reftests/outline/outline-overflow-inlineblock-float.html @@ -0,0 +1,14 @@ +<!DOCTYPE HTML> +<title>outline goes around overflow, floats</title> +<style> + +html, body { margin: 0; padding: 0; border: none } +html { overflow:hidden /* avoid second reflow for scrollbars */ } + +body > div { margin: 100px; outline: 2px solid blue; display: inline-block; height: 0; width: 0 } + +body > div > div { float: left; width: 100px; height: 100px } + +</style> +<body> +<div><div></div></div> diff --git a/layout/reftests/outline/outline-overflow-inlineblock-ref.html b/layout/reftests/outline/outline-overflow-inlineblock-ref.html new file mode 100644 index 000000000..c7ad3174d --- /dev/null +++ b/layout/reftests/outline/outline-overflow-inlineblock-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML> +<title>outline goes around overflow, floats</title> +<style> + +html, body { margin: 0; padding: 0; border: none } +html { overflow:hidden /* avoid second reflow for scrollbars */ } + +body > div { margin: 98px; border: 2px solid blue; height: 100px; width: 100px } + +</style> +<body> +<div></div> diff --git a/layout/reftests/outline/reftest-stylo.list b/layout/reftests/outline/reftest-stylo.list new file mode 100644 index 000000000..0cc5c462e --- /dev/null +++ b/layout/reftests/outline/reftest-stylo.list @@ -0,0 +1,15 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +== outline-and-box-shadow.html outline-and-box-shadow.html +== outline-and-3d-transform-1a.html outline-and-3d-transform-1a.html +== outline-and-3d-transform-1b.html outline-and-3d-transform-1b.html +fuzzy-if(Mulet||gtkWidget,136,120) fuzzy-if(Android,255,356) fuzzy-if(d2d,16,96) fuzzy-if(cocoaWidget,255,120) fuzzy-if(B2G,128,60) fuzzy-if(winWidget,255,216) == outline-and-3d-transform-2.html outline-and-3d-transform-2.html +== outline-overflow-block-abspos.html outline-overflow-block-abspos.html +== outline-overflow-block-float.html outline-overflow-block-float.html +== outline-overflow-inlineblock-abspos.html outline-overflow-inlineblock-abspos.html +== outline-overflow-inlineblock-float.html outline-overflow-inlineblock-float.html +pref(layout.css.outline-style-auto.enabled,true) skip-if((!gtkWidget&&!winWidget&&!cocoaWidget)||Mulet) == outline-auto-001.html outline-auto-001.html +# only works on platforms that supports NS_THEME_FOCUS_OUTLINE +# bug 1141511: Disable some gtkWidget-dependant reftests on Mulet +pref(layout.css.outline-style-auto.enabled,false) == outline-auto-001.html outline-auto-001.html +== outline-initial-1a.html outline-initial-1a.html +== outline-initial-1b.html outline-initial-1b.html diff --git a/layout/reftests/outline/reftest.list b/layout/reftests/outline/reftest.list new file mode 100644 index 000000000..b3fd2634f --- /dev/null +++ b/layout/reftests/outline/reftest.list @@ -0,0 +1,12 @@ +== outline-and-box-shadow.html outline-and-box-shadow-ref.html +== outline-and-3d-transform-1a.html outline-and-3d-transform-1-ref.html +== outline-and-3d-transform-1b.html outline-and-3d-transform-1-ref.html +fuzzy-if(gtkWidget,136,120) fuzzy-if(Android,255,356) fuzzy-if(d2d,16,96) fuzzy-if(cocoaWidget,255,120) fuzzy-if(winWidget,255,216) == outline-and-3d-transform-2.html outline-and-3d-transform-2-ref.html +== outline-overflow-block-abspos.html outline-overflow-block-ref.html +== outline-overflow-block-float.html outline-overflow-block-ref.html +== outline-overflow-inlineblock-abspos.html outline-overflow-inlineblock-ref.html +== outline-overflow-inlineblock-float.html outline-overflow-inlineblock-ref.html +pref(layout.css.outline-style-auto.enabled,true) skip-if(!gtkWidget&&!winWidget&&!cocoaWidget) == outline-auto-001.html outline-auto-001-ref.html # only works on platforms that supports NS_THEME_FOCUS_OUTLINE +pref(layout.css.outline-style-auto.enabled,false) == outline-auto-001.html outline-auto-001-solid-ref.html +== outline-initial-1a.html outline-initial-1-ref.html +== outline-initial-1b.html outline-initial-1-ref.html |