diff options
Diffstat (limited to 'layout/reftests/high-contrast')
59 files changed, 1222 insertions, 0 deletions
diff --git a/layout/reftests/high-contrast/ahem.css b/layout/reftests/high-contrast/ahem.css new file mode 100644 index 0000000000..884a41198b --- /dev/null +++ b/layout/reftests/high-contrast/ahem.css @@ -0,0 +1,4 @@ +@font-face { + font-family: "Ahem"; + src: url(../fonts/Ahem.ttf); +} diff --git a/layout/reftests/high-contrast/background-transparent-form-control-ref.html b/layout/reftests/high-contrast/background-transparent-form-control-ref.html new file mode 100644 index 0000000000..32d5f29c48 --- /dev/null +++ b/layout/reftests/high-contrast/background-transparent-form-control-ref.html @@ -0,0 +1,2 @@ +<!doctype html> +<button>ABC</button> diff --git a/layout/reftests/high-contrast/background-transparent-form-control.html b/layout/reftests/high-contrast/background-transparent-form-control.html new file mode 100644 index 0000000000..e42b423b97 --- /dev/null +++ b/layout/reftests/high-contrast/background-transparent-form-control.html @@ -0,0 +1,7 @@ +<!doctype html> +<style> + button { + background-color: transparent; + } +</style> +<button>ABC</button> diff --git a/layout/reftests/high-contrast/backplate-bg-image-001-ref.html b/layout/reftests/high-contrast/backplate-bg-image-001-ref.html new file mode 100644 index 0000000000..32d745fc98 --- /dev/null +++ b/layout/reftests/high-contrast/backplate-bg-image-001-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <link rel="stylesheet" type="text/css" href="ahem.css" /> + <title>Reference: Text that overlaps a background image should be backplated.</title> + <style> + div { + font: 20px Ahem; + background-image: url("blue.png"); + } + .fake-backplate { + background-color: white; + width: max-content; + white-space: pre; + } + /* We need to include the trailing space as part of the backgrounded + * area here to properly make a mockup for the testcase's expected + * rendering, so we use 'white-space: pre'. The testcase pulls its file's + * trailing newline into the body, treats it as a final space character, + * and draws a backplate behind it. (This is probably correct? see + * discussion on bug 1577028.) */ + </style> +</head> +<div><span class="fake-backplate">ppppp ppppp </span></div> +</html> diff --git a/layout/reftests/high-contrast/backplate-bg-image-001.html b/layout/reftests/high-contrast/backplate-bg-image-001.html new file mode 100644 index 0000000000..252c28ade2 --- /dev/null +++ b/layout/reftests/high-contrast/backplate-bg-image-001.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<head> + <link rel="stylesheet" type="text/css" href="ahem.css" /> + <title>Text that overlaps a background image should be backplated.</title> + <style> + div { + font: 20px Ahem; + background-image: url("blue.png"); + } + </style> +</head> +<div> + ppppp ppppp +</div> +</html> diff --git a/layout/reftests/high-contrast/backplate-bg-image-002-ref.html b/layout/reftests/high-contrast/backplate-bg-image-002-ref.html new file mode 100644 index 0000000000..1ffc4542e7 --- /dev/null +++ b/layout/reftests/high-contrast/backplate-bg-image-002-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> + <link rel="stylesheet" type="text/css" href="ahem.css" /> + <title>Reference: Text runs that are separated by a block-level line will get separate backplates.</title> + <style> + body { + font: 20px Ahem; + } + .fake-backplate { + background-color: white; + width: max-content; + } + .sample { + background-image: url("blue.png"); + height: 500px; + } + </style> +</head> +<body> +<span class="fake-backplate">ppppp ppppp</span><div class="sample"><span class="fake-backplate">ppppp ppppp</span></div><span class="fake-backplate">ppppp ppppp</span> +</body> +</html> diff --git a/layout/reftests/high-contrast/backplate-bg-image-002.html b/layout/reftests/high-contrast/backplate-bg-image-002.html new file mode 100644 index 0000000000..2d1f79eaa8 --- /dev/null +++ b/layout/reftests/high-contrast/backplate-bg-image-002.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <link rel="stylesheet" type="text/css" href="ahem.css" /> + <title>Text runs that are separated by a block-level line will get separate backplates.</title> + <style> + body { + font: 20px Ahem; + } + .sample { + background-image: url("blue.png"); + height: 500px; + } + </style> +</head> +<body> +ppppp ppppp<div class="sample">ppppp ppppp</div>ppppp ppppp +</body> +</html> diff --git a/layout/reftests/high-contrast/backplate-bg-image-003-ref.html b/layout/reftests/high-contrast/backplate-bg-image-003-ref.html new file mode 100644 index 0000000000..a4260fd394 --- /dev/null +++ b/layout/reftests/high-contrast/backplate-bg-image-003-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<head> + <link rel="stylesheet" type="text/css" href="ahem.css" /> + <title>Reference: Inline, relatively positioned backplate items should be drawn cooperatively with other backplates on the same line. Inline-block, relatively positioned backplate items should be drawn over other backplates on the same line. Absolutely positioned backplate items should be drawn over other page content.</title> + <style> + body { + font: 20px Ahem; + } + .fake-backplate { + background-color: white; + width: max-content; + } + .std { + border: 1px solid black; + padding: 15px; + } + .relpos { + position: relative; + left: 40px; + } + .i { + display: inline; + } + .ib { + display: inline-block; + } + .abspos { + position: absolute; + top: 0; + left: 0; + z-index: 999; + } + </style> +</head> +<body> +<div><span class="std relpos i">ppppp ppppp</span>ppppp ppppp</div> +<div><br><br><span class="std relpos ib fake"><span class="fake-backplate">ppppp ppppp</span></span> +<span>ppppp ppppp</span></div> +<div class="abspos"><span class="fake-backplate">ppppp ppppp</span></div> +</body> diff --git a/layout/reftests/high-contrast/backplate-bg-image-003.html b/layout/reftests/high-contrast/backplate-bg-image-003.html new file mode 100644 index 0000000000..6b3758ac55 --- /dev/null +++ b/layout/reftests/high-contrast/backplate-bg-image-003.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<head> + <link rel="stylesheet" type="text/css" href="ahem.css" /> + <title>Inline, relatively positioned backplate items should be drawn cooperatively with other backplates on the same line. Inline-block, relatively positioned backplate items should be drawn over other backplates on the same line. Absolutely positioned backplate items should be drawn over other page content.</title> + <style> + body { + font: 20px Ahem; + } + .std { + border: 1px solid black; + padding: 15px; + } + .relpos { + position: relative; + left: 40px; + } + .i { + display: inline; + } + .ib { + display: inline-block; + } + .abspos { + position: absolute; + top: 0; + left: 0; + z-index: 999; + } + </style> +</head> +<body> +<div><span class="std relpos i">ppppp ppppp</span>ppppp ppppp</div> +<div><br><br><span class="std relpos ib">ppppp ppppp</span> +<span>ppppp ppppp</span></div> +<div class="abspos">ppppp ppppp</div> +</body> diff --git a/layout/reftests/high-contrast/backplate-bg-image-004-ref.html b/layout/reftests/high-contrast/backplate-bg-image-004-ref.html new file mode 100644 index 0000000000..dab921d72b --- /dev/null +++ b/layout/reftests/high-contrast/backplate-bg-image-004-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<head> + <link rel="stylesheet" type="text/css" href="ahem.css" /> + <title>Reference: Assigning a negative z-index to text which is backplated should change the z-index of the text only; the backplate should not be affected.</title> + <style> + body { + font: 20px Ahem; + } + .fake-backplate { + background-color: white; + width: max-content; + } + .std { + background-image: url("blue.png"); + padding: 15px; + } + .relpos { + position: relative; + left: 20px; + } + .ib { + display: inline-block; + } + </style> +</head> +<body> + <span class="std ib"> + <span class="relpos"> + <span class="fake-backplate" style="color:transparent;">ppppp ppppp</span> + </span> + </span> + <span>ppppp ppppp</span> +</body> diff --git a/layout/reftests/high-contrast/backplate-bg-image-004.html b/layout/reftests/high-contrast/backplate-bg-image-004.html new file mode 100644 index 0000000000..7b0db471af --- /dev/null +++ b/layout/reftests/high-contrast/backplate-bg-image-004.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<head> + <link rel="stylesheet" type="text/css" href="ahem.css" /> + <title>Assigning a negative z-index to text which is backplated should change the z-index of the text only; the backplate should not be affected.</title> + <style> + body { + font: 20px Ahem; + } + .std { + background-image: url("blue.png"); + padding: 15px; + } + .relpos { + position: relative; + left: 20px; + } + .negZ { + z-index: -1; + } + .ib { + display: inline-block; + } + </style> +</head> +<body> + <span class="std ib"> + <span class="relpos negZ">ppppp ppppp</span> + </span> + <span>ppppp ppppp</span> +</body> diff --git a/layout/reftests/high-contrast/backplate-bg-image-005-ref.html b/layout/reftests/high-contrast/backplate-bg-image-005-ref.html new file mode 100644 index 0000000000..98873130b9 --- /dev/null +++ b/layout/reftests/high-contrast/backplate-bg-image-005-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <link rel="stylesheet" type="text/css" href="ahem.css" /> + <title>Reference: Preserved whitespace should contribute to overall backplate sizing.</title> + <style> + body { + font: 20px Ahem; + } + .sample { + background-image: url("blue.png"); + white-space: pre; + padding: 10px; + } + .fake-backplate { + background-color: white; + width: max-content; + } + </style> +</head> +<body> +ppppp ppppp<div class="sample"><span class="fake-backplate"> ppppp ppppp</span></div>ppppp ppppp +<div class="sample"><span class="fake-backplate">ppppp ppppp </span></div> +<div class="sample"><span class="fake-backplate"> </span></div> +</body> +</html> diff --git a/layout/reftests/high-contrast/backplate-bg-image-005.html b/layout/reftests/high-contrast/backplate-bg-image-005.html new file mode 100644 index 0000000000..1abb7ddebd --- /dev/null +++ b/layout/reftests/high-contrast/backplate-bg-image-005.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> + <link rel="stylesheet" type="text/css" href="ahem.css" /> + <title>Preserved whitespace should contribute to overall backplate sizing.</title> + <style> + body { + font: 20px Ahem; + } + .sample { + background-image: url("blue.png"); + white-space: pre; + padding: 10px; + } + </style> +</head> +<body> +ppppp ppppp<div class="sample"> ppppp ppppp</div>ppppp ppppp +<div class="sample">ppppp ppppp </div> +<div class="sample"> </div> +</body> +</html> diff --git a/layout/reftests/high-contrast/backplate-bg-image-006-ref.html b/layout/reftests/high-contrast/backplate-bg-image-006-ref.html new file mode 100644 index 0000000000..5d047ce3c9 --- /dev/null +++ b/layout/reftests/high-contrast/backplate-bg-image-006-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> + <link rel="stylesheet" type="text/css" href="ahem.css" /> + <title>Reference: Text in a native button or input object that overlaps a background image should be backplated.</title> + <style> + body { + font: 20px Ahem; + } + .std { + background-image: url("blue.png"); + height: 500px; + } + .fake-backplate { + background-color: white; + width: max-content; + } + button { + font: 20px Ahem; + } + </style> +</head> +<body> + <div class="std"> + <button>ppppp</button><span class="fake-backplate">ppppp</span><br> + <form> + <input> + </form> + <br> + <span class="fake-backplate">ppppp<!-- no whitespace + --><button>ppppp</button><!-- no whitespace + -->ppppp</span> + </div> +</body> +</html> diff --git a/layout/reftests/high-contrast/backplate-bg-image-006.html b/layout/reftests/high-contrast/backplate-bg-image-006.html new file mode 100644 index 0000000000..800f5d4ca0 --- /dev/null +++ b/layout/reftests/high-contrast/backplate-bg-image-006.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> + <link rel="stylesheet" type="text/css" href="ahem.css" /> + <title>Text in a native button or input object that overlaps a background image should be backplated.</title> + <style> + body { + font: 20px Ahem; + } + .std { + background-image: url("blue.png"); + height: 500px; + } + button { + font: 20px Ahem; + } + </style> +</head> +<body> + <div class="std"> + <button>ppppp</button>ppppp<br> + <form> + <input> + </form><br><!-- no whitespace + -->ppppp<!-- no whitespace + --><button>ppppp</button><!-- no whitespace + -->ppppp<!-- no whitespace + --></div> +</body> +</html> diff --git a/layout/reftests/high-contrast/backplate-bg-image-007-ref.html b/layout/reftests/high-contrast/backplate-bg-image-007-ref.html new file mode 100644 index 0000000000..eb03924ba6 --- /dev/null +++ b/layout/reftests/high-contrast/backplate-bg-image-007-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> + <link rel="stylesheet" type="text/css" href="ahem.css" /> + <title>Reference: Text in a non-native button or input that overlaps a background image should be backplated.</title> + <style> + body { + font: 20px Ahem; + } + button, input { + font: 20px Ahem; + border: 0px; + /* This forces non-native styling */ + } + .std { + background-image: url("blue.png"); + height: 500px; + } + .fake-backplate { + background-color: white; + width: max-content; + } + </style> +</head> +<body> + <div class="std"> + <button>ppppp</button><span class="fake-backplate">ppppp</span><br> + <form> + <input> + </form> + <br> + <span class="fake-backplate">ppppp<!-- no whitespace + --><button>ppppp</button><!-- no whitespace + -->ppppp</span> + </div> +</body> +</html> diff --git a/layout/reftests/high-contrast/backplate-bg-image-007.html b/layout/reftests/high-contrast/backplate-bg-image-007.html new file mode 100644 index 0000000000..558884f9fb --- /dev/null +++ b/layout/reftests/high-contrast/backplate-bg-image-007.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> + <link rel="stylesheet" type="text/css" href="ahem.css" /> + <title>Text in a non-native button or input object that overlaps a background image should be backplated.</title> + <style> + body { + font: 20px Ahem; + } + button, input { + font: 20px Ahem; + border: 0px; + /* This forces non-native styling */ + } + .std { + background-image: url("blue.png"); + height: 500px; + } + </style> +</head> +<body> + <div class="std"> + <button>ppppp</button>ppppp<br> + <form> + <input> + </form><br> + <span>ppppp<!-- no whitespace + --><button>ppppp</button><!-- no whitespace + -->ppppp</span> + </div> +</body> +</html> diff --git a/layout/reftests/high-contrast/backplate-bg-image-008-ref.html b/layout/reftests/high-contrast/backplate-bg-image-008-ref.html new file mode 100644 index 0000000000..6cc7e5e082 --- /dev/null +++ b/layout/reftests/high-contrast/backplate-bg-image-008-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> + <link rel="stylesheet" type="text/css" href="ahem.css" /> + <title>Reference: Text in a native select object that overlaps a background image should be backplated.</title> + <style> + body, select { + font: 20px Ahem; + } + .std { + background-image: url("blue.png"); + height: 500px; + } + .fake-backplate { + background-color: white; + width: max-content; + } + </style> +</head> +<body> + <div class="std"> + <span class="fake-backplate"><!-- no whitespace + -->ppppp<!-- no whitespace + --><span class="fake-backplate"><!-- no whitespace + --><select> + <option>ppppp</option> + </select><!-- no whitespace + --></span><!-- no whitespace + -->ppppp<!-- no whitespace + --></span> + </div> +</body> +</html> diff --git a/layout/reftests/high-contrast/backplate-bg-image-008.html b/layout/reftests/high-contrast/backplate-bg-image-008.html new file mode 100644 index 0000000000..227f85fc64 --- /dev/null +++ b/layout/reftests/high-contrast/backplate-bg-image-008.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <link rel="stylesheet" type="text/css" href="ahem.css" /> + <title>Text in a native select object that overlaps a background image should be backplated.</title> + <style> + body, select { + font: 20px Ahem; + } + .std { + background-image: url("blue.png"); + height: 500px; + } + </style> +</head> +<body> + <div class="std"><!-- no whitespace + -->ppppp<!-- no whitespace + --><select> + <option>ppppp</option> + </select><!-- no whitespace + -->ppppp<!-- no whitespace + --></div> +</body> +</html> diff --git a/layout/reftests/high-contrast/backplate-bg-image-009-ref.html b/layout/reftests/high-contrast/backplate-bg-image-009-ref.html new file mode 100644 index 0000000000..c674f9948c --- /dev/null +++ b/layout/reftests/high-contrast/backplate-bg-image-009-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> + <link rel="stylesheet" type="text/css" href="ahem.css" /> + <title>Reference: Text in a non-native select object that overlaps a background image should be backplated.</title> + <style> + body { + font: 20px Ahem; + } + select { + font: 20px Ahem; + border: 0px; + /* This forces non-native styling */ + } + .std { + background-image: url("blue.png"); + height: 500px; + } + .fake-backplate { + background-color: white; + width: max-content; + } + </style> +</head> +<body> + <div class="std"> + <span class="fake-backplate"><!-- no whitespace + -->ppppp<!-- no whitespace + --><span class="fake-backplate"><!-- no whitespace + --><select> + <option>ppppp</option> + </select><!-- no whitespace + --></span><!-- no whitespace + -->ppppp<!-- no whitespace + --></span> + </div> +</body> +</html> diff --git a/layout/reftests/high-contrast/backplate-bg-image-009.html b/layout/reftests/high-contrast/backplate-bg-image-009.html new file mode 100644 index 0000000000..7d4bd590d6 --- /dev/null +++ b/layout/reftests/high-contrast/backplate-bg-image-009.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> + <link rel="stylesheet" type="text/css" href="ahem.css" /> + <title>Text in a non-native select object that overlaps a background image should be backplated.</title> + <style> + body { + font: 20px Ahem; + } + select { + font: 20px Ahem; + border: 0px; + /* This forces non-native styling */ + } + .std { + background-image: url("blue.png"); + height: 500px; + } + </style> +</head> +<body> + <div class="std"><!-- no whitespace + -->ppppp<!-- no whitespace + --><select> + <option>ppppp</option> + </select><!-- no whitespace + -->ppppp<!-- no whitespace + --></div> +</body> +</html> diff --git a/layout/reftests/high-contrast/backplate-bg-image-010-ref.html b/layout/reftests/high-contrast/backplate-bg-image-010-ref.html new file mode 100644 index 0000000000..1472791cde --- /dev/null +++ b/layout/reftests/high-contrast/backplate-bg-image-010-ref.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<title>Reference: Only lines containing visible content (visibility: visible) should receive backplates.</title> +<style> + .outer { + background-image: url("blue.png"); + } + .hidden { + visibility: hidden; + } + .visible { + visibility: visible; + } + .fake-backplate { + background-color: white; + } +</style> +<div class="outer"> + <div> + <span class="fake-backplate">AAAA</span> + <div class="hidden">BBBB</div> + <span class="fake-backplate">CCCC</span> + <div class="hidden"> + DDDD + <div class="visible"><span class="fake-backplate">EEEE</span></div> + FFFF + </div> + </div> + <div class="fake-backplate" style="display: inline-block;"> + <span class="fake-backplate">GGGG</span> + <br> + <span class="fake-backplate">HHHH</span> + <span class="hidden">IIII</span> + <span class="fake-backplate">JJJJ</span> + <span class="hidden"> + KKKK + <span class="visible fake-backplate">LLLL</span> + MMMM + </span> + <span class="fake-backplate">NNNN</span> + <span class="hidden"> + <span style="display:inline-block"> + 1 + <span class="visible fake-backplate">2</span> + </span> + <span style="display:inline-block" class="visible fake-backplate"> + 3 + </span> + 4 + </span> + </div> +</div> diff --git a/layout/reftests/high-contrast/backplate-bg-image-010.html b/layout/reftests/high-contrast/backplate-bg-image-010.html new file mode 100644 index 0000000000..b6bb4cd83b --- /dev/null +++ b/layout/reftests/high-contrast/backplate-bg-image-010.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<title>Only lines containing visible content (visibility: visible) should receive backplates.</title> +<style> + .outer { + background-image: url("blue.png"); + } + .hidden { + visibility: hidden; + } + .visible { + visibility: visible; + } +</style> +<div class="outer"> + <div> + AAAA<!-- no whitespace between elements + --><div class="hidden">BBBB</div><!-- no whitespace between elements + -->CCCC<!-- no whitespace between elements + --><div class="hidden"> + DDDD + <div class="visible">EEEE</div> + FFFF + </div> + </div> + GGGG + <br> + HHHH + <span class="hidden">IIII</span> + JJJJ + <span class="hidden"> + KKKK + <span class="visible">LLLL</span> + MMMM + </span> + NNNN + <span class="hidden"> + <span style="display:inline-block"> + 1 + <span class="visible">2</span> + </span> + <span style="display:inline-block" class="visible"> + 3 + </span> + 4<!-- no whitespace between elements + --></span> +</div> diff --git a/layout/reftests/high-contrast/backplate-bg-image-011-ref.html b/layout/reftests/high-contrast/backplate-bg-image-011-ref.html new file mode 100644 index 0000000000..7e13b2b3ec --- /dev/null +++ b/layout/reftests/high-contrast/backplate-bg-image-011-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>Reference: Backplates should not include margins, indentation, padding, border space, or text-alignment space.</title> +<style> + .outer { + background: url("blue.png"); + } + div { + margin-bottom: 30px; + } + .fake-backplate { + background-color: white; + } +</style> +<div class="outer"> + <div><span class="fake-backplate">div</span></div> + <div style="margin-left: 30px"><span class="fake-backplate">div w/ margin-left</span></div> + <div><span style="margin-left: 100px" class="fake-backplate">span w/ margin-left</span></div> + <div><span><span style="margin: 0px 100px" class="fake-backplate">nested span w/ margin on inner</span></span></div> + <div><span style="padding: 0px 50px"><span class="fake-backplate">span w/ padding</span></span></div> + <div><span style="border: 10px dotted black"><span class="fake-backplate">span w/ thick dotted border</span></span></div> + <div style="text-align: center"><span class="fake-backplate">div w/ text-align:center</span></div> + <div style="text-align: right"><span class="fake-backplate">div w/ text-align:right</span></div> + <div style="direction: rtl; text-align: center"><span class="fake-backplate">div w/ RTL & text-align:center</span></div> + <div style="text-indent: 200px"><span class="fake-backplate">div w/ text-indent</span></div> +</div> diff --git a/layout/reftests/high-contrast/backplate-bg-image-011.html b/layout/reftests/high-contrast/backplate-bg-image-011.html new file mode 100644 index 0000000000..9abfe3f2b0 --- /dev/null +++ b/layout/reftests/high-contrast/backplate-bg-image-011.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>Backplates should not include margins, indentation, padding, border space, or text-alignment space.</title> +<style> + .outer { + background: url("blue.png"); + } + div { + margin-bottom: 30px; + } +</style> +<div class="outer"> + <div>div</div> + <div style="margin-left: 30px">div w/ margin-left</div> + <div><span style="margin-left: 100px">span w/ margin-left</span></div> + <div><span><span style="margin: 0px 100px">nested span w/ margin on inner</span></span></div> + <div><span style="padding: 0px 50px">span w/ padding</span></div> + <div><span style="border: 10px dotted purple">span w/ thick dotted border</span></div> + <div style="text-align: center">div w/ text-align:center</div> + <div style="text-align: right">div w/ text-align:right</div> + <div style="direction: rtl; text-align: center">div w/ RTL & text-align:center</div> + <div style="text-indent: 200px">div w/ text-indent</div> +</div> diff --git a/layout/reftests/high-contrast/backplate-bg-image-012-ref.html b/layout/reftests/high-contrast/backplate-bg-image-012-ref.html new file mode 100644 index 0000000000..d539fe1731 --- /dev/null +++ b/layout/reftests/high-contrast/backplate-bg-image-012-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>Reference: Empty canvas objects and images that do not share lines with text should not receive backplates.</title> +<style> + .outer { + background-image: url("blue.png"); + } + canvas { + height: 100px; + width: 100px; + } + .fake-backplate { + background-color: white; + } +</style> +<div class="outer"> + <canvas></canvas> + <br> + <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>" style="border:1px solid black; height:100px; width:100px;"> + <br> + <span class="fake-backplate">Here is some alt text</span> +</div> diff --git a/layout/reftests/high-contrast/backplate-bg-image-012.html b/layout/reftests/high-contrast/backplate-bg-image-012.html new file mode 100644 index 0000000000..39c1d854d7 --- /dev/null +++ b/layout/reftests/high-contrast/backplate-bg-image-012.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>Empty canvas objects and images that do not share lines with text should not receive backplates.</title> +<style> + .outer { + background-image: url("blue.png"); + } + canvas { + height: 100px; + width: 100px; + } +</style> +<div class="outer"> + <canvas></canvas> + <br> + <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>" style="border:1px solid black; height:100px; width:100px;"> + <br> + <img src="data:image/png," alt="Here is some alt text"> +</div> diff --git a/layout/reftests/high-contrast/backplate-select-001-ref.html b/layout/reftests/high-contrast/backplate-select-001-ref.html new file mode 100644 index 0000000000..bdbc9f74a0 --- /dev/null +++ b/layout/reftests/high-contrast/backplate-select-001-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<head> + <title>Reference: Multiple select's should have all options visible even when highlighted in high contrast mode. Options should render with backplates that are the same color as the select, or the applied highlight.</title> +</head> +<body> + <select multiple="multiple" autofocus> + <option>1</option> + <option selected="selected">2</option> + <option>3</option> + </select> +</body> +</html> diff --git a/layout/reftests/high-contrast/backplate-select-001.html b/layout/reftests/high-contrast/backplate-select-001.html new file mode 100644 index 0000000000..dd8c2e59fc --- /dev/null +++ b/layout/reftests/high-contrast/backplate-select-001.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<head> + <title>Multiple select's should have all options visible even when highlighted in high contrast mode. Options should render with backplates that are the same color as the select, or the applied highlight.</title> +</head> +<body> + <select multiple="multiple" autofocus> + <option>1</option> + <option selected="selected">2</option> + <option>3</option> + </select> +</body> +</html> diff --git a/layout/reftests/high-contrast/bg-image-div-001-ref.html b/layout/reftests/high-contrast/bg-image-div-001-ref.html new file mode 100644 index 0000000000..0f240809c0 --- /dev/null +++ b/layout/reftests/high-contrast/bg-image-div-001-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>Reference: Non-URL background images should be ignored high-contrast.</title> + <style> + .outer { + background-image: url("blue.png"); + } + .size { + height: 100px; + width: 100px; + } + .url { + background-image: url("green.png"); + } + </style> +</head> +<body> + <div class="outer"> + <div class="size url"></div><br> + <div class="size"></div></br> + <div class="size"></div><br> + <div class="size"></div><br> + <div class="size url"></div><br> + <div class="size"></div> + </div> +</body> +</html> diff --git a/layout/reftests/high-contrast/bg-image-div-001.html b/layout/reftests/high-contrast/bg-image-div-001.html new file mode 100644 index 0000000000..8764901fb5 --- /dev/null +++ b/layout/reftests/high-contrast/bg-image-div-001.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> + <title>When HCM is enabled, only background images sourced from URL's should be rendered. </title> + <style> + .outer { + background-image: url("blue.png"); + } + .size { + height: 100px; + width: 100px; + } + .gradient { + background-image: linear-gradient(red, red); + } + .url { + background-image: url("green.png"); + } + .urlGradient { + background-image: url("red.png"), linear-gradient(red, red); + } + .gradientUrl { + background-image: linear-gradient(red, red), url("red.png"); + } + .urlNone { + background-image: url("red.png"); + background-image: none; + } + </style> +</head> +<body> + <div class="outer"> + <div class="size url"></div><br> + <div class="size gradient"></div></br> + <div class="size urlGradient"></div><br> + <div class="size gradientUrl"></div><br> + <div class="size url gradient"></div><br> + <div class="size urlNone"></div> + </div> +</body> +</html> diff --git a/layout/reftests/high-contrast/bg-image-root-001-ref.html b/layout/reftests/high-contrast/bg-image-root-001-ref.html new file mode 100644 index 0000000000..c50eddd41f --- /dev/null +++ b/layout/reftests/high-contrast/bg-image-root-001-ref.html @@ -0,0 +1 @@ +<!doctype html> diff --git a/layout/reftests/high-contrast/bg-image-root-001.html b/layout/reftests/high-contrast/bg-image-root-001.html new file mode 100644 index 0000000000..8aef792394 --- /dev/null +++ b/layout/reftests/high-contrast/bg-image-root-001.html @@ -0,0 +1,7 @@ +<!doctype html> +<title>background-image on canvas is ignored if in high-contrast</title> +<style> +body { + background-image: url("red.png"); +} +</style> diff --git a/layout/reftests/high-contrast/blue.png b/layout/reftests/high-contrast/blue.png Binary files differnew file mode 100644 index 0000000000..a64b6a4255 --- /dev/null +++ b/layout/reftests/high-contrast/blue.png diff --git a/layout/reftests/high-contrast/cascade-001.html b/layout/reftests/high-contrast/cascade-001.html new file mode 100644 index 0000000000..9fdf1ae1ae --- /dev/null +++ b/layout/reftests/high-contrast/cascade-001.html @@ -0,0 +1,15 @@ +<!doctype html> +<style> +body { margin: 0 } + +div { + width: 100vw; + height: 100vh; + color: transparent; +} + +div { + color: black; +} +</style> +<div>You should see me</div> diff --git a/layout/reftests/high-contrast/color-transparent-001.html b/layout/reftests/high-contrast/color-transparent-001.html new file mode 100644 index 0000000000..c317327b20 --- /dev/null +++ b/layout/reftests/high-contrast/color-transparent-001.html @@ -0,0 +1,10 @@ +<!doctype html> +<title>color: transparent should be honored in high contrast mode</title> +<style> + p { + color: transparent; + } +</style> +<p> + I should not show up. +</p> diff --git a/layout/reftests/high-contrast/color-transparent-002.html b/layout/reftests/high-contrast/color-transparent-002.html new file mode 100644 index 0000000000..7b625649e7 --- /dev/null +++ b/layout/reftests/high-contrast/color-transparent-002.html @@ -0,0 +1,13 @@ +<!doctype html> +<title>color: transparent should not make other text below it not show up</title> +<style> + p { + color: transparent; + } + span { + color: red; + } +</style> +<p> + Only the <span>span</span> should show up. +</p> diff --git a/layout/reftests/high-contrast/forced-colors-000.html b/layout/reftests/high-contrast/forced-colors-000.html new file mode 100644 index 0000000000..d6bdf536aa --- /dev/null +++ b/layout/reftests/high-contrast/forced-colors-000.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>forced colors should match when colors are forced</title> + +<style> + div { + width: 100px; + height: 100px; + } + @media(forced-colors: active) { + div { + outline: 2px solid black; + } + } +</style> +<div></div> + diff --git a/layout/reftests/high-contrast/forced-colors-001.html b/layout/reftests/high-contrast/forced-colors-001.html new file mode 100644 index 0000000000..921cab8f30 --- /dev/null +++ b/layout/reftests/high-contrast/forced-colors-001.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>forced colors active should be true in boolean context</title> +<style> + div { + width: 100px; + height: 100px; + } + @media(forced-colors) { + div { + outline: 2px solid black; + } + } +</style> +<div></div> + diff --git a/layout/reftests/high-contrast/forced-colors-002.html b/layout/reftests/high-contrast/forced-colors-002.html new file mode 100644 index 0000000000..213b99ea51 --- /dev/null +++ b/layout/reftests/high-contrast/forced-colors-002.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>forced colors none should match with no forced colors</title> + +<style> + div { + width: 100px; + height: 100px; + } + @media(forced-colors: none) { + div { + outline: 2px solid black; + } + } +</style> +<div></div> + diff --git a/layout/reftests/high-contrast/green.png b/layout/reftests/high-contrast/green.png Binary files differnew file mode 100644 index 0000000000..0aa79b0c86 --- /dev/null +++ b/layout/reftests/high-contrast/green.png diff --git a/layout/reftests/high-contrast/links-2.html b/layout/reftests/high-contrast/links-2.html new file mode 100644 index 0000000000..23c28abf97 --- /dev/null +++ b/layout/reftests/high-contrast/links-2.html @@ -0,0 +1,5 @@ +<!doctype html> +<style> + span { color: hotpink } +</style> +<a href="">Should have <span>link</span> color, not default color</a> diff --git a/layout/reftests/high-contrast/links-ref.html b/layout/reftests/high-contrast/links-ref.html new file mode 100644 index 0000000000..f8ef95d194 --- /dev/null +++ b/layout/reftests/high-contrast/links-ref.html @@ -0,0 +1,2 @@ +<!doctype html> +<a href="">Should have link color, not default color</a> diff --git a/layout/reftests/high-contrast/links.html b/layout/reftests/high-contrast/links.html new file mode 100644 index 0000000000..bdba108d04 --- /dev/null +++ b/layout/reftests/high-contrast/links.html @@ -0,0 +1,5 @@ +<!doctype html> +<style> + a { color: hotpink } +</style> +<a href="">Should have link color, not default color</a> diff --git a/layout/reftests/high-contrast/non-themed-button-001-ref.html b/layout/reftests/high-contrast/non-themed-button-001-ref.html new file mode 100644 index 0000000000..956e337dd5 --- /dev/null +++ b/layout/reftests/high-contrast/non-themed-button-001-ref.html @@ -0,0 +1,10 @@ +<!doctype html> +<style> +button { + border: none; + background-color: transparent; + padding: 0; + -moz-appearance: none; +} +</style> +<button>Foo</button> diff --git a/layout/reftests/high-contrast/non-themed-button-001.html b/layout/reftests/high-contrast/non-themed-button-001.html new file mode 100644 index 0000000000..a13d0b7a08 --- /dev/null +++ b/layout/reftests/high-contrast/non-themed-button-001.html @@ -0,0 +1,9 @@ +<!doctype html> +<style> +button { + border: none; + background-color: transparent; + padding: 0; +} +</style> +<button>Foo</button> diff --git a/layout/reftests/high-contrast/non-themed-button-002-ref.html b/layout/reftests/high-contrast/non-themed-button-002-ref.html new file mode 100644 index 0000000000..45bf4517a2 --- /dev/null +++ b/layout/reftests/high-contrast/non-themed-button-002-ref.html @@ -0,0 +1,9 @@ +<!doctype html> +<style> +button { + background-color: red; + border: none; + padding: 0; +} +</style> +<button>Foo</button> diff --git a/layout/reftests/high-contrast/non-themed-button-002.html b/layout/reftests/high-contrast/non-themed-button-002.html new file mode 100644 index 0000000000..c2ccf9a7f2 --- /dev/null +++ b/layout/reftests/high-contrast/non-themed-button-002.html @@ -0,0 +1,9 @@ +<!doctype html> +<style> +button { + border: none; + padding: 0; + background-color: red; +} +</style> +<button>Foo</button> diff --git a/layout/reftests/high-contrast/prefers-contrast-001.html b/layout/reftests/high-contrast/prefers-contrast-001.html new file mode 100644 index 0000000000..813546efb4 --- /dev/null +++ b/layout/reftests/high-contrast/prefers-contrast-001.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>low, fixed, and high should all evaluat to true in the +boolean context.</title> + +<style type="text/css"> + div { + width: 100px; + height: 100px; + } + @media(prefers-contrast) { + div { + outline: 2px solid black; + } + } +</style> +</head> +<body> + <div></div> +</body> +</html> diff --git a/layout/reftests/high-contrast/prefers-contrast-002.html b/layout/reftests/high-contrast/prefers-contrast-002.html new file mode 100644 index 0000000000..56bd8329bb --- /dev/null +++ b/layout/reftests/high-contrast/prefers-contrast-002.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>high contrast mode should cause a black box to be drawn</title> + +<style type="text/css"> + div { + width: 100px; + height: 100px; + } + @media (prefers-contrast: more) { + div { + outline: 2px solid #000000; + } + } +</style> +</head> +<body> + <div></div> +</body> +</html> + diff --git a/layout/reftests/high-contrast/prefers-contrast-003.html b/layout/reftests/high-contrast/prefers-contrast-003.html new file mode 100644 index 0000000000..886f63141a --- /dev/null +++ b/layout/reftests/high-contrast/prefers-contrast-003.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>forced colors should cause a black box to be drawn</title> + +<style type="text/css"> + div { + width: 100px; + height: 100px; + } + @media (prefers-contrast: forced) { + div { + outline: 2px solid black; + } + } +</style> +</head> +<body> + <div></div> +</body> +</html> diff --git a/layout/reftests/high-contrast/prefers-contrast-005.html b/layout/reftests/high-contrast/prefers-contrast-005.html new file mode 100644 index 0000000000..4009804174 --- /dev/null +++ b/layout/reftests/high-contrast/prefers-contrast-005.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>no contrast preference should cause a black box to be +drawn</title> + +<style type="text/css"> + div { + width: 100px; + height: 100px; + } + @media(prefers-contrast: no-preference) { + div { + outline: 2px solid black; + } + } +</style> +</head> +<body> + <div></div> +</body> +</html> diff --git a/layout/reftests/high-contrast/prefers-contrast-black-ref.html b/layout/reftests/high-contrast/prefers-contrast-black-ref.html new file mode 100644 index 0000000000..470f66fa83 --- /dev/null +++ b/layout/reftests/high-contrast/prefers-contrast-black-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>reference: a black box to test the prefers-contrast media +query</title> + +<style type="text/css"> + div { + width: 100px; + height: 100px; + outline: 2px solid black; + } +</style> +</head> +<body> + <div></div> +</body> +</html> diff --git a/layout/reftests/high-contrast/red.png b/layout/reftests/high-contrast/red.png Binary files differnew file mode 100644 index 0000000000..a6e195d59c --- /dev/null +++ b/layout/reftests/high-contrast/red.png diff --git a/layout/reftests/high-contrast/reftest.list b/layout/reftests/high-contrast/reftest.list new file mode 100644 index 0000000000..f3e06fbb67 --- /dev/null +++ b/layout/reftests/high-contrast/reftest.list @@ -0,0 +1,92 @@ +# This pref enables high-contrast mode in the testcases here: +defaults test-pref(browser.display.document_color_use,2) test-pref(browser.display.permit_backplate,true) test-pref(layout.css.prefers-contrast.enabled,true) test-pref(layout.css.forced-colors.enabled,true) test-pref(browser.display.foreground_color,"#000000") test-pref(browser.display.background_color,"#FFFFFF") + +# There are several platform-specific fuzzy-if notations below due to +# anti-aliasing, extra ink overflow, and slightly inacurate reftest +# mocking. You can read more about the annotations and their specifics here: +# https://bugzilla.mozilla.org/show_bug.cgi?id=1539212#c25 + +== backplate-select-001.html backplate-select-001-ref.html + +fuzzy-if(cocoaWidget,255-255,20-20) == backplate-bg-image-001.html backplate-bg-image-001-ref.html # bug 1577028 +fuzzy-if(cocoaWidget,255-255,20-20) == backplate-bg-image-002.html backplate-bg-image-002-ref.html +fuzzy-if(cocoaWidget,255-255,4-4) == backplate-bg-image-003.html backplate-bg-image-003-ref.html +fuzzy-if(cocoaWidget,255-255,20-20) == backplate-bg-image-004.html backplate-bg-image-004-ref.html +fuzzy-if(cocoaWidget,255-255,80-80) == backplate-bg-image-005.html backplate-bg-image-005-ref.html + +fuzzy-if(cocoaWidget,255-255,40-40) == backplate-bg-image-006.html backplate-bg-image-006-ref.html + +fuzzy-if(cocoaWidget,255-255,40-40) == backplate-bg-image-007.html backplate-bg-image-007-ref.html +fuzzy-if(cocoaWidget,255-255,20-20) fuzzy-if(!nativeThemePref,0-21,0-6) == backplate-bg-image-008.html backplate-bg-image-008-ref.html +fuzzy-if(cocoaWidget,255-255,20-20) == backplate-bg-image-009.html backplate-bg-image-009-ref.html +fuzzy-if(cocoaWidget,255-255,1495-1495) fuzzy-if(winWidget,255-255,353-353) fuzzy-if(Android,255-255,700-700) == backplate-bg-image-010.html backplate-bg-image-010-ref.html +fuzzy-if(cocoaWidget,255-255,284-320) == backplate-bg-image-011.html backplate-bg-image-011-ref.html +fuzzy-if(cocoaWidget,255-255,16-16) == backplate-bg-image-012.html backplate-bg-image-012-ref.html + +test-pref(browser.display.suppress_canvas_background_image_on_forced_colors,true) == bg-image-root-001.html bg-image-root-001-ref.html +test-pref(browser.display.suppress_canvas_background_image_on_forced_colors,false) != bg-image-root-001.html bg-image-root-001-ref.html + +== bg-image-div-001.html bg-image-div-001-ref.html + +needs-focus == selection-001.html selection-001-ref.html +pref(browser.display.document_color_use,0) needs-focus != selection-001.html selection-001-ref.html + +== color-transparent-001.html about:blank +!= color-transparent-002.html about:blank +!= semi-transparent-overlay.html about:blank +!= semi-transparent-overlay.html semi-transparent-background.html + +== links.html links-ref.html +== links-2.html links-ref.html + +pref(browser.display.document_color_use,2) == non-themed-button-001.html non-themed-button-001-ref.html +pref(browser.display.document_color_use,2) == non-themed-button-002.html non-themed-button-002-ref.html + +!= cascade-001.html about:blank + +pref(browser.display.document_color_use,2) == background-transparent-form-control.html background-transparent-form-control-ref.html + +# prefers-contrast media query: + +# a prefers-contrast value of forced or high should evaluate to true +== prefers-contrast-001.html prefers-contrast-black-ref.html +test-pref(ui.windowForeground,"black") test-pref(ui.windowBackground,"white") test-pref(ui.useAccessibilityTheme,1) == prefers-contrast-001.html prefers-contrast-black-ref.html + +# high should match when an accessibility theme is being used +test-pref(ui.windowForeground,"black") test-pref(ui.windowBackground,"white") test-pref(ui.useAccessibilityTheme,1) == prefers-contrast-002.html prefers-contrast-black-ref.html + +# If RFP is on the media query stops evaluating contrast preferences +# and defaults to no-preference. The media query will still evaluate +# to forced though when RFP is on. The idea being that there are other +# ways to detect if forced colors are enabled so might as well not lie +# about it. +test-pref(privacy.resistFingerprinting,true) == prefers-contrast-003.html prefers-contrast-black-ref.html +# high should not match when RFP is enabled. +test-pref(ui.windowForeground,"black") test-pref(ui.windowBackground,"white") test-pref(privacy.resistFingerprinting,true) test-pref(ui.useAccessibilityTheme,1) != prefers-contrast-002.html prefers-contrast-black-ref.html + +# Should only be enabled behind preference. +test-pref(layout.css.prefers-contrast.enabled,false) != prefers-contrast-001.html prefers-contrast-black-ref.html + +# prefers-contrast forced matching forced +== prefers-contrast-003.html prefers-contrast-black-ref.html + +# a prefers-contrast value of no-preference should evaluate to false +# in the boolean context +test-pref(browser.display.document_color_use,0) != prefers-contrast-001.html prefers-contrast-black-ref.html + +# a prefers-contrast value of no-preference should match no-preference +test-pref(browser.display.document_color_use,0) == prefers-contrast-005.html prefers-contrast-black-ref.html + +# forced-colors media query + +# active +== forced-colors-000.html prefers-contrast-black-ref.html +test-pref(browser.display.document_color_use,0) != forced-colors-000.html prefers-contrast-black-ref.html + +# none +test-pref(browser.display.document_color_use,0) == forced-colors-002.html prefers-contrast-black-ref.html +!= forced-colors-002.html prefers-contrast-black-ref.html + +# boolean context +== forced-colors-001.html prefers-contrast-black-ref.html +test-pref(browser.display.document_color_use,0) != forced-colors-001.html prefers-contrast-black-ref.html diff --git a/layout/reftests/high-contrast/selection-001-ref.html b/layout/reftests/high-contrast/selection-001-ref.html new file mode 100644 index 0000000000..55a43aafd0 --- /dev/null +++ b/layout/reftests/high-contrast/selection-001-ref.html @@ -0,0 +1,11 @@ +<!doctype html> +<title>Test reference</title> +<p> + Some selected text +</p> +<script> +getSelection().removeAllRanges(); +let r = document.createRange(); +r.selectNode(document.documentElement); +getSelection().addRange(r); +</script> diff --git a/layout/reftests/high-contrast/selection-001.html b/layout/reftests/high-contrast/selection-001.html new file mode 100644 index 0000000000..2d3cabdf0c --- /dev/null +++ b/layout/reftests/high-contrast/selection-001.html @@ -0,0 +1,17 @@ +<!doctype html> +<title>::selection should use native colors in high contrast mode</title> +<style> +::selection { + background: purple; + color: blue; +} +</style> +<p> + Some selected text +</p> +<script> +getSelection().removeAllRanges(); +let r = document.createRange(); +r.selectNode(document.documentElement); +getSelection().addRange(r); +</script> diff --git a/layout/reftests/high-contrast/semi-transparent-background.html b/layout/reftests/high-contrast/semi-transparent-background.html new file mode 100644 index 0000000000..8902d19fcb --- /dev/null +++ b/layout/reftests/high-contrast/semi-transparent-background.html @@ -0,0 +1,11 @@ +<!doctype html> +<style> +.container { + position: relative; + background-color: rgba(0, 0, 0, .2); +} +</style> +<div class="container"> + <a href="#"></a> + Some text that you should be able to read. +</div> diff --git a/layout/reftests/high-contrast/semi-transparent-overlay.html b/layout/reftests/high-contrast/semi-transparent-overlay.html new file mode 100644 index 0000000000..76f2542ee4 --- /dev/null +++ b/layout/reftests/high-contrast/semi-transparent-overlay.html @@ -0,0 +1,15 @@ +<!doctype html> +<style> +.container { + position: relative; +} +a { + position: absolute; + inset: 0; + background-color: rgba(0, 0, 0, .2); +} +</style> +<div class="container"> + <a href="#"></a> + Some text that you should be able to read. +</div> |
