image-orientation-border-image.html 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <!DOCTYPE>
  2. <head>
  3. <style>
  4. body {
  5. border: 0px;
  6. margin: 0px;
  7. padding: 0px;
  8. }
  9. div {
  10. width: 100px;
  11. height: 100px;
  12. margin: 50px;
  13. /* This is deliberately an image with a non-neutral inherent orientation to */
  14. /* ensure that the inherent orientation is irrelevant. */
  15. border-style: solid;
  16. border-width: 20px;
  17. border-image: url(image-exif-90-deg-flip.jpg) 27 repeat;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <div></div>
  23. <script>
  24. var orientation = location.search.substring(1).split("&");
  25. var angle = orientation[0];
  26. var flip = orientation[1] == "flip" ? true : false;
  27. // Construct a style. "from-image" is special-cased.
  28. var style;
  29. if (angle == "from-image") {
  30. style = "div { image-orientation: from-image; }\n";
  31. } else {
  32. style = "div { image-orientation: "
  33. + angle + "deg"
  34. + (flip ? " flip" : "")
  35. + "; }\n";
  36. }
  37. // Apply the style to the document.
  38. var sheet = document.createElement('style');
  39. sheet.innerHTML = style;
  40. document.body.appendChild(sheet);
  41. </script>
  42. </body>