Difference between revisions of "High contrast tests"

From Level Access Web Labs
Jump to navigation Jump to search
 
(15 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
* IE 11 will
 +
** change the color when present - for example of light gray border to high contrast border.
 +
** show pseudo classes
 +
** remove background images
 +
** Keep inline images includes those with transparent backgrounds and will not expose a set background colors.  This means black text may appear on a black background making the text unreadable in this particular situation.
 +
* IE 11 will NOT
 +
** display box-shadow
 +
** display background images
 +
** High contrast does not enable the following when they are not present
 +
*** Outline: none on link and probably other elements
 +
*** text-decoration on link
 +
*** Border on input and probably others
 +
 
<html>
 
<html>
 
   <style>
 
   <style>
     #i1 {
+
     .border_none {
 
       border: none;
 
       border: none;
 +
    }
 +
    .border_light {
 +
      border: normal solid #eeeeee;
 +
    }
 +
    .box_shadow {
 +
      box-shadow: 10px 5px 5px red;
 
     }
 
     }
 
     #a1 {
 
     #a1 {
 
     outline: none;
 
     outline: none;
    }
 
    #a1::focus {
 
 
       text-decoration: none;
 
       text-decoration: none;
 
     }
 
     }
 +
  #bg1 {
 +
      background-image:url('https://labs.ssbbartgroup.com/images/c/c8/SSB_Logo.png');
 +
      background-size: 156px 153px;
 +
      background-repeat:no-repeat;
 +
      border:solid thin;
 +
      padding:0;
 +
      width:155px;
 +
      height:153px;
 +
  }
 +
    .test:before {
 +
      content: url("https://labs.levelaccess.com/images/f/ff/Small_star.jpg");
 +
      background-size: 1em 2em;
 +
      width:2em;
 +
      height:2em;
 +
      display: inline-block;
 +
    }
 
   </style>
 
   </style>
 
<body>
 
<body>
   <input id="i1" type="text" />
+
  <div>Input without border</div>
 +
   <input class="border_none" id="i1" type="text" />
 +
  <div>Link without outline or text decoration</div>
 
   <a id="a1" href="https://www.google.com"> Google </a>
 
   <a id="a1" href="https://www.google.com"> Google </a>
 +
  <div> Input with light border</div>
 +
  <input class="border_light" id="i2" type="text" />
 +
  <div>Input with box shadow</div>
 +
  <input class="box_shadow" id="i3" type="text" />
 +
  <div> input with box shadow and no border</div>
 +
  <input class="box_shadow border_none" id="i3" type="text" />
 +
  <p>background image with transparent color</p>
 +
  <div id="bg1">This is some text.</div>
 +
  <div>Pseudo before image</div>
 +
  <p class="test">This is a paragraph</p>
 
</body>
 
</body>
 
</html>
 
</html>
 +
 +
[[Category:High Contrast]]

Latest revision as of 16:11, 5 September 2018

  • IE 11 will
    • change the color when present - for example of light gray border to high contrast border.
    • show pseudo classes
    • remove background images
    • Keep inline images includes those with transparent backgrounds and will not expose a set background colors. This means black text may appear on a black background making the text unreadable in this particular situation.
  • IE 11 will NOT
    • display box-shadow
    • display background images
    • High contrast does not enable the following when they are not present
      • Outline: none on link and probably other elements
      • text-decoration on link
      • Border on input and probably others

Input without border

Link without outline or text decoration

Google

Input with light border

Input with box shadow

input with box shadow and no border

background image with transparent color

This is some text.
Pseudo before image

This is a paragraph